Page speed improvements and core web vitals essential for SEO

From the perspective of SEO and usability, the speed at which a web page is displayed is very important.
Here, we will introduce various tools and methods for improving the display speed of web pages from a bird's-eye view.

  • Avoid page speed and user churn by improving core web vitals
  • You can check the display speed and problem areas with the tool
  • Effective when reducing the amount of data and the number of communications

Importance of display speed

In 2012, Google announced that web page display speed is one of the factors that determine the display ranking in search results. The impact on the display order is small compared to factors such as external links, but the improvement in the display speed of Web pages is due to the reduction of stress on users, which improves the page migration rate and contract rate, and the reduction in server burden, which reduces operating costs. It brings various benefits such as reduction.

in general,Every time the display is delayed, the conversion rate and customer satisfaction decrease significantly, and more than 40% of users leave the web page that takes 3 seconds or more to display.It is said that. Optimizing the display speed will be particularly effective for access from terminals with slow communication speeds such as mobile terminals.

Also, understanding the topic of core web vitals, including page speed, is more effective for SEO measures.

What is Core Web Vital?

Roughly speaking, it's nice to be user-friendly if the page loads faster.

Core web vitals are important indicators related to the UX of web pages, and consist of three indicators: "LCP", "FID", and "CLS". Also, from May 2021, "Core Web Vital" seems to be officially a ranking factor for Google search. It is introduced as a "page experience signal" together with mobile friendliness and HTTPS.

From the SEO point of view, when there are multiple sites with similar content and content, this "core web vital" seems to be the final deciding factor for higher display.
The faster the page speed, the higher the ranking, so it is necessary to work toward SEO on a daily basis, but from now on, we will improve the core web vitals and repeat detailed work to prepare a better page. Let's go.
Explanatory image of core web vitals

What is LCP?

It means "drawing the maximum content" and is an index to measure the page display speed as recognized by the user. It refers to the time until the largest content is displayed within the display range of the browser.
The largest content is mainly the main content on the page, such as the image of the page, the initial display image of the video, and the element with the background image.
Numerical values are expressed in seconds, and the smaller the value, the better the UX. This is mainly the part that leads to the optimization of display speed, which I will talk about later.

What is FID

It means "first input delay" and is an index to measure the interactivity (reaction and interaction when clicking or touching with a smartphone) and reaction speed of the site that the user feels as a first impression.
Represents the time it takes for the browser to react to the user's first click, text, or action on the page.
Numerical values are expressed in milliseconds, and the smaller the value, the better the UX.

What is CLS?

It means cumulative layout change and is an indicator of the stability of visual elements.
The unique "Layout Shift Score" indicates how much the user has unintentionally shifted the layout.
Have you ever had such an experience?

・ If the page is displayed and you are reading it, images and advertisements will be displayed with a delay and the text will shift downwards and you will be asked "that?"
・ When I tried to tap a link, the banner or text of the link was misaligned due to an unexpectedly appearing advertisement, and I accidentally tapped the advertisement.

The idea is that the fewer such experiences the user has, the better.

How to check the display speed

There are many factors involved in the display speed of a web page, so what you should optimize depends on your website and environment. First, you need to use some tools to determine what the display speed is and what areas can be improved. Here are some tools to look them up.

Page Speed Insights

Explanatory image of Page Speed Insights
When you enter the URL,It checks the factors that cause the display speed to slow down and scores it.It's a tool (https://developers.google.com/speed/pagespeed/insights/). You can also test compatibility with smartphones. However, since you cannot confirm the specific display time, it is a good idea to use it to get a rough idea of the current situation.

Google Search Console

Explanation image of CWV index seen in the search console

You can check the improvement indicators by opening the report from the "Main indicators related to the web" column of the search console.
Check it out here along with Page Speed Insights.

Google analytics

You can also check the display speed of the web page with Google Analytics, an access analysis tool. Click "Behavior"-> "Site Speed"-> "Page Speed" to clickYou can see how many seconds it took on average to display each page..

Pingdom Website Speed Test

You can see which resources were loaded and how long it tookTools (http://tools.pingdom.com/fpt/). As a result, you can consider file compression and resource optimization.

GTmetrix

Investigate where the display speed bottleneck is in more detail than PageSpeed InsightsIt is a tool (https://gtmetrix.com/). You can also check the improvement items on the server side such as browser cache and resource compression in detail.

How to optimize display speed

There are two main concepts for speeding up Web pages: speeding up on the front end side and speeding up on the back end side.

The front end in SEO is the part related to displaying a web page in a web browser such as HTML, CSS, and JavaScript.In the front end area, anyone who can write HTML to some extent can speed upOn the other hand, the backend, which means the server side, requires some expertise in the server. Therefore, in this document, we will focus on speeding up on the front end side.

Reduction of communication with the server

Opening a web page means downloading data from the server. Of course, the smaller the amount of data, the better the display speed can be expected.

The easiest way to reduce data is to compress image files. There is a tendency to worry about the deterioration of image quality due to compression of image files, but ordinary image files often contain data with unnecessarily high image quality on Web pages. By compressing this unwanted data, you can save a lot of data. Moreover,Data can be effectively reduced by compressing the image to the extent that it is invisible to the human eye... A tool called "Kraken.io (https://kraken.io/web-interface)" is useful for reducing such data.
Explanatory image of a tool called Kraken.io

In addition to HTML, CSS and JavaScript can also reduce unnecessary data. In particular,You can reduce the amount of data by removing unnecessary line breaks and indents.

Reducing the number of communications with the server

When a web page is displayed, there are as many communications with the server as there are files to open. Specifically, there are as many communications as there are files such as HTML, images, CSS, JavaScript, that is,If you reduce the number of communications by collecting or reducing the number of files, you can expect an improvement in display speed.It means that.

As a concrete improvement method, first, put together small CSS and small JavaScript in HTML without externalizing. You can also reduce the number of files by using a technology called "CSS Sprite" that combines multiple icons into one image and displays the coordinates of each icon by specifying them with CSS.

Improved loading order of CSS and JavaScript

The display speed of a web page also depends on the order in which CSS and JavaScript are loaded. For example in HTML If JavaScript is described in the tag, the subsequent HTML description will not be read until the JavaScript processing is completed.

in this case,<body>Close tag</body>By placing the JavaScript description just before, it is possible to execute the JavaScript process after displaying the content.
The final time it takes to download the entire web page remains the same,Effective measures because the display speed experienced by the user differs greatly depending on whether the content is displayed after the JavaScript processing is completed or the content is displayed before the JavaScript processing is started.is.

However, in the order of reading, such as the code used for access analysis and the JavaScript used for reading data in the HTML code.
There are some JavaScripts that have problems, so be sure to check the operation thoroughly.

Image format optimization

Image optimization is essential for speed improvement.
Speaking of image formats, "jpg", "png", "gif", etc. are typical, but recently, next-generation image formats have appeared, such as "Webp", "JPEG 2000", and "JPEG XR". It is a target. It is possible to reduce the weight by nearly 30% compared to the past, and it is attracting attention, but at the moment "Webp" because "JPEG 2000" and "JPEG XR" have the disadvantages that the number of compatible browsers is still small and the processing speed is slow. Seems to be the easiest to handle.

In the coding part, I think that it is difficult to start improvement, but it is not so difficult to convert the image format, and I think that it is most likely to appear in the improvement of the index, so it is a free tool.squooshPlease convert the image using such as and try to correspond.

Kazuhiro Nakamura
Kazuhiro Nakamura
Representative of Cocorograph Inc. 13 years of SEO history, more than 970 sites with countermeasures. We provide SUO, an upward compatible service of SEO that optimizes not only search engines but also search users. SEO / SUO's original report tool, Sachiko Report Developer. Book "The latest common sense of SEO taught by professionals in the field"
Kazuhiro Nakamura
Kazuhiro Nakamura
Representative of Cocorograph Inc. 13 years of SEO history, more than 970 sites with countermeasures. We provide SUO, an upward compatible service of SEO that optimizes not only search engines but also search users. SEO / SUO's original report tool, Sachiko Report Developer. Book "The latest common sense of SEO taught by professionals in the field"

What is written on this page

When it comes to web marketing
Please feel free to contact us

cocorograph inc.
〒150-0002
Miyamasuzaka Building 203, 2-19-15 Shibuya, Shibuya-ku, Tokyo
mail: [email protected]
tel: +81-50-1748-9550
url: https://cocorograph.co/

© 2021 cocorograph Inc.