Since Google has added "page display speed" as a search ranking factor, improving display speed is one of the internal SEO measures.
This article explains how to improve website display speed.
First, page display speed is used as a ranking signal by Google. The Core Web Vitals signal, which includes indicators such as site display speed (LCP) and user interaction delay (FID), began applying around June 2021.
In other words, sites that display too slowly are affecting search rankings.
Second, there is an impact on the crawler's site patrol. Sites with slow display speeds cannot be crawled efficiently by Google.
As a result, it takes longer for new or updated pages to be reflected in search results.
Third, it affects the site's mobile-friendliness; if a timeout occurs when retrieving CSS and other information, the site may be judged to be not mobile-friendly.
Thus, improving display speed is an important search engine measure.
Measures to improve website display speed
To improve display speed, reduce image and video file sizes and compress network transfer data.
1. Reduce image file size
2. Reduce video file size
3. YouTube player embedded with Iframe Player API
4. Load images as the screen scrolls
5. Display text even before downloading Web fonts
6. Compressing files on the server
7. Enable browser cache
1. Reduce image file size
Optimize the file size of JPEG and PNG images.
Image data accounts for more than 90% of network transfers
Images are the most data-intensive of the various files used on a website. Therefore, reducing image size can significantly reduce network transfers and improve page loading speed.
In addition, images have the property that their file size varies greatly depending on the file format, compression ratio, and height and width.
Reducing File Size with Image Optimization Tools
Image optimization tools can reduce the file size of JPEG, PNG, and GIF images by up to 90%. The online tool compressor.io is useful. In particular, prioritize reducing the file size of logos and main visuals that appear in the first view.
Online image optimization tools such as Reduce Images are helpful.
Converting Animated GIFs to Video
Turning a video into an animated GIF slows down the loading process. To convert from GIF to WebM format, ffmpeg is useful.
2. Reduce video file size
The cause of the slow loading of videos is mainly files size. Compress the file size by reducing the bit rate of the video. You can also reduce the file size by using WebM format for the video format.
MP4 videos can be lightened by bitrate reduction.
The higher the bit rate of a video, the higher the quality and the larger the file size. Reducing the bit rate can make video files lighter.
MP4COMPRESS is a convenient online tool for reducing the weight of MP4 videos: upload your MP4 file, and it will compress the video file without any complicated settings.
WebM format is more effective in compression than MP4 format
WebM format is a new video format developed by Google and boasts a higher compression ratio than MP4 format. The file size reduction varies from video to video but can be up to 90%.
Since videos are tens to hundreds of times larger than images, the improvement in display speed resulting from the reduction in network transfer volume is exceptionally significant.
Delivering WebM/MP4 with the video-tag
WebM format is recommended when distributing videos from a website rather than YouTube.
Use a video converter to convert from MP4 to WebM format; Convertio is a good tool for converting to WebM.
Most browsers support WebM format, but Safari and IE do not support it. Therefore, It deliver two types of videos: WebM format and MP4 format.
In HTML, two video files, one in WebM format and one in MP4 format, are specified in the source tag within the video tag.
Then, WebM format will be played on browsers that support WebM format, and MP4 format will be played on browsers that do not support WebM format.
<video autoplay loop muted playsinline>
<source src="movie.webm" type="video/webm">
<source src="movie.mp4" type="video/mp4">
</video>3. YouTube player embedded with Iframe Player API
Delivering video in an iframe will slow down the display speed.
Using the Iframe Player API and JavaScript code when embedding YouTube videos on a page.
Example
<div id="player"></div>
<script>
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
width: 640,
height: 360,
videoId: 'VWQWWhDTQt4'
// YouTubeビデオID
});
}
</script> 4. Load images as the screen scrolls
Only load images that are within the screen of the web browser.
Browsers load all images that are off-screen as well
Web browsers load all image files, including off-screen images, in positions that cannot be seen without scrolling. It is why loading does not finish quickly, or screen operations are slow when a page is opened.
Load only the images that are on the screen.
Images can be "lazy-loaded" to improve display speed. Lazy loading" means that only the images on the browser screen are loaded from the server. The images are displayed softly when the page is scrolled.
To perform lazy loading, install the library "Lazy Load."
In WordPress, you only need to insert the plugin "Lazy Loader."
5. Display text even before downloading Web fonts
Suppose you specify the font-display: swap property in CSS. In that case, the text will be displayed even before the web font is downloaded.
When using Google Fonts, add the display=swap parameter to the web font URL.
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap" rel="stylesheet">6. Compressing files on the server
Change the server settings to compress HTML, CSS, and JavaScript for transmission.
Text files can be compressed on the server.
Text files such as HTML, CSS, JavaScript, and SVG can be compressed on the webserver side using a compression format called gzip.
For example, the size of HTML can be reduced by 90% to 95%.
The reduced amount of data transferred from the server to the browser improve display speed.
Configure gzip compression on the server-side
Modify the server configuration to compress text-format data before sending it.
For Apache, enable the mod_deflate module and write the following.
Example: To compress HTML, CSS, JS, SVG
AddOutputFilterByType DEFLATE text/html text/css text/javascript application/javascript image/svg+xml7. Enable browser cache
Set the browser cache validity period in the Cache-Control/Expires header to reduce the number of communications with the server.
Communication with the server occurs for file update checks.
Resource files such as images and CSS are stored in the browser cache.
When using the saved cache files, communication occurs to check again whether the files on the server have been updated.
It is noticeably slower on pages with many image files.
Set the validity period for the browser cache in the Cache-Control header
You can set the validity period of the browser cache by changing the webserver settings to send Cache-Control/Expires headers.
Example: Apache sets the expiration time for PNG/JPEG/SVG files to 10 minutes
ExpiresActive On
ExpiresByType image/png A600
ExpiresByType image/jpeg A600
ExpiresByType image/svg+xml A600Summary
Google provides PageSpeed Insights to measure page display speed.
This tool gives you a score of the display speed, so you can check whether the display speed has improved or not by using the score.
To learn more about SEO, check out the post below.
