Use PageSpeed ​​Insights to improve the quality of a Landing Page

Users are increasingly demanding, so we must offer fast and satisfying experiences. Therefore, it is important to optimize the loading time of our landing page. And we must be more demanding with our site on mobile devices.

According to recent studies, the average loading time of a page on a mobile device is 22 seconds. Taking into account that more than 50% of visitors of a mobile website leave a website that takes more than 3 seconds to load, this is considered a problem. Therefore, our site must convince the user within that margin and not make him wait.

We include below a graph that represents the probability of abandoning a page on mobile devices based on the loading time of the site.

Probability of abandonment depending on the loading time. Source: Google / SOASTA Study

It is no secret that buyers of an ecommerce or visitors to any website increasingly demand faster experiences. If these experiences are too slow or too complicated they can leave the site or the shopping cart.

Then, we will introduce you to the PageSpeed ​​Insights tool and we will emphasize the basic points to consider to improve the user experience on our landing page. 

We have already talked in other posts about how the experience of using the landing page of an AdWords ad affected its quality score and, therefore, its average position. In this post, for example, we gave a little trick to increase the relevance of the landing page.

How is Google PageSpeed ​​Insights used and what is it for?

PageSpeed is a Google Developers tool that analyzes the content of a website, measures aspects related to the loading time and the experience of using a web page and, based on the results of that measurement, returns a score (on 100) and some tips for improvement.

The tool provides us with two different measurements: for mobile and computer. Different scales, different measurements and, therefore, different results.

It is very simple to use:

1. Access PageSpeed ​​Insights
2. Enter the URL of the page you want to measure
3. Click on ANALYZE and wait for the results

Using Google PageSpeed ​​Insights is very simple

How to interpret the results of a PageSpeed ​​Insights analysis?

First, we will see that the results are different for mobile and computer. It uses different criteria, so the analysis is different.

The different measured factors can obtain these 3 qualifications:

Therefore we can observe the different types of qualifications:

• Approved rules.
  

• Not met with medium impact. Elements that you can consider correcting. Solving it will not make a big difference.
• Failed and has a significant negative impact. Elements that you must correct. Solving it would be significant.

Speed ​​metrics in PageSpeed ​​Insights

The tool identifies aspects related to the loading time of the page. The truth is that it is quite demanding with the loading speed, especially in mobile.

Results view PageSpeed ​​Insights desktop

According to all aspects analyzed by the application and its rating, you will get a grade (out of 100).

These are some of the analysis metrics that this tool measures:

• Data Field:
  • It offers us a first estimate of the loading time of the web during the last 30 days compared to the performance of other websites that are included in the Chrome User Experience Report
  • The First Content Rendering (FCP), the time it takes for the page to display the first image or text of the website and the Latency of the First Interaction (FID) are taken into account for this section of the analysis. In summary, it shows us the total load time until our user can start interacting with our content or elements within the website.
  • The results are displayed in a color scale by the tool and represents how the web has been loaded for the different users whose data has been recorded in the last 30 days in the Chrome User Experience Report.
  • It shows the average of all FCP and FID at the top. If your page is within the average compared to the rest of the pages, your score will be orange. If it is above it will appear in green and mean that it is faster than average, and if it is below it will appear in red.
  • If the Chrome User Experience Report does not have enough real-time web speed data, this field will appear empty.

• Experiment data:
  • The tool simulates a load test on a mobile device with 3G connection and analyzes a series of metrics that are linked to different loading times of a site, together with the possibility of user interaction throughout these . The metrics are the following:

• First Content Rendering or FCP.  This is the time it takes for the website to load the first image or content.

• First Significant Rendering. This is the time it takes for the website to load the main content with images and text.

• Speed ​​Index This is how quickly the content targets are filled.

• First Inactive Time and the CPU. This is the time that passes until the main components or elements of the web are minimally interactive.

• Time until it is interactive. This is the time that must pass until the page is 100% interactive.

• Estimated Entry Latency or FID. This is the time it takes for the components to respond when the user interacts with them during the 5 seconds of loading. With values ​​greater than 50ms, users will have a perception that the website takes time to load.

•  Opportunities:
  • In this section, it shows the recommendations suggested by the tool to optimize the performance metrics of the web. If such improvements are included, an estimate of the speed would be gained.
  • These are some of the examples:

• • • Postpone the loading of images that do not appear on the screen
    • Reduce server response times (TTFB)
    • Remove resources that block rendering
    • Use an adequate image size
    • Avoid page redirects
    • Publish images with next generation formats
    • Postpone the loading of CSS files

•  Diagnosis:
  • The tool also gives us some more technical recommendations that are intended primarily for developers. Some of the suggestions that are proposed to us include reducing the number of nodes that make up the web or the JS runtime.

• Approved audits:
  • Establishes a summary of the tests that the website has successfully passed. 

All this is especially interesting, because it affects the usability of the page, read this article on “Reduce the size of the content of the upper half of the page“

How to use PageSpeed ​​Insights to improve the quality of a Landing Page?

In a world where more and more users receive more information and have less time to devote to it, the loading time of a web page is essential. And on mobile it is even more relevant when we know that the use of mobile devices continues to increase in relation to other types of devices.

Therefore, the experience you provide to your users is essential, and this includes the loading speed of your site. If you want to keep the users on your website and do not get bounced you should pay attention to all the details mentioned above and create a faster website, that is more friendly and provides a better user experience in general. 

And if you are using this website as the destination URL of an AdWords ad, poor usability can influence the quality of your ad, lower the average position and worsen the results of your campaign.

So, if you have between 3 and 10 seconds to convince your potential client, be fully aware that every second counts. Getting a better rating on PageSpeed ​​means a better response to the user.

How can we improve our score and therefore the loading speed?

We show below some of the recommendations that will allow us to improve the Google PageSpeed ​​Insights score:

• Defer loading of images, videos or multimedia content that is not visible at first.

• • With a progressive loading of the different elements that we have mentioned before we manage to reduce the initial loading time, since the elements are displayed depending on the area of ​​the screen in which the user is located and that it is necessary for this Interact with the website. With Lazy Load Technology we can achieve it.

• Defer or delete resources that block the loading of the web.
  

• Avoid unnecessary redirects. This can also reduce the charging time.
  

• Remove unused CSS. Deleting all the lines of code with which they are used will also improve the speed of our site. The unused CSS is reflected in the Coverage section of the Chrome console.
  

• Next-generation image formats, such as JPEG 2000, JPEG XR or WebP.

Any of these formats are downloaded faster than conventional PNG or JPEG formats. The problem presented is that these types of formats are not compatible with all browsers and it will be necessary to see their evolution to see if we should finally include them in our websites.

Other tools: Google Test My Site

Other tools that can help us improve the loading time of our website, especially on mobile devices the Google Test My Site tool measures the speed of all pages of your website based on various data from around the world and comparative with other companies in the sector compiled in a Chrome User Experience Report.

Using Google PageSpeed ​​Insights or other tools will not solve anything by itself, keep in mind that it is we who have to carry out the actions. But using it as a guide, complying with your suggestions and getting better ratings will help us reach our users better and faster.