Web Design

Fast page load times and rich, interactive content are both key to making a website successful but striking a balance between the two can be challenging.

It’s no great secret that page load times are extremely important to a website’s success. Google’s search algorithms favour fast load times and there is also plenty of research that shows that a small increase in page load time can have a negative impact on conversions. Hallam Digital Marketing Manager Tom Whiley wrote an excellent blog post on how to improve your page load speed last year. While our hosting partners, WP Engine, have produced a great infographic on page load speed.

Websites also need to be rich in content, imagery and interactivity to encourage conversions.  This inevitably leads to bigger pages, which naturally slow down page load time.

The conflict between the need for speed and the demand for rich content can bring design projects to a standstill.  So it’s crucial to find a balance that satisfies both requirements.

In this blog, I’ll share with you an approach that will help you to balance these two contradictory challenges.

Relate the Speed of a Page to Its Purpose

It’s not possible to predict load times until a website has been developed to a reasonably mature stage, so it’s best to take an iterative approach to measuring and improving speed.

The key starting point is to identify the site’s SEO landing pages and its rich content pages.  You can then focus on reducing the page size and load speed of the SEO pages as much as possible.

Similarly, the rich landing pages can be allowed a little more space for user interaction.

Here’s a rough process that can be applied:

  1. Identify the key landing pages which we will be target for reduced load speeds.
  2. Design around best practice for low load times.
  3. Decide on features around best practice for low load times.
  4. Develop the page(s).
  5. Measure and look for opportunities to save load time.
  6. Repeat 4-5 as appropriate.

This only covers the first part of the story.  The key SEO pages then need to be continually monitored for page load times to make sure they’re still performing as expected, especially when using a content management system that allows anyone to edit the pages.

So, after launching the website there are two simple steps that can be followed:

  1. Set up a monthly check of the key landing key pages to ensure they’re still performing.
  2. Use a page speed monitoring tool that triggers once the page is performing below an agreed level.

Design Considerations for Optimising Load Speeds

The design of the site plays a key part in determining how much it’s possible to optimise the page load times. When it comes to web pages, size really does matter. The aim is to keep page load time under 500k ideally, but certainly under 1MB at most.

Here are some steps to take to minimise load times:

  1. Minimise the use of imagery on key landing pages as much as possible.  It’s too easy to use imagery to make a page seem rich when subtle use of iconography and design can have the same effect.
  2. Where imagery is used, it should be optimised while ensuring there is no unacceptable degradation in quality.
  3. Make use of lean landing pages that are optimised for organic search, and keep any rich content on deeper pages which aren’t being targeted for organic search.
  4. Avoid lots of unique, complex layouts across multiple templates.  The simpler the HTML markup, the smaller the files will be.
  5. Avoid complex interactive elements that rely on heavy Javascript libraries.  It might look cool seeing something move across the screen, but is it really necessary?

Technical Considerations During Implementation

And finally, we can step into some of the more technical aspects of page load speed which need to be considered as part of hosting choice:

  1. Remove reliance on third party scripts where possible.  These cause problems because not only are you reliant on those scripts loading before the page loads, but sometimes they are also under high load and load slower than usual.  This can lead to “lumpy” load times.
  2. Employ lazy loading techniques to ensure that imagery that doesn’t appear above the fold is loaded when the user scrolls into view.
  3. Make better use of responsive images.  There have been some advances in how responsive images are handled by browsers ,which means that we don’t need to provide a single large image that works on all view ports, and can offer a better image for specific resolutions.
  4. Ensure embedded videos embeds are loaded after the page has loaded, rather than as part of page load.  This means that users will see a preview image for a video, and then see the actual video after clicking on the link.
  5. Avoid large htaccess files for 301 redirects and combine rules into bulk category redirects, rather than individual page-to-page redirects.
  6. Use a CDN for imagery.  This will need measuring as CDNs can be detrimental to performance, if the site’s user base is particularly localised.
  7. Minimise CSS and Javascript files.  You should already be doing this in most cases, but there can be further opportunities to reduce some of the files on key pages.  This is a central part to making the decision on installing any new plugins.
  8. Drop support for older browsers.   Older browsers require specific CSS and JS files to be created and loaded into the site conditionally.  If we can remove these completely, it’s one less request to make.
  9. Minimise the number of plugins used on your site.  We regularly inherit websites that suffer from plugin bloat.  It’s not a new issue when working with a CMS, but still a big one.
  10. Remove any reliance on non-essential hosting requirements, such as image hosting for email signatures
  11. Run database optimisation queries.  If your website has been around for a while, there a number of database techniques which can be used to optimise the time in which queries run.

In summary, creating a highly optimised site is a balance between specification, design and implementation.  The key factor for me is to differentiate the highly optimised SEO pages from other pages where possible and focus on optimising these as far as possible.

Leave a Reply

Your email address will not be published. Required fields are marked *