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 are never going to give a page with any amount of design content a perfect score. In fact, most websites that host performance testers will not ace their own tests. So let your response to these ‘test results’ be calculated. 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 and 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 vs aesthetic in a number of scenarios. Sites are often made faster at the expense of aesthetics. Sometimes those same elements of a website that look the best can also be the same elements slowing down page-load speeds.
Great developers, sites, and companies will choose to implement features for aesthetic purposes that slow down page-load speeds. This can be a conscious choice and there’s nothing wrong with implementing some page elements that are going to be detrimental to page load speed.
The Impact of Video on Page Load Speed
In the same way, having car seats in a car is going to slow it down due to the weight, no one is going to argue with a car designer that a car shouldn’t have seats.
One of the biggest culprits in this category is streaming video. No matter if it’s HTML5, YouTube, Vimeo, etc., you’re going to sacrifice some page load speed for video on a landing page.
This is one that we weighed ourselves, as the video features on our homepage slow down our overall page-load timings. Here, we decided, we’ll take a little hit to our page speed for sake of the aesthetic experience. This is not uncommon, you’ll see everyone from Nike to Chanel choose to implement large video content on various landing pages and page sections, despite the known degradations to 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 & fast loading to more elaborate, with auto-loading videos & animations that draw extended times.
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.
Google web.dev
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.
Microsoft Documentation
The audit establishes a baseline and gives you tips on how to improve. | Source Microsoft
