Google PageSpeed Insights Tips: Advance Tips

 Google PageSpeed Insights Tips

The amount of time it takes a user to view a website is known as its "site speed." Slow page execution can impact both ''client accommodation'' and ''web crawler assessment, for example, expanding visit time and skip rate and bringing down search positions. Consequently, when managing a website, speed optimization is critical.

Site speed is not a strong ranking signal. However, when content of similar quality is competing, site speed acts as a tiebreaker. In keyword areas where the content is competitive, speed improvements will be necessary to beat the competition.

The next section discusses the intricacies of measuring and improving your website's speed, with a special emphasis on the nuanced subject of page speed. An in-depth investigation into the intricacies of using "PageSpeed Experiences," the standard tool for evaluating the quality of a website, and the strategic actions that can be taken to improve its speed are in the works.

If you are a website operator, please use this as a reference.

Table of contents

Need to check site/page speed

• Relationship with search results displayed on Google (SEO)
• Relationship with page exit rate

Relationship with conversion rate (CVR)

Recommended measurement tools to improve site speed

• PageSpeed ​​Insights
• Lighthouse
• Google Search Console
• How to use and view PageSpeed ​​Insights
• Evaluate in real user environment (field data)
• Diagnose performance issues (lab data)

What score/display speed should I aim for with PageSpeed ​​Insights?

Ways to improve site speed

• Compressing text files
• Optimization of image and video files
• Delete unnecessary external files
• Set browser cache expiration date
• Load images on scroll
• Leverage AMP
• Introduction of CDN

summary

Need to check site/page speed

Why should you check your site speed in the first place? The following are some of the effects that page speed has on a website:

• The impact is small, but search rankings may drop.
• Closely related to bounce rate
• Affects conversion rate (CVR)

Page speed is not a strong ranking signal, so its relationship with search rankings (impact on SEO) is not significant. However, if the page display speed deteriorates, users will feel stressed, resulting in an extremely short time spent on the page (immediate browser back) and an increase in the bounce rate. Additionally, if the dwell time and bounce rate worsen, CVR will decrease.

In this way, page speed is directly linked not only to SEO but also to website results, so it is essential to understand the current performance and improve it.

I've summarized them briefly, but let's dig a little deeper and look at each one in more detail.

Relationship with search results displayed on Google (SEO)

Page speed has only a small effect on Google's search results.

An article titled "Use page load speed as a ranking factor for mobile searches" can be found in Google Search Central. Assuming you just glance at the title, it might appear that page stacking speed hugely affects search rankings.

However, in reality, it states that ` `it only affects pages that users perceive as being very slow, and only a small number of queries are affected .'' This means that rankings will only be affected if the page load speed is extremely slow.

Also, faster page loading speed does not necessarily mean higher search rankings. "Pages with great, relevant content may rank higher even if they load slowly," Google explains in the article above. However, as mentioned above, it is very likely to act as a tiebreaker when the quality of the content is the same.

Relationship with page exit rate

Page speed is closely related to bounce rate. The image below shows the variation in page speed and user bounce rate.

When page load time increases from 1 second to 3 seconds, bounce rate increases by 32%.

Increasing page load time from 1 second to 5 seconds increases bounce rate by 90%.

Increasing page load time from 1 second to 6 seconds increases bounce rate by 106%.

Increasing page load time from 1 second to 10 seconds increases bounce rate by 123%.

The ensuing tabulation delineates the computation of bounce rate and the corresponding count of bounces, presupposing a total of 10,000 site visits and a baseline bounce rate set at 40%.

As you can see, page speed and user bounce rate are closely related. 

Relationship with conversion rate (CVR)

By improving page speed, you can expect to increase conversion rates. Below is a summary of the data Google reports on " Why is speed important? "

Once the page starts loading, the user has no choice but to wait for it to appear. It's easy to imagine users becoming stressed out and leaving the site, even if it's only for a few seconds . As you can see from the diagram above, there are many cases where improving page speed has a positive impact on conversion.

Recommended measurement tools to improve site speed

We recommend "PageSpeed ​​Insights" provided by Google, "Lighthouse" Chrome extension, and " Search Console " as measurement tools to help improve site speed.

If you don't have any particular preferences, you can use PageSpeed ​​Insights, which is free and requires no installation, just enter the URL of the page you want to research.

PageSpeed ​​Insights

PageSpeed ​​Insights is a tool that allows you to measure the display speed of a web page by simply entering the URL of the web page you want to investigate, and find areas for improvement. Results are displayed separately for mobile and desktop devices, so you can see the results of each analysis at once.

The detailed usage method will be explained later.

Lighthouse

Lighthouse is a Chrome extension that analyzes performance related to page speed. Simply install Lighthouse and click the Lighthouse icon on the web page you want to investigate page speed, and the survey results will be displayed.

Lighthouse is also available in Chrome's developer tools. Open "More tools" → "Developer tools" from the "⋮" mark in the top right corner of the Chrome screen.

Google Search Console

You can check the site speed status of your site in Google's Search Console

If you click "Experience" → "Main Web Indicators" in the left sidebar, the problematic items and relevant pages in the Core Web Vitals indicators will be displayed, as shown in the image below.

How to use and view PageSpeed ​​Insights

Let's take a closer look at how to measure page speed using PageSpeed ​​Insights, an excellent site speed checking tool.

Use the following steps.

• Copy the target page URL
• Paste the URL of the page you want to investigate into PageSpeed ​​Insights
• Analysis results are displayed

Since various data indicators are displayed in the analysis results, we will explain the meaning of each indicator and the data to focus on.

Evaluate in real user environment (field data)

How to use PageSpeed ​​Insight

Field data is the result of analysis using data from actual Chrome users. The page speed evaluation results for 6 indicators including LCP and FID shown below will be displayed.

LCP, FID (INP), and CLS are indicators that fall under the particularly important "Core Web Vitals."

＜Core Web Vitals＞

• LCP (Largest Contentful Paint): Time taken to load the largest content
• FID (First Input Delay): Time from user operation to browser response*
• CLS (Cumulative Layout Shift): Number and magnitude of web page layout changes that users cannot anticipate

*From March 2024, Core Web Vitals FID will be replaced with INP. In this article, we will explain both the FID and INP indicators.

<Indicators related to page speed other than the above>

• FCP (First Contentful Paint): Time until content is first displayed
• INP (Interaction to Next Paint): Reaction time to clicks, taps, and keyboard input
• TTFB (Time to First Byte): The time it takes for the first data to arrive after requesting a resource.

There is no problem if the analysis results of these indicators are all displayed in green. If it is displayed in orange, it means that improvement is required, and if it is displayed in red, it means that the evaluation result is quite poor.

The comprehensive evaluation of the above six indicators is displayed as "Evaluation of main web indicators." If it shows as failed, you need to improve your page speed.

The indicator to pay particular attention to is LCP

Among the six Core Vital Web metrics listed above, LCP is the one to pay particular attention to.

LCP is a metric that measures the loading speed of the largest image or block of text that a user perceives. In other words , it can be said to be the speed at which the main content of the page is displayed , so by improving LCP you can give users the impression that the page is displayed quickly.

Accurate numbers may not be measurable when there is insufficient user data.

If there is insufficient user data for the analyzed page, "This URL" will be displayed in light gray at the top right of PageSpeed ​​Insights. If you click the icon to the left of that, an explanation will be displayed stating that there is insufficient user data, so data from the origin (domain top) is being displayed.

Considering this situation, we advice an intensive examination of the lab information inside the "Analyze execution issues" portion. This assessment expects to pinpoint regions justifying improvements in page speed.

Diagnose performance issues (lab data)

Lab data is the result of site loading analysis performed under a simulated environment. The following five metrics displayed in the "Diagnose performance issues" column are evaluation data regarding page speed.

• First Contentful Paint: Time until content first appears
• Largest Contentful Paint: Time taken to load the largest content
• Total Blocking Time: Total time the user's input is blocked
• Cumulative Layout Shift: The number and magnitude of web page layout changes that users cannot anticipate
• Speed ​​Index: Page content display speed

There is no problem if the analysis results of these indicators are all displayed in green. If it is displayed in orange, it means that improvement is required, and if it is displayed in red, it means that the evaluation result is quite bad.

For the overall evaluation of the five indicators above, the score is displayed in "Performance". If it is displayed in green, there is no problem; if it is displayed in orange or red, improvement is required.

Because it is an estimate, it may lack accuracy.

The data displayed in "Diagnose Performance Issues" is only an estimate under a simulated environment. Therefore, the displayed results will differ each time you take a measurement.

Although the measurement results differ for each measurement, it is possible to understand trends in the analysis results by performing measurements multiple times . When using data from Diagnose Performance Issues to improve page speed, we recommend that you measure the data multiple times.

What score/display speed should I aim for with PageSpeed ​​Insights?

In older versions of PageSpeed ​​Insights, scores were displayed for "Actual user environment data" and many articles explained, "The average score is 50 points. Aim for above average." .

However, the current PageSpeed ​​Insights does not display the score. If the "evaluation of the main web-related indicators" fails, improvements are required . Metrics that need improvement are displayed in orange or red, so you can see at a glance which metrics need improvement. We recommend that you always check the results on both mobile and desktop, as you may get different results.

The table below is an example of the indicators when both mobile and PC are displayed as failing in the "evaluation of main web indicators".

We also recommend using PageSpeed ​​Insights to analyze the sites that rank high for the keywords you are targeting, and use the average or median values ​​of metrics from multiple sites as a guideline for improvement.

As shown in the image below, by investigating the Core Web Vitals metrics of top-ranked sites, you can get an idea of ​​the site speed for a specific keyword area. Also, by comparing the values ​​on your own page, you will be able to find out where your company is inferior to your competitors.

Ways to improve site speed

We have explained how to measure site speed and how to identify problems.

So how can we improve it? We will explain the following methods that are often suggested by PageSpeed ​​Insight.

• Compress text files and reduce file size
• Optimize image and video files to reduce file size and optimize display method.
• Delete unnecessary external files to reduce load time loss
• Set browser cache expiration time to reduce loading times
• Configure settings to load images according to scrolling to reduce the time it takes to complete loading.
• Utilize AMP to fundamentally improve page display speed
• Implement a CDN (Contents Delivery Network) to reduce loading speed for users

Improving site speed can range from something as simple as compressing various files such as HTML, JavaScript, and CSS to something as major as implementing a CDN (Contents Delivery Network). Regarding the order in which you should tackle tasks, PageSpeed ​​Insights displays items with poor performance and time that can be saved, so we recommend that you refer to these contents when considering the order.

Compressing text files

The following sites should compress their text files:

• FCP, LCP evaluation is not pass (green)
• CSS and javascript are not compressed
• An improvement item called "Enable text compression" was displayed in PageSpeed ​​Insights.

To compress a text file, follow the steps below.

• Specify gzip or eflate compression on a web server such as Apache *For
• rental servers, etc., add the deflate compression specification by writing it in .htaccess.
• Check for improvement with PageSpeed ​​Insights

If you have knowledge and skills regarding web servers, we recommend that you configure the settings above to compress text files.

If you're not familiar with servers, you can use a source code compression tool like JavaScript/Css Minify to compress your text files.

Optimization of image and video files

Sites that require image/video file optimization are those that fall under the following categories:

• Many pages use images and videos
• Image files and video files are being used at large sizes.
• Not using the srcset attribute used in img elements etc.
• PageSpeed ​​Insights shows an improvement item called "Appropriately sized images"

Specifically, the optimization of image/video files is performed using the following steps.

1. Match the number of vertical and horizontal pixels of images and videos to the number of vertical and horizontal pixels displayed on HTML
2. Reduce file size
3. Utilize modern image formats (WebP, AVIF, etc.)
4. Perform responsive image support (srcset attribute)
5. Check for improvement with PageSpeed ​​Insights

If you have specialized knowledge about web page production, please follow the steps above to optimize your image and video files.

If you don't have any specialized knowledge, use image editing software like Paint that comes with Windows to reduce the image size and compress the image file size. However, in recent years, the way images and videos are displayed on smartphones has become more complex, so we recommend that you ask a professional like a web page production company to do this.

Delete unnecessary external files

Sites that should be deleted are those listed below.

• FCP, LCP evaluation is not pass (green)
• Insufficient management of external files such as CSS and javascript
• An improvement item called "Minimize CSS" or "Minimize JavaScript" is displayed in PageSpeed ​​Insights.

To delete unnecessary external files, follow the steps below.

1. Identify unused external files or unnecessary lines
2. Delete unnecessary parts
3. Check for improvement with PageSpeed ​​Insights

For CSS, use a tool like Unused CSS to identify files and lines you don't need. However, if you try to delete CSS or javascript and delete the wrong file or location, the web page may not display properly .

Therefore, when deleting unnecessary external files, we recommend that you ask a professional such as a web page production company.

Set browser cache expiration date

The following sites should set the browser cache expiration date:

• The cache expiration period is not set or the period is short.
• PageSpeed ​​Insights shows an improvement item called "Static assets and efficient cache policy delivery"

To expire the browser cache, follow the steps below.

1.  Set the cache by specifying Expires (for web servers such as Apache) *For rental servers using Apache, add the cache Expires specification to .htaccess.
2. Check for improvement with PageSpeed ​​Insights

If you do not have the specialized knowledge or skills to configure the web server, or even the .htaccess settings, we recommend that you ask a professional, such as a web page production company, to do the work.

If you have the skill to edit .htaccess , please add the following description and set the expiration date of the browser cache.

Load images on scroll

Sites that should be formatted to load images according to scrolling are as follows.

• Many pages use images
• Not setting lazy loading for offscreen images
• PageSpeed ​​Insights shows an improvement item called "Lazy loading of off-screen images"

If you want to load images in response to scrolling, implement "lazyload.js" in the jQuery library. The setting method is as follows.

Lazy loading of images is relatively easy to implement, as it can be implemented by simply adding a class attribute to the img tag and configuring jQuery (JavaScript library).

Lazy loading is also possible with WordPress plugins. We recommend a plugin such as " Lazy Loader ".

Leverage AMP

AMP refers to a system that allows web pages to be displayed quickly on mobile devices.

By creating AMP pages based on AMP specifications, you can increase page speed. Google's crawler caches AMP pages, and when a user views an AMP page, the cached page is displayed, greatly improving page display speed.

The following sites should use AMP.

• I want to fundamentally improve page loading speed.
• I am using WordPress

The steps to create an AMP page are as follows.

1. Declare AMP HTML and create an HTML file marked up with dedicated AMP tags
2. Upload to web server
3. Google crawler caches AMP pages
4. Check for improvement with PageSpeed ​​Insights

A characteristic of AMP pages is that they require the creation and operation of two types of HTML files: regular HTML files and AMP-specific HTML files, which increases management costs.

If you are using WordPress, you can easily create an AMP page by using the " AMP " plugin, so when using AMP, we recommend operating it in conjunction with WordPress.

Pages using AMP used to have preferential SEO treatment, but this will end in April 2021.

Introduction of CDN

CDN (Contents Delivery Network) is a mechanism for quickly delivering website content. The following websites should install a CDN.

• The server is under load due to a large number of accesses concentrated at once.
• Want to maintain page display speed even when access is concentrated

Using globally distributed cache servers, rather than accessing the web server directly from a web browser, content is retrieved from cache servers in data centers that are physically and network-close. This reduces the load on your web server and increases the speed of your website.

The steps to install CDN are as follows.

1. Confirm usage environment (CNAME record settings, HTTPS communication specifications, etc.)
2. Checking what content is cached and what content is not cached
3. Check CDN settings and cache rules
4. Operation verification
5. Checking the DNS TTL value
6. Setting up DNS records
7. CDN distribution started
8. Check if it has improved with PageSpeed ​​Insights

When introducing a CDN, it is necessary to have a meeting between the server administrator and the CDN provider to confirm specifications, verify operation, and make various settings. When considering implementing a CDN, we recommend that you first consult with your company's server administrator.

summary

In this article, we explained why you should improve your site speed and how to measure and improve it.

Page speed has a small effect on Google search results, but it is closely related to bounce rate. Sites with high bounce rates tend to have low CVR. Therefore, you need to check if there are any problems with your site speed, and if there are any problems, you need to fix them immediately.

“PageSpeed ​​Insights” is recommended for measuring site speed.

Additionally, in order to improve site speed, you need to do the following:

1. Compress text files and reduce file size
2. Optimize image and video files to reduce file size and optimize display method.
3. Delete unnecessary external files to reduce load time loss
4. Set browser cache expiration time to reduce loading times
5. Configure settings to load images according to scrolling to reduce the time it takes to complete loading.
6. Utilize AMP to fundamentally improve page display speed
7. Implement a CDN (Contents Delivery Network) to reduce loading speed for users

Please refer to this article to deepen your understanding of the importance of site speed and how to improve it.