Page speed and website server optimisation are among the many SEO factors used by Google to rank websites. These two are particularly important in improving your site’s user experience, which is a critical ranking factor for SEO.
Last year, the average loading time for webpages on mobile devices was fifteen seconds. According to Google, the optimal page loading time is three seconds. This means that websites have to look for ways to optimise page load speeds, as this enhances user interaction with the site.
That said, page speed is not limited to the time it takes for all content to load fully. The experience your site provides to users within that time also matters. It is vital to study how smoothly your webpages are rendering.
The best way of ensuring that your pages render smoothly is by optimising the critical rendering path so that you site displays visual content quickly. In a layperson’s terms, this involves reducing the time it takes for the blank screen to change into visual content on your site.
Understanding the Critical Rendering Path
The critical rendering path is the sequence of steps taken by a browser before it renders a page. The process involves the conversion of HTML, CSS, and JavaScript elements into visual content that the user can see and understand.
The browser first requests for all the HTML and CSS resources, as well as JavaScript elements. After receiving them, it parses them and starts delivering visual content. Before the completion of these steps, all the user can see is a blank white screen.
How to Optimise the Critical Rendering Path
The first step of optimising the critical rendering path is identifying and analysing your critical resources. These are the factors that inhibit the rendering of a webpage.
Once you know your critical resources, there are many approaches you can use to optimise your critical rendering path.
First, try to decrease the number of resources by deferring render-blocking elements. The second approach shortens the critical path by prioritising above-the-fold content and receiving all critical assets first. The last technique reduces the number of crucial bytes by lowering the file size of the remaining critical resources.
In this article, we discuss the first approach. The deferral of render-blocking resources is the rearrangement of elements to improve efficiency. It creates a better and faster experience without removing any content from a webpage.
Why is Page Rendering Important?
Time is a valuable resource that nobody likes to waste. According to user behaviour data sourced from Google, most visitors leave a sluggish site after three seconds. In stark contrast, a survey on page speed conducted by Unbounce discovered that almost 75% responded that they could wait for more than four seconds for a page to load before leaving.
The two different studies above show that the view of time is biased. Another study done by the Journal of Consumer Research showed that there are two kinds of time – objective time and subjective time. The former is the normal clock time, whereas the latter is the user’s perception of time.
Naturally, humans are poor estimators of time. This means that overemphasising objective time can hurt your website. The opinion on time among humans is dependent on several subjective factors.
Some of these subjective factors include ‘active wait’ or ‘passive wait.’ In the context of webpage rendering, active wait refers to the rendering of visual content on the page, while passive wait means that the user is staring at a blank white screen.
A study conducted by INFORMS indicated that individuals in passive wait overvalue the waiting time by 36%, even in instances where wait times are almost equal. The same theory is the reason why some computer programs have a progress bar. It reduces anxiety and significantly enhances the overall user experience.
In the case of webpages, there are no loading bars to reduce anxiety. A user does not know what time a page will take to load, which often prompts them to press the back button quickly.
Many pieces of research show that page load speeds have a significant impact on valuable key performance indicators such as time spent on a site, bounce rate and conversions. As a result, SEO experts in Singapore are now focusing on strategies to improve page speeds. These professionals have the resources required to oversee this task, as their role involves ensuring that a website works to achieve the business goals of the client.
Render-Blocking Elements
The principal objective of optimising the critical rendering path is to ensure that a webpage renders above-the-fold content quickly.
As mentioned above, one of the approaches used to achieve this is deprioritising render-blocking elements. These resources are not mandatory to load the above-the-fold content. They also slow down the rendering speed.
Render-Blocking CSS
CSS is characteristically render-blocking – a browser can only start rendering a webpage after requesting, receiving and processing all CSS files. That said, CSS is critical in styling a webpage, and without it, the user experience would be dreadful. A page displayed without CSS is an eyesore.
After requesting and downloading all CSS resources, the browser constructs the CSS Object Model (CSSOM). The time taken by this process depends on the size and quantity of the CSS resources. Google advises web designers to get CSS quickly to the browser to optimise the rendering speed.
Render-Blocking JavaScript
The browser does not need to receive and process all JavaScript elements to render a page. The problem, however, is that the majority of websites need JavaScript to provide the optimal user experience.
If the browser comes across JavaScript before rendering a page, the loading process is temporarily halted until the JavaScript is implemented. The only exception is when the page uses async or defer attributes to specify otherwise. JavaScript can control HTML resources and their accompanying CSS elements.
The browser breaks HTML processing to effect the JavaScript to prevent it from changing the content on a page after rendering.
In this regard, Google recommends the removal of redundant JavaScript from the critical rendering path. The reason behind this is that JavaScript blocks the construction of the HTML Document Object Model, which in turn delays rendering.
How to Detect Render-Blocking Elements
If you want to analyse the critical resources, conduct a test on webpagetest.org and select the ‘waterfall’ image. Pay attention to the resources processed before the green ‘Start Render’ line. From these, identify the CSS and JavaScript resources that are not essential for displaying above-the-fold content.
Once you identify the potential render-blocking resources, remove them. Follow this by testing the page again to check whether there is any change in the time it takes to load the above-the-fold content.
Alternatively, you can test how deferring the render-blocking resources impact the rendering of above-the-fold content. To do this, load the page you want to test in Chrome’s Incognito (Private) Mode. This prevents the browser’s extensions from interfering with the results of page speed testing.
Open Chrome’s developers’ tools by pressing Ctrl+Shift+I, then navigate to the Network Panel and click on ‘Request blocking’ tab. Key in a pattern to block the render-blocking resources. Lastly, select ‘Add’ and reload the page.
How to Decrease Render-Blocking
After confirming that an element is useless in rendering above-the-fold content, you should use the following methods to defer them and optimise page rendering speeds.
Placing JavaScript at the end of HTML
If you are familiar with the basics of web design, you probably know that most people put CSS resources above the HTML <head> elements and links to JS scripts below the HTML <body> element. The placement of a JavaScript resource within the HTML its processing time; the higher it is, the earlier it gets processed.
Although it is useful, placing JavaScript at the end of HTML is a subpar tactic for removing render-blocking resources from the critical path. Other methods are much better in deferring such non-critical resources.
Using Async and Defer Attributes
The async attribute directs the web browser to process JavaScript asynchronously. Instead of interrupting the parsing of HTML, the browser only requests for the JavaScript when resources are available. After the script is received, HTML processing is stopped until the script’s execution is complete.
On the other hand, the defer attribute also directs the web browser to execute JavaScript resources asynchronously. The only difference is that the script processing starts once the parsing of HTML is complete.
Both async and defer are easy to execute and significantly lessen the time spent by a browser in processing HTML attributes. They are useful for the elements on your page that are necessary, but not critical to improving the user experience. These include social sharing buttons, news feeds, chatbots, and so forth.
Using Custom Solutions
If your webpage has a render-blocking JavaScript resource, you can solve the issue by adding a JS function with an ’onload’ event. This removes the script from the critical path, ensuring that it only executes after all content has loaded completely.
Notably, this only works for the resources that have the least priority. For any significant content positioned below-the-fold, you will need to work with SEO Singapore Company to devise alternative ways of improving rendering speeds.
Using CSS Media Queries
These speed up page loading by flagging elements that are used for limited times. They also configure the browser on how it should process the CSS files, depending on factors such as alignment, viewport size, and so forth.
Regardless, the browser will request and download all CSS elements. Non-blocking elements, however, will get the least priority.
CSS media queries are particularly useful in telling the browser which CSS elements are essential to render the page, as well as those that are not.
Conclusion
Many SEO services in Singapore are now prioritising the optimisation of web servers and page speed to improve the overall user experience in clients’ websites. An excellent UX increases click-through rates and the time a user spends on your website, which in turn boost your ranking on SERPs. A higher ranking on Google has numerous benefits to any business, including increased brand awareness, more leads, more conversions and most importantly, more sales.
Having a website that offers a seamless experience also boosts the reputation of your company. A user that visits your site is likely to recommend it to a friend if the experience is exceptionally great.
Get in touch with us for custom SEO services in Singapore.
