Increase the Speed of Your Website in 60 Minutes

BY AARON MAGNUS

Do you want to increase the speed of your website but aren’t sure where to start? We’ve put together a guide so that you can use these tips to make sure your page-load speed isn’t costing you conversions.

 

First of all, why bother?

  • According to research, 73% of mobile internet users say that they’ve encountered a website that was too slow to load.
  • 47% of consumers expect a web page to load in two seconds or less.
  • 40% of people abandon a website that takes more than three seconds to load.
  • A one second delay in page response can result in a 7% reduction in conversions.
  • If an e-commerce site is making $100,000 per day, a one second page delay could potentially cost you $2.5 million in lost sales every year.
  • Finally, according to Google and further supported by research from moz.com, the back-end performance of a website directly impacts search engine ranking.

Need more convincing? Read this article on what some huge tech companies have learnt about web optimisation.

The above evidence should be enough to convince you that the speed of your website is very important. It can directly affect both your conversion rate and your search ranking, so with that in mind, let’s get started.

 

Measure your speed

I’ve listed four tools below that you can use to test your speed. I recommend using all four and taking a screenshot of your current score.

Google PageSpeed Insights

YSlow by Yahoo

Pingdom Website Speed Test

GTmetrix

Note: While these tests offer a great insight into the speed of your site, you should realise that what is most important is the perceived page speed – don’t get too wrapped up in your grade.

 

Use the right image format

Using the right file type for the right kind of image allows the image to be created in the most optimised format possible, using the smallest amount of data.
As a general rule of thumb:

  • PNG – supports transparency and is good for graphics, line art or text heavy images with strong edges.
  • JPEG – good for images with more than 256 colours making it a great option for photography.
  • GIF – good for animated effects….but that’s about it.

You can read more on the topic here.

 

Specify your image’s dimensions

Next, specify all of your image’s dimensions using height and width tags on your <img> element.

On top of that, if you have specified an image to have dimensions of 900 x 500 pixels, use an image editor such as Photoshop to make sure you upload the image at that size.

Don’t leave the browser to scale your 3600 x 2000 pixel image on the fly, as the user will have to wait as the browser works it’s magic and this will increase perceived page-load time.

 

Image compression

Perhaps the single biggest change you can make to your website to improve performance is to make sure your images are compressed. There are a number of great tools out there and Mashable does a great job of listing many of the good ones, but here I will point you to those that I have used and found to do the trick.

JPEGMini

Taken from their site: “JPEGmini is a photo optimization technology that reduces the file size of JPEG photos by up to 5X, while preserving the resolution and quality of the original photos….JPEGmini works by analyzing the input image using a unique quality detector which imitates the human visual system, and based on this analysis applying the maximum amount of compression which will not cause visible artifacts.”

TinyPNG

TinyPNG claims to be able to reduce file size by more than 70% while maintaining quality. They do so by converting 24-bit PNG files to smaller 8-bit indexed colour images, as well as stripping all unnecessary metadata. The result is tiny PNG files with 100% support for transparency.

WP smush.it plugin for WordPress

If you’re using WordPress, this handy little plugin will compress all of your images automatically. I’ve used it before and it’s completely hassle-free.

 

Concatenate and minify your CSS and javascript

Concatenation is the process of linking multiple stylesheets or javascript files together. This can give you the benefit of reducing your HTTP requests and in turn speeding up your site.

Minification is the practice of removing unnecessary characters from code to reduce its size, improving load times. You should look into a way of automating this into your workflow using a task runner such as Grunt or Guard.

If you prefer, there are also a number of online services you can use. Here are a few that work well.

cssmin.js

cssmin.js is a JavaScript port of YUICompressor’s CSS minifier removing the need to use the command line.

Closure Compiler

Google’s Closure Compiler makes it incredibly easy to minify your Javascript. Simply open the web app, choose your optimisation level, and paste in your code. Easy peasy.

Autoptimize plugin for WordPress

If you use WordPress, I would definitely recommend this plugin. It concatenates and then minifies all scripts and styles. It also works seamlessly with W3 Total Cache, which is a great plugin that I will talk about later.

 

Gzip compression

Compressing your website pages on the server is a great way to reduce response times and increase the perceived page speed. Better yet, it’s relatively simple.
First off, check whether your hosting provider has automatically enabled gzip compression using the GIDZipTest. If it’s enabled, skip this step. If not, keep following…

If you’re using WordPress…

The W3 Total Cache plugin is an essential for any WordPress installation I use. It’s primarily a caching plugin but has developed into somewhat of an all-in-one performance enhancing drug for WordPress. It offers CDN integration, caching and minification (although I don’t recommend using the minification option as it’s been known to be buggy). For now, enable “Page Cache” using the “Disk:Enhanced” method and “Browser Cache”.

If you’re not using WordPress, here’s a little bit of code…

Firstly, make a backup of your .htaccess file which can be found in the public_html folder of your website. It might be hidden so you will have ensure that “Show hidden files” is selected. Then add the code below to it.

############################################################################################

# Deflate files to decrease load times

SetOutputFilter DEFLATE

AddOutputFilterByType DEFLATE application/x-httpd-php text/html text/xml text/plain text/css text/javascript application/javascript application/x-javascript image/jpeg image/jpg image/png image/gif font/ttf font/eot font/otf

# properly handle requests coming from behind proxies

Header append Vary User-Agent

# Properly handle old browsers that do not support compression

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

# Explicitly exclude binary files from compression just in case

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|pdf|swf|ico|zip|ttf|eot|svg)$ no-gzip

############################################################################################

 

Enable browser caching for static resources

In this step we will set up browser caching. We are telling the browser to keep particular files in the cache for a specified amount of time. When the file is needed again, the browser doesn’t have to keep requesting it from the server.

As an example, consider your logo. How often does it get changed? Probably never. By caching this you can save precious bandwidth and improve your page load time.

If you’re using WordPress…

If you have already installed W3 Total Cache and enabled “Page Cache” and “Browser Cache” like I mentioned in the last step then you can move on to step 8. Otherwise, you can install W3 Total Cache here.

If you’re not using WordPress, here is some code that you can add to your .htaccess file…
## EXPIRES CACHING ##

&lt;IfModule mod_expires.c&gt;

ExpiresActive On

ExpiresByType image/jpg "access plus 1 year"

ExpiresByType image/jpeg "access plus 1 year"

ExpiresByType image/gif "access plus 1 year"

ExpiresByType image/png "access plus 1 year"

ExpiresByType text/css "access plus 1 month"

ExpiresByType application/pdf "access plus 1 month"

ExpiresByType text/x-javascript "access plus 1 month"

ExpiresByType application/x-shockwave-flash "access plus 1 month"

ExpiresByType image/x-icon "access plus 1 year"

ExpiresDefault "access plus 2 days"

&lt;/IfModule&gt;

## EXPIRES CACHING ##

 

Use a content delivery network (CDN)

A CDN spreads your web content across a number of servers all over the world so that when a user requests it, they receive it from the nearest location to them. This can dramatically speed up the delivery of your website if you have a global audience. A CDN also has the benefit of delivering your content without cookies, decreasing file size and further increasing page speed.

You can get set up with a service like MaxCDN or CloudFlare pretty quickly and they offer guides that make it really simple. Both of these services integrate with W3 Total Cache really well too.

 

Some other options to explore…

Install Alternative PHP Cache.

Every time a page is requested PHP has to be parsed, compiled and executed by the server. Problem is, often these requests produce the same result, which means unnecessary repetition for the server. APC stores the code in the RAM so that when it’s requested it can be executed from there. Learn more here.

Remove any unnecessary plugins, fonts and social icons.

All of this adds to the weight of your site and if you can remove them without compromising the user experience of your website then you should. A single Facebook ‘Like’ button can add 270kb to your site. Take the big four social network buttons and that’s an extra 580kb added.

Enable KeepAlive.

When the browser requests a file from the server it has to receive a reply saying “Yes, you can take it…” and then the connection is closed. When requesting multiple files this can be quite inefficient. With KeepAlive the web browser and the server make an agreement to reuse the same connection. This is essentially the servers way of saying “Go ahead, take what you need”.

KeepAlive is the default on many web servers nowadays however, some shared hosting environments can still close the connection. KeepAlive can give a nice boost to your websites speed but it can also increase the memory usage on the server – there’s a trade off you need to weigh up. Here’s a great article talking about when you should enable KeepAlive. If you don’t want to read the full article, here’s a quick summary:

If your server has enough RAM, your website is image heavy, and your traffic is spread out evenly throughout the day, then KeepAlive might be a great option for you.

To learn more about KeepAlive and how to enable it click here.

Consider using Scalable Vector Graphics.

SVG is an image format for vector graphics that can be great for responsive web design as they scale to any size effortlessly, without losing clarity. They can be a great way to present logos and diagrams. Be sure to check out the SVG browser support. If you are looking to make the file size of your SVG’s even smaller you can actually convert them into data URIs using a tool such as dataurl.net.

Share This