Making my homepage score 95+ on PageSpeed Insights

Taking advantage that today I had a holiday, I did some upgrades on my personal website, linking 2 projects to my portfolio. So, I tested some changes to see if I could get a higher score on PageSpeed Insights.

I’m going to tell how I turned my personal website from 87–96 to a 95–99 score on PageSpeed Insights.

Preload CSS

I use Roboto font from Google Fonts, so my first try was preloading Google Fonts, not blocking the page rendering. So my page loads, and until the CSS is not downloaded, it will fall back to Times New Roman font.
So:

<link href=”https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel=”stylesheet”>

Turns into:

<link 
rel=”preload” 
as=”style” 
href=”https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"
onload=”this.rel=’stylesheet’”>

Don’t preload your critical CSS — ones crucial to your website structure, like loading animations, fade-in animations, flexbox structure, etc. Doing so lowers your Cumulative Layout Shift and makes a better UX.

Serve all static files on your server

CDNs are good, but hosting files on your server is even better. It is a good idea to download fonts, CSS, Javascript, images, and any other static file to your own server. Each request creates an overhead in terms of execution time and traffic.
This includes looking inside external CSS and modifying it to only use internal files.
I downloaded the Google Fonts CSS and modified it to use:

src: url(KFOlCnqEu92Fr1MmEU9fCBc4EsA.woff2) format(“woff2”);

instead of:

src: url(https://fonts.gstatic.com/s/roboto/v27/KFOlCnqEu92Fr1MmEU9fCRc4EsA.woff2) format('woff2');

Using responsive images

Desktops have bigger screens and faster internet connection than mobile phones. So makes no sense to serve the same images used by desktops on phones.
Using srcsetattribute on images define the image it should be using on different screen widths.

<img srcset=” url size, url size, url size “ src=”default url” >

Minify static files

To keep it simple, I did not minified static files. But it is a great idea to reduce file sizes, removing unnecessary characters.

Compress images

Using formats like JPEG 2000, JPEG XR e WebP make image sizes smaller, thus it makes requests take less time.
These formats don't accept transparency, but a simple hack is to manually paint the transparent background if the background behind your image never changes.

My website is indeed minimalist, not having so much content and almost no Javascript, except for google tag manager scripts.
But using these simple technics, your website could score green on PageSpeed Insights, therefore making your SEO better. I really hope these tips help.