A ranking factor is a variable that a search engine considers when determining how to rank links within the search results. There are more than 200 ranking factors in Google’s algorithm, including page speed, which was first introduced in 2010.
Page speed is the amount of time that it takes the content on a single webpage to load. It sounds like a simple concept, but for years, Google has struggled to figure out exactly how page speed should be measured. Should it be how long it takes the entire page to load? Or should it be how long it takes for the user’s browser to receive the first byte of information? How can page speed be measured?
Google ultimately established three metrics that are used to measure page speed. Together, these metrics are known as “Core Web Vitals”:
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Cumulative Layout Shift (CLS)
Here’s what you need to know about Core Web Vitals, including how to measure and improve your website’s page speed:
An Overview of Core Web Vitals
Each of these core web vitals plays an important role in helping Google evaluate your website’s user experience, which can impact your ranking.
Largest Contentful Paint (LCP)
The largest contentful paint, or LCP is the amount of time it takes for the largest element in the user’s viewport to fully load. If an element is found outside of the user’s screen, it will not factor into the webpage’s LCP. Images or videos are usually the largest elements found within the user’s viewport, but it could also be a block of content or another design element.
Every webpage will receive an LCP rating as follows:
- Less than 2.5 seconds: Good
- Between 2.5 to 4 seconds: Needs Improvement
- More than 4 seconds: Poor
This metric is valuable to Google because it is a measure of how quickly the user can interact with and use the website.
Many factors can influence a page’s LCP, including the server response time, render-blocking Javascript and CSS code, and client-side rendering.
First Input Delay (FID)
The second Core Web Vital is the first input delay, or FID, which is the amount of time it takes for a page to react to the user’s first interaction while the page is still in the process of loading. In other words, this metric is used to measure a webpage’s responsiveness.
For example, say the user clicks on a link displayed on your website immediately after arriving on the page before the page has fully loaded. This would mark the user’s first interaction with your webpage. The page’s FID would be the amount of time it takes for the browser to respond to this interaction by sending the user to the new page.
It’s important to note that certain actions, including scrolling and zooming, are not considered interactions when measuring FID. For the purpose of measuring FID, only clicks, taps, or keypresses are considered interactions.
Because it requires user input, FID can only be measured in-field rather than in a lab setting.
The FID ratings are as follows:
- Less than 100 milliseconds: Good
- Between 100 and 300 milliseconds: Needs Improvement
- More than 300 milliseconds: Poor
Several factors can impact a webpage’s FID, including JavaScript content and code-splitting.
Cumulative Layout Shift (CLS)
The final Core Web Vital is cumulative layout shift, or CLS, which measures the shifting of design elements on a page while it is still loading. For example, say a user lands on a webpage that appears to be fully loaded, but suddenly a video appears at the top of the webpage, which pushes the rest of the page’s content down. This is considered a layout shift.
This metric is important because it measures a page’s visual stability and thus helps Google understand the user’s experience on a webpage. If too many layout shifts occur, the user may accidentally click on the wrong thing or lose their place in the content they are reading, which can negatively impact their experience on the page.
The CLS scores are as follows:
- Less than 0.1: Good
- Between 0.1 and 0.25: Needs Improvement
- More than 0.25: Poor
This score is calculated by multiplying the percentage of the screen that was affected by the shift by the distance that it shifted. For example, say half of the user’s screen moved downward as a result of the layout shift. The distance that this content traveled was about 15% of the user’s screen. In this case, the CLS score would be 0.5 X 0.15, or 0.075, which is a “Good” CLS score.
Some of the factors that can affect a webpage’s CLS include the size attributes of images and videos and the sequence in which design elements load on a webpage.
How Can You Measure Your Website’s Page Speed?
It’s important to monitor your website’s page speed to ensure there are no issues that could negatively impact its ranking. Two of the best tools to measure your website’s page speed are:
- Google Search Console
- Website Auditor
Google Search Console
Many SEO professionals rely on Google Search Console to measure the speed of their webpages. Unlike many other tools, Google Search Console uses field data rather than lab data to measure your page speed.
To access this report, log into your Google Search Console account. Then, click on “Experience,” and “Core Web Vitals.” This will pull up a Core Web Vitals report for all of your webpages. The top of the report will provide you with a summary of how many pages are ranked as “Good,” “Needs Improvement,” and “Poor.”
You can also choose to view a more detailed report to dive into the specific issues that are affecting your webpages. This detailed report will tell you the LCP, FID, and CLS score for each of your webpages. Reviewing this information will help you determine what changes you need to make to improve your website’s page speed, which could help you climb higher in the search results.
Website Auditor
Another tool that SEO professionals use to measure page speed is Website Auditor. To run a report, log into your account and click on “Site Structure” then “Site Audit.” This will pull up a Core Web Vitals report for all of your webpages.
You can also click on “Pages” then “Page Speed” to see a list of the pages on your website in addition to a breakdown of the issues impacting each of these pages. From this view, you can click on any of your pages to see a list of issues that need to be addressed to improve page speed.
Both Google Search Console and Website Auditor can help you understand more about your website’s FID, CLS, and LCP, which is crucial to improving overall page speed.
The Ultimate Checklist for Improving Your Website’s Page Speed
Page speed plays an important role in determining your website’s Google search results ranking. Follow this simple checklist to improve your website’s page speed:
- Specify image dimensions. If you don’t specify width and height dimensions, your browser will need to properly size them, which could cause layout shifts when the page loads. Establish dimensions in the page’s code like this:
<img src=”test123.jpg” width=”640″ height=”360″ alt=”test image” />
- Choose the right image formats. Convert JPEG or PNG files to AVIF, JPEG 2000, JPEG XR, or WebP files.
- Compress images. Regardless of the format, all images should be compressed to reduce the total page size. If your site is built on WordPress, use the WP Smush plug-in to compress your images.
- Load images above the fold first. Google measures your page speed based on how quickly the area above the fold loads. Improve your page speed by allowing the images above the fold to load before the images below the fold begin loading.
- Use videos instead of gifs. Videos are smaller in size than gifs. To reduce your overall page size, use a free online tool like FFmpeg to convert your gifs to videos.
- Address unused CSS. Having unused CSS on your page can slow down its loading time. Review your webpage’s CSS to remove all unused or unnecessary CSS.
- Minimize JS and CSS. Spaces, line breaks, and unnecessary pieces of code can slow down your page speed. Use an online tool such as CSS Minifier or HTML Compressor to remove these elements.
- Prioritize above the fold CSS files. Identify all CSS files that are crucial to the above fold user experience. Place these CSS files in the <head> of your HTML code. This will ensure these above the fold elements load before CSS files below the fold.
- Switch to a faster server. The best way to improve your server response time is to switch to a faster server, which may involve moving from shared to managed hosting.
- Defer non-essential third party resources. Some third party resources such as video embeds or social media sharing buttons can cause significant delays when your page is loading. Remove these non-essential resources completely or move them out of the critical rendering path.
- Establish pre-connections to third parties. It takes a long time to establish a connection to a third party, which can affect your page speed. To improve page speed, pre-connect to third parties in advance using this tag: <link rel=”preconnect” href=”https://example.com”>
- Break long tasks down. Look for large chunks of JavaScript that could be slowing your page down. Break these chunks down into smaller tasks to improve your page speed.
- Set a loading sequence. Browsers typically decide what elements on a webpage to load first. Unfortunately, browsers usually choose to load CSS before other elements such as images or scripts, which can slow down your page speed. To prevent this problem, tell your browser what to load first by using the <link rel=”preload”> tag.
- Enable browser caching. Browser caching will store certain elements of your webpage in the browser’s memory, which means your page will load faster the next time the user visits.
- Eliminate redirects. Every redirect will slow your page down further, so eliminate all unnecessary redirects.