Conversion Rate Optimization

How To Optimize Your Page Speed For Conversions And SEO

Ever got annoyed at how slow some websites are and their page speed? So do we. In fact, so do a lot of people, and I bet you’re one of them too.

For every second a website visitor waits for a website to load, your conversion rate decreases by 7%. On top of that, you’ll also experience 11% fewer pageviews and a decrease in customer satisfaction by 16%.

You’ll probably not be going to local pub bragging about these numbers. But certainly gives some food for thought. Can you say that you enjoy waiting in a long queue to pay? Probably not, and it’s the same online when your page load speeds are excruciating slow.

You May Also Like

So what can you do to make sure you’re not losing out on potential customers? Here are five you can do to optimize your page loading speeds.

How To Optimize Your Page Loading Speeds

1. Optimize Your Images

The primary cause of slow page loading speeds is images. Unoptimized images are full-sized, which means they occupy loads of megabytes on your website, causing painfully slow loading speeds for your website visitors.

To optimize your images and their file size, you’ll want to do the following:

  • Resize them to reduce the file size
  • Reduce the image quality to 80% – still looks the same as 100% quality
  • Use the right image format

Which image format to use?

  • JPEG: Best for images with lots of colours and gradients
  • PNG: Ideal for when transparency is a must and for images such as logos
  • GIF: Perfect for images with solid and limited colours. They can be saved with transparent backgrounds and for short clips

2. Minify HTML,CSS & JavaScript

Essentially, what this does is remove all the unnecessary characters from your code. This means all spaces, comments and code lines are removed without affecting the functionality – yet significantly improving your website’s loading speed.

For Javascript or CSS files from external sources, check to see if there’s a minified version available. Or use Google Tag Manager for adding scripts.

You could also use a Preprocessor to automate tasks like this. Here are some you might want to check for minifying your code:

CodeKit ($32; HTML, CSS & JavaScript)
Will Peavy minifier (Free; HTML, CSS and JavaScript)
CSS Minify (Free; CSS)

3. Enable Browser Caching

If you’re a first-time visitor to a website, your browser needs to download all the data and files for it to display the content. However, by enabling browser caching, previously downloaded resources are stored locally which reduces the amount of data transferred over the web. This also ensures faster loading speeds for returning visitors.

To leverage and enable browser caching, you can specify an expiry date in the HTTP headers for files to be loaded locally.

One example could be telling browsers to store images and your stylesheet in its cache to make your web pages load faster.

4. Enable Compression

The latest browsers support gzip compression, which is excellent as it can reduce the transfer time of your files by a whopping 90%!

Compression reduces the time needed to download the files from your website and the data usage of your browser. This dramatically reduces the time to first render of your web pages.

Gzip support can be in found in some content management systems (CMS), which only needs to be enabled in the setting. Plugins and extensions can also be used depending on your CMS.

You could use the code below from the good folks at Moz) and insert it into your .htaccess file.

Compress text, html, javascript,
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Compressing certain file types can be done with this extension:

<files *.html>
SetOutputFilter DEFLATE

5. Remove Render-Blocking JavaScript and CSS

The first thing you see when visiting a website is the content above the fold. Now imagine the content there being delayed from rendering because it has to wait for other resources to load – certainly not the best user experience.

To make the above the fold content load immediately, identify what’s blocking the render. If they are external resources, you may want to insert them directly into your HTML through inlining, to improve your page loading speeds.

To measure your website’s speed, check out: Google PageSpeed Insights

This tells you how fast your website loads on mobile and desktop devices, and also give you additional tips to optimize your page loading speeds.

Pingdom is another great tool to have a look at. It lists all the HTTP requests and their loading speed so you can see what’s slowing you down.

Kostas Papageorgiou

Kostas is the Founding Editor of Marketing Unicorn. He's a digital marketing expert with extensive experience from different industries like SaaS, e-commerce, automotive and fintech.
Back to top button