An Introduction to Pagespeed Optimisation

Pagespeed Optimisation
Pratyush Majumdar
VP - Technology (91Mobiles)

Why Performance Matters - I
A recent study shows that 46% of users won't revisit a website if it has poor
performance and 25% of visitors will abandon a website that takes longer than 4
seconds to load.
A study by Walmart shows that every one-second improvement in website
loading time increases conversion by 2%. If your site visitor stays longer, they are
more likely to convert.

Why Performance Matters - II
● User Experience (Users expect websites to deliver what they want as
quickly as possible)
● Visitor Retention (Visitors won’t revisit a slow site)
● Conversions and Sales (If our visitor stays longer, they are more likely to
convert)
● Brand Image (A well-performing website will leave a good impression)
● SEO (If a website loads quickly, it can rank higher on Google)

Measurement - Page Speed Insight

Introduction to Core Web Vitals - I
Core Web Vitals is a set of metrics that measure real-world user experience for loading
performance, interactivity, and visual stability of the page.
Largest Contentful Paint (LCP): measures loading performance. To provide a good user
experience, LCP should occur within 2.5 seconds of when the page first starts loading.
First Input Delay (FID): measures interactivity. To provide a good user experience, pages
should have a FID of 100 milliseconds or less.
Cumulative Layout Shift (CLS): measures visual stability. To provide a good user
experience, pages should maintain a CLS of 0.1. or less.

Introduction to Core Web Vitals - II

Google Search Console/Webmaster Console

Components of a HTML Page
<!DOCTYPE html>
<html lang="en">
<head>
title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
<link rel="dns-prefetch" href="https://www.91-cdn.com">
<link rel="shortcut icon" href="https://www.91-cdn.com/images/favicon.ico" />
<style type="text/css">
</style>
<script type=”text/javascript”>
<!-- Google Tag Manager –>
<!-- GA4 –>
<!-- Google Ads –>
<!-- Comscore/3rd party –>
</script>
</head>
<body>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" defer></script>
</body>
</html>

Basic optimisation pagespeed - I
● Gzip compression
● Reduce TTFB using Varnish
● Minification of CSS and JS files
● Static content caching using “Cache-Control” headers
● Use of “async” and “defer” for loading Javascripts
● Use of CDN
● Lazy loading of offscreen images

Basic optimisation pagespeed - II
● HTML minification
● Loading critical and non-critical CSS separately
● Loading of “non-critical” Javascripts on first scroll.
● Lazy Loading of Ads (fetch and render)
● Avoid the use of Fonts
● Reduce DOM size

Optimisation Core Web Vitals
1. Largest Contentful Paint (LCP)
2. First Input Delay (FID)
3. Cumulative Layout Shift (CLS)

Largest Contentful Paint (LCP)
● LCP is the render time of the largest image or text block visible within the
viewport, relative to when the page first started loading.
● To optimize LCP you should also use the First Contentful Paint (FCP) and
Time to First Byte (TTFB) timings.
● A large delta between TTFB and FCP could indicate that the browser needs
to download a lot of render-blocking assets.
● A large delta between FCP and LCP indicates that the LCP resource is
either not immediately available for the browser to prioritize or that the
browser is completing other work before it can display the LCP content.

Largest Contentful Paint (LCP)

Optimise Largest Contentful Paint (LCP)
1. Eliminate resource load delay (ensure the LCP resource starts loading as
early as possible)
2. Eliminate element render delay (ensure the LCP element can render
immediately after its resource has finished loading)
3. Reduce resource load time (goal of this step is to reduce the time spent
transferring the bytes of the resource over the network to the user's
device)
4. Reduce time to first byte (goal of this step is to deliver the initial HTML as
quickly as possible)

First Input Delay (FID)
● The First Input Delay (FID) metric helps measure your user's first
impression of your site's interactivity and responsiveness.
● FID measures the time from when a user first interacts with a page to the
time when the browser is actually able to begin processing event handlers
in response to that interaction.
● Input delay happens because the browser's main thread is busy doing
something else, so it can't (yet) respond to the user.

Optimise First Input Delay (FID)
The browser cannot respond to most user input while it's executing JavaScript on the main
thread. In other words, the browser can't respond to user interactions while the main thread is
busy. To improve this
1. Break up Long Tasks (avoid any piece of code that blocks the main thread for 50 ms or
more)
2. Optimize your page for interaction readiness
3. Use a web worker (run JavaScript on a background thread)
4. Reduce JavaScript execution time (use of “async”, “defer” and minimise the use of legacy
support to give backward compatibility)

Cumulative Layout Shift (CLS)
● CLS is a measure of the largest burst of layout shift scores for every
unexpected layout shift that occurs during the entire lifespan of a page.
● A layout shift occurs any time a visible element changes its position from
one rendered frame to the next.

Optimise Cumulative Layout Shift (CLS)
The most common causes of a poor CLS are
1. Images without dimensions (include width and height size attributes, so that
the browser can allocate the correct amount of space in the document )
2. Ads, embeds, and iframes without dimensions (Statically reserve space for
late-loading content)
3. Dynamically injected content such as ads, embeds, and iframes without
dimensions
4. Web fonts

Further reading
● https://web.dev/vitals/
● https://web.dev/optimize-lcp/
● https://web.dev/optimize-fid/
● https://web.dev/optimize-cls/

An Introduction to Pagespeed Optimisation

Recommended

Recommended

More Related Content

Similar to An Introduction to Pagespeed Optimisation

Similar to An Introduction to Pagespeed Optimisation (20)

More from Pratyush Majumdar

More from Pratyush Majumdar (6)

Recently uploaded

Recently uploaded (20)

An Introduction to Pagespeed Optimisation