I totally missed this, kril! I’ll see what I can do, but it might be a bit tricky since a part of the UI (top-right corner) is created by discourse and I trick our header into thinking it is a part of the discourse header.
Native lazy loading of images is all the rage these days. I had no interest in writing custom code to implement it, but Chrome is now planning to support it by default. I decided to give a spin on how much that would benefit a typical article on the site.
This is the size of the Hanging Indents article without lazy loading:
This is the size of the same article with lazy loading enabled:
The changes seem very minor, so I wonder if I am making a mistake in setting it up.
EDIT: From further testing, it does seem to work as expected. I think in this case, the article doesn’t have enough images where the optimization would show major benefits. It’s not like this demo where the change between lazy and non-lazy loading is extremely obvious: https://mathiasbynens.be/demo/img-loading-lazy
I think thats what you need to wrangle with: do I have enough images where this is more useful than it is annoying. I hate lazy loading, but for really graphically heavy content, I get it. I’m not sure anything here warrants it especially since larger topics are paged or broken up into different tutorials.
My only motivation is to avoid having the user download images if they don’t need it. Some of the screenshots I take nowadays are fairly large - partly because I am on a Retina screen, and partly because I am OK with keeping the image dimensions large for high-DPI screens. You mentioned in the past for me to use the picture element and provide low-dpi as well as high-dpi versions, but it is just something I’ve been dragging my feet on!
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
