Web page metrics Time to First Paint - First Paint indicates navigation. It confirms that rendering has started First Contentful Paint - When browser renders the first content in the DOM. Time to Interactive (TTI) - Page has displayed content, Event handlers are registered for most visible elements, page responds within 50 ms - user does not experience jank First Input delay (FID) - It measures the time from a user first interacting with a page to when the browser can respond to the interaction
Optimize user-centric metrics TTI- Do less work Split up large JS bundles by code-splitting Split up long tasks. Consider moving intensive off-main thread to workers Postpone non-critical work until after page load
FP - Remove render blocking scripts from head Identify critical CSS and inline in head App shell pattern
Monitor user metrics Page Speed Insights, WPT and Lighhouse Speedcurve, Calibre Chrome Dev tools
Adaptive Loading Network Fine-tuning data transfer for less bandwidth Respect Data Saver preferences Memory reducing memory consumption on low-end devices by using navigator.deviceMemory CPU As JS execution is CPU bound, limit costly JS execution and reduce CPU intensive logic by using navigator.hardwareConcurrency. Limit costly JS bundles
Code Splitting Sending large JS payloads impacts speed of your site significantly. Split into smaller bundles and send only what's necessary in the beginning This minimizes the amount of script that needs to be parsed and compiled which results in faster page load times. Popular module bundlers like webpack, Parcel and Rollup allow you to split your bundles into dynamic imports. Cache third party dependencies in a vendor bundle as they do not update often Split on route or component level is a simpler approach to loading different parts of application. Web pack import() returns a promise and when it resolves, lazy loads modules needed.