Google’s Web Performance Best Practices #5: Optimize Browser Rendering

Almost done. Actually, as far as desktop optimization is concerned, the browser rendering rule is the last one in Google’s optimization best practices series. Please check our previous posts on caching, minimizing round trip time, downsizing on cookies and minimizing payload size. Our next and final topic will concern mobile optimization.

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.

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%
A collage of different web browser logos including Internet Explorer
Once all resources have been downloaded to the client, the browser still needs to load, interpret, and render them all.
Image source

Resources that are rendered through browser include:

The main rules while enhancing the performance on client side are using efficient CSS selectors, avoiding CSS expressions, putting CSS in the document head, specifying image dimensions, and finally – specifying a character set. All to be explained below.

Not all browsers render all web content in exactly the same way. Your web content needs to work well on a huge, diverse number of different web browsers, not to mention web-enabled devices (we’ll return to this topic later).

Browsers read your CSS selectors from right to left. The first part that is selected is known as key selector. Avoiding inefficient key selectors that match large numbers of elements can speed up page rendering.

There are four kinds of key selectors:

  • ID selector
  • class selector
  • tag selector
  • universal selector

It is that same order, ID selectors are the most efficient and universal are the least efficient in general. But you need to combine this idea with the right-to-left rule.

The fewer rules the engine has to evaluate the better. Thus, removing unused CSS and optimizing the definitions of the rules themselves is an important step in improving rendering performance.

So, which categories of rules are considered to be inefficient?

Rules with descendant selectors, for one. Descendant selectors are inefficient because, for each element that matches the key, the browser must also traverse up the document tree, evaluating every ancestor element until it finds a match or reaches the root element. Descendant selectors are to be avoided at all times, especially if they specify redundant ancestors.

Instead of descendant selectors, class selectors can be used.

A code snippet showcasing CSS styling,including rules for body and a class named 'hide-scrollbars'.
An example of an inefficient descendant selector, with universal selector as the key
Image source

 

A code snippet showing a structure with unordered list (ul),custom HTML element,and associated CSS styling.
An example of an inefficient descendant selector, with tag selector as the key
Image source

Child and adjacent selectors can also be inefficient because, for each matching element, the browser has to evaluate another node. It becomes doubly expensive for each child selector in the rule. Further on, including tag or class qualifiers (overly qualified selectors) just adds redundant information that needs to be evaluated needlessly, and it is advised that they are removed. Finally, the :hover pseudo-selector on non-anchor elements is known to make IE7 and IE8 slow in some cases.

Avoid: CSS expressions

CSS expressions were introduced in Internet Explorer 5.0 and they enable you to to assign a JavaScript expression to a CSS property, i.e. to add a dynamic property to a document, or to be able to dynamically change document properties in response to various events. For example, the background color could be set to alternate every hour using CSS expressions. The problem with expressions is that they are evaluated more frequently than expected, at times when the page is scrolled, or at times when the user moves a mouse over the page…

The recommendations are to use standard CSS properties when possible, or rewrite CSS expressions as pure JavaScript instead.

Final Recommendations

Moving some sheets from body of the document to the head of the document can significantly improve browser rendering. By ensuring that stylesheets are downloaded and parsed first, you can allow the browser to progressively render the page. Inline style blocks and references to external stylesheets should be moved from body to head.

Further on, specifying a width and height for all images allows for faster rendering by eliminating the need for unnecessary reflows and repaints.

Finally, HTML documents are sent over the Internet as a sequence of bytes accompanied by character encoding information. The browser uses the character encoding information to convert the stream of bytes into characters that it renders on-screen. To avoid delays in the process, you should always specify the character encoding in the HTTP response headers. This will allow the browser to begin parsing HTML and executing scripts immediately.

Find out more:

Promotional banner for a Content Delivery Network (CDN) offering a free trial without a credit card.

About GlobalDots

With over 10 years of experience, GlobalDots have an unparallel knowledge of today’s leading web technologies. Our team know exactly what a business needs to do to succeed in providing the best online presence for their customers. We can analyse your needs and challenges to provide you with a bespoke recommendation about which services you can benefit from.

GlobalDots can help you with the following technologies: Content Delivery Network, DDoS Protection, Multi CDN, Cloud performance optimization and infrastructure monitoring.

Latest Articles

Weak Defences: The Most Hackable Sports Passwords

We get it. Thinking of another password that you haven’t used before can be frustrating – especially when we have to change or update our passwords so regularly. But while it might be tempting to use your favourite sports teams and clubs as passwords, it’s a risky move for your cyber security.  Using unique passwords […]

7th April, 2025
Solving Network Security Issues for Rapidly Growing Global Businesses

Introduction Ryohin Keikaku is a global manufacturing and retail company that handles everything from product planning to sales for products known as “Mujirushi-Ryohin” in Japan and “MUJI” overseas. To keep pace with its rapid expansion—adding 100 new stores annually in Japan—and its growing global presence, now spanning 225 locations across 20 countries, including 50 stores […]

3rd April, 2025
Closing the Gaps in API Security: How to Build Visibility and Protection for Modern Enterprises

APIs may be your organization’s greatest enabler, but without proper context, they can become its Achilles’ heel. APIs power modern digital ecosystems, connecting applications, enabling seamless machine-to-machine communication, and driving operational efficiencies. However, as APIs become the backbone of enterprises, they also represent an expanding attack surface — one that traditional Web Application and API […]

27th February, 2025

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