It’s no secret that page load times have a major impact on a website’s success. Google’s search algorithms favor fast load times, and there’s a lot of research out there that proves how the tiniest increase in times can have a detrimental effect on conversions, as this infographic outlines perfectly.
Fast page load speeds aren’t the only thing that encourages an increase in conversions: a wealth of rich content, imagery, and interactivity is required too. These two things conflict, however, as content leads to bigger pages, which slows down the load time.
The constant battle between the need for speed and the demand for rich content can bring many web design projects to a standstill. It’s imperative that a balance is struck to satisfy both of these requirements. Here, I will discuss which approach to take in order to do just that.
Amend the page speed according to its purpose
Page load times are impossible to predict until a website has been developed to a mature stage. Therefore, it’s best to take an iterative approach when measuring and improving speed.
You should start by identifying the site’s SEO landing pages, and its rich content pages. Once you’ve distinguished the two, you can begin reducing the page size and load speed of the SEO pages.
Similarly, you can then allow the rich landing pages a little more space for user interaction.
Here’s a rough process to follow:
- Identify the key landing pages that will have reduced load speeds.
- Design around best practice for low load times.
- Decide on features around best practice for low load times.
- Develop the page(s).
- Measure and look for opportunities to save load time.
- Repeat 4-5 as required.
However, this only covers the first part of the story, as the key SEO landing pages require continuous monitoring to ensure their page load times are still performing as expected. This is particularly important if the website you are working on uses a content management system that permits anyone to edit the pages.
To effectively monitor this once the website has launched, these two steps can be followed:
- Check the key pages once a month to ensure they’re still performing.
- Use a page speed monitoring tool that is triggered once the page is performing below an agreed level.
Optimizing load speeds: Design considerations
The design of the overall site plays a huge part in determining just how optimized page load times can be. When it comes to web pages, size really does matter. You should aim to ideally keep page load sizes under 500k, but under 1MB at the very most.
Follow these steps to minimize load times:
- Reduce the use of imagery on key landing pages as much as possible. Subtle iconography and design can make the pages appear just as content-rich.
- Where you do use imagery, ensure it’s optimized with no degradation in quality.
- Make use of lean landing pages that are optimized for organic search, and keep any rich content on deeper pages that aren’t being targeted for organic search.
- Avoid unique, complex layouts across multiple templates. The simpler the HTML markup, the smaller the files will be.
- Avoid complex, interactive elements that rely on heavy JavaScript libraries. Yes, it may look cool seeing something move across the screen, but is it necessary?
Technical aspects to consider during implementation
Once these two aspects have been tackled, you can look at the more technical parts of page load speeds, which should be considered as part of a hosting choice:
- Where possible, remove the reliance on third-party scripts. These can be problematic as not only are you reliant on those scripts loading before the page loads, sometimes they’re under high load, and therefore slower than usual. This can lead to “lumpy” load times.
- Use lazy loading techniques to ensure that imagery that doesn’t appear above the fold when the user scrolls into view.
- Make better use of responsive images. There have recently been advances in how responsive images are handled by browsers. This means we don’t need to provide a single large image that works on all viewports, and can instead, offer a better image for specific resolutions.
- Ensure embedded videos 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 once they’ve clicked on the link, they’ll see the actual video.
- Avoid large htaccess files for 301 redirects, and combine rules into bulk category redirects, rather than individual page-to-page redirects.
- Use a CDN for imagery. This will need to be measured, as CDNs can be detrimental to performance if the site’s userbase is particularly localized.
- Minimise CSS and JavaScript files. You should already be doing this anyway, but there are additional opportunities to reduce some of the files on key pages. This is a central part when deciding whether to install any new plugins.
- Drop support for older browsers. This is because older browsers require specific CSS and JS files to be created and loaded into the site conditionally. By completely removing these, it’s one less request to make.
- Minimize the number of plugins your site uses. We regularly inherit websites that suffer from plugin bloat, and whilst it’s not a new issue when working with a CMS, it’s still a big one.
- Remove any reliance on non-essential hosting requirements, such as image hosting for email signatures.
- Run database optimization queries. If your website has been around for a while, then there will be a number of database techniques which can be used to optimize the time in which queries run.
To reiterate, a highly optimized site is one that balances specification, design, and implementation. For me, the key factor is to differentiate the highly optimized SEO pages from the other pages, so that we can continue to optimize these as much as possible.
Guest author: Jon Martin is the Technical Director of Hallam Internet. Having operated within the IT industry for 15 years and specifically within web and development for over 10, Jon has a wide range of experience within many areas of the technical industries.