In this article
Fast page load speeds are a key website performance metric and a focal point of many SEM deep dives. This article focuses on two aspects of Page Load Speed: How-to-Measure & suggestions on Improving Page Load Times.
In this article, we run through a couple of real-world scenarios before highlighting Google and Microsoft‘s documentation and suggestions on improving page load speeds.
Don't waste time, energy, and resources chasing arbitrary numbers.
Take a measured approach. PageSpeed Insights, GTmetrix, and other performance graders use varying methods to analyze site content. While your page load speeds should be fast, UX should always be paramount. In fact, most websites that host performance testers will not ace their own tests. So, let your response to these ‘test results’ be calculated as well. No need to hit the panic button if your website has a few areas that need to be addressed. These tools are great for identifying trouble spots on individual landing pages. Whenever possible, you should always optimize and minify code appropriately.
Site Load Speed vs Aesthetics: Finding a balance
That said, you’re going to have to weigh function versus aesthetic in various scenarios. Often, sites prioritize speed over aesthetics. Sometimes, the elements of a website that have the best visual appeal can also slow down page-load speeds. Great developers, sites, and companies may choose to implement features for aesthetic purposes, even if they slightly affect load speed. As long as the UX remains positive, there is nothing wrong with this conscious choice.
The Impact of Auto-Play Videos on Page Load Speed
In the same way, just as having car seats in a car slows it down due to the weight, no one would argue with a car designer about the necessity of seats in a car. One of the biggest culprits in this category is streaming video. Whether it’s HTML5, YouTube, Vimeo, or other platforms, including video on a landing page will inevitably result in some sacrifice of page load speed. There are steps that can be taken to mitigate the effects, such as developers choosing to strip out default cover images from YouTube and Vimeo embeds, lazy loading, etc. We faced this dilemma ourselves when the original auto-play video content on our homepage slowed down our overall page-load timings. This is not uncommon; you’ll see companies from Nike and Chanel implementing autoplay of large video content on various landing pages and page sections, despite the known degradation in page speed.
How much is too much?
That’s a question every design team has to answer for themselves. As a general rule of thumb, we like to implement a mix of landing page experiences throughout a website. These range from simple and fast loading to more elaborate, with auto-loading videos and animations that require us to work a bit harder to bring down the page load times with additional page-speed optimizations.
Google's Page Load Speed Suggestions & Documentation
When building a modern web experience, it's essential to measure, optimize, and monitor if you're to get fast and stay fast. Performance plays a significant role in the success of any online venture, as high-performing sites engage and retain users better than poorly performing ones. Sites should focus on optimizing for user-centric happiness metrics.
Tools like Lighthouse (baked into web.dev!) highlight these metrics and help you take the right steps toward improving your performance. To "stay fast", set and enforce performance budgets to help your team work within the constraints needed to continue loading fast and keeping users happy after your site has launched.
Sources: 1 Google web.dev | 2 Chrome Developers
Microsoft's Page Load Speed Suggestions & Documentation
Whenever you set out to optimize the load performance of a site, always start with an audit. Make one change at a time, and audit the webpage after each change in order to display how that isolated change affects performance. The audit establishes a baseline and gives you tips on how to improve.
