Introduction
Since page speed audit is vital for SEO ranking, there’s a lot of improvements that can be taken care of early on, especially in the design stage of a web page.
There can be cases where it may be difficult to work on page speed optimisation after the designs are done.
Above the fold
Page layout, especially above the fold is very important to get right. Below the fold content can be optimized to load lazily. Hence, in this article we will focus on the portion of the web page that is visible in the viewport when a webpage loads.
The content above the fold is crucial in terms of bounce rate, conversions & SEO rankings.
Page speed is a direct ranking factor for the ranking algorithms. One can find the results by performing a page speed audit on Google’s Page Speed Insights page.
Google’s speed scoring algorithm has 6 metrics, each metric has their own weights. The final score is a weighted average of the metric scores. You can find the weights calculator here.
Let’s take the top 2 metrics by weightage, they are
- Total blocking time (TBT) — with 30% weightage
- Largest contentful paint (LCP) — with 25% weightage
While the TBT metric is a lot technical & mainly involves shipping less javascript to the client & also reducing the computation, in contrary to LCP which is the render time of the largest multimedia or text block visible within the viewport when the page loads.
Designers can optimise LCP by focusing on what they show above the fold
For instance, if a designer has decided to play a video in the first 100% of viewport, the LCP metric would be affected negatively. This can be avoided if the video is lazy loaded and runs below the fold.
While thinking about the relationship between Search Engine Optimization (SEO) and LCP, remember that the Google search engine algorithm gives 25% weightage to LCP for measuring page experience. If a website has a sophisticated design, attractive products, and good content but takes too long to load, it will create a bad user experience.
In a way, the faster the largest element of the site loads, the better will be its ranking on the Google search results page
To read further in depth about LCP, visit web.dev/lcp
TBT
TBT is the total time spent blocking the main thread. It is the sum of the blocking times of all the scripts that block the main thread.
To read further in depth about TBT, visit web.dev/tbt