WordPress Website Speed Optimization

 

Why you should optimize website speed?

A slow landing page can negatively impact your conversion rate, bounce rate, Adwords quality score and above all conversions. Page speed is now officially a Google ranking factor. So it can also negatively impact your search engine rankings.

 

Determine your current website Speed

Before you start website speed optimization, you need to know the current website speed.

You can determine your current website speed through a tool known as Google Page Speed Insight:

google page speed insight

Note: Make sure that you clear all the browser caching before using this tool.

Page Speed Insight is an online tool, through which you can determine the page speed score of a web page and get suggestions regarding optimizing the speed of the page.

Higher the page speed score, faster your page will load. Your aim should be to get your page speed score, as close to 100 as possible. A good page speed score is the one which is above 80.

Google show page speed score of your website, for both mobile and desktop devices.

Another good tool to determine the website speed and get page speed suggestion is gtmetrix:

gtmetrix

This tool provides different kind of insight about optimizing the website for speed.

 

Site speed reports in Google Analytics

Google Analytics also provide various reports (called Site Speed Reports) under the ‘Behavior’ menu through which you can determine, which landing pages of your website are slowest and how page load time varies across browsers and geo-locations:

site speed report2

These reports also show page speed score and provide suggestions for improving page speed:

site speed report

 

Commonly used Jargons in Website Speed Optimization

Following are some terms which are frequently used,while optimizing a website for speed:

Page Rendering– It is the process of generating a page from the database.

Parsing – It is the process of analyzing and execution of a code. For e.g. parsing of javascript.

Caching- To speed up web surfing, browsers store copies of recently accessed web documents (html files, images etc) of a site on a user’s hard disk. If the site is revisted the browser uses the stored copies to display web pages instead of requesting them from the server.

Round-trip time (RTT) – It is the time it takes for a browser to send a request and the server to send a response over a network. It doesn’t include the time required for data transfer.

Static Resources– A web resource can be either static or dynamic. CSS files, image files, Flash (SWF) files and Java script files are some examples of static resources.

Minify– It means reducing the size of a file by removing extra spaces, commas, link breaks, code comments etc from the file. For e.g. minify CSS, minify HTML, minify Java Script etc.

 

Website Speed Optimization Objectives

A website speed is optimized with following objectives:

#1 Reduce the size of html files, image files, CSS files, XML files and java script files wherever possible.

#2 Reduce blocking of page rendering wherever possible.

#3 Enable better parallelization of downloads wherever possible.

#4 Minimise HTTP requests wherever possible.

#5 Minimise DNS Lookups wherever possible.

 

Eliminate render-blocking JavaScript and CSS in above-the-fold content

eliminate render blocking

When you have got blocking resources (blocking JavaScript or CSS) on a page, it causes a delay in loading your web page. You can remove render blocking JavaScript and CSS in above the fold content by using a plugin called Autoptimize

Once you have installed the plugin, go to its advanced settings and then check the following checkboxes:

  1. ‘Optimize HTML code’
  2. ‘Optimize Javascript code’
  3. ‘Optimize CSS code’,
  4. ‘Remove Google fonts’
  5. ‘Also aggregate inline CSS’,
  6. ‘Save aggregated script/css as static files’
  7. ‘Inline all CSS’

Uncheck all other check boxes.

 

# Prioritize visible content

prioritize visible content

The plugin ‘Autooptimize‘ that I use for eliminating render blocking, also help me in fixing this issue. Minifying static resources (HTML, CSS, JavaScript files) and enabling compression also help in fixing this issue.

 

# Optimize Images

optimize images

One of the biggest reason of slow website speed, is the size of the images being hosted. Use the wordpress plugin wp-smush to reduce the file size of all the existing images on your website.

This plugin can reduce the file size, without reducing the image quality. Thus images are loosely compressed.

It has got a feature called ‘Smush in Bulk‘ which can compress the size of large number of images in one go. It also automatically compress, any new image you upload.

 

# Avoid landing page redirects

avoid landing page redirect

#1 Minimise the number of redirects from one URL to another. Redirects trigger additional HTTP requests and slowdown a website.

#2. Avoid redirects chain like web page A redirects to web page B and web page B then redirects to web page C. Instead, redirect both web page A and web page B, to web page C or better redirect page A directly to page C.

#3 Use server side redirects (301, 302) over client side redirects (meta refresh, JavaScript redirect through window.location object). Browsers can handle server side redirects more efficiently than client side redirects.

 

# Reduce Server Response Time

reduce server response time

Server response time measures the time it takes to load the necessary HTML to begin generating a web page from your web server. Google recommends to reduce your server response time under 200 ms.

Following tips can help you in reducing server response time:

#1 Use WordPress cloud hosting

There are many hosting providers out there who are specialized in wordpress hosting and which provide cloud hosting. The web host you use, has great impact on server response time which impact website speed.

#2 Make your wordpress theme light weight and responsive

The wordpress theme you use on your website has great impact on website speed. One way of making your wordpress theme lightweight and responsive is by converting it into a Genesis child theme.

Genesis is the most widely recommended wordpress theme framework.

#3 Always use the latest and most stable version of PHP

I would suggest 5.6 for the moment although version 7 is also available. Using old PHP version (like 5.3) not only expose your website to security vulnerabilities and bugs but also slow down your website.

Ask your web host, which version of the PHP you are using and if it is not at least 5.6 then ask them to upgrade the PHP version to 5.6

#4 Always Use the latest version of WordPress

Each new release of wordpress: enhance website security, fix existing bugs and improve the performance of the website itself. When you use outdated version of wordpress, it can create compatibility issues with existing/new wordpress plugins/theme and can really slow down your website.

The latest wordpress version almost always have, much more efficient code which can speed up downloading, parsing, and execution time and can solve lot of CMS issues, you are facing at present.

#5 Always Use the latest version of all the WordPress plugins

Each new release of a wordpress plugin: enhance website security, fix existing bugs and improve the performance of the plugin itself. An outdated plugin can create compatibility issues with your website and slow down the website speed.

#6 Regularly clean up your database

Overtime your wordpress database generate overheads like: spam and unapproved comments, unused comment metadata items, post revisions, trash posts and comments etc. All these overheads negatively affect the website speed and therefore need to be removed.

You can remove these overheads through a plugin like WP-Optimize. This plugin has got backup and restore functions which you can use. It allows you to schedule cleanups and backups, making database clean up, a lot less of a worry.

#7 Minimize the use of plugins

More wordpress plugins you will use, slower will be your website speed. Remove all the unused plugins. Even deactivated plugins can negatively effect the website speed. Use a plugin only when it is absolutely necessary.

#8 Minimize the use of Widgets

More wordpress widgets you will use, slower will be your website speed. Use a widget only when it is absolutely necessary. 

#9 Remove all unused themes

There are many wordpress websites which use one or more unused themes. All such themes negatively effect the website speed. Delete them.

#10 Disable comment panel

WordPress comments slow down page load time a lot. The more comments you receive on a blog post, the longer it will take for the page to load. If you don’t want to disable comment panel, then show comments to a user only when he/she clicks on a button say ‘view comments’ button.

#11 Delete all unused files from your web server

There could be quite a lot of files (esp. image files) in your public_html and wp-content folders that may not be, being used. All these files negatively effect the website speed. 

#12 Use a Content Delivery network

Content Delivery Network (CDN) is a network of web servers, with each server located in a different geographic location.

Each server stores a copy of your website files (html, CSS, JavaScript etc). So when a visitor to your site request a web document, the document is served from the web server which is nearest to the visitor’s loaction or which is not experiencing high load.

CDN allow website users to download your website as fast as possible. I use cloud flare. It is a free global CDN provider which can significantly speed up your website

 

# Leverage Browser Caching

leverage browser caching

Set an expiry date in the HTTP headers for all static resources (CSS, images, html and JavaScript files). In this way you can instruct the users’ web browsers to use and load previously downloaded resources from users’ hard disk rather than over the network.

When you set an expiry date in the HTTP headers for static files, you make all these files cacheables.By making the files cacheable, you reduce the load time of your website on users’ return visit.

I use the ‘Browser Cache Expiration‘ setting of my CDN ‘cloudflare’ to make all static resources cacheable:

browser cache expiration

To manually make all static files cacheables, for up to say a month, add the following code in your .htaccess file:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On

# Expires after a month client accesses the file

ExpiresByType text/css “access plus 1 month”

ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
ExpiresByType image/ico “access plus 1 month”

ExpiresByType text/javascript “access plus 1 month”

ExpiresByType text/html “access plus 1 month”

ExpiresByType application/pdf “access plus 1 month”

ExpiresByType application/x-shockwave-flash “access plus 1 month”

ExpiresByType image/x-icon “access plus 1 month”

ExpiresDefault “access plus 1 month”

</IfModule>
## EXPIRES CACHING ##

If editing your .htaccess file is too much for you, you can use a caching-plugin such as e.g. WP Super Cache

 

# Enable Compression

enable compression

You can enable compression by compressing all the CSS, JavaScript and HTML files on your website.

In this way, you can greatly reduce their size and thus can significantly increase the website speed. All you have to do, is to add, the following code in your .htaccess file:

# BEGIN Compress text files
<ifModule mod_deflate.c>
<filesMatch “\.(css|js|x?html?|php)$”>
SetOutputFilter DEFLATE
</filesMatch>
</ifModule>
# END Compress text files

You can also use a compression algorithim like GZIP to compress files. To use GZIP, all you need to do, is to add the following line of code at the very beginning of your header template file (before <!DOCTYPE html PUBLIC……..):

<? ob_start(“ob_gzhandler”); ?>

 

# Minify CSS, HTML and JavaScript

minfiy css html javascript

CSS, JavaScript and HTML files can have thousands of lines of code. Each extra tab, space, comma, line break & code comments adds to the file size and slow down the website speed.

Compacting the code can save many bytes of data & speed up downloading, parsing, and execution time. You can expect a 20-30% saving on average. You can easily minify all the JavaScript, CSS and HTML files of your website by using a CDN to deliver your website documents (html, CSS, PDF, images etc).

I use cloudflare which can also minify all the JavaScript, CSS and HTML files of my website through its ‘auto minify‘ settings:

auto minify

 

Tips for further optimising CSS for speed

#1. Combine external style sheets into as few files as possible 

This helps in minimizing the HTTP requests which in turn cuts down on RTTs (Round Trip Time) and delays in downloading other resources.

#2. Enable parallel downloads of CSS files

Parallelization of downloads speeds up browser rendering time. To ensure CSS files are downloaded in parallel always include CSS files before JavaScript files in your HTML code. For e.g.

….
….
<link href=”/Assets/Css/Site.css” rel=”stylesheet” type=”text/css” />
<link href=”/Assets/Css/Form.css” rel=”stylesheet” type=”text/css” />
<script type=”text/javascript” src=”/Assets/Scripts/Menu.js”></script>
<script type=”text/javascript” src=”/Assets/Scripts/Utils.js”></script>
….
….

#3. Don’t use CSS import in an external stylesheets

as then web browsers are not able to download stylesheets in parallel which results in additional delays, during the loading of a web page.

CSS @import is used to import other stylesheets in an external stylesheet.

For e.g. site.css can contain following code: @import url(“form.css”)

Instead of @import, use a <link> tag for each stylesheet. This allows the browser to download stylesheets in parallel, which results in faster page load times. For e.g.

<link rel=”stylesheet” href=”site.css”>
<link rel=”stylesheet” href=”form.css”>

#4. Inline Small external CSS files

If a CSS file contains small amount of CSS code then inline it i.e. use inline CSS. This can reduce HTTP requests and reduce the load time of a page. To use inline styles, use the style attribute in an HTML tag.

The style attribute can contain any CSS property. For e.g.



<p style=”color:black;margin-right:11px”>paragraph.</p>

#5. Put CSS in the document head

Move inline CSS and external CSS files from the document body to the document head. Browsers block rendering a web page until all stylesheets have been downloaded. By moving CSS in the document head you can make them parsed quickly by a browser. This helps in reducing the load time of a page.

#6. Don’t use CSS Expressions

Through CSS expressions you can set CSS properties dynamically.

The problem with CSS expressions is that, first they work only in Internet Explorer and secondly they are executed more frequently than any other component like JavaScript. They are evaluated each time the page is rendered, resized, scrolled or when a user moves the mouse over the page. Following is an example of CSS expression:

#myDiv {
position: absolute;
width: 250px;
height: 250px;
left: expression(document.body.offsetWidth – 100 + “px”);
top: expression(document.body.offsetHeight – 100 + “px”);
background: blue;
}

 

Tips for further optimising Images for speed

#1. Remove unnecessary space around your image. This reduced the image size and eventually the load time of the pages on which the image is used.

#2. Specify width and height of all the images in the HTML code for faster rendering of the page.

#3. Save images to appropriate file format usually the one which results in more saving (jpeg or png).

#4. Serve scaled images only when the actual image size matches at least one. Otherwise don’t serve scaled images in HTML. It means don’t use a bigger image than you need.

For e.g. if your image is 700X500px and you need only 300X200px image then don’t use ‘width’ and ‘height’ properties of img tag to scale down the image to 300X200px:<img width=”300″ height=”200″ src=”google.jpg” alt=”My Google” />

Instead upload a 300X200px image on your web server and use it.

#5. Remove Empty Image src from your page. This reduces the HTTP request. For example

1. HTML: <img src=””>
2. JavaScript: var img = new Image(); img.src = “”;

 

Tips for further optimising JavaScript for speed

#1. Avoid execution of JavaScript code during initial page load so that you can reduce blocking of page rendering. Move the scripts (like traffic tracking scripts) as low in the page as possible.

#2. Combine JavaScript files into as few files as possible. This reduces the HTTP requests and reduces blocking of page rendering.

#3. Inline Small external JS files – If a java script file contains small amount of JS code then inline it i.e. use inline java script. This can reduce blocking of page rendering and reduce the load time of a page.

#4. Upgrade to asynchronous version of Google analytics tracking code as it helps in better parallelization of downloads and speeds up browser rendering time.

#5. Remove Duplicate Scripts from your pages as the browser ends up executing the same code twice. If an external java script file is called twice on a page then the browser has to make two HTTP requests which reduced the load time of a page.

#6. Remove unnecessary scripts from your pages wherever possible. Make sure that your website doesn’t have multiple traffic-analysis scripts embedded on each page. Use Google Tag Manager for deploying analytics and marketing tags.

 

Optimising HTTP Responses

#1. Minimise bad HTTP requests (3xx errors, 4xx errors, 5xx errors like 404, 410,500 etc).

Removing bad requests avoids wasteful requests made by users’ web browsers to your web server and speed up downloading, parsing and execution time. What that means keep your website as much error free as possible.

#2. Minimise HTTP request size

To minimize HTTP request size, try to keep HTTP request headers as small as possible preferably less than 1500 bytes. HTTP request headers include: Cookies, browser set fields, requested resource URL and referrer URL.

Eliminate unnecessary cookies. If you set a lot of cookies, the request headers for your page will increase in size since the cookies are sent with each request. Try to keep the size of a cookie less than 400 bytes.

Minimise the lenght of requested resource URL and referall URL.

#3. Specify a character set in the HTTP response headers of your HTML documents.

In this way you can allow a browser to begin parsing HTML and executing scripts immediately. Here is how you can specify a character set in the HTTP response header: Place the following code on the page which should return character set

<?php
header(“Content-Type: text/html; charset=utf-8”);
?>

<html>
<body>


#4. A resource (like HTML file) should be available only through a single URL to eliminate addition RTTs (Round Trip Time). What that means, fix all canonical domain issues like non-www version of the website redirecting to www version or vice versa.

For example, if you add the following code to your .htaccess file, it will redirect non-www version of your website to the www version:

Options +FollowSymLinks
RewriteEngine on
rewritecond %{http_host} ^mywebsite.com [nc]
rewriterule ^(.*)$ http://www.mywebsite.com/$1 [r=301,nc]

Similarly, if your website is on HTTPs, then 301 redirect all non-HTTPs pages to HTTPS pages:

RewriteEngine On
RewriteCond %{HTTP:X-Forwarded-Proto} !https
RewriteRule ^(.*)$ https://www.yourwebsite.com/$1 [R=301,L]

#5 Make sure that the same resource is not severed from a different hostname to minimise DNS lookups.

#6.Avoid using frames on your pages. When you use frames, the browser has to request mutiple HTML pages (which means mutiple HTTP requests) which can considerably reduce the load time of a web page.

Quick Announcement about my new books

maths and stats bottom banner email analytics bottom banner attribution modelling bottom banner

Book #1: Maths and Stats for Web Analytics and Conversion Optimization - This expert guide will teach you, how to leverage the knowledge of maths and statistics, in order to accurately interpret data and take actions, which can quickly improve the bottom-line of your online business.

Book #2: Master the Essentials of Email Marketing Analytics - This book focuses solely on the ‘analytics’ that power your email marketing optimization program and help you in dramatically reducing your cost per acquisition and increasing marketing ROI, by tracking the performance of the various KPIs and metrics used for email marketing.

Book #3: Attribution Modelling in Google Analytics and Beyond - Attribution modelling is the process of determining the most effective marketing channels for investment. This book has been written to help you, in implementing attribution modelling. It will teach you, how to leverage the knowledge of attribution modelling, in allocating marketing budget and understanding buying behaviour.


 

Himanshu Sharma

Certified web analyst and founder of OptimizeSmart.com

My name is Himanshu Sharma and I help businesses in finding and fixing their Google Analytics and conversion issues.
  • More than ten years' experience in SEO, PPC and web analytics
  • Certified web analyst (master level) from MarketMotive.com
  • Google Analytics certified
  • Google AdWords certified
  • Nominated for Digital Analytics Association Award for Excellence
  • Bachelors degree in Internet Science
  • Founder of OptimizeSmart.com and EventEducation.com
I am also the author of the book Maths and Stats for Web Analytics and Conversion Optimization If you have any questions or comments please contact me