mm

June 6, 2016 WATB Team
Follow me on Twitter

It’s time for another super helpful WATB infographic. Here, we run through some useful tips for speeding up your website. You can embed this infographic using the code below on your own blog.

7topspeedtips

Treat yourself with this Embed Link:

<div style="display:inline-block;border:1px dotted #ddd;padding:20px;margin:20px;width:100%;max-width:950px;">
  <p style="margin:0px 0px 20px;"><a href="https://watb.co.uk/wp-content/uploads/2016/06/7topspeedtips.jpg"><img src="https://watb.co.uk/wp-content/uploads/2016/06/7topspeedtips.jpg" alt="Gunner's 7 top tips for speedy websites"/></a>
  <p style="font-family:sans-serif;margin:0px;text-transform:uppercase;letter-spacing:1px;font-weight:bold;color:#444;">Infographic designed by <a href="https://watb.co.uk" target="_blank" style="color:#3F94CD;">WATB Creative Ltd.</a>
  </p>
</div>

Here’s how you can increase the speed of your website

Tip #1 – Don’t forget performance after page load

Your performance concerns shouldn’t end after page load. How a site performs once loaded is just as important.

Keep animations to a minimum – too many things zipping about will reduce the FPS (yes, websites have FPS) of your site causing a ‘laggy’ sensation that will put off your users and increase bounce rates. That said, carefully designed, smooth animations, enhance the experience and are worthwhile to help avoid any issues with a slow website.

You should also be careful with anything triggered on scroll, and be wary of DOM manipulations. Always try your builds on average machines to see how they perform.

Tip #2 – Write efficient, lean HTML/CSS

If you can do it in three lines, but you’ve written ten, then you need to re-think how you write code. Aim to be as lean as possible because every line of CSS the browser doesn’t have to download and parse results in better performance for the user.

Use Sass to help you break down your CSS into component parts. You can then compile into separate files, so pages only load the styles they really need.

Tip #3 – Defer JavaScript

If pre-10 Internet Explorer support is of no concern, you can increase the speed of page loading by adding a simple defer attribute to your JS script tags. This tells the browser to continue parsing the page whilst asynchronously executing the script. It stops the JS being render blocking, so users will see your content quicker.

<script src="script.js" defer></script>

Tip #4 – Get Kraken’ing

Kraken is an online tool for image optimisation which makes reducing image file sizes an absolute breeze. Upload your images, run kraken, and gain instant savings on page weight. Images are often the heaviest resources of a page, so it’s essential they are sizes and optimised correctly.

Tip #5 – Cache and Minify

If you’re not using the browser cache and minifying the front-end of your builds, then you’re missing a great party trick for super fast websites.

W3 Total Cache is easily the most feature packed and powerful caching plugin for WordPress and is essential. Proper configuration will dramatically improve your page loads.

Tip #6 – Aim high and keep excuses to a minimum

Sometimes you can’t do everything you want to – at WATB some of our sites couldn’t be as fast as we aimed for because of issues with hosting or project demands.

But keep your excuses to a minimum and aim high, you should be able to achieve sub-1 second load times and you should be able to score comfortably into the late 80s and 90s on Google Page Speed and GTMetrix.

Tip #7 – Test like your life depends on it

And throughout your project, damnit. Leaving testing until the end will make fixing page speed issues more difficult.

Use Google Page Speed, WebPageTest, GTMetrix and Pingdom to help you drive down your load times and identify those crucial areas of improvement. Run tests regularly throughout your project and you’ll deliver a project to your client that’s so fast it’ll blow their socks off.

Revel in your results

Scoring straight A’s on the notoriously harsh webpagetest.org, and straight 100’s on Page Speed, was weirdly one of my proudest achievements as a front-end developer. It isn’t easy, but achieving low page loading times for our clients means they can achieve better results online.

 

Looking for more tips?

Jump on our mailing list & get digital goodness straight to your inbox; including helpful tips, tricks and the latest articles surrounding marketing, web design and branding.

Sign up →