7 Ways to Improve Website Display Speed

7 Ways to Improve Website Display Speed
Slow website display speed can cause search users to leave the site quickly. 

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.

Relationship between SEO and display speed

Website display speed affects SEO in several ways.

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">  

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.


    <div id="player"></div>
      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

    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

    While web fonts are being downloaded, text is not displayed, making the display speed look slow.

    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+xml

    7. 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 A600


    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.