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
What is written on this page
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.
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
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
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.
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.
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.
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.
Reducing the number of communications with the server
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.