WordPress Website Speed Optimization

Why should you 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 cache 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. The higher the page speed score, the 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 shows the page speed score of your website for both mobile and desktop devices.

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

gtmetrix

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

Site speed reports in Google Analytics

Google Analytics also provides 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

Get the E-book (52 Pages)

Get the E-Book (37 Pages)

Commonly used jargon 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 executing code e.g., parsing of javascript.

Caching- Speeds 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 revisited, 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 Javascript 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. E.g., minify CSS, minify HTML, minify JavaScript, etc.

Website Speed Optimization Objectives

A website’s speed is optimized with the following objectives:

#1 Reduce the size of HTML files, image files, CSS files, XML files, and javascript 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 checkboxes.

# 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 reasons for 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 a 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 slow down 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 reducing 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 a great impact on server response time, which impacts website speed.

#2 Make your WordPress theme lightweight and responsive

The WordPress theme you use on your website has a 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 an old PHP version (like 5.3) not only exposes 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 an outdated version of WordPress, it can create compatibility issues with existing/new WordPress plugins/themes and can really slow down your website.

The latest WordPress version almost always has much more efficient code, which can speed up downloading, parsing, and execution time and can solve a lot of the 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

Over time, your WordPress database generates 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 that 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 affect 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 that use one or more unused themes. All such themes negatively affect 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 webserver

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 affect 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 requests a web document, the document is served from the webserver that is nearest to the visitor’s location or which is not experiencing high load.

CDN allows website users to download your website as fast as possible. I use Cloudflare. It is a free global CDN provider who 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 cacheable. 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 cacheable, 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 algorithm 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

Web browsers are not then 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 a 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 the width and height of all the images in the HTML code for faster rendering of the page.

#3. Save images to an 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 you 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 on 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 javascript file contains a small amount of JS code, then inline it i.e., use inline javascript. This can reduce blocking of page rendering and reduce the load time of a page.

#4. Upgrade to an 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 javascript 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 length of the requested resource URL and referral 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 additional RTTs (Round Trip Time). What that means, fix all canonical domain issues like a 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 the 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 multiple HTML pages (which means multiple HTTP requests), which can considerably reduce the load time of a web page.

Other articles on WordPress

   

EXCLUSIVE FREE TRAINING REVEALS....

"How to use Digital Analytics to generate floods of new Sales and Customers without spending years figuring everything out on your own."


(even if you are completely new to analytics)


Here’s what we’re going to cover…

#1 Why digital analytics is the key to online business success.

​#2 The number 1 reason why most marketers are not able to scale their advertising and maximize sales.

#3 Why Google and Facebook ads don’t work for most businesses & how to make them work.

#4 ​Why you won’t get any competitive advantage in the marketplace just by knowing Google Analytics.

​#5 The number 1 reason why conversion optimization is not working for your business.

​#6 How to advertise on any marketing platform for FREE with an unlimited budget.

​#7 How to learn and master digital analytics and conversion optimization in record time.

 
   

My best selling books on Digital Analytics and Conversion Optimization

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.

Master the Essentials of Email Marketing Analytics
This book focuses solely on the ‘analytics’ that power your email marketing optimization program and will help you dramatically reduce your cost per acquisition and increase marketing ROI by tracking the performance of the various KPIs and metrics used for email marketing.

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 implement attribution modelling. It will teach you how to leverage the knowledge of attribution modelling in order to allocate marketing budget and understand buying behaviour.

Attribution Modelling in Google Ads and Facebook
This book has been written to help you implement attribution modelling in Google Ads (Google AdWords) and Facebook. It will teach you, how to leverage the knowledge of attribution modelling in order to understand the customer purchasing journey and determine the most effective marketing channels for investment.

Himanshu Sharma

Digital Marketing Consultant and Founder of Optimizesmart.com

Himanshu helps business owners and marketing professionals in generating more sales and ROI by fixing their website tracking issues, helping them understand their true customers' purchase journey and helping them determine the most effective marketing channels for investment.

He has over 12 years of experience in digital analytics and digital marketing.

He was nominated for the Digital Analytics Association's Awards for Excellence. The Digital Analytics Association is a world-renowned not-for-profit association that helps organisations overcome the challenges of data acquisition and application.

He is the author of four best-selling books on analytics and conversion optimization:

error: Alert: Content is protected !!