10 easy ways to improve website loading speed up to 350%

It makes sense to speed up your website loading speed.

Consider these user expectations:

• 40% abandon a website that takes more than 3 seconds to load
• 47% expect a web page to load in 2 seconds or less (source: kissmetrics.com)

Now let’s compare these expectations to the reality of the 2016 industry standard page load time:

9.06 seconds.

If users expect your page to load in 2 seconds or less, that’s a whopping 78% of site visitors who could be having a poor user experience.

If page load speed is so vital to your bottom line, it may be time to revisit your overall website speed, and how it looks to your users. Perhaps by using a Real User Monitoring tool.

Today, we’ll look at 10 design fundamentals you can implement to help get your website speed up to scratch.

Why web page load speed matters

Users expect a fast website; but why

It comes down to a fundamental concept in UX; control.

As humans, we don’t like losing any control of our environment. We become prone to frustration and distraction easily.

A faster page load speed gives users the perspective of having more control over the website; they are controlling it rather than it controlling them.

So in turn, faster load speeds mean happier, less frustrated users.

(Plus keep your organic search rankings healthy; Google have cited page load speed as a major signal in their ranking algorithm since 2010.)

As designers, we sometimes tend to choose the path of beautiful design aesthetics over quick page load.

But when 80% of a web page’s time is spent downloading assets such as images, stylesheets, and scripts (all of which form the tool belt for our design), the responsibility to improve page load time and user experience falls to us, right?

Now, designers tend to take a more holistic approach.

It’s not just the assets we should be focusing on for improving overall website speed, it’s the entire design process. Here are my tips on how to speed up your website easily:

1: Start by considering the web page goal

What’s the goal of your page?

Do you want your site visitors to take a free trial or submit an email address?

By starting with the outcome you want to achieve on that page, you’ll be in the best place to make changes to it.

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:

Think about questions like:

I also recommend spending time investigating similar pages on your competitor’s sites. Specifically, take note of their loading speed using your favourite speed tool. Notice which elements they use to get visitors to take action. How do they make their pages interesting to returning users, yet fresh and clear for new?

Chances are they know their audience well, so don’t be afraid to take a few notes.

Designing each page with end goals in mind will ensure every single element on every page of your site serves a purpose and function.

Superfluous elements will slow your site right down, so cut any chaff by giving your audience what they need to get the job done.

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

Information architecture (IA) focuses on organizing, structuring, and labeling content in an effective and sustainable way.

Images and other media can take much longer to load than text. Sometimes, improving your web page loading speed could be solved by actually reducing the media on your web page.

Consider first, do I need this image in the place of text? What value is the media providing?

There are pros and cons for deleting or keeping media on your web page which I won’t go in to.

However, consider, ‘What’s the goal of the page’ and make sure that your choice of media takes this into consideration.

Good IA informs content strategy, user interface design, interaction design and front-end development.

Spending time on your information architecture will ultimately mean better-structured content, design and code helping to speed up your website quickly and effectively.

It will even contribute to your SEO efforts; Google will see your great IA as holding tonnes of value and give you the benefit of a higher ranking in the SERPs.

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.

(Photography and e-commerce sites in particular)

If you have clients in these spaces, it’s worth exploring CSS so high-quality visuals can be created without the need for images.

Your page will load faster and perform better!

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

However, if you do use images, make sure to choose the right format for the job:

4. Optimize images to improve page load speed

There are a few things to consider when optimizing images:

Depending on the nature of the image and how it will be used will dictate which image format is more appropriate. To speed up your website, choose the best one for the task from the list below:

GIFs force all the colors of an image into a 256-colour palette in order to reduce the image size. This is great for images that are not too complex and have a limited and simplified color range. Gif also supports transparency but can usually take some effort to look smooth around the edges.

JPEG applies lossy compression to images, which can result in a significant reduction of the file size, however, this may come at a cost to the visual quality. JPEG format is a common choice for compression of photographs.

PNG format is a flexible robust format and supports lossless data compression. Saving as a PNG-8 format will allow you to save a quality image at a small file size. PNG-24 and PNG-32 support transparency by blurring the edges and making it appear crisper on a transparent background. However, this will usually result in a larger file size.

SVG is an XML-based vector image format. A designer would usually design a vector graphic such as an icon or illustration and save it as SVG, retaining all of its vector information. The image sizes are usually small, the image scales without losing clarity and supports interactivity and animation.

Experiment with selecting the best settings for each format: quality, palette size, etc and you will find the best image format to get that page load speed down to a minimum, and ultimately speed up your website.

5: Optimise your design for mobile users

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

Here’s a quick checklist of fast fixes to make your mobile site more user-friendly.

1. Eliminate any unnecessary image assets
2. Use CSS3 to simulate graphical effects
3. Consider using adaptive images for smaller devices
4. Use media queries to control layout and inclusion of page elements
5. Design specially for the mobile experience; not as an afterthought.

If you know of any more quick fixes for mobile optimization, let us know in the comments!

Until then, making you page load speed faster by taking a quick look at your code.

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

To optimise your website loading time, 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.

(But always ensure that you keep an original for future editing.)

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; you’ll achieve the same effect or functionality that a plugin offers but without the headaches of potential crashes and security risks.

Delete any plugins that are surplus to requirements and not only will you reduce page load speed, you’ll reduce your operating costs significantly.

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

You don’t have to fly blind every time. 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 competitor’s site? Aim to be the fastest and you’ll already have an advantage

It won’t take long to assess 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 favors if you need to speed up your website.

A good idea is to look at using more modular mobile-first frameworks such as Foundation from Zurb.

These guys make it a bit easier to pick and choose from their components. Rather than downloading the entire framework, you can simply create a custom download and select only what you need. This will ensure your page does not have to load a bloated CSS and javascript file.

I have found the Grid and typography components more than enough to build a lean, fast loading 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 to load faster and it can do so progressively.

With JavaScript, simply move the scripts to the bottom of the page.

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 element.

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 below!