KIRUPA is faster and lighter than ever!

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 :crazy_face:

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 :man_shrugging:

1 Like

^ That read like a story problem. :upside_down_face:

problem-story

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.

:turtle:

But what about the all the extra added weight of that new, hulkin code block? :thinking:

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 :drooling_face: