Unveiling the Power of Web Performance Metrics 

 

Hello,

I'm Srinivasan

Lead Consultant

@srinivasanskr

srinivasanTarget

https://srini.codes

Index

Why Performance Matters?

Performance Metrics

Tips & Trics

Demo

Q&A

Performance

Matters

Largest Contentful Paint

First Input Delay

Cumulative Layout Shift

Largest Contentful Paint

Interaction To Next Paint

Cumulative Layout Shift

source: https://gtmetrix.com/

const po = new PerformanceObserver((list) => {
  let entries = list.getEntries();
 
  entries = dedupe(entries, "startTime");
 
  entries.forEach((item, i) => {
    console.dir(item);
    console.log(
      `${i + 1} current LCP item : ${item.element}: ${item.startTime}`,
    );
    item.element ? (item.element.style = "border: 5px dotted lime;") : "";
  });
 
  const lastEntry = entries[entries.length - 1];
  console.log(`LCP is: ${lastEntry.startTime}`);
});
 
po.observe({ type: "largest-contentful-paint", buffered: true });
 
function dedupe(arr, key) {
  return [...new Map(arr.map((item) => [item[key], item])).values()];
}

  • Different cache needs

  • CDN

  • Cache headers & ETag

Caching

Cache Headers and ETag

Cache-Control
  • no-store: Disable Cache
  • public/private: is CDN involved ?
  • max-age=n: until when to cache
  • must-revalidate: force discard cache after max-age
ETag

  • Beneficial in case of large files
  • Allows browser to validate the local cache with minuscule n/w call

Maximize Performance: CDNs

 

  • Progressive Images

  • Modern Extensions

  • Preloading Images

  • Lazy Loading​

  • Asynchronous Loading

  • Fetch Priority

IMAGE

OPTIMISATIONS

 

  • Pre-Connect

  • Pre-Load

  • Self Hosting vs Google Fonts

FONT

OPTIMISATIONS

Interaction to Next Paint (INP)

Pointerup

mouse up

click

Render

Paint

more

Processing Time

Input Delay

Presentation Delay

Blocking Tasks

Interaction to Next Paint

RENDER

BLOCKING

RESOURCES

 

  • Stylesheets

  • Javascript

  • Long Tasks

  • External Libraries

ELIMINATE

RENDER

BLOCKING RESOURCES

  • Inline Stylesheets

  • Reduce Stylesheets

    • Defer Non-Critical CSS

    • Remove unused CSS

    • Modify/Compress CSS

  • Javascript

  • Long Tasks

  • External Libraries

  • Image dimensions

  • Reserve Ad spots

  • Prefer Transform Animations [1, 2]

 

LAYOUT

SHIFTS

References

https://web.dev/blog/inp-cwv-march-12

https://developers.google.com/search/docs/appearance/core-web-vitals

https://gtmetrix.com/
https://webperf-snippets.nucliweb.net/

https://www.linkedin.com/in/joanleon/

https://www.linkedin.com/in/addyosmani/

https://www.linkedin.com/in/jecfish/

Q&A

Made with Slides.com