Web Performance Best Practices – Obsolete vs Evergreen
6 Min read
Table of Contents
When users visit a website they expect immediate access to its features and content. Page load time has also become an important metric as the more it takes for the page to load the more it’s likely for the user to have a negative experience, making it less likely to complete the expected action (conversion). Over the last decade user’s website-related expectations have constantly increased which means a well performing web asset can provide a huge competitive advantage. Its why web performance became more critical than ever, even an SEO ranking factor, with lots of guides and suggestions being published that can help websites perform better.
Now, as the web, its technology and protocols evolve, some “best practices” gradually became obsolete. In this article we’ll cover web performance best practices that became obsolete, as well as some that aren’t really obsolete but are easily neglected and will conclude with evergreens that are always worth considering.
Plain Obsolete Practices
Most of the best practices valid a few years ago are still very relevant. However, due to the adoption of newer technologies and protocols (SPDY and HTTP/2) some practices became obsolete and no longer relevant. Some of those include:
Merging JS/CSS – Separated JS files were something to definitely avoid as multiple JS files would block the browser for each one. Now that browsers no longer get blocked while fetching JS and with 6 concurrent connections available it can be more efficient to have them in separated files (a reasonable amount though, as too many can again bring unnecessary delays).
Domain Sharding – Until recent browsers could only open 2 connections per domain, that’s why it was useful to spread content across multiple domains allowing browsers to download more data. With the implementation of HTTP/2 and the switch to 6 connections per domain it is no longer helpful to shard content across domains (except in extreme cases). Domain sharding became unnecessary and can even have a negative impact on overall performance.
Removing Duplicate Scripts – Newer browser technologies easily handle duplicate scripts. Unless developing for older IE versions, avoiding duplicate scripts is no longer an issue. But be sure to know whether or not a significant portion of your traffic uses IE6 and 7. If they do, then you still need to apply this rule.
Asset Concatenation – It was used as a workaround for lack of multiplexing in HTTP/1 and allowed to fetch multiple files within one request. It would improve HTTP/1.x performance and deliver better resource compression but greatly complicated code and applications. It would also break granular caching, updates and revalidation while delaying resource processing and execution. It resulted in heavy and expensive cache invalidations. The only case where it might be useful is when looking to optimize resource compression. Ultimately it is advised to avoid with HTTP/2.
Resource Inlining – Inlining is a latency optimization technique that eliminates the full request round trip and reduces “number of requests” in HTTP/1. It’s used as parallelism workaround for HTTP/1.x and requires close attention to caching implications as it brings the same downsides as concatenation. In HTTP/2 it’s replaced with server push.
With the advent of SPDY and HTTP/2 some other practices will eventually fade into obsolescence. One such that comes to mind is spriting – which could be made obsolete as fetching individual resources becomes increasingly faster thus making the advantages of spriting irrelevant.
Not Obsolete but Often Neglected
There is a number of best practices that, when poorly implemented, often end up being worst practices. We listed the 3 most common worst practices that are to avoid at any cost when looking to improve web performance:
Call-To-Action Last toLoad – It has been proven many times that the CTA should be one of the first if not the first one to be loaded when optimizing user experience. However, because of other conventions it gets delayed when placed at the bottom of a featured image and when using default baseline images. SOLUTION: Move the CTA or implement other image optimization techniques.
Obstructing Pop-up – Pop-ups that block the rest of the page pop too early and sometimes even prevent the page from rendering ultimately disrupting the user experience. SOLUTION: Optimize pop-up scripts or delay for at least 10 seconds.
In order to conclude this article in a positive tone, after listing obsolete and neglected practices, here are some of those that definitely can help when looking to improve the performance of a web asset. There are some evergreen guidelines to follow in order to set up a well performing web asset such as:
Minimizing RTT (Round Trip Times) – RTT is the time between a request for data and the complete return or display of that data. Some of Google’s performance best practices suggest minimizing DNS lookups and redirects, avoiding bad requests, avoiding document.write and CSS @import, optimizing the order of styles and scripts. Dive deeper on minimizing RTT.
Minimizing Request Overhead – Minimizing request overhead for each page to load means two things: keeping cookies and request headers as small as possible, and serving static resources from a cookieless domain. In a nutshell, a cookie diet to avoid net congestion. Learn more about minimizing request overhead.
Minimizing Payload Size – The essential data that is being carried within a packet across the internet is known as payload. Reducing weight of a payload involves compression and minimization of text based files such as scripts or styles, re-compression of some downloadable files, zero-body components and more. You can find out more about minimizing payload size.
Optimizing Browser Rendering – Once all resources have been downloaded to the client, and all the processes have been optimize, the browser still needs to load, interpret, and render all of them. Performance optimization is thus not complete until the browser side characteristics have been enhanced as well. Learn more about optimizing browser rendering.
As said, user expectations are increasing and more needs to be done to satisfy or exceed them. Today digital presence is a critical component of every business and requires to be approached accordingly. However, constant evolution of the web and its technology makes it harder to keep tabs on everything that needs to be done when looking to optimize the performance of a web asset. Luckily, there are always experts you can turn to.
Imagine navigating your digital ship through the turbulent seas of cloud storage management. One wrong calculation, and you’re either sinking under the weight of overprovisioning or losing speed due to performance hiccups. But what if there was a compass that could make this voyage smooth sailing? GlobalDots presents you with an Autoscaler that’s revolutionizing the […]
In the competitive world of aviation, where alliances are often forged with rivals, and competitors share skies as partners – GlobalDots is your co-pilot in navigating clouds of looming threats. Now, we are introducing our new e-book, which explores our curated innovative solutions for Aviation, including: Nowadays, where buying a ticket is just the beginning […]
Dr. Eduardo RochaSenior Solutions Engineer & Security Analyst @ GlobalDots
Before widespread cloud adoption, the cloud’s major selling point was a reduction in computing costs. Today, however, many organizations find themselves mired in increasingly costly and complex cloud environments, even forcing industry leaders such as Nvidia back toward on-prem setups. The priorities upheld by DevOps throughout the last decade have played a major role in […]