How to improve page load performances with the Customizr Theme ?

Introduction

A website with a fast page load will give your user a good browsing experience. User will be less likely to visit your website again, if your website takes too long to load. Improving site speed will also save your web hosting resources and in turn saves on cost.

For Impatient Web Users, an Eye Blink Is Just Too Long to Wait. Source : NY Times

Some Facts to keep in mind :

One second late loading cost for Amazon is $1.6B(Source)
In 2009 Amazon demonstrated that every 100 milliseconds of latency which occurred on their website will result in a 1% loss in sales.Which means, every second of latency will cost Amazon approximately 10% of revenue!
An interesting study by Walmart, showed that every second of improvement in their website loading time would increase conversion by 2%.
Tagman found that every second of delay in page loading time can result in a 7% decrease of online sales.
Website loading time influences your Search Engine traffic too; Slow sites rank lower(Source)
Website page load speed is one of the official Google criteria in Web Search Ranking.

In this documentation, we will discuss about how we can increase your website page load using some simple tools and settings in your Customizr Theme.

How to monitor the page load performance ?

There are a few online web service that let's you enter your website url to test your website loading speed.
The following are a list of the web services.

Carry out the Page Speed test

For this documentation, we have chosen GTmetrix.

Navigate to GTmetrx
On the GTmetrix website, you will see an input for your to enter you website URL.
Enter your website URL and click on the Analyze Button.
Wait for your result.

The following is a screenshot of the analyze result of our test site's homepage page load speed. This is taken right after setup and without any measures taken for improving page load speed.

You can see the PageSpeed Score is B (82%) and YSlow Score is A (91%). These are actually within acceptable range, but we can carry out some steps to further improve the ratings.

The total page size is 1.73 megabytes which too high. As a rule of thumb, try to keep your webpages below 1 MB.

The following simple steps will help us achieve some better results.

First Steps

The following are some basic steps to improve your page load speed.

Optimize your images

1) Scale and compress your images before upload

Nowadays, we have very good image capturing devices and the image captured are often high quality and in very large file sizes. For the web, you need to avoid loading unecessary bytes, therefore one of the most effective ways to improve your site speed is to optimize your images.

Scale your image : recommended maximum dimensions

For the Customizr theme, I would recommend a maximum width of 1200 pixels for your image. Wider image will just be too large for most of the devices. See the Customizr image sizes.

Use the right image format

JPEG/JPG : for photos of things, people, places
PNG : for screenshots
GIF : for animations

Compress your image files : We can use online image compression tool or computer softwares, to reduce the file size but not the image quality :

tinyPNG. The best, I use it everyday, it works for png and jpeg format
Pixlr – A free online tool that works great for minor formatting.
Paint for Windows
Preview for Mac

Typically, large high quality images should be kept between 100K and 60K. source : Image sizes and quaity on WordPress.org.

2) Regenerate your images for your current theme's various image sizes

Each WordPress theme defines specific image sizes that will be used in various contexts. Each time you upload an image to your media library, WordPress generates in the background all the theme required sizes, for example in Customizr, it will generate an image with the silder dimensions, the post thumbnails dimensions, etc.

When you switch from one theme to another, all your previous images are not automatically re-generated. So you may have many images with wrong dimensions. The simple solution to avoid this problem is to use the excellent and free pugin called : Regenerate Thumbnails.

Limit numbers of Plugins installed

The number of plugins installed will also affect the page load speed.

Plugins has their own scripts and style files, loading them requires communication between your web browser and web server. The time taken for communication between browser and server depends on your web server processing speed as well as location of the file. If your plugin is loading content from a third party website, it may take even longer.

Therefore, reducing number of plugins installed will definitely improve your page load speed.

Basic Customizr theme settings

In the Customizr Theme, there are some settings for improving your page load speed.

Login to your WordPress Admin. Go to -> Appearance -> Customize -> Advanced options -> Website Performances
You will see the following settings.
Performance : use the minified CSS stylesheet. Check the check box.
This setting will load a minified (compressed) version of your skin stylesheet, which is much smaller in size compared to original version.
Load images on scroll. Check the check box.
This setting will delay the loading of non visible images. Images below the viewport (computer screen) will be loaded dynamically on scroll. This can boost performances by reducing the waiting time of webpages that has a long list of images.
Click on Save and Publish button.

Page Speed test after Basic Steps and Settings

After going through the above recommended basic steps and settings, we will do another page speed test using GTmetrix on our test site.
The following screenshot shows the improved results.

You can see the PageSpeed Score currently is A (95%), that's a great improvement!

Advanced settings : using a WordPress cache plugin

After you have carried out the above recommendations on your website, and your PageSpeed Score is still not within the A (90% to 95%) range.
For further improvements, you may want to try out the following free cache plugins from WordPress Plugins Repository.

In the next chapter, we will look at How to setup W3 Total Cache with the Customizr theme.