Blog Details

  • Home
  • 5 Ways To Optimise Loading Speed
Page speed optimisation

“The world is moving so fast these days that the man who says it can’t be done is generally interrupted by someone doing it.” ― Elbert Hubbard

The world moves fast, and keeping up with the fast-changing digital media is not enough. People don’t want to be slowed down by lagging site load times. They expect the type of agility and speed that is simple, seamless, and effortless when they are browsing the web. Performance sites are profitable sites, so before we dive in let’s remind ourselves just how important page speed is for the industries relying heavily on website traffic, in particular, Advertising & Marketing, Hospitality, Technology and Communications & Distribution.

1. Why does page load time matter?

Google proclaimed, in January 2018, that it’ll begin to incorporate page speed and usability of web-pages as a ranking factor in their search algorithms. When Google identifies persistent user pain points, it develops algorithms to promote more usable pages over less usable ones based on its page experience signal, when ranking the sites that appear in Google search results.

To aid website owners, it extended detailed guidance and tools like Page Speed Insights, Lighthouse, Chrome User Experience Report and Search Console. These resources analyse the website responsiveness based on the sites’ speed test and then provides suggestions for improvements to make the site more user friendly.

Earlier last month, the Chrome team announced Core Web Vitals, a set of metrics related to speed/load time, responsiveness/interactivity and visual stability, to help site owners measure user experience on the web. The ranking metrics changes, however, will not come into effect until next year, and a six months’ notice will be provided to all site owners prior to being rolled out.

Conversely, Google affirmed:

“While page experience is important, Google still seeks to rank pages with the best information overall, even if the page experience is subpar. Great page experience doesn’t override having great page content. However, in cases where there are many pages that may be similar in relevance, page experience can be much more important for visibility in Search.”

2. What you need to know about LCP.

Source: web.dev/vitals/

Largest Contentful Paint (LCP) is the primary web vital that evaluates loading performance. It shares the time incurred to render the largest content element (video, image, or block-level text) visible in the viewport, from when the user requests the URL. A good user experience threshold of LCP falls under 2.5 seconds when the page first starts loading.

Here are some of the most common causes of poor LCP.

  • Slow server response times.
  • Bank-end infrastructure.
  • Unoptimised database queries.
  • API responses.
  • Render-blocking JavaScript and CSS
  • Slow resource load times
  • Unoptimised Images.
  • Client-side rendering

Some of the elements that impact LCP are:

  • img elements.
  • image elements inside an element.
  • video elements (if specified, the poster image is used to measure LCP).
  • An element with a background image loaded via the url () function (as opposed to a CSS gradient).
  • Block-level elements containing text nodes or other inline-level text elements.

3. Real-World Challenges Around LCP: What Steps did Chloé Take to Improve Their LCP

Now, let’s take a look at some real-world challenges around LCP. Chloé, a French luxury fashion house, functioned in their early days with an LCP of 10 or 11 seconds where the homepage suffered due to heavy full-screen image downloads, poorly optimised images and delayed network requests for some images. As you can see in the view below, primary image content wasn’t getting fetched and rendered until about 11 seconds into the trace. Read on more to find out what steps did Chloé take to optimise its website responsiveness

Homepage LCP Before:

  • LCP: 10s.
  • LCP Related Node Start Request Time: 5.3s.
  • LCP Related Node Size: 591KB.
  • LCP Related Node Content Download Time: 4437ms

Image Optimisation: Improved resource load times

Chloé discovered through the elements panel in the Dev tools that they were delivering very high-resolution images even for retina screens. The maximum width of the images being served down was 1920 px which they resized not to be more than two times the image viewport size. They also removed overly large srcset sizes over 828 widths in a nice trade-off between rich imagery with maximum size without adversely affecting user experience. Chloé was able to reduce the image’s bytes being served down by 51% from 245KB previously to 125KB, without any noticeable difference.

Source: youtube/optimise-for-core-web-vitals

They also observed product listing pages which used lazy loading images and discovered that four primary images were loading above-the-fold; however, only one off-screen image was tripping up their lazy loading heuristics while being fetched. This particular image had a detrimental effect on their user experience. On the whole, Chloé performed several tasks to optimise their website. They were able to bring down their above-the-fold image download size from 248KB to 14.5KB by adopting image CDN and webP by default that served each of their product listing pages to weigh 57% lighter than before, resulting in improved image and page optimisation. They also resized images to 282px intrinsic size – while the size of images in the viewport was 152px max (right balance on retina devices). They also tuned in the Lazy Loader to better avoid requesting off-screen images.

The upshot of the series of optimisations was that their LCP improved immensely from 11 seconds to 4 seconds. Moreover, the request time for LCP related node regarding hero images reached about 1.3 seconds which is also quite impressive.

Homepage LCP After (Redesign):

  • LCP: 4s.
  • LCP Related Node Start Request Time: 1360s.
  • LCP Related Node Size: 238KB.
  • LCP Related Node Content Downloaded Time: 1679ms.

Deferred Any Non-Critical JS & CSS


Source: youtube/optimise-for-core-web-vitals

Above is a trace independent of Chloé image optimisations. As you can see, Lighthouse highlighted a few render-blocking style sheets that were delaying the early content paints on their product listing page. This is manifested in terms of how much white is seen in the filmstrip. They implemented inlined critical CSS in their SAAS build process to render above-the-fold critical content for users as early as possible in the first few RTT’s and deferring the load of the rest of the non-critical below-the-fold content for the page.

Chloé constructed a syntax allowing their developers to specify for each widget what part of the CSS code goes into their critical CSS. This is highlighted using the critical keywords you see on the screen above. The build for both the critical and non-critical CSS remains consistent.

This CSS optimisation by Chloé of injecting non-critical CSS with a deferred script helped to bring down their FCP from 2.1 seconds to about 1.1 seconds and their LCP from 2.9 seconds to 1.5 seconds, therefore, enhancing their user experience.

Deferred-Any-Non-Critical-JS-CSS Source: youtube/optimise-for-core-web-vitals

You can either manually curate the tooling for CSS or automate it, but regardless of the approach that you take, what’s key here is making sure that you’re delivering meaningful content to the user as quickly as possible

Improved Server Response Times

The longer that it takes a browser to receive content from the server, the longer that it takes to render anything on the screen. A faster server response directly improves every single page-load metric, including LCP. In Lighthouse, ‘Reduce Initial Server Response Time’ is an audit that helps you diagnose if your website has a slow server response time and find out the causes behind it.

HTTP/2 introduced (link rel) Preload and Server Push technique to optimise loading priority. This technique allows the server to push the resources to the browser before they are explicitly requested, which helped immensely in improving page load time. The server starts pushing the most critical resources on the page as soon as the content responds with the initial requests to improve latency. Chloé used automatic Server Push which is an implementation provided by Akamai. It utilises data to decide when to push critical CSS, fonts and script. This allows the server to fully utilise what’s otherwise an idle network resulting in LCP reaching to 2.5 seconds from four and above

However, you have to be careful as Server Push is not HTTP cache-aware, so it is possible for the server to re-fetch and push the same resources again to another related page. You can avoid that by either using cookies or a service worker to track what’s in the cache.

4. Five Ways To Optimise Page Speed

Optimising Content Efficiency

Next to eliminating unnecessary resource downloads, the right move to improve website responsiveness, depending on the resource type—text, images, or videos— is to select an appropriate format and to minimise the overall download size by optimising and compressing the remaining resources in a thoughtful trade-off between size and quality.

Optimising content efficiency is critical to achieving an instant web experience. The following configurations are an excellent start to deliver great website performance; eliminating unnecessary downloads, optimising transfer encoding of each resource through various compression techniques, and leveraging caching whenever possible to eliminate redundant downloads

Limiting Addons & Plugins

Additional website functionality comes at a price: performance degradation. A website that takes on a myriad of plugins slows down the page speed. Webmasters add these attractive but often non-essential features such as Wordfence Security, XML Sitemaps SEO, MonstorInsights Analytics and Social Icon Social Media – to avoid manual coding. The better alternative to adding multiple plugins is to use CMS Software such as WordPress with a built-in plugin architecture while frequently checking for updates to improve sites’ speed.

Moreover, it is not advised to use multiple tracking software to keep tabs on your website traffic stats as this may hinder page load times.

Client-Side Rendering

Many sites use client-side JavaScript logic to render pages directly in the browser. Frameworks and libraries, like React, Angular, and Vue, have made it easier to build single-page applications that handle different facets of a web page entirely on the client rather on the server.

When building a client-side rendered site, consider the following optimisations:

Minimise resources

Optimise the resource code by removing white spaces, comments, formatting, unused codes etc. Minification improves page speed by reducing file size and loading scripts faster.

Use server-side rendering

This concept works by using the server to render the application into HTML, where the client then “hydrates” all the JavaScript and required data onto the same DOM content. Server-side rendering can improve LCP by ensuring the main content of the page is first rendered on the server rather than only on the client.

Use pre-rendering

A browser without a user interface, also known as a headless browser, is used to generate static HTML files of every route during build time. These files can then be shipped along with the JavaScript bundles that the application requires. This technique is less complicated than server-side rendering and also improves LCP in your application.

lcp-prerendering Source: web.dev/optimize-lcp/

Use Content Delivery Network

A content delivery network (CDN) stores content at multiple, geographically diverse data centres allowing users to have faster and more reliable access. If the content on your web page is being hosted on a single server, your website will load slower for users that are geographically farther away. Consider using a CDN to ensure that your users never have to wait for network requests to faraway servers.

Defer & Minimise Any Non Critical Render Blocking JS & CSS

Before a browser can render any content it needs to parse HTML markup into a DOM tree. The parser needs to pause if it encounters any external style sheets or synchronous script. Scripts and style sheets can both be render-blocking resources which can delay the First Contentful Paint, and consequently, the Largest Contentful Paint. Download and serve only the minimal amount of necessary scripts and stylesheets to users. Ultimately, reducing the amount of both blocking JavaScript and C SS results in a faster render, and consequently a better LCP. This can be accomplished by optimising your scripts in a few different ways:

  • Minify and compress JavaScript and CSS Files
  • Defer non-critical JavaScript and CSS
  • Minimise unused polyfills
  • Add inline critical CSS

5. Understanding the impact of website performance on conversion rates.

The impact of website performance on user experience is not minimal. The page speed or site load time is revealed to be the most critical factor in user experience. Interestingly enough, it is three times more important than how the site appears.

Impact-of-UX

When the overall page load time goes from 1 second to 3 seconds, the probability of bounce increases by 32%, and when it goes from 1 second to 10 seconds, then that 9-second delta increases the chance of bounce by 123%.

Page Time

Similarly, the investments businesses make on website speed optimisation has a direct impact on business success. Pinterest revamped their mobile web experience to focus on their performance and saw an uplift in both user sentiment and engagement. By using modern caching practices, even if the user had a bad connection or no connection at all, they were able to preload the user interface for follow-up visits. There was a striking difference to that initial time 23 seconds to interactivity. As of July 2018, 800,000 weekly active users added the mobile site to their home screen, and that net effect was a 44% increase in revenue.

Designing and implementing fast sites set up teams for performance success, get more user satisfaction, higher conversion rates, more time spent on pages, and higher revenue.

Final Thought

Websites with page load times less than 2.5 seconds perform better on almost all fronts. They rank well in search engines, deliver more positive user experience, and see higher conversion rates and revenue.

As Core Web Vitals becomes Googles new ranking signal, it’s now more important than ever to continuously focus on improving page load time and performance. Curious how website speed optimisation could help your organisation reach its conversion goals?

Call us today for a free consultation at
+44-774-785-3337

Leave Comment

Search
codestronaut
codestronaut