How to speed up your website by 350%

It makes sense to speed up your website. Users expect your page to load in 2 seconds or less, and that’s a whopping 78% of site visitors who could be having a poor user experience. It’s not just assets we should be focusing on for improving overall website speed, it’s the entire design process. Here are the top tips on how to speed up your website easily:

1. Start with the end in mind by knowing your audience and page goals

What’s the goal of your page? Before you even begin mocking up visuals, compressing images, cutting HTML or writing scripts, it’s important to invest quality time upfront understanding the goals of both stakeholders and end users.

2. Content is key – but take into account the structure too!

The goal of Information Architecture is to help the users of your site find information easily and quickly – then complete a task. Good Information Architecture informs content strategy, user interface design, interaction design and front-end development.

3. Use CSS rather than images

CSS (Cascading Style Sheets) is the ability to separate the way things look from what they mean. Great news for when large, high quality images come at the sacrifice of page load speed. eCommerce and photography sites are two major examples. Clients often want big and beautiful images and a fast, responsive site.

Note: It’s important to keep the size of your style sheets to a minimum – there’ll be less to load.

4. Optimize images for faster page load speed

There are a few things to consider when optimizing images:

1. The larger the image the slower the load speed. If the area in which the image will be placed will be at a maximum width of 300px, then the image should be cropped to 300 pixels wide and saved at 72DPI.

2. Save your image in an appropriate format. 

Depending on the nature of the image and how it will be used will dictate which image format is more appropriate. 

5: Optimise your design for mobile users

Mobile users have different objectives than desktop, and typically want information in quick, digestible bites. With so many mobile users experiencing problems as they load their websites, it’s an relatively easy way to gain a competitive advantage. 

6. Make your code lean by minify-ing your CSS, HTML and Javascript to speed up your website

To speed up your website, it’s important that you eliminate extra spaces, line breaks, and indentation in your code so your pages are as lean as possible. This can be achieved by compressing your file using minify tools such as YUI Compressor, Google Closure Compiler and cssminifier.

7. Go easy on the Jquery plug-ins jack! Consider CSS instead…

Have you ever worked on a website with so many plugins you don’t know which one does what? The added functionality a plugin gives is great, but too many could be the root cause of a slow site. The solution? Again consider using CSS where it makes sense and delete any plugins that are surplus to requirements.

8. Run some performance tests before you let your site out in the wild

There are some great free tools that put your site through its paces before you deploy:

  • Google PageSpeed Insights 
  • Web Page Test Tools 
  • Google Mobile-Friendly Test for measuring how well your Web pages are optimized for mobile devices
  • Which loads faster: yours or your competitors site? Aim to be the fastest and you’ll already have an advantage

It won’t take long to asses your website’s overall speed at all. Assess individual pages, and focus on the small fixes to help speed up your website.

9: Choose your framework wisely

There are definitely some great responsive frameworks out there that are super easy to use. You’ll see many that have lots of plugins, heaps of juicy CSS, SASS, Javascript and ready-to-go templates. However this wealth of techy goodness will also affect the performance of your web pages, and won’t do you any favours if you need to speed up your website.

10: Make CSS and JavaScript External to boost page load speed

Using external files will generally make the pages load faster because JavaScript and CSS files are cached by the browser.

Alternatively, if you use CSS in a web page, place the CSS in the HEAD element. This makes the page appear load faster and it can do so progressively.

Conclusion

We can sometimes be guilty of creating nifty graphics and complex design at the sacrifice of page load speed, so don’t forget about the user experience elements. It’s all about control. The more in control a user feels, the happier they will be! When you need a fast loading, good-looking yet functional website implement these tips to impress even the toughest of clients. What are your tips for speeding up your website? Let us know in the comments!