An Introduction to Pagespeed Optimisation
•
0 likes•22 views
Pagespeed measures how fast the content of a page loads. Core Web Vitals is a set of metrics that measure real-world user experience for loading performance, interactivity, and visual stability of the page.
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
- 1. Pagespeed Optimisation Pratyush Majumdar VP - Technology (91Mobiles)
- 2. 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.
- 3. 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)
- 5. Measurement - Page Speed Insight
- 6. Measurement - Page Speed Insight
- 7. 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.
- 8. Introduction to Core Web Vitals - II
- 9. Google Search Console/Webmaster Console
- 11. Structure of a HTML Page
- 12. 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>
- 13. 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
- 14. 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
- 15. Optimisation Core Web Vitals 1. Largest Contentful Paint (LCP) 2. First Input Delay (FID) 3. Cumulative Layout Shift (CLS)
- 16. 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.
- 17. Largest Contentful Paint (LCP)
- 18. Largest Contentful Paint (LCP)
- 19. 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)
- 20. 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.
- 21. First Input Delay (FID)
- 22. 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)
- 23. 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.
- 24. Cumulative Layout Shift (CLS)
- 25. 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
- 26. Further reading ● https://web.dev/vitals/ ● https://web.dev/optimize-lcp/ ● https://web.dev/optimize-fid/ ● https://web.dev/optimize-cls/
- 27. Thanks