KIRUPA is faster and lighter than ever!


#1

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

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? :stuck_out_tongue:

Cheers,
Kirupa


#2

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!


#3

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!


#4

#5

Agreed; it’s really noticeable!! Nice!


#6

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.


#7

Page size seems pretty great!


#8

:stuck_out_tongue:

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!


#9

Something in the same design space as the See Alsos at the bottom of pages like this? https://developer.apple.com/documentation/cloudkit/responding_to_requests_to_delete_data


#10

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.

:stuck_out_tongue:


#11

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


#12

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? :see_no_evil:


#13

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

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.


#14

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?


#15

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?

:ghost:


#16

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

:upside_down_face:


#17


#18

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:


#19

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


#20

And 404 could use some new theme love

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