Step-by-step optimization for Google Page Experience Update
On November 10, 2020, Google announced that the official launch date for the new Page Experience Algorithm will be May 2021. The Page Experience Algorithm will be an important parameter in creating the search result list, as the mobile-friendly website or the use of https. Its importance is also supported by the Core Web Vitals published in the Search Console. With a specific case, I show how I optimized a website step by step to fit the new Page Experience Algorithm.
Core Web Vitals
The Core Web Vitals report show sin three ways how your pages perform based on real world usage data, primarily in terms of page load.
Why page performance matters?
Longer page load times have a severe effect on bounce rates. According to WPO Stats, for example:
- If the page load time increases from 1 second to 3 seconds, the bounce rate increases by 32%
- If the page load time increases from 1 second to 6 seconds, the bounce rate increases by 106%
From these, it can be seen that no website can ignore the performance of the site, especially those who have a business website or webshop.
Basic parts of Core Web Vitals
- LCP (Large Contentful Paint)
- FID (First Input Delay)
- CLS (Cumulative Layout Shift)
Of these parts, the most important indicator is probably the LCP, as it also has to do with the speed of the website and this is what users notice the most.
What an LCP is good?
In short and concise, the smaller. :-)
The LCP is good for 2.5 seconds, needs to be repaired between 2.5-4 seconds, and it is bad over 4 seconds.
LCP data at the main page
I optimized the main page before, but even so, the LCP was around 4 seconds, which unfortunately resulted in a total score of only 65.
Google also reported the problem in the Search Console. It marked more than 4,000 pages with an LCP higher than 4 seconds. And the good side was hardly a few.
What element can be part of the LCP study?
Within the page, only the area that is visible on the page without scrolling is included in the LCP (above the fold content). What elements could be these?
- image
- video
- text block
- background image
- image gallery
How can you find the LCP item on the site
On simpler websites where only text content appears on the mobile version above the fold, it’s easy to find the item whose loading gives the LCP value, but it can still be a surprise, so it’s always worth looking at it with software. Let's look at the steps.
1. Open the webpage in Google Chrome
2. Press F12 to enter the developer tools
3. At the top of the menu bar, click on Performance and then the refresh button
4. The page will reload and the menu will jump to Coverage tab. After a few seconds, you need to click on Performance again and hover your mouse over the rectangle of the LCP. Then the content that was relevant to the LCP calculation is marked with a frame on the website.
Optimizing images from LCP perspective
All images what are in the content above the fold, for example jpegs and pngs need to be replaced with WebP. WebP is a new image format that uses lossy and lossless compression, developed by Google to reduce the size of images, thereby speeding up page load times.
According to Google tests, this can reduce the size of images by an average of 39%. I will show an example of the difference:
The image above shows that the file size has been reduced by a third with the same image quality. The disadvantage of WebP is that it is only supported by modern browsers (e.g. it is not supported by Internet Explorer), so it must be resolved that browsers that doess not supports it will get the original image.
Optimizing fonts from LCP perspective
If the page uses custom fonts, loading it can slow down the page quite a bit. The font file must be read by the browser before the text can be published.
To eliminate this, a css trick should be used. With this solution, the page starts to load with the base font. When the browser has had time to download the custom font file, the browser switches the text font from the base to the custom font.
On the website there was a problem with the google Roboto font. There is also a problem loading the page if you need to download the font package from another server, so it is recommended to download from your own server for use.
Google fonts can be downloaded from the google-webfonts-helper page. The font must be selected. This should then be downloaded the zip, unzipped and placed on the server the file, and the recommended code should be pasted into css:
Significance of server in terms of speed
A common problem with speed tests was server response time. Server performance and Internet speed are important in terms of speed.
The server was a machine with a 4-core processor and 16 gigabytes of memory, housed in an office where the Internet was only 500/32, so the server's content could reach users only 32 megabits. This is especially a problem if many people browse the page and / or have many images on the website.
Therefore, I decided to move the server to a server room behind 1000/1000 internet bandwidth and the server was also replaced with a 24 core processor with 48 gigabytes of memory.
Memory plays a big role in database servicing. The new server can place the entire database in memory, from which searches run much faster.
The result has been very spectacular. In the search console, the average response time in the crawl statistics dropped steadily from the previous fluctuating and 0.8-second average to 0.25 seconds.
Core Web Vitals change
For the Core Web Vitals, there was no immediate change in the Search Console, as google has 28 days to check for the fix.
Fortunately, you didn’t have to wait that long for the result. About 2 weeks after I optimized the website for LCP, the result was published. There has been a significant reduction in the number of pages marked as bad.
The number of pages marked as incorrect is expected to decrease further as each of the randomly selected pages gave a value to the LCP of less than 2 seconds in Pagespeed Insights.
LCP data at home page after repairs
All values have improved a lot. The optimization score jumped from 65 to 93. The LCP was reduced from 4 seconds to 1 second.
The speed index decreased from 2.7 seconds to 2. There was a larger change in the Time to Interactivity, which decreased from 4.6 seconds to 3 seconds. The blocking time was also halved.
Conclusion
It’s no accident Google did the Core Web Vitals. Users want to wait less and less for content. 70% of visitors browse the website from their mobile phones. And Google strives to better serve searching users. And website owners have to follow Google trends if they don’t want to lag behind the competition. Do the LCP optimization yourself.
Legnézettebb blogcikkek:
