Web Performance
Web performance is the discipline of making a site load, respond, and remain visually stable for real users. It combines delivery, browser rendering, JavaScript work, and measurement so the page feels fast on the devices and networks people actually use.
itWeb development | OpenSkills.info
Course pathWalk it in order
Look it upDip in anytime
Go furtherLeaves this page
Intro
Web Performance
Web performance is not one score or one browser test. It is the time and work between a person asking for a page and that person seeing useful content, interacting with it, and getting a stable result.
Your users experience a chain. A request reaches an origin or cache. The browser receives HTML, discovers resources, fetches them, builds a page, runs JavaScript, lays out pixels, and handles input. A problem in any link can make the page feel slow.
The job is to find the limiting link for real users, change it, and prove that the experience improved. A perfect result from your laptop is evidence about your laptop. It is not evidence about a phone on a congested connection.
The three user outcomes
Core Web Vitals describe three outcomes that apply across web pages: loading, interactivity, and visual stability.
Continue the course
This section is part of the paid course.
See pricing to subscribe, or log in if you already have access.
Where this skill leads
Relevant careers
See how this topic contributes to broader role-level skill maps.
Sources
- https://web.dev/articles/vitals
Supports
- Core Web Vitals cover loading, interactivity, and visual stability
- LCP, INP, and CLS are the current stable Core Web Vitals
- Current good thresholds are LCP 2.5 seconds or less, INP 200 milliseconds or less, and CLS 0.1 or less
- Core Web Vitals should be evaluated at the 75th percentile, segmented by mobile and desktop
- Chrome User Experience Report supplies anonymized real-user measurements and powers PageSpeed Insights
- Time to First Byte and First Contentful Paint are diagnostic loading metrics for LCP
- https://web.dev/articles/optimize-lcp
Supports
- Field data should guide LCP investigation and lab data helps diagnose the cause
- High Time to First Byte can make a good LCP difficult or impossible
- The Time to First Byte to First Contentful Paint and First Contentful Paint to LCP gaps help diagnose loading delay
- https://web.dev/articles/optimize-inp
Supports
- INP good threshold is 200 milliseconds or less at the 75th percentile
- Field data and RUM help identify slow interactions before lab reproduction
- Interaction phases are input delay, processing duration, and presentation delay
- https://web.dev/articles/cls
Supports
- CLS measures the largest burst of unexpected layout shifts over the page lifecycle
- Missing media dimensions, fonts, and dynamically resizing third-party content can cause layout shifts
- Layout shifts involve visible elements changing position between rendered frames
- https://developer.mozilla.org/en-US/docs/Web/API/Performance_API
Supports
- The Performance API is a group of standards for measuring web application performance
- The performance timeline uses high-precision timestamps and can be observed or sent to analytics
- Performance entries include a name, duration, start time, and type
- https://www.w3.org/TR/navigation-timing-2/
Supports
- Navigation Timing exposes complete timing information for a document navigation
- PerformanceNavigationTiming stores and retrieves high-resolution navigation timing data
- https://www.w3.org/TR/resource-timing/
Supports
- PerformanceResourceTiming provides client-side measurements for fetched resources and their phases
- https://www.w3.org/TR/longtasks/
Supports
- Long Tasks API surfaces tasks that can delay user input
- A long task exceeds 50 milliseconds
- https://github.com/davidsonfellipe/awesome-wpo
Supports
- PageSpeed Insights supplies lab and field Core Web Vitals diagnostics
- WebPageTest supports multi-location real-browser tests, waterfalls, filmstrips, and advanced scenarios
- Lighthouse CI can enforce Core Web Vitals budgets in continuous integration
- web-vitals is a browser library for Core Web Vitals measurement