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
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
Avoid landing page redirects
No changes required as the website did not have any redirects.
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.
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
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.