Discussion on: Help speeding up website / Mobile View

[Paweł Kowalski]

I would recommend:

1. Lazyload images ( github.com/verlok/lazyload )
2. Use woff2 fonts, instead of woff (much smaller)
3. Subset fonts to characters that you use, instead of having all of them (much smaller)
4. Optimize ( jakearchibald.github.io/svgomg/ ) and inline SVG files (save http requests)
5. Create font awesome build with icons you use, instead of loading thousands of them (much smaller)
6. Fixing JS errors or remove things that are erroring, since they are not used anyways - i think order in html is not correct (just a good practice)
7. Removing google tag manager (MUCH faster)
8. Do not load any JS in head. Move it all to the end of body (you didnt add defer, so they are loading before anything is painted on the screen)
9. Minify all your assets (smaller)
10. Self host as much as you can on your CDN (less ssl handshakes)

After applying, you should be looking at 95+.

[Johannes Lichtenberger]

Thanks so much :) funny, I can not number my points... always starts with one when it's getting converted to an ordered HTML list.

Six: Should be fixed :)
Seven: What is the Google tag manager? Oh, Google Analytics... What would you use?
Eight: Does it still work? I played around with the order or async loading of the JavaScript files, but then it always broke something.

I moved the JavaScript stuff to the end of the body... but now again the responsive layout doesn't work again. It drives me crazy :)

[Paweł Kowalski]

In markdown you do ordered lists by writing 1. my point :)

1. GTM is much more than GA, GA should be lighter and faster. GTM allows you to inject any arbitrary js code into your page and do some other very bad things in regards to performance.

I would probably switch to async loaded GA.

1. In general if you move everything at the end of body and there is no WEIRD js, nothing should change apart from that something will appear on the screen, before js is executed.

I see that you fixed js errors, so at least the order is now correct.

You can do it step by step. Move js to the end of head (after everything).
Next step, move last script from head, to the end of the body. One by one, sooner or later this layout thing should break, and you will at least know which script exactly is breaking.

I would also move mailchimp script to the end of body, just to keep it all together.

TBH i would remove mailchimp script altogether, as it is loading second jquery (1.9.0) inside of it. so i would probably cut out whats needed from there and self-host it.

My personal web performance rules:

1. As little as possible
2. Load blocking things last
3. Lazyload whatever your users dont need ASAP

[Paweł Kowalski]

Ouh, and someone else in comments noticed something important, it looks like cache headers are weird in most assets:

cache-control: public, max-age=0, must-revalidate

This kind of sucks because browser cannot cache those assets even if they didnt change, so subsequent page views are not benefiting from browser cache.

[Johannes Lichtenberger]

Oh, this must be a Jekyll setting somewhere, maybe :(

[Johannes Lichtenberger]

It was Netlify, which adds this Header... I had to use a Jekyll plugin:

github.com/jgarber623/jekyll-netli...