Web Performance Best Practices – Obsolete vs Evergreen

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

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.

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

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

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 ExpressionsCSS 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.

Latest Articles

How Optimizing Kafka Can Save Costs of the Whole System

Kafka is no longer exclusively the domain of high-velocity Big Data use cases. Today, it is utilized on by workloads and companies of all sizes, supporting asynchronous communication between even small groups of microservices.  But this expanded usage has led to problems with cost creep that threaten many companies’ bottom lines. And due to the […]

29th September, 2024
Migrating Volumez RedHat VMs into Amazon Linux 2 for higher effective discounts rate of Saving Plan

A cloud data infrastructure company relied on extensive use of multiple instance types to test its products. But this made it difficult to optimize costs – a fact which had begun to impact their ability to scale the business.   The GlobalDots team helped the company identify and implement a new infrastructure configuration that both saved […]

19th September, 2024
How Yuki Achieved SOC 2 Compliance 6x Faster

Overview A fast-growing Snowflake optimization platform was missing out on customers because they didn’t have the right data security compliance. Through multiple consultations and extensive vendor-testing, the GlobalDots team selected a solution to provide both tech and human support, helping the company achieve SOC 2 compliance within just 3 months – and win new customers […]

16th September, 2024
Agile Content partners with GlobalDots to revolutionize CDN management ahead of IBC 2024

New partnership between Agile Content and GlobalDots promises to introduce automated multi-CDN solutions, optimizing content delivery and easing provider management for broadcasters worldwide. Amsterdam, Netherlands, September 9th, 2024 – Agile Content, a leading provider of digital TV and video distribution solutions, proudly announces its strategic partnership with GlobalDots, a global leader in cloud performance optimization and […]

Miguel Fersen Director for Iberia and LATAM, GlobalDots
12th September, 2024

Unlock Your Cloud Potential

Schedule a call with our experts. Discover new technology and get recommendations to improve your performance.

    GlobalDots' industry expertise proactively addressed structural inefficiencies that would have otherwise hindered our success. Their laser focus is why I would recommend them as a partner to other companies

    Marco Kaiser
    Marco Kaiser

    CTO

    Legal Services

    GlobalDots has helped us to scale up our innovative capabilities, and in significantly improving our service provided to our clients

    Antonio Ostuni
    Antonio Ostuni

    CIO

    IT Services

    It's common for 3rd parties to work with a limited number of vendors - GlobalDots and its multi-vendor approach is different. Thanks to GlobalDots vendors umbrella, the hybrid-cloud migration was exceedingly smooth

    Motti Shpirer
    Motti Shpirer

    VP of Infrastructure & Technology

    Advertising Services