Author: Fahim Akhtar

Cumulative Layout Shift (CLS) is User Experience Metrics and it evaluates the layout changes/shifting during the page load. Simply put if during the page load things and unusually moving here and there it is measured in Cumulative Layout Shift (CLS). Its like you were about to click the link or button and it went away somewhere and its at time not only annoying but can be show stopper.

Usually things like

Lighthouse is an open-source, automated tool for improving the quality of web pages mainly(Performance, Accessibility Best Practices, progressive web apps and SEO). It can be easily used from a public URL or from local url in chrome dev tools which requires authentication.

Using Lighthouse is a must if you are serious about your web pages Performance, Accessibility Best Practices, progressive web apps and SEO.

Lighthouse testing can be performed through

• Chrome Dev Tools
• Command Line
• Node Module

It performs audit against you page and generates an report output. You can use the failing points and improve upon them. A lot of points are to do with basic of programming and how the code is written and organized.

Chrome Light House

Scale/zoom in and out
css tricks

Remove CSS rules from css files also try defer loading of css files to reduce unnecessary bytes consumed by network activity.

uncss at Github

uncss NPM Package

grunt uncss plugin

gulp uncss plugin

Broccoli uncss plugin

postcss uncss plugin wrapper

Max Potential First Input Delay is the first interaction experience/impression of your site/page. It is the first experience a user has when he tries to interact with your site. If you have Max Potential First Input Delay low then it means the site is usable and a better User Experience can be expected.

Its like the first impression is the last impression. Max Potential First Input Delay is one of the First metrics tracked and measured in the Performance speed section of the Google Page Speed Optimization Lighthouse report. Matrix captures the some part of Page Load Speed.

Max Potential First Input Delay is the expected time when a user gets active on the page of the site. Max Potential First Input Delay (FID) it is worst case scenarios which a user might experience in getting actively involved with the page on the site. Its something like clicking the call to action button, or selecting a dropdown value, clicking the next arrow of the slider or escaping the modal window or escaping the subscribe window to the time when page is able to complete the action needed or browser is able to respond to the user action.

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.

You can run Lighthouse in Chrome DevTools, from the command line, or as a Node module. You give Lighthouse a URL to audit, it runs a series of audits against the page, and then it generates a report on how well the page did. From there, use the failing audits as indicators on how to improve the page. Each audit has a reference doc explaining why the audit is important, as well as how to fix it.

Note: First CPU Idle is deprecated in Lighthouse 6.0. While some have found that First CPU Idle offers a more meaningful measurement than Time To Interactive, the difference isn’t significant enough to justify maintaining two similar metrics. Moving forward, consider using Total Blocking Time and Time To Interactive instead.