What is Google PageSpeed ​​Insights? How to use?

Our blog topic for today is Google PageSpeed ​​Insights, which is used to measure site speed and is undoubtedly trusted by many because it is Google’s own tool.

Before we talk about Pagespeed Insights, let’s talk about the importance of site speed in terms of SEO.

Why is Site Speed ​​Important?

Site speed, which has become an important factor for the last 7 years by the digital world, has become a very important factor especially in terms of SEO (Search Engine Optimization).

One of the main reasons for this is that Google’s statement in 2018 is that site speed is one of the ranking factors, and the second is to keep the visitor on the site by providing a fast-loading page in terms of user experience.

With the increase of mobile users, having a fast-loading web page has become a necessity. It has been proven that the speed of the web page is an important determinant of visitor behavior.

Note: Google research has concluded that you will lose half of your potential visitors / customers due to pages that load after 3 seconds.

What is Google PageSpeed ​​Insights?

Google PageSpeed ​​Insights is a Google tool that informs you about metrics and errors that slow down your site’s speed.
You don’t need to own a website to use Pagespeed Insights and you can analyze any page as many times as you want.

PageSpeed ​​analyzes your website and gives you various suggestions to make it faster. PageSpeed ​​Insights, which collects many metrics, creates an overall report for you to increase the speed of your site and correct your deficiencies in terms of usability.

Google PageSpeed ​​Insights Metrics

What is a Performance Score? How is it calculated?

The performance score takes a value between 0 and 100. Between 0 and 49 is considered bad, between 50 and 89 can be improved, between 90 and 100 is considered good. So how is this value obtained? Let’s see what metrics are used.

While calculating the performance score, the calculations are made using the metrics FCP (Initial Content Paint), SI (Speed ​​Index), LCP (Largest Content Paint), TTI (Interaction Time), TBT (Total Blocking Time) and CLS (Cumulative Layout Shift) to get more detailed information. You can refer to the source below.

Link: https://googlechrome.github.io/lighthouse/scorecalc/

What is First Contentful Paint?

FCP is a metric that results from calculating the time elapsed between the time a web page starts to load and the loading of the first element visible to the user. The other part that distinguishes FCP from other metrics is that it focuses not only on the codes running in the backend, but also on the user experience (UX) and which element is loaded first on the site.

What is First Meaningful Paint?

The first meaningful paint is a PageSpeed ​​metric that measures when the primary content of a web page is visible to the visitor. FMP occurs by measuring the time, in seconds, that the first content is displayed to the user from the time the page first starts to load.

0 to 2 seconds means FMP speed is good. 2 to 4 seconds indicates that the page speed is medium and open for improvement. Over 4 seconds means the speed is bad and definitely needs improvement.

What is Cumulative Layout Shift?

It is one of the site speed metrics that came into our lives with the CLS web vitals core update. CLS is a metric that measures the visual stability of the page between opening and loading the site when users visit a page. It usually occurs when the visual codes (Width and Length) of the pages are not specified to the browser.

A score between 0.00 – 0.1 is shown with a green color and is a pass. A score between 0.1 – 0.25 is shown in yellow and is at an acceptable level but still needs improvement. A score above 0.25 is displayed in red and it is very bad, urgent intervention is required.

What is Largest Contentful Paint?

LCP is the time from the time the user’s website starts to load until the largest visible content item in the viewport is loaded.

Structures included in Largest contentful paint measurement evaluations;

• picture elements.
• Elements inside svg tag.
• <video> elements.
• Inline.
• paragraph tag, heading tags block text elements
• Images added via CSS.

0 – 2500 ms (Milliseconds) is called fast and is valid. Between 2500 – 4000 ms is considered medium and open to improvement. 4000 ms and above require urgent intervention because loading our biggest item so slowly will cause great damage to our site in terms of site speed and user experience.

What is First Input Delay?

First Input Delay is the measurement of the delay between when a user first interacts with the website and the browser starts processing the action. Browsers usually have a latency period of a certain amount that we need to keep this latency at an acceptable level for our site.

So what is acceptable time? Between 0 and 100 ms (milliseconds) is considered good. It is open to development between 100 and 300 ms. Over 300 ms is considered bad and causes great damage to our site in terms of user experience, so a study should definitely be done.

What is Speed ​​Index?

Speed ​​Index is one of the 6 metrics in the performance section of the PageSpeed ​​report. Speed ​​index shows how fast a web page is loaded visually. It does the speed index calculation in seconds, so the more you reduce the visual loading time of your web page, the better it is for your page. In order for your web page to load faster, examining and applying the data given in the PageSpeed ​​diagnostic section will benefit both your performance score and speed index metrics.

0 to 3.4 seconds fast (good). 3.4 to 5.8 seconds is medium and needs improvement. If it is more than 5.8 seconds, it is bad and should definitely be intervened.

How to Use Google Pagespeed Insights

1. 1. Open the Google PageSpeed ​​Insights page.

1. 1. After opening the PageSpeed ​​page, the text box you see in the image above will appear. Enter the URL of the web page you want to analyze into the textbox.

1. 1. After waiting for a while, the results of the analysis appear before us. PageSpeed ​​gives us the analysis results by separating them as mobile and desktop.

1. 1. The first part, which Google calls important web data, comes before us, so what are these important metrics?
      • First Contentful Paint (FCP)
      • First Input Delay (FID)
      • Largest Contentful Paint (LCP)
      • Cumulative Layout Shift (CLS)

      It gives successful or failed results based on the results of these metrics.

1. 1. Your performance score, which has a value between 0 and 100.

1. 1. The metrics you see in the image above are detailed analysis of your site loading in a simulated environment. When we click on “Expand View” on the top right, it will give a brief summary about the metrics.

1. 1. The Tree Chart shows how our site was loaded during initial load.

1. 1. Opportunities section; It is the part that shows the errors that slow down the page load. In addition to the errors, it is clearly shown how much it will benefit the site speed after the errors are corrected. When we click on the errors, it gives more detailed information and gives you helpful information on how to fix this error. It is one of the most important parts of Pagespeed analysis.

1. 1. Diagnostic part of Pagespeed analysis; should be taken as a recommendation. It informs you about errors that do not directly affect your speed score.

1. Successful audits section; Shows non-invasive performance checks on your site.