KIRUPA is faster and lighter than ever!

talk random
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:

before.png2314×1676 453 KB

And now the after:

after.png2370×1732 455 KB

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

3 Likes
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!

Screen Shot 2017-03-23 at 4.08.58 PM.png2338×1836 505 KB

1 Like
4
1 Like
5

Agreed; it’s really noticeable!! Nice!

1 Like
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.

image
image.png2894×2126 526 KB

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? Responding to Requests to Delete Data | Apple Developer Documentation

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.

1 Like
12

Shaved another 40kb by simplifying the footer!

image
image.png2874×1994 519 KB

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.

1 Like
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?

image
85BEF3D0-0406-4FB9-88EC-3DED1A9CD95B.png640×1136 83 KB

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:

1 Like
17

2ejr3h.jpg702×395

4 Likes
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:

image
image.png2888×2022 620 KB

19

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

20

And 404 could use some new theme love

image
image.png752×388 25.6 KB

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