Web Performance Best Practices – Obsolete vs Evergreen

Ganesh The Awesome Senior Pre & Post-Sales Engineer at GlobalDots

1st December, 2016 6 Min read

• 
• 

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.

Image Source

How One AI-Driven Media Platform Cut EBS Costs for AWS ASGs by 48%

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:

1. 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).
2. 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.
3. Avoiding CSS Expressions – CSS expressions consist of JS expressions embedded as values of CSS properties in CSS declarations. They were mostly used to emulate standard CSS properties supported by other browsers but not yet implemented by Internet Explorer or as a more compact and convenient method of providing dynamic styling and advanced event handling rather than writing full JavaScript injected styles. However, CSS expressions greatly penalized performance. They were soon eliminated and are no longer supported in any modern browsers.
4. 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.
5. 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.
6. 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.

Image Source

Tweet this: The adoption of new technologies and protocols made some web performance best practices obsolete

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:

1. Poorly Prioritized Content Loading – Pages that load all at once or those that load primary content last have negative effects on user experience. There are a few reasons for this to happen, mainly because of poorly executed CSS, massive page resources and stuttering JavaScript (third-party scripts are the single greatest potential point of failure for websites) that introduces additional latency or even prevents pages from loading. SOLUTION: move stylesheets to the document HEAD, optimize heavy resources and defer scripts.
2. Call-To-Action Last to Load – 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.
3. 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.

Image Source

Tweet this: Obstructing pop-ups? Optimize pop-up scripts or delay them for at least 10 seconds

Evergreen Web Practices

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:

1. Caching – The browser can save or store a copy of images, stylesheets, javascript or the entire page. The round-trip time is significantly reduced by eliminating numerous HTTP requests for the required resources. Better caching means fewer downloads, and immediately a faster page load time. Find out more about caching best practices.
2. 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.
3. 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.
4. 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.
5. 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.
6. Optimizing for Mobile – Mobile device CPU capabilities are lower than those of desktop computers, which makes the round trip time even longer, and adds to the page load time. By reducing the amount of JavaScript required to render the page, and deferring parsing of unneeded JavaScript until it needs to be executed, the initial load time of a page can be greatly reduced.

Tweet this: Web performance evergreen best practices: Caching, Minimizing RTT, Request Overhead and Payload, Optimizing Browser Rendering and for Mobile

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.

If you are looking to improve your web performance, contact our experts to find the quickest and most suitable solutions.