I have a small business website owner who was not happy with the page loading speed of their website approach me to see what I could do to make it load faster. When I tested their website using the Google PageSpeed Insights tool, I found that their website scored 43 for mobile and 46 for the desktop. Getting a good Google PageSpeed Insights score is very important for your Search Engine Optimization and for your visitor experience. In a recent study on the impact of page loading speed, Google reported that 53% of visitors to a mobile website will leave if the page does not load within three seconds. 70% of the web pages Google tested took over seven seconds to load the content referred to as above the fold content (what the visitor first sees on their screen without scrolling). In their testing, when page loading speed was greater than five seconds, bounce rates (visitors leaving the website) increased 90%!

Use Google PageSpeed Insights

The Google PageSpeed Insights tool tests ten areas and provides a score (based on 100 points for a perfect score) for both desktop and mobile renderings of your web page. The ten areas are:

1. Avoid landing page redirects

2. Enable compression

3. Improve server response time

4. Leverage browser caching

5. Minify resources

6. Optimize images

7. Optimize CSS Delivery

8. Prioritize visible content

9. Remove render-blocking JavaScript

10. Use asynchronous scripts

Fix the highlighted issues

The Client’s website used WordPress as the content management system and had installed a popular theme. Here is how I helped my new client improve the performance of their website. The first thing I did was create a child theme so that I wasn’t changing the core WordPress files or the core theme files. Creating a child theme meant that future updates to WordPress and the main theme would not overwrite any changes I implemented. Here are the areas I made changes to (note that some are technical in nature).

Solutions for problem areas 

PageRank Area

Action Taken

Avoid landing page redirects

No changes required as the website did not have any redirects.

Enable compression

Added Gzip to the website server. This compresses each page before sending to the visitor’s web browser. Most website hosts allow adding compression.

Improve server response time

This step required moving the client’s website away from shared hosting and onto a Virtual Private Server. The move cost a little more than shared hosting but the speed results were instantaneous.

Leverage browser caching

Added caching headers to the web server. This step requires access to the actual VPS but once installed, there is no need to change the caching. There are plugins available for WordPress but I found that the results vary.

Minify resources

Most website programmers write code in nice blocks that are easy for people to read. Web browsers don’t care how the code is laid out. Google lists several resources for minifying HTML, CSS, and JavaScript. In addition, minify your code before uploading to the web server.

Optimize images

This is the one area where a website can gain significant speed increases. Ensure all images are cropped to the correct size. Change to image dimensions to the maximum size required. Also, remove extra information from the image file (such as EXIF metadata). I use a combination of Photoshop and ImageOptim on all images before uploading.

Optimize CSS Delivery

This required separating the CSS file into two distinct parts. The first part contained CSS code for above the fold elements. I directly embedded this code into each website page (in the header file). The remainder of the CSS was loaded as per below.

Prioritize visible content

The above the fold content (and required CSS and JavaScript) were placed inline on each page. This made the pages load quickly (they did not have to wait for the full external files to load).

Remove render-blocking JavaScript

This also required a two-part approach. First, I removed all links to JavaScript files from the head area of each page and placed them in the foot area. Second, I lazy loaded the JavaScript files (using a technique published by Google).

Use asynchronous scripts

No changes were required in this area.

Obtain better page speed scores

With all the changes implemented, the website score increased to 98 for mobile and to 98 for the desktop. The client was very happy with the page speed results. Also, the client saw a reduction in the bounce rate (the bounce rate dropped from 90% to 60%). They still have to work on their content and keyword SEO.

Check the page speed of your website using the Google PageSpeed Insights tool. Follow the recommendations provided on the rules page to help speed up the page loading time of your website. Not only will you receive a better ranking on search page results, but your website visitors will appreciate your fast loading website. This is a win-win situation.

Share This