Cleaned up a bunch more things, and now the site has a score of 100 on Google’s speed analyzer!
2 Likes
Yes True… Very good platform !
So, I turned on HTTP/3. Everything works. Everything is the same speed. I guess that is sorta expected 
I didn’t expect that.
HTTP/2 is 2 times that of HTTP/1, and HTTP/3 is only 50% more than HTTP/2, so you can’t expect much 
1 Like
^ That read like a story problem. 
1 Like
I managed to shave the size of the average by about 10KB! I am now selectively loading either prismjs or the old SyntaxHighlighter depending on whether the page is actually needing it or not:
var scriptContainer = document.querySelector("#scriptContainer");
var prism = document.querySelector("pre code");
var syntaxHighlighting = document.querySelector("pre[class^='brush']");
if (prism) {
var prismScript = document.createElement("script");
prismScript.setAttribute("src", "https://www.kirupa.com/js/prism_v1.js");
scriptContainer.appendChild(prismScript);
var prismStyle = document.createElement("link");
prismStyle.setAttribute("rel", "stylesheet");
prismStyle.setAttribute("href", "https://www.kirupa.com/js/prism_v1.css");
scriptContainer.appendChild(prismStyle);
console.log("Loaded prism!");
}
if (syntaxHighlighting) {
var shCoreCSS = document.createElement("link");
shCoreCSS.setAttribute("rel", "stylesheet");
shCoreCSS.setAttribute("href", "https://www.kirupa.com/ssi/sh/styles/shCore.css");
scriptContainer.appendChild(shCoreCSS);
var shThemeDefault = document.createElement("link");
shThemeDefault.setAttribute("rel", "stylesheet");
shThemeDefault.setAttribute("href", "https://www.kirupa.com/ssi/sh/styles/shThemeDefault.css");
scriptContainer.appendChild(shThemeDefault);
var shCore = document.createElement("script");
shCore.setAttribute("src", "https://www.kirupa.com/ssi/sh/scripts/shCore.js");
scriptContainer.appendChild(shCore);
shCore.addEventListener("load", syntaxScriptLoaded, false);
}
function syntaxScriptLoaded() {
var shBrushJScript = document.createElement("script");
shBrushJScript.setAttribute("src", "https://www.kirupa.com/ssi/sh/scripts/shBrushJScript.js");
scriptContainer.appendChild(shBrushJScript);
var shBrushXml = document.createElement("script");
shBrushXml.setAttribute("src", "https://www.kirupa.com/ssi/sh/scripts/shBrushXml.js");
scriptContainer.appendChild(shBrushXml);
var shBrushCss = document.createElement("script");
shBrushCss.setAttribute("src", "https://www.kirupa.com/ssi/sh/scripts/shBrushCss.js");
scriptContainer.appendChild(shBrushCss);
SyntaxHighlighter.defaults['gutter'] = false;
SyntaxHighlighter.defaults['toolbar'] = false;
SyntaxHighlighter.defaults['class-name'] = 'kirupa_code';
SyntaxHighlighter.all();
console.log("Loaded the syntaxhighlighting scripts!");
}
If the page doesn’t have any code snippets, then neither gets loaded! It was a silly optimization that I should have done a long time ago but totally forgot about.
But what about the all the extra added weight of that new, hulkin code block? 
Hmm. Good point. This looks like something we’ll need to use WebAssembly for. Maybe putting this code in the kirupa.js file will be good for caching purposes, but…WebAssembly 
Continuing my quest here, the forums should now load about 50% faster! They were fast before, but as part of the forums being down last week, I decided to upgrade to a faster DigitalOcean droplet with more memory. This improved the many of the metrics from just under 1 second to around .4s or .5s!
The pixel theme has a nice retro touch 
1 Like
Which pixel theme? 
Your profile picture.
I love the logo too. Its fun to think about how you could animate it.
The black ring could be a loader like the youtube spinner.
The fruit ring/ halo could be canted slightly and then spun to give the fruit a spinning effect.
There could be a infinite gradient animation on the side of the fruit that gives it a subtle gleam.
There could be a slight back and forth movement in the leaves so that it looks like a breeze is blowing on the side of the fruit. Is it an orange?
I also had this cool idea that when you enter the forum your profile pic could pop up in place of your logo and either have a cartoon talk box pop out or a text typing effect saying " welcome to the forum…" and then fade/ swap out after a few seconds.
When I have a bit of spare time I might have a play with animating the logo.
Maybe we could do a thread where people animate different parts of the site/ forum and put it up, like the Kirupa head thread… 
Hi, it is a nice idea. I think it would be great to have such thread 
That’s totally an idea!
Despite writing a lot about animations and being a fan about them on other sites, I’ve actually avoided having animations on the main site. My view is that if you can make loading or changing state near-instantaneous, I’d go for that than add an animation. Some of the loading numbers on the site currently are even lower than the typical .3 or .5s it takes someone to notice that an animation plays.
But…where is the fun in what I’m doing now? Fair point
I’m about to make another big chunk of code deletion and site layout simplification. For historical reasons, this is what the site looks like right now:
The network trace is as follows:
Lighthouse results are:
I tried the Core Web Vitals benchmark (https://web.dev) which found a bunch more issues with how the site handles scripts and CSS. The best I can do right now is:
I simplified the HTML structure of many of the pages greatly by removing unnecessary content, and that helped more than I thought it would 
1 Like
Its gonna be sad to see ya go once you get those
last 4 accessibility points knocked out K-man. 
Those last four are going to be tough. It is because the foreground and background colors on the blue buttons don’t have a high-enough contrast ratio. That will require me to either change the button background colors to be black or a different shade of blue. Both of those changes don’t seem very ideal.