This is usually the time of year for predictions for what’s going to be important in 2020 and the years to come. And I guess no one would object if I argued that a blazing fast website is going to be important in 2020, but hasn’t that been the case for years now?
A slow website has long been known as one of the biggest conversion killers for leads and sales. On top of that, it’s a ranking factor for Google, so by now, there are plenty of incentives for everyone to work on improving their page speed.
There’s just one problem though - how exactly do you build a fast website? And if your website is slow, what can you do to improve it?
That’s what we’ll try to dive into today, with the help of some of Umbraco Gold Partners. The answers will take us through a lot of different tips and tricks - everything from why setting targets and testing before launch is important to optimizing images and setting up Accelerated Mobile Pages (AMP).
The question we asked was:
“What’s your best tip(s) to improve page speed on a website?”
Â
Make sure you properly test the performance of the site under load before it goes live. This is especially important with sites with more complex hosting, such as a load-balanced configuration. Traditionally load testing was expensive as it required costly software and hardware all over the world to simulate close to real-world conditions. But tools such as Load Impact, which is our favourite, have dramatically cut the cost to run load-testing simulations.
Recently on a Proof of Concept of an Umbraco 8 site which will be hosted on Azure Web Apps, we found that page load speeds were fine without any load on our Webapps site, but once we simulated something close to real-world levels of usage (which aren’t particularly high) we found that we had under-provisioned the Azure Web Apps, and that page load speeds regularly spiked far higher than was acceptable.
Without load testing early, we would only have found this issue once the site went live.
Â
The benefits of improving page speed have been well documented with every 100-millisecond delay in load time leading to drop-offs across first-time users, returning visitors, and, maybe most importantly, sales. It’s because of metrics like these that page speed is now no longer just an afterthought.
Here at twentysix we consider page speed through every step of the journey and performance targets are set based on competitor analysis, current site metrics, and client KPIs. Having set goals is fantastic because it allows us to have conversations about performance at a very early stage and especially helps us with deciding on which frameworks are most suitable.
But the reality is there isn’t a magic bullet to fix performance issues although there are a number of "quick" wins. Making sure our CSS and JS are minified, making use of modern image formats such as WebP, and enabling compression on the server via Gzip is a good start and there are a number of tools out there to help spot issues such as Google Lighthouse.
Our advice is to talk about performance early. Discussing site speed and setting goals allows you to plan much more in advance, and even if that leads to having difficult conversations with clients, we’d much rather be looking for solutions near the start of a project than struggling towards the end.
Â
Â
The first step to improving site speed is to conduct the Google Page Speed tools and the Chrome dev-tools Lighthouse audit. Both generate similar reports highlighting common issues that key changes can be implemented from.
These reports often include ensuring images are served at the correct size which Umbraco’s built-in image cropping can be used for. Using a plugin such as LazyLoad for <img> and <picture> elements is also a quick win ensuring images are lazy-loaded when off-screen.
Another common issue is deferring non-critical resources and reducing critical request chains. This involves ensuring that only critical CSS and JS files are synchronously loaded while all other resources are asynchronously loaded. The team at NetConstruct has opted for a webpack-based build process for CSS and JS assets. As a result, we can easily split code into asynchronously loaded chunks, inline our runtime, and manifest JS code for each entry point. The main file is then loaded asynchronously using the async or defer attribute on the script element.
Asynchronously loading CSS files is slightly more complex depending on the browser you’re developing for. We follow the approach outlined by Filament Group using the loadCSS package. This requires your stylesheets to be added to the page with a slightly different link element:
<link rel="preload" href="path/to/mystylesheet.css" as="style" onload="this.rel='stylesheet'">
This element will load the CSS file in the background without blocking the initial page render. Once loaded, the rel attribute will be updated and the browser will use the new styles to re-render the page. However, as this approach means the page is initially loaded without styles, we also recommend including some critical styles inline to ensure the page is rendered in a sensible way. This could be as simple as ensuring the above-the-fold content is rendered initially, and subsequent content rendered when the main styles are loaded.
A final check for speed performance is a review of the third-party scripts being used. We’ve had a lot of success following Harry Roberts’ approach which identifies poorly performing third-parties and helps begin a discussion of cost vs benefit for each provider. Ideally, this will result in some providers being removed plus an increase in performance and PSI scores.
Following these techniques has allowed us to increase scores from below 50/100 to over 80/100 without a significant amount of development work.
Â
One of our favourite new features is Accelerated Mobile Pages, commonly known as “AMP”, a Google initiative that has soared in popularity with over 1.1 million websites now incorporating the approach (According to BuiltWith).
Fundamentally, an AMP page is a web page designed for pure readability and page speed on mobile devices. It delivers a fast version of the page because the HTML and CSS are streamlined. Here at CSI Media, we have recently implemented AMP pages for one of the UK’s biggest travel companies across their Umbraco websites. This has significantly improved page loading speed for destination pages, blog,s and news articles.
Technically, our developers follow all modern best practices to ensure websites perform well. We minify CSS and JavaScript, defer CSS and JavaScript, and implement lazy loading for all new web builds.
From a content perspective, my tip for fellow digital marketers is to make sure you are optimising images. It may seem like an obvious one, but it does get missed, especially when you have a big to-do list and you just want to get a new page live. Optimising your images helps the page load quicker and improves the user experience - after all - those milliseconds add up and can make a big difference in the world of the web!
I recommend a simple checklist when creating new pages:
They’re simple things that can make a big difference.
Finally - on images - we can implement a solution in Umbraco that automatically optimises images further when they’re requested on the front-end, helping pages to load even quicker!
Â
Â
Deferred & inline styles
Eliminate render-blocking CSS by loading styles for above-the-fold content as inline CSS. Defer the loading of below-the-fold styles so your users aren’t blocked waiting for your entire site’s CSS to load.
Lazy load assets
Instead of loading the entire web page and rendering it to the user in one go, lazy-loading loads only the required section and delays the remaining, until it is needed by the user. This reduces initial page load time and initial page weight as well as system resource usage.
Compress images
The smaller your files, the faster your pages will load. On average, images make up around a fifth of a webpage’s weight, so make sure your site assets are compressed to optimise load times.
Videos
Even if you hide large assets like videos with CSS, it will still load in the background. If hiding a large asset for mobile users, defer the load of this responsively using JavaScript.
First Contentful Paint
For faster first contentful paint and first meaningful paint speed for mobile users, try using a simple heading on mobile with no images or video. Instead, use only HTML and CSS.
Content Delivery Network
Use a delivery network to serve assets such as media and images. This is particularly effective in improving page speeds for high-traffic sites.
Use of Scripts
Avoid and minimise the use of blocking JavaScript, especially external scripts that must be fetched before they can be executed. Scripts that are not critical to the initial render should be made asynchronous or deferred until after the first render.
Browser Caching
When you visit a website, the elements on the page you visit are stored on your hard drive in a cache or temporary storage. This means that the next time you visit the site, your browser can load the page without having to send another HTTP request to the server. Leverage browser caching to improve load times for repeat visitors.
Â
So what can you take away from these 6 answers? We’ve tried to boil it down for you right here.
Â
Plan and talk about performance from the start
If you’re building a new website, it’s very important to talk about performance early on and set targets. This allows you to build for performance right from the start, instead of having to do fixes late in the process.Â
Â
Test, test, and test
Before hitting that magical “launch button”, it’s important to load test your website to ensure that it can handle the traffic once it is actually live for the users. If you don’t test it properly before going live, there’s a risk of unforeseen issues that you’ll then have to fix on a live site. This is especially important for websites with complex hosting, such as a load-balanced configuration.
Â
The “quick-wins” you can implement
While there’s no easy or fast way to magically make your website fast, there is a list of things you can do on any project to improve your page speed. Minifying your CSS and JS, making use of modern image formats, enabling compression on the server via Gzip, and leveraging browser cache are some of the low-hanging fruit that can improve your performance.
Â
An image speaks a thousand words...
But it also takes up a lot of bytes! To ensure a fast website it’s important to think about file formats, image compression, and lazy loading when adding new images to your website. Another way to improve the performance of images is by using a Content Delivery Network.
Â
Think mobile-first with AMP and simple heading
How many visitors do you get from mobile devices? In most cases that is a lot - and growing - which means you need to think about optimizing performance for mobile devices. Users on mobile devices often visit your website on slower and less stable internet connections. Some ways to do this is to implement Accelerated Mobile Pages and design simple headings for mobile, where you defer the load of large assets such as videos until critical resources have loaded.
Â
Defer non-critical resources and using inline styles
Above the fold, content should be loaded right away, while everything else can be deferred for asynchronous loading to ensure a faster-perceived load time for the user. One way to accomplish this is by using inline styling for your above-the-fold content and load your code in chunks.
Â
Use third party scripts with care
Using third-party scripts is almost inevitable, but can hurt your website performance if it is not done properly. Make sure to use external scripts with care and make a cost-benefit assessment of the external scripts you are using. If one or more of them are performing poorly it might be worth it to look for better alternatives - or to remove them completely.
Â
Thank you for reading along - we hope you learned some new tricks to improve your page speed. Also a huge thank you to our Umbazing Gold Partners who shared their tips with us - #H5YR!
Â
Last year Umbraco joined in on the official Hacktoberfest organized by Digital Ocean and Github. You might have already guessed it - we’re doing the same this year! It is a great way to show appreciation to our contributors - regulars as well as brand new ones. And then there’s, of course, some exclusive Umbraco swag to be earned.