Fix slow Website loading time using Google PageSpeed Insights

Go to the profile of  CloudResources
CloudResources
4 min read
Fix slow Website loading time using Google PageSpeed Insights

Have you ever feel your website page loading very slow and you don't know what the problem is? Is there any way to find out what is the problems? Actually, one of the methods is to use Google "PageSpeed Insights". The tools check your website and point out the suspect components.

What items are covered by this article

  1. Generate report from PageSpeed Insights
  2. Compress images or replace by other format image
  3. Reduce fonts size
  4. Remove unused or slow execution time javascript

Generate report from Google PageSpeed Insights

Go to Google PageSpeed Insights. Input your website domain and click "Analyze"

Wait a moment, you can check the results. It show the Mobile or Desktop score when user access your website.In this Website, the score within yellow color range. There is big potential to improve website loading speed by the suggestions of "PageSpeed Insights". Let's get started.
Mobile score

Desktop score

From the result, slow page loading time show as below.
pagespeed_opportunities-1

Tunning this part should have a great improvement. By expanding the result list, it shows the large images size cause slow loading time. There are two methods for the improvement.

  1. Minimize images size by compression
  2. Replace transparent image to a Non-transparent format (png to jpg)

This website mainly use png images, thus let's go for first method. Firstly, find out the images location by moving mouse cursor to the image links. By reducing images, use this free tools (pngquant) for the compression. You can use any other compression softwares (e.g. FarStone Image Viewer), the purpose is to decrease images size.

Compress images or replace by other format image

(Method 1) Command line images compression using pngquant

Install pngquant

  1. Login the server
  2. Type yum install pngquant to install the package

Convert images by pngquant command

Type pngquant -h to get more options before using this command if need.

  1. Go to the images location folder

  2. Type command pngquant -f -v --ext .png *.png

    • This command will reduce images with extension png and replace original file

pagespeed_images_compression-1

  1. Once completed,let's see the compression result. Images size reduce significantly.

Images compression result

Let's re-run "PageSpeed Insights". Obviosly, the score increased mean the performance has improved.

See the result
After compression score

Compress the images automatically

You may feel doing images compression task manually every time is very annoying. Actually, you can setup schedule job run conversion daily.

  1. Create bash script (/opt/pngquant_compression.sh)

Below is sample bash script

#!/bin/bash

# Change below images folder location as you need
cd /var/www/html/site/images

# This will compress all subfolders with image extendsion .png
find . -name '*.png' -exec pngquant --ext .png --force 256 {} \;
  1. Change script permission
    chmod 755 /opt/pngquant_compression.sh

  2. Setup Cron job (schedule)
    crontab -e

0 23 * * * /opt/pngquant_compression.sh

(Method 2) FarStone image Viewer

FarStone image Viewer is a windows photo viewer program. However, user can use it to convert the images from png to jpg.
Click "Tools" -> "Batch Convert Selected Images"

Faststone conversion

From below screen, right side is input files (PNG), left side is converted output files (JPG). Files size have decreased obviously. By replacing png with jpg files, page loading time must has big improvement.

From PNG to JPG

Reduce fonts size

Beside images compression show above, from the report of "PageSpeed Insights". Webfonts spend much time when website loading. Anything can improve it?
Pagespeed Diagnostics

Using Webfont Generator can reduce the size of fonts.

  1. Access Webfont Generator
  2. Click the "Upload Fonts" button, check the agreement and download your fonts.
    Upload webfont
  3. Download the compressed zip
  4. Unzip the file and replace your website fonts
    Download compressed font

Remove unused or slow execution time javascript

Identify the slow javascript

By checking the diagnostics report, click "Reduce Javascript execution time". It shows the large Javascript payload items that help judging what should provide and best browsing experience to your audience. For this site, removing Google Ads related Javascript code will help a lot.
Javascript payload

Remove google ads code if not necessary

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({
          google_ad_client: "ca-pub-14903921",
          enable_page_level_ads: true
     });
</script>

Improvement after Google PageSpeed Insights suggestion

Re-execute "Google PageSpeed Insights", the score increase obviously. Page loading time improved so much. Performing Pagespeed Insights suggestion periodically, it keep your website with good browsing experience and fast loading page. One third party service can generate weekly optimization report from Google search engine and send email to you automtically.

Pagespeed finalscore

Final score comparison

Mobile Desktop
Before PageSpeed Insights 61 87
After PageSpeed Insights 75 97