Understanding Page Load Speed
Ever found yourself clicking on a website, waiting what feels like an eternity for it to load, and just giving up. Thatâs where page load speed comes in. Itâs not just a technical term; it genuinely affects how users interact with a site.
Now, when people talk about page load speed, theyâre usually referring to the time it takes from clicking a link to being able to see content on your screen. It can be a bit of a rabbit hole because this isnât just one thing happening in a straight line. There are multiple steps and processes working in tandem - things like images loading, scripts running, fonts appearing, all at the same time.
At its core, it boils down to two basic measures - page load time and time to first byte (TTFB). And if you want to get more technical than that, thereâs the Largest Contentful Paint (LCP), which is another metric that measures when the main part of the page has loaded. In real terms, this means that a user could see your page appear on their screen but still have some assets loading.
Or nothing at all might load for an extended period if something goes wrong with the backend. And the reasons behind it are vast. More or less. From design elements that havenât been optimised or excess code thatâs redundant to complex scripts that need constant processing power, there are generally many ways page speed can be impacted.
We tend to take our internet speeds for granted in the digital age but if things take too long to load, users are likely to leave. With more people using mobiles as well, making sure sites are optimised for all devices and connection speeds matters. Understanding how much bandwidth is available per user or per device can also help you optimise for different screen sizes and connection speeds. Even Googleâs algorithm updates look at this factor now so keeping these benchmarks in mind while designing websites can almost never go a long way.
The Importance of Resource Prioritisation
I find myself asking, how much of a difference could resource prioritisation really make to how quickly the pages on my website load. Having spent a fair amount of time working with online pages and content, Iâve realised that itâs actually a pretty huge difference. This is a sentiment thatâs echoed by industry experts and for good reason.
Sort of. Resource prioritisation is all about ensuring that your webpage loads as fast as possible, without all the unnecessary additional features loading as well. This is particularly useful when you have a webpage that has certain elements that need to appear very quickly to engage potential users - sections like product images, blog headers and introductory videos or graphics. You want these bits to be visible within seconds of your webpage being launched and not after someone scrolls down twice.
Thereâs also the fact that viewers have come to expect very little lag when they visit websites, especially since their own internet connections have improved significantly over the years. It pays, then, to have your highest-traffic pages displaying their most important sections without any hiccups. As someone who still remembers the days before fast 4G and 5G connections were available across devices in Australia, I can guarantee this is something weâve all grown used to.
Itâs interesting to know that research has shown people will leave websites if they feel like they arenât responding as quickly as theyâd like them to. Thatâs pretty serious information because slow-loading pages could mean people donât buy things from your online store or even see what youâre advertising on it. So using resource prioritisation steps is sort of a non-negotiable if you want your website(s) to work efficiently today.
Step 1: Analyze Current Resource Loading
Do you remember the last time you visited a website that loaded at the speed of light. It must have felt like magic, right. But here's the thing - there is comparatively no magic involved in a fast-loading website. Comes Across As A lot of work goes into ensuring that resources load efficiently and that nothing unnecessary gets in the way of what users are looking for.
One of the very first steps to this process is to take stock of everything that loads on your website. By identifying the different resources and elements that load on your web page, you can analyse and figure out how it all comes together. This is also crucial to identifying bottlenecks - unnecessary resources that might be taking up space or otherwise slowing down your website.
For example, if your business has recently rebranded but hasn't updated the photos, it might be worth checking if outdated or no-longer-needed photos are still loading on your webpage and unnecessarily taking up bandwidth. Analysing current resource loading can help you figure out what needs to stay and what needs to go. And when this process is done right, it can lead to some very happy site visitors and improve key engagement metrics.
Step 2: Identify Critical Resources
Have you ever found yourself wondering what exactly makes a website tick. Itâs not the flashy visuals or even the painstakingly curated content - not really. Sort of. Thereâs a bit of wizardry behind the curtain that most users are not aware of.
Web pages require a certain number of files to open, and thereâs a bit of an order to it too. To get a web page to load - and quickly at that - thereâs a critical path of resources that absolutely have to be loaded, and it helps if theyâre loaded first. Iâve found that websites tend to be bloated with unnecessary items - even more so if theyâve been around for a bit and are being handled by new designers.
Itâs easy to keep adding resources, but more often than not, youâre loading multiple versions of the same library. Or youâre simply calling functions that donât exist in your codebase anymore. Thatâs where resource prioritisation comes in handy. By identifying key resources, you can start addressing the actual issues that cause slowdowns rather than just cleaning up the code base at random.
The critical path actually includes everything from the HTML markup to the JavaScript libraries, stylesheets, images, fonts, and videos needed for proper display and functionality. By focusing on what needs to be loaded and when, it becomes easier to start pinpointing the blockers for speedier page loads. A great way to do this is by using tools such as Chrome Dev Tools or Lighthouse to identify large files that take time to load or pages blocked by files that havenât finished loading yet.
If you have a development team, chances are probably theyâve already used this approach once before, but you can always check again and ensure itâs up-to-date. More or less. It helps you prioritise what needs fixing first when taking on website performance as an initiative - which is why itâs so important to get started on this one early on in your process.
Step 3: Implement Asynchronous Loading
Has it ever crossed your mind why certain website elements seem to appear at different times. Or perhaps you've noticed a page has loaded before the ads even pop up. This is called asynchronous loading - a clever approach that prevents blocking and delays, allowing a page to load as efficiently as possible. With this technique, you can reduce loading times drastically and make web pages much more responsive.
Traditionally, scripts are loaded synchronously. Meaning the browser processes code in the order it's written in the HTML. And any render-blocking resources that take longer to load can cause a domino effect on everything else. But it doesn't always have to be one after another for websites to work, which is what asynchronous resource loading addresses.
When scripts are loaded asynchronously, different resources start downloading at the same time and can even execute as soon as they finish loading - there is slightly no waiting around for what comes before them. There are two ways to do this: async and defer attributes. While async lets scripts run without waiting for other elements, defer allows parallel downloading but preserves execution order - so they'll still run one by one (in a certain order) after everything is often ready.
If that's too technical, just remember that using these attributes ensures no script gets left behind on even the slowest connections, all while your page becomes lighter and snappier for users.
Step 4: Optimize Resource Delivery Techniques
How do you get your web resources loaded at just the right moment. Not too early, not too late, and not in a way that disturbs the delicate dance between visual appeal and speed. Well, optimising resource delivery is a bit of art and science - a multi-pronged approach to making sure every CSS or JavaScript file hits the browser in the best sequence for performance.
Seems Like if that sounds like a lot to process - itâs because it sort of is. Not all resources are possibly created equal though. Some will be essential for rendering the page or UI correctly, and some will be non-essential but add interactivity or special effects.
And letâs not forget about âthe extrasâ that donât always need to be delivered straight away - things like analytics scripts or tracking pixels (not quite part of website functionality but still considered best practice by most digital marketers). More or less. The goal should be to prioritise loading essential resources over non-essential ones. Sounds pretty obvious, I know.
But figuring out whatâs essential can be fairly subjective. In reality, it depends on various factors including how your website is comparatively structured and what you aim to offer your users. Careful management of third-party scripts and tools often comes after youâve found an effective way to load all your main assets, which is tricky territory because it involves working with someone elseâs rules instead of playing by your own.
Some web browsers give you more control than others while CDNs appear to streamline some portions of resource delivery. Eventually if youâre creative enough (and have hours to spare) you can devise new ways of prioritising delivery so that critical render assets load before anything that doesnât contribute meaningfully towards page experience. Itâs worth mentioning that delayed resource loading might cause incomplete pages for new users.
But once theyâre already familiar with your website, faster loading makes every subsequent visit much more enjoyable so keep trying out different methods until something works effortlessly on both desktop and mobile without breaking the look & feel youâve spent hours perfecting.