site speed improving banner image

Improve Your Site Speed: The Simple Guide

Stuart Shaw 5 years ago

The speed of your site is an important part of providing users with a positive experience. There’s a multitude of elements that ensure a speedy site and in this article we identify and explain some of the more important issues that all provide a good cost:impact ratio.

What is Page Speed?

Page speed is the time it takes to load a page’s content, from images to text and from javascript to stylesheets - all of this information is needed to consider the page ‘fully loaded’. You may wish to also measure the TTFB (time to first byte): the time it takes for your browser to receive the first byte of information from the site’s web server. Alternatively you can also measure the time it takes to load the critical site content (text, images, CSS).

Regardless of how you measure it, a faster site is a better site. It is widely accepted that page speed is a ranking factor too, and therefore a double whammy in terms of improving both UX and SEO.

Why is Page Speed Important?

Everyone knows ‘time is money’, an adage that’s been adopted by the latest generation and taken on by anyone involved in digital marketing. There’s an ever-increasing expectation for next-day delivery, 1-minute drive-thrus and even instant noodles! 3G and 4G have come on leaps and bounds in terms of speed and the internet is fast becoming another area of people’s lives where they expect everything yesterday and where patience is a premium.

Google feels the same way; they’ve indicated that page/site speed is one of the many signals used when ranking URLs.

It’s important to assess and understand your site speed and that of your competitors too, Zazzle Media have built a handy tool that (with some input) really digs deep into competitor analysis both for site speed and general site optimisation.

In the below sections we have identified the most important and commonly neglected aspects of site speed.

  • Compression
  • Minification
  • Redirects
  • Caching
  • Servers
  • CDNs
  • Images
  • Requests

Compression

When a visitor visits your website a series of requests are made to your server to deliver the required files.

Smaller files are naturally faster to download and require less time to fully load in your browser. Gzip is a application that will compress any HTML/CSS/Javascript files that are above 150 bytes. It is relatively simple to implement and can reduce the size of your page (in Mb) by up to 70%.

How Does Gzip Work?

Gzip is a combination of both Huffman and LZ77 coding - if you paid attention in mathematics you’ll know that algebra works by substituting unknown values with letters or characters. The LZ77 element of the compression works in a similar manner but instead of unknown values, it is based on similar/common strings - so any repeated words or text strings reference the first occurrence. You can see how this would work in the below example:

"

Huffman coding works by compressing the binary ASCII format based on the more commonly-repeated characters such as spaces, vowels etc. Below is the same example, but with the top five most frequent characters from our phrase.

"

Do I need to know this?

No, Gzip takes care of all of this for you. But learning is fun and hopefully you understand just what goes into this compression process.

Minify HTML, CSS & Javascript

In a similar manner to Gzip, minification is about cleaning up your files to make them efficient. It works by removing any spaces, commas, comments or other unnecessary characters. Depending on how clean the original resource was, this can greatly speed up file delivery.

Think of it as every car in a traffic jam going bumper to bumper, you’d certainly reduce the length/size of the jam...although pulling away could make for some fun!

"

For me, the most efficient way of managing the minification process of your files is to incorporate plugins into your build process which take care of the entire action for you. Whether you use popular tools such as Grunt, Gulp or perhaps a different task runner, there are several different tools at your disposal. Grunt is my particular personal preference, with that I can tie in a handful of different plugins such as cssmin, imagemin and uglify, which take care of CSS, image and Javascript minification respectively.

Redirection

Redirections can affect site and page speed in two different but equally damaging ways.

URL Redirects

The first issue relates to how many times the URL redirects in a chain. For example, consider the below journey, where each step requires the browser to issue a request and await a server response.

http://example.com/sale
http://www.example.com/sale
https://www.example.com/sale
https://www.example.com/sale/

"

Redirects are often unavoidable and in many cases necessary. However the chains can be reduced in length both by providing users with the appropriate link in the first place and with the efficient use of rewrite rules in the .htaccess file (or similar). Redirect chains have a more important impact on SEO as authority can be lost on each step - effectively reducing the power your links are providing the page and site.

Resource Redirects

In a similar manner to the above issue, if you request files from a URL that redirects your request, this can increase the round trip time (RTT) for your request and delay the speed at which the resources are loaded.

Hosting files yourself puts you in full control of where your site’s content is loaded from, but isn’t always possible without heavy customisation (for example Google Analytics or Google Tag Manager).

Caching (Leverage Browser Caching)

You’ve likely had a multitude of IT professionals suggest you clear your cache or delete temporary files; it’s right up there with “turning it off and on again” in terms of a catch-all IT solution.

"

Browsing caching is when Chrome, Firefox, Edge or other browsers keep a local copy of a file from the sites you visit. It’s quicker to request these files from your computer than it is to make a request to a web server - this way, when you revisit a site, the entire page doesn’t need downloading a second time.

You can configure your ‘expires header’ to set a lifetime on the cachable elements a year is often a reasonable lifespan for all site elements. Google has provided additional information around caching if you fancy some extra reading.

If you’re site on hosted on WordPress, you can use a super helpful plugin called W3 Total Cache to help manage any configurable settings you may wish to add to your site. This plugin is a great introduction to managing cache settings for your sites, with it having so many options and settings to play around with you can be sure to find a suitable solution for any needs you may have. A handful or options included but not limited to are Accelerated Mobile Pages support, caching of pages. posts, CSS, JavaScript, feeds, search results and database objects all with the option to configure to either memory, on disk or integrated to a content delivery network.

Server Response

Unsurprisingly your server can have a notable impact on the speed at which your pages load. It’s unlikely to be worth sacrificing uptime or dramatically increasing your spend, but it’s critical your server can handle the number of requests based on visitor volume and the sheer amount of requestable content.

We recommend finding a host with flexible plans in case you need immediate growth. With viral marketing this can happen frequently and often the influx of users can crash or severely hamper a site.

Content Delivery Network

CDNs (Content Delivery Networks) are collections of servers positioned across the globe that deliver web content such as sites and videos - the most appropriate (closest) server is used based on the user’s location, thus ensuring a fast and efficient response. CDNs aren’t always an essential part of improving your site speed but can act as the cherry on top.

CloudFlare are one of the market leading providers of CDNs and their image below shows just how beneficial a CDN can be, not just for speed but for security too.

"

Images

Most sites are made from more than just lines of code and text. Images, whether used as backgrounds, icons or infographics, play a major role in how sites look and fee. More to the point, they are also some of the biggest culprits for slowing down sites. There’s a few pain points that need addressing when checking if your images are a cause for concern.

Image Format

The first thing to consider is what format to use save your image. The below chart illustrates the format you should be using:

"

Image Size

After deciding the format of your image you need to ensure you do not upload it at a size that is beyond its maximum displayed dimensions. For example, if your site’s maximum width is 1080px there is rarely an occasion where your images need to be wider than this.

An important part of image sizing is to ensure you serve scaled images wherever possible. For example, don’t ask the client to request a unique image 1000px wide if it’s displayed in a container that is only 200px wide; not only is this wasteful but will slow down the site.

Image Compression

Once you know which format to use you’ll need to consider how best to compress your image. despite its unrivalled popularity as a design tool, Photoshop hasn’t quite caught up with being able to provide perfectly lossless files, with results often compromising quality or still being rather large in terms of Kb/Mb.

While the appropriate image size and format will go a long way to minimising your file size, we would also recommend running your images through a third party site or tool such as https://tinypng.com/. TinyPNG will losslessly compress your files to minimise the file sizes without any noticeable loss to quality.

If your site is built using WordPress there are several handy tools available to offer an easy solution that can help with image compression, a personal favourite is WP Smush. WP Smush is a fantastic free tool which automatically can resize, optimise and compress every image uploaded to your WordPress site. A super helpful feature is the ability to optimise images that were uploaded even before the plugin was installed, so if you’re late to the party you can still make sure every image on your site has gone through their lossless compression optimisation process.

Requests

The number of requests each page makes is another more technical factor to consider, and you will want to avoid making requests from too many external sites as this will require multiple individual DNS lookups. However, you’ll also want to keep requests for files (including images, css and javascript) to a minimum - under 150 is often ideal but this depends heavily on the content on your site.

You may choose to merge files to reduce the number of requests, or even place some of the code inline or in the head of your website. This is often done with critical code to ensure the page doesn’t load in stages and cause content to change its position as any impatient users navigate the page.

Tools and Resources

There are a number of sites and tools that can be used to help you audit and improve your site. Our favourites are Gtmetrix.com and Google’s PageSpeed Insights. Gtmetrix certainly warrants a free account as it will record recent searches and allows you to set a location/country. Google’s tool can be extremely useful if you’re looking to analyse your mobile page speed specifically but without a unique URL (such as /m or m.) to provide.

Summary

Hopefully this article has provided you with both an understanding of the contributing factors to a sluggish site and a quick skim over how they work. If you fancy some extra content on web design then check out this article of simple tips.

The tools and information above, combined with a helpful development resource, should allow you to make all the major changes needed to boost your site’s speed.

Stay in touch with the Zazzle Media family

Sign up for our monthly newsletter and follow us on social media for the latest news.

Our website uses cookies for various purposes and to enhance the site’s functionality. This helps us understand how you use and interact with the website.

Settings Accept Cookies