What is PageSpeed?
PageSpeed, as the name suggests, determines the time it takes for a page to load. Appropriate optimization affects the position in search engines, user experience (UX) and conversion rate, which significantly translates into the success of your store.
We can examine our result online using Google PageSpeed Insights, or locally using the developer tool in your browser Google Chrome – Lighthouse.
1. Image optimization
The resolution of graphic files should never exceed their maximum size that they can occupy on the page. It is good to check the dimensions of the image before we place it on our website.
Additionally, each of them should have its height and width (height and width attributes). Thanks to this, we will avoid "jumping" of images in the first stage of loading the page, before the style files are loaded.
It is also a good idea to use the latest generation WebP formats, which are extremely "lightweight".
2. Delay external scripts loading
Blocking scripts that are not necessary when the page is first loaded can significantly affect our score. A good example is Google tag manager – tool used to track what activities visitor performs on our store. We can load such a script only after the first user interaction on the page - clicking, scrolling or pressing a key.
3. Delay loading images that are not immediately visible on the screen
Off-screen images when the page is first loaded, or those that appear after user interaction (e.g. scrolling, clicking) should not load immediately. You can delay their loading with lazy-loading. Google Lighthouse makes it easy for us to find these elements by providing a list of them.
4. Nesting DOM elements
The more elements our DOM tree has, the greater memory consumption and longer style calculations. Let's try to pay attention to this in the first stages of building the website to avoid unnecessary elements. It's also a good idea to create elements only when you need them and delete them when you don't need them anymore.
5. Largest Contentful Paint (LCP)
LCP is a value that determines how long the page takes to load the largest element on the screen - these are in most cases images. According to Google, only elements that we can see without scrolling are taken into account. We can improve our result by avoiding using lazy-loading on elements that are immediately visible on the screen. It is a good idea to avoid loading images with javascript in favour of using CDN services.
Summary
These are just a few elements that will improve the performance of your website and increase the PageSpeed score. Google is starting to appreciate this value more and more, rewarding us by increasing our search ranking.
Here is an example of the results of a well-optimized demo.hyva.io page:
I encourage you to read the full google lighthouse documentation.
