If you want your website to be successful and well ranking on Google, you need to make sure it loads quickly and efficiently. Web performance is a measure of how fast a web page loads and how well it responds to user input. There are a number of factors that can affect web performance, including file size, server response time, and code efficiency. In this post, I will give you some tips on how to improve web performance and make your site run faster.
It's in part how we optimize our website to have 100% pagespeed on Google : https://www.kezios.fr/
1 - Improve your Images
Lazy loading images is a technique that lets you load the images only when a user scrolls the page. This means that if a user doesn’t reach the end of the page, they won’t load any images at all.
Decoding an image means converting it into a format that can be displayed on your site. The process is done by your browser, and it takes some time to do so. To prevent this process from happening as multiple times, it is better to decode them once and then store them for later use. Do not display over quality images
Images have different formats such as PNG, JPEG, GIF etc., which are used according to their needs and purposes but sometimes we use the wrong format for our image which makes them look blurry or pixelated in browsers. A simple trick which you can use here is giving proper dimensions and in multiple format (webp & jpg) for each image so that it will display properly even if there are differences between users’ screen and browser.
<picture>
<source srcset="assets/img/yourImage.webp" type="image/webp">
<source srcset="assets/img/yourImage.jpg" type="image/jpeg">
<img src="assets/img/yourImage.jpg" alt="Your image !">
</picture>
2 - Preload & prefetch
Preloading is a technique used by web browsers to load ressources more quickly. It typically involves loading images and JavaScript files before a user has requested them, thus reducing the amount of time it takes to load the page.
<link rel="preload" href="yourJsFile.js" as="script" />
Prefetch can also be used to add value to your website by prefetching some of the content they will view at a later point in time. This is especially useful for to prefetch files which will be use in the next view page.
<link rel="prefetch" href="yourJsFile.js" as="style" />
3 - Minified and Compressed your ressources
Minification is the process of removing unnecessary characters from source code without changing its functionality. The most common way to do this is to remove white space and other formatting characters, but it can also include shortening variable names, merging multiple statements into one, or other alterations.
Compression is the process of reducing the size of a file. There are a few different methods for compressing files; these are defined in RFC 1952 as DEFLATE (the default compression method for GZIP) as well as BZIP2, LZMA/LZMA2 and XZ.
4 - CDN served your ressources and use a caching system
A content delivery network or CDN is a large distributed system of servers deployed in multiple data centers across the Internet. The goal of a CDN is to serve content to end users with high availability and high performance.
Caching systems are used in web performances to improve the speed and responsiveness of the system. Caching systems store frequently accessed data in a fast access memory, so that it can be quickly retrieved when needed. This can improve the performance of the system by reducing the amount of time needed to access the data.
5 - Optimized your fonts
One way to improve web performance is by optimizing the fonts. This can be done by reducing the number of font faces, using font faceobserver to load fonts asynchronously, and using font-display to control how the browser renders the font. By doing this, the browser can render the page faster and the user can see the content sooner.
Top comments (9)
@adrianguery very good article. I would like to share my last finding in chapter "4 - CDN served". What I did is export a locally hosted (locally based hosting company) WordPress company website into a static HTML version and deployed it into:
So basically I did not change the code of the front end, not even set up HTML, CSS, (images) and JS compression.
Then I tested Vercel and Netlify deployed URLs (and WordPress local company hosted URL) on these Google measure services:
My finding lies in resulting that CDN has minor or even non-improvement in scoring that is assigned by an audit of these websites.
Where the speed improvement of response was seen and identified are these measuring services:
The result in these was significant.
This leads me that Google measuring services focus mainly on HTML, CSS, (images) and JS processing in browsers on the client side and the way how these files or well written to process on the client side quickly and provide the best customer experience.
The way how Google measures service scores is they have a large dataset of user experience with similar websites like yours you are testing and if it's similar website falls into that closest group. Most of the recommendations they provide are general and not specific to your website.
Regards to this on-page recommendation and provided results in the CDN deployment comparison I found out gtmetrix.com service based on the Google Lighthouse library is more accurate providing more additional metrics even in the non-paid version.
Thank you very much for your reply !
To know if your site is fast, Google will not use an analysis like pagespeed or lighthouse. But it will use feedback from all of your site's users. You can get this data through the Google Search Console: search.google.com/search-console/a...
To illustrate this, if your site is used by a very local population in a single city, on an island. It is better to have a server that is not very efficient on this island and serve the population of this island well, rather than having a CDN that will serve the Silicon Valley (Google offices) well because Google will use the feedback of your site's users ;)
I will write an article about it if you think it can be interesting ?
Great @adrianguery. Yes we all struggle a bit how Google judge our websites projects. Definitely write and publish such a article based on some real-world tests. Looking forward.
Thank you for your feedback !
I still stick to .jpg and .pngs but I now use more often loading="lazy" property. I remember that in past you needed external JS plugins to achieve this.
<img loading="lazy" src="..."/>Yes, you're right !!
And for some navigator it's still not supported (especially on Safari) : caniuse.com/loading-lazy-attr
Really? Gosh… I hope they add support for this same as they added support for web notifications.
Yes. These methods are good for getting high performance score in Core Web Vitals.
I still have doubt, Is that necessary for a website for ranking top in Google?
Since 2010 for desktop and 2018 for mobile, speed is a Google ranking factor.
But this is not necessary to be first in the Google results. For example, even if Wikipedia was slow it would stay first in a lot of searches, but it would rank lower where there is big competition ;)