I recently restyled my website (this one!) switching from Wordpress to GhostCMS and SvelteKit (which are great,but that's a story for another day). In the process I wanted to reach some good speed to please both the users and Google.

One of the mayor aspect of this is static assets optimization, here are a few tips I found out in my journey.

Images

PJPEG: jpeg images are loaded from top to bottom, progressive jpeg from back to front. So they will load the whole sized image and then refine it from a resolution standpoint. Thats great for browsers and users alike.

WEBP: thats a new format from Google with better compression then PNG, alpha channel and slightly better then JPG. Unfortunately it's still not widely supported.

AVIF: new better format and an open one, quite well supported but still niche. This has potential to become the new way to go.

I decided to optimize my images with GIMP by setting the smallest possibile size and removing all the extra data attached (exif, resolution, ecc). I tend to go PJPEG 90% quality when possibile, then PNG compression 9.

You can try https://squoosh.app/ to test the results for different formats.

Make then sure you set width and height to an absolute number (no 'px') to define the base size and aspect ratio, then set the responsive size via css.

Javascript and stylesheet

For JS always defer (load asynchronously execute at the end), if not possible use async (load asincrously execute as soon as loaded).

For stylesheets there is no simple way to load asynchronously, however you can trick the browser via:

<link href="style.css" rel="preload" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="style.css"></noscript>

To please Google page speed algorithm it looks like the minimum caching time is 1 year, so make sure to add a Cache-Control header to cache your static content for 1+ year (for 1 year use max-age: 31536000).

And, of course, minimize and gzip.