Way back in the 1990s, when 14400 bps modems were state-of-the-art technology, it didn’t matter much if a website took several seconds to load because it was the norm.
Nowadays, with fast 4G and fibre broadband connections readily available in major population centres, anything longer than a few seconds is enough to kill off chances of your website loading for a large majority of users, resulting in wasted opportunities.
Even something as insignificant as a one-second delay can drastically reduce pageviews, customer satisfaction and drop conversions.
Remember, too, that your site speed even affects your organic search rankings. Since 2010, Google has been including site speed in its algorithm.
What’s the biggest factor?
Size.
No question about it.
Each web page consists, at a bare minimum, of text, graphics/photos, scripts and styling. The more you add, the longer it takes to download.
Every time a new feature is added, a little more code has to be downloaded – a script and styling – that will weigh things down a little more.
How do I check my site speed?
There are several tools available to check site performance. All of them will analyse your site and tell you where improvements are needed.
A word of warning: the results from these tools can be rather daunting, but most fixes are relatively quick and easy to implement. Although you might not be able to fix everything the speed checkers recommend, you should fix enough to make the site experience better for your visitors.
How do I speed up my site?
Here are five essential speed enhancements every webmaster should consider implementing.
1. Optimise images
Along with video, images are one of the biggest bandwidth hogs. They’re usually the first thing to look at in order to reduce loading times.
Scale your images before you upload them to your site. Share on XThe first thing to do is to scale images appropriately.
With fast connections and cameras capable of taking very high resolution photographs, it’s all too easy to upload the images at full resolution and rely on the website software to scale the image with styling.
The problem with this is that the image may appear smaller, but is in fact still the same size on disk, which means the same size downloaded. For example, let’s say you have an image that is 1000 x 1000 pixels, which you scale down to 100 x 100 pixels in the content management system (CMS). Your browser will have to download 10 times more data than necessary to display that one image.
Scale your images before you upload them to your site.
The second method of optimising images is through compression.
There are several free online tools for image compression, such as tinypng.com. These can reduce your image sizes dramatically without losing quality. You can see size reductions anywhere from 25% to 80%.
2. Browser caching
Browser caching is a technology that avoids making visitors download the same things every time they load a page.
When browser caching is enabled, it lets your site temporarily store some data on a visitors’ device, so they don’t have to wait for it to load every time they visit your page.
How long the data is stored for depends on the browser configuration and your cache settings.
Setting up browser caching is not for the faint-hearted. It should be tackled by an experienced web developer or hosting company.
If you’re using a WordPress website, several options exist to enable browser caching, including W3 Total Cache, WP Super Cache, and WP Rocket plugins.
3. Compression
Imagine being able to take all your web pages, stylesheets and scripts and throw them into an archive or zip file. Compression dramatically reduces page size and the number of HTTP requests, thereby increasing speed.
According to Varvy, compression is capable of reducing 50-70% from HTML and CSS, which makes for a compelling argument to implement compression.
As compression is a server setting, how you implement it will depend on your host and its settings. You may need contact your web developer or hosting company to see what they can do.
4. Minify CSS
CSS (cascading stylesheets) sets the styling for your site – fonts, colours, margins, etc.
CSS loads before anyone can see your site. The longer it takes to download the CSS, the longer the wait.
Optimising CSS means your styling will download more quickly, providing faster access to your pages.
- Start by asking “do I use all of my CSS?” If not, get rid of the superfluous code. Every little bit of wasted data can add up.
- Next, minify CSS files. Extra spaces and line breaks in CSS increase file size. Minifying CSS removes extra spaces and line breaks to ensure CSS files are as small as possible.
How do I minify CSS files?
First, see if your CMS already minimises your CSS or if there’s an option for it (WordPress or Joomla do not).
If your CMS doesn’t have a minify CSS option, you can use a performance plugin such as W3 Total Cache, WP Super Cache, or WP Rocket, or a free online service like csscompressor.com to minify your files. Simply paste in your CSS and hit “Compress” to see your newly minimised stylesheet.
Minimising CSS files is a great way to reduce page weight, but should be approached with care. Minify CSS is an option that can break your site’s appearance, so should be handled by someone skilled at coding.
5. Delay scripts
While Javascript files can load after the rest of your page, if you put them all before your content — as many sites do — they will load before your content does.
This default “blocking” configuration means the browser must wait until Javascript files load before the page is visible, and we know how much visitors like waiting.
OK, so now it does get a bit technical.
The simplest solution to deal with this blocking behaviour is to place external Javascript files at the bottom of the page, just before the close of the HTML body tag. More of the site can load before the scripts, meaning visitors won’t be waiting.
Another method allowing even greater control is to use defer or async attributes when placing external Javascript files on your site.
Both are very useful, but make sure you understand the difference before you use them:
- Async tags load the scripts while the rest of the page loads, but this means scripts can be loaded out of order. Basically, lighter files load first. This might be fine for some scripts, but can be disastrous for others, breaking your site.
- The defer attribute loads your scripts after your content has finished loading. It also runs the scripts in order. Just make sure your scripts are OK to run so late without breaking your site.
All you need to do is add a simple word in your <script> tags.
For example, you can take your original script:
<script type=”text/javascript” src=”/path/filename.js”></script>
and add the little code to ensure it loads when you want it:
<script type=”text/javascript” src=”/path/filename.js” defer></script> <script type=”text/javascript” src=”/path/filename.js” async></script>
The importance of your scripts will determine if they get an attribute and which attribute you add. Essential scripts should probably have the async attribute so they can load as soon as possible without delaying the rest of your content. Non-essential scripts, however, should wait until the end to ensure visitors see your page faster.
Always test each script to ensure the attribute doesn’t break your site.
Summary
As users demand a richer online experience, the size of pages will continue to grow. There will be fancy Javascript, more CSS tricks and more third-party integrations to weigh things down.
As marketers, we cannot let this detract from a user experience that delivers results.
A little attention to detail goes a long way.
Remember: a one second delay is all it takes to lose a lead.
Edward Solomon has over 30 years’ experience in project management, technical education, computer networking, web design and development and is a Digital Business Consultant for PENNInk Productions Ltd.
