What Is Pagespeed Insights

PageSpeed Insights is a system that measures important values such as website user usage, usage ease, fast opening and loading and scores your website accordingly. At the same time, PageSpeed Insights scores your website based on your user experience and informs you about what you need to do on low scored elements or why you got a low score. This application presents the scores under certain technical categories. These rather complicated terms and categories are actually not that hard to understand or incomprehensible. The main purpose of this measurement is to provide some values expected by the Google search engine. Google has a structure to care about the users a lot. Therefore, the search engine is careful about improving itself to satisfy each and every user. Google also cares about user experience in ranking on search results presented to the visitors. Therefore, PageSpeed Insights measurements can be seen as elements that become important in SEO works or search engine results. We can think of this like that: Since Google considers user satisfaction as the main purpose when there is a search query, Google uses algorithms to rank the results that will make the related user the happiest at 1st and rank other results after this one according to the same order. Google uses certain assessment criteria to identify this. These include values such as user experience, mobile compatibility, website speed, understandable content and perfect on-site navigation. PageSpeed Insights application has an algorithm that can measure these values in itself.

You can access your website measurements from PageSpeed Insights web site.

If you are using Chrome browsers, after opening the webpage you want to scan, you can measure your website or page from the View -> Developer -> Developer Tools -> Lighthouse tab.

Without too many technical terms, let’s try to explain what this application measures and its main purpose in a simple way:

Fast Loading Pages

One of the prerequisites of user satisfaction is fast-loading web pages. Basically, the PageSpeed Insights application identifies whether your website has sufficient speed. The application shows the slow aspects of your website or what is causing this slowness. And it enables you to take precautions against these problems.

Readable Content Texts

The legibility and clarity of the website content are extremely important for visitor satisfaction. For example, texts with a white background, correct paragraph margin (line-height) and letters in black or dark blue color are more legible by the visitors. But texts created to attract attention such as dark grey letters on a grey background can decrease the legibility. While we think that this is right in terms of design, the application shows us that it is not. When you decide on the background and main text color, I would like to note that it is better to choose contrast colors. This application informs you about the things that will cause problems to the visitors in such cases.

Visible Links and No Complexity in Clicking

In some cases, the links on your website can be side by side. In this case, you need to take the necessary precautions for visitors to easily click on the links or avoid clicking the other link, especially for mobile devices. This is an extremely important element for user experience. PageSpeed Insights application will show your shortcomings and where do you experience any problems.

Unnecessary JavaScript and CSS Use

JavaScript and CSS files slow down your website. Therefore, you need to remove unnecessary files from your website. PageSpeed Insights application gives you a detailed report on all JavaScript and CSS use. I would recommend publishing your website without JavaScript unless it is necessary. You need to compress your existing CSS files in CSS and create a style file for each page rather than showing the style definitions for a page on all other pages. For example, in theme.css files that you indicate the general design commands for each page, don’t just include a style you have created for your “About Us” page. Instead, create a separate CSS file for your “About Us” page and use that file only on this page. This way you won’t cause unnecessary loading of your style command on your “About Us” page on all other pages. You can evaluate and optimize your JavaScript use as well. PageSpeed Insights application will show you unnecessary and uncompressed JavaScript and CSS files. I recommend applying the recommendations by this application.

Showing Image and Style Files from Cache Memory

When files such as JPEG, PNG, CSS and JavaScript are called by the visitors all the time, this will cause unnecessary loading and traffic. Therefore, you can call these files from cache memory for individuals who have previously visited your website. To do that, operations on the htaccess file is an option. This is highly beneficial for your website to load faster and for easier transition between the pages.

Optimizing Images

The images on your website are the most important elements to determine your website speed. Therefore, there are some details you need to consider when uploading images to your website. First, your website images should fit on the screen and shouldn’t overflow. Also, these images shouldn’t have a low resolution or quality. However, the images should also not be too big as they should be. To do this, you need to spend more time on your image optimization than you have imagined. While there is no proven or official data, I believe that your website images should be 2000px*700px dimension. But it shouldn’t exceed 100 KB size without losing the image quality. I can give the same dimensions and sizes for the banners we use on our home page. If you don’t use licensed software, you can use online applications such as Photopea for image sizing and Tinypng for image compression.

Of course, PageSpeed Insights does not only measure or evaluate the above-mentioned things. But if we look at it from a general perspective to make it understandable for everyone, the items above will give you a good user experience and high scores on PageSpeed Insights.

Now, let’s see some of the technical criteria in PageSpeed Insights:

First Contentful Paint (FCP)

This measures the elapsed time until any elements on your website content appear on the first screen right after clicking on your website. If your FCP score is below 1 second, this means you have an ideal score for the best and current data. I should note that as your score approaches zero, your performance will get better... If this value is 1-3 seconds, you need to work a bit more to be successful. If you have FCP score longer than 3 seconds, this means you have a very bad score. If you got a very bad FCP score, re-evaluate the items above and remove these elements from your website. Most probably, your extremely large images and external JavaScript are causing this problem.

Largest Contentful Paint (LCP)

LCP is a value that measures the time between clicking your website and complete loading of the largest file on your website. We can define the time elapsed for the element with the largest size on your content as Largest Contentful Paint. If this is below 2.5 seconds, your score is very successful according to current data. Although you get a positive score here, I recommend working harder to make this score closer to zero... If this value is 2.5-4 seconds, you need to make some improvements. But if your score is above 4 seconds, I should note that it is vital to make significant improvements. The largest Contentful Paint score can be considered as the net opening duration for your page. You can think of it as the time between first clicking on the URL and complete loading of the content on the related URL. You can review the items above to improve this score.

Cumulative Layout Shift (CLS)

This is an algorithm that measures the shifts or distortions between when you click on a website and when the page is completely loaded. We can say that it is a sensitive system that measures whether there are any shifts or distortions that make the reading of the content challenging from the start of the loading of the related webpage until the end when the elements with longer loading time are completed. Again, fast website loading emerges as very important criteria. Therefore, you need to define the width and height of the images you use on your content. This enables showing the content correctly by leaving the related are empty as the page is loaded. This will prevent layout shifts and make your CLS score 0 which means successful. If the CLS score of the measured website is below 0.1, this means you have a successful CLS score. If this score is between 0.1 and 0.25, you can overcome your CLS score problem with certain improvements. But if your score is above 0.25, you need to think about how to improve your problem.

In this article, I tried to give you both basic and technical information about values related to PageSpeed Insights. As you can see, the purpose of the measurement here can be interpreted as having a website with high speed, user satisfaction and seamless coding if we consider it without using technical terms. In summary, we can see that websites that satisfy their users, enables easy navigation and good content are valuable. These values are valid for all your content not just for your landing page which are your pages open for visitors on your website. Also, I would like to note that changing your page to get a valid score on PageSpeed Insights won’t be enough. You need to check all pages on your website separately and you need to do the SEO work to make sure you get a valid score.

If you need professional support in CLS - LCP or SEO, you can contact me from here.