KIRUPA is faster and lighter than ever!

kirupa · March 23, 2017, 4:50am

After what might have been the most tense few hours of my life, both the main site and forums are now serving content to you using HTTP/2. This is part #1251 of the never-ending quest to make the site faster

You can see the before:

And now the after:

Notice that the load time went from 3.29 seconds to 1.09 seconds. The amount of data transferred seemed to have doubled with HTTP/2, though. My initial guess was that GZIP was getting disabled, but from using a 3rd party site, that doesn’t seem to be the case. Do any you know why the amount of data transferred went from 325 KB to 597KB?

Independent of the file size issue, the site feels faster. Maybe it is just psychological. Who knows?

Cheers,
Kirupa

senocular · March 23, 2017, 1:04pm

It does seem to be affecting every file making compression the likely candidate. Have you compared the headers in both cases? I mean those css files are significantly larger.

Edit: Awesome results by the way! Even with the additional file size!

kirupa · March 23, 2017, 8:49pm

You are right! The default configuration is set only for HTML content to be compressed. I added the other image types to the list, and now the file size is around 50% at 300KB!

senocular · March 24, 2017, 12:19am

krilnon · March 24, 2017, 4:53am

Agreed; it’s really noticeable!! Nice!

kirupa · July 19, 2018, 12:10am

Decided to do some more tweaking! Turned out gzip for SVGs was disabled. No longer an apples-to-apples comparison since the site has been redesigned, but it is still fun to keep tracking haha.

krilnon · July 19, 2018, 4:08am

Page size seems pretty great!

kirupa · July 19, 2018, 5:40am

My goal is to get it even lower as part of revamping the design slightly. The biggest problem right now is that there is no way to see other related tutorials when viewing one. The navigation flow is pretty bad, and I haven’t forgotten your feedback about getting a shared header between the site and the forums!

krilnon · July 19, 2018, 5:56am

Something in the same design space as the See Alsos at the bottom of pages like this? Responding to Requests to Delete Data | Apple Developer Documentation

kirupa · July 19, 2018, 5:59am

Exactly! Something that accomplishes the same result. Another option is something similar to what this site used to do many years ago: https://www.kirupa.com/developer/actionscript/shading.htm

There is a prev, index, and next that are similar.

krilnon · July 19, 2018, 6:14am

Yeah, I see what you mean. Depends whether the related items are intended to be consumed linearly, or in a random-access fashion.

kirupa · July 21, 2018, 3:11pm

Shaved another 40kb by simplifying the footer!

The next biggest file size culprits are the row of icons on the home page (which is less interesting since it is home page only) and Google Analytics (which is more interesting because it is site-wide).

I have AWS stats on the server enabled, and it gives me enough data on pageviews, 404’s, and so on. Because Google Analytics has a big client JS component, about 40kb is downloaded to the client. The amount of detailed analysis Google Analytics provides is years ahead of AWS, so I will be losing out on that data by removing Google Analytics completely. For the short term, keeping Google Analytics seems reasonable. Longer term, who knows?

kirupa · July 22, 2018, 3:19am

Next up is migrating towards using prismjs for the code highlighting. It is faster, more lightweight, and contains some really nice features like line numbers

The first article I’ve converted can be seen here: https://www.kirupa.com/html5/css_variables_js_win.htm

Let me know what you all think of the code highlighting colors. I can change them fairly easily, so feel to throw up some ideas.

krilnon · July 23, 2018, 3:39am

There’s too much padding all around in the grey rectangle, especially on the left side.

Just to be a thorn in your side: Have you thought about server-side rendering the syntax highlighting?

kirupa · July 23, 2018, 1:31pm

As for the extra padding, is this what you are referring to?

For server-side rendering, I didn’t even think of that. Is there a particular solution that you like?

TheCanadian · July 23, 2018, 4:22pm

I can’t believe I have to wait several milliseconds for a page to load. Please speed it up!!!

senocular · July 23, 2018, 4:33pm

kirupa · July 24, 2018, 2:14pm

The site is now paired up with a CDN that will handle serving all the content, optimizing images on the fly, and so on! New numbers:

senocular · July 24, 2018, 7:17pm

Looking good! … how do I get to the main site from the forums again?

senocular · July 24, 2018, 7:22pm

And 404 could use some new theme love

https://www.kirupa.com/poop.html