My previous post was about the new look of this website and the blog I added. The previous website version got some visual issues and it was one of the reasons why I revamped it. It was also because I found a very nice tool called
Google PageSpeed Insights and it will be the main topic of this post.
I don't remember how I found this website (PageSpeed Insights), maybe an email, google news or a random post on Reddit but this tool is pretty useful. You just need to enter the web page URL that you would like to analyze and it will report all improvements that you could do.
I like to optimize any kind of stuff I can so I gave it a try with my personal website. Here are the first results (which are not really good)...
I decided to completely dismantle my current website because there are some issues with the rendering (e.g. some images/texts parts outbound of screen), it was old (2014) so I switched to a new template. The new template fixed the outbound issues and other cases but the metrics was worse:
After, I scanned my website with the tool and applied about 5 optimizations. Here is the list:
Optimization 1: Serve images in next-gen formats
I switched images from png and jpg into webp to save space and bandwidth.
"WebP achieves a 26 percent better lossless compression ratio than PNG and a better lossy ratio, which ranges between 25 percent and 34 percent than JPEG. Furthermore, WebP supports transparency without increasing the file size more than 22 percent."[Source]
Everything was fine when I switched to webp file format except for one specific environment (clue: Apple), more detail below about that.
Optimization 2: Enable text compression
"All modern browsers support and automatically negotiate gzip compression for all HTTP requests. Enabling gzip compression can reduce the size of the transferred response by up to 90%, which can significantly reduce the amount of time to download the resource, reduce data usage for the client, and improve the time to first render of your pages."
[Source]
"PageSpeed Insights" reported that my website disabled this feature gzip/text compression.
It seems that I forgot to enable this feature on this website but it was already enabled for my other websites like "DeathSkidMarks", "Kainy", ...
Optimization 3: Add lazy load.
I added a lightweight lazy loader (lazysizes) to postpone the loading of images and iframe that are not visible on screen. It's a kind of partition system (bsp/quadtree) but for a webpage.
"lazysizes is a fast (jank-free), SEO-friendly and self-initializing lazyloader for images (including responsive images picture/srcset), iframes, scripts/widgets and much more. It also prioritizes resources by differentiating between crucial in view and near view elements to make perceived performance even faster."
[Source]
Optimization 4: Serve static assets with an efficient cache policy X resources found
"HTTP caching can speed up your page load time on repeat visits.
When a browser requests a resource, the server providing the resource can tell the browser how long it should temporarily store or cache the resource. For any subsequent request for that resource, the browser uses its local copy rather than getting it from the network."
[Source]
I improved the caching (Look for the TTL, Cache-Control and other cache policies on google for more info).
Optimization 5: Unused...
For this optimization, I removed some partial contents that were not used like javascript or css.
I also applied a minifier to compact those parts. You can find more info if you look on google for that: terser, postcss, cssnano, purge-css, webpack, minifier, purifycss, cssminifier
* The final result is at the end of this post!!!
No images on Apple devices...
Images were not displaying on iOS, iPad, Safari web browser and other Apple devices (Thanks Patrick for the finding).
It seems that the .webp file format is not supported on those devices (expected to be supported in September 2020).
More info here:
"On September 30, 2010, Google released an open source image format called WebP. Fast-forward to today, it is widely supported by the majority of browsers, has had many improvements to the library code base, and is used by some as an entire replacement for PNG and JPEG images. WebP achieves a 26 percent better lossless compression ratio than PNG and a better lossy ratio, which ranges between 25 percent and 34 percent than JPEG. Furthermore, WebP supports transparency without increasing the file size more than 22 percent.
WebP browser support
According to caniuse, currently 79.2% of browsers support the WebP image format. That would include Chrome, Firefox, and Edge. Safari will support WebP in version 14, which is expected to be released in September 2020. With Safari having nearly 17% of the global browser market share this will push WebP to almost be completely globally supported." [Source]
The fallback I did was to switch to .jpg if the .webp was not supported like that:
<img src="images/blog/blog0.webp" onerror="this.onerror=null; this.src+='.jpg'"/>
If the device doesn't support the .webp file, an error will be triggered and it will replace
the .webp file by a jpg file extension like that:
Example: images/blog/blog0.webp -> images/blog/blog0.webp.jpg
I didn't want to duplicate the file path/filename because it's a good way to set the wrong image by accident like that:.
<img_src="image1111.webp" onerror="this.onerror=null; this.src='image9999.jpg'"/>
It will be easy to forget to convert into a jpg file or to add the "onError" callback ???
Totally yes, so my trick was to add some validations and automatic conversion inside the tool that I created for my website. Before uploading the website on production, this tool will be called and it will convert any .webp files into .jpg files. It will parse all html files and validate that the "img" tag with .webp contains the "onError jpg conversion line". If one step fails, the process is stopped (e.g. upload step is skipped) and I need to fix the issue before to pushing it into production.
The tool was written in C++ and it could be called locally.
* Option 2: I could use a "replace" instead of "append" for the file extension:
.webp -> .jpg instead of .webp -> .webp.jpg
Popular / Random Website Results
Here are some results of popular and random websites (The results may vary since the content changes often).
Here is one of my old projects. I'm surprised of this unexpected result
I tried something and it seems that the tool can analyze itself.
The Final Result
Here is the result of my main website page after all modifications I did from the
suggestion of Google PageSpeed insights.
There are still some improvements that could be done, i.e : strip more javascript code, some css parts, passive listeners, better usage of webpack, apply the optimization on the whole website, ... but it was more of an exercise for me with my personal website. I will use this wonderful tool (PageSpeed Insights) for any of my future websites / projects.
[Tip of the post]
If you like to improve performance or identify bottlenecks for your websites, you should try this tool PageSpeed Insights
