# KIRUPA is faster and lighter than ever!

**URL:** <https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280>\
**Category:** random\
**Created:** [March 23, 2017, 4:50am UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280 "2017-03-23T04:50:18Z")\
**Posts on this page:** 20\
**Page:** 3

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 13, 2019, 5:03am UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/41 "2019-06-13T05:03:37Z")

</div>

Cleaned up a bunch more things, and now the site has a score of 100 on Google’s speed analyzer!

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/2/21171723a214036bc2b956d9e8c6c73cc309c233.jpeg)

---

<div class="post-metadata">

**Author:** ![digitalmarketingboy](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/digitalmarketingboy/32/9723_2.png) [@digitalmarketingboy](https://forum.kirupa.com/u/digitalmarketingboy)\
**Post date:** [June 27, 2019, 9:36am UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/42 "2019-06-27T09:36:46Z")

</div>

Yes True… Very good platform !

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 18, 2019, 4:09am UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/43 "2019-10-18T04:09:55Z")

</div>

So, I turned on HTTP/3. Everything works. Everything is the same speed. I guess that is sorta expected 🤪

---

<div class="post-metadata">

**Author:** ![TheCanadian](https://avatars.discourse-cdn.com/v4/letter/t/67e7ee/32.png) [@TheCanadian](https://forum.kirupa.com/u/TheCanadian)\
**Post date:** [October 18, 2019, 8:17pm UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/44 "2019-10-18T20:17:16Z")

</div>

I didn’t expect that.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [October 18, 2019, 10:11pm UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/45 "2019-10-18T22:11:36Z")

</div>

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 🤷‍♂️

---

<div class="post-metadata">

**Author:** ![prg9](https://avatars.discourse-cdn.com/v4/letter/p/8dc957/32.png) [@prg9](https://forum.kirupa.com/u/prg9)\
**Post date:** [October 20, 2019, 4:00am UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/46 "2019-10-20T04:00:48Z")

</div>

^ That read like a story problem. 🙃

 ![problem-story](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/9/997f350b42b42b5f8ed1e72c3fef0203e296779d.png)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 11, 2019, 8:22pm UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/48 "2019-12-11T20:22:53Z")

</div>

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.

🐢

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [December 11, 2019, 9:32pm UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/49 "2019-12-11T21:32:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [December 11, 2019, 9:48pm UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/50 "2019-12-11T21:48:10Z")

</div>

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 🤤

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 16, 2021, 5:41am UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/52 "2021-03-16T05:41:19Z")

</div>

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!

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/8/8c2d9265129504135ee460abf310465c75f4d703.png)

😛

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [March 16, 2021, 6:28am UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/53 "2021-03-16T06:28:11Z")

</div>

The pixel theme has a nice retro touch 🙂

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 20, 2021, 11:13pm UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/54 "2021-03-20T23:13:42Z")

</div>

Which pixel theme? 💾

---

<div class="post-metadata">

**Author:** ![steve.mills](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/steve.mills/32/14961_2.png) [@steve.mills](https://forum.kirupa.com/u/steve.mills)\
**Post date:** [March 21, 2021, 1:24am UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/55 "2021-03-21T01:24:55Z")

</div>

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… 😀

---

<div class="post-metadata">

**Author:** ![johnmorgan](https://avatars.discourse-cdn.com/v4/letter/j/858c86/32.png) [@johnmorgan](https://forum.kirupa.com/u/johnmorgan)\
**Post date:** [March 22, 2021, 9:03am UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/56 "2021-03-22T09:03:36Z")

</div>

Hi, it is a nice idea. I think it would be great to have such thread [![smile3](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/f/f93c44ace082718d5de6a2807f383862d8311f37.png)](https://www.customwritingservice.com/)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [March 23, 2021, 5:06am UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/57 "2021-03-23T05:06:18Z")

</div>

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 😛

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [May 9, 2021, 4:48am UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/58 "2021-05-09T04:48:47Z")

</div>

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:

 ![Screen Shot 2021-05-08 at 9.40.35 PM](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/4/419d3d8b0cf5d687970fd40624c2df9094cba847.jpeg)

The network trace is as follows:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/9/9e9e8bc12ceedd8b5fdd22ef75cb4d41f106882a.jpeg)

Lighthouse results are:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/8/828344a380feabe60d5ab406a83138f9842c5cce.jpeg)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 2, 2021, 5:39am UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/59 "2021-06-02T05:39:21Z")

</div>

I tried the Core Web Vitals benchmark ([https://web.dev](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:

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/3/3acc0facdde054dd7582a877f2d1b14680547e95.jpeg)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 28, 2021, 10:36pm UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/60 "2021-06-28T22:36:04Z")

</div>

I simplified the HTML structure of many of the pages greatly by removing unnecessary content, and that helped more than I thought it would 🙂

 ![image](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/8/86662f99ec2ab712785ee58d2fa02d98254fb3f2.jpeg)

---

<div class="post-metadata">

**Author:** ![prg9](https://avatars.discourse-cdn.com/v4/letter/p/8dc957/32.png) [@prg9](https://forum.kirupa.com/u/prg9)\
**Post date:** [June 28, 2021, 11:02pm UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/61 "2021-06-28T23:02:33Z")

</div>

Its gonna be sad to see ya go once you get those  
**last 4 accessibility points** knocked out K-man. 😉

[![](https://canada1.discourse-cdn.com/flex011/uploads/kirupa/original/2X/1/12233c3f4e90c452ec17ff1184de5db28eb80e10.jpeg "Leaving On A High Note (Seinfeld)") ](https://www.youtube.com/watch?v=h1Y6oAjWgo4)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [June 28, 2021, 11:54pm UTC](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280/62 "2021-06-28T23:54:31Z")

</div>

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.

[Previous page](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280.md?page=2)

[Next page](https://forum.kirupa.com/t/kirupa-is-faster-and-lighter-than-ever/636280.md?page=4)