Mobile Page Speed Optimization: The Complete 2026 Guide

Core Web Vitals are the speed metrics Google uses for ranking. The three metrics are Largest Contentful Paint (LCP), Interaction to Next Paint (INP), and Cumulative Layout Shift (CLS).

• LCP must be under 2.5 seconds. This measures the main content loading speed.
• INP must be under 200 milliseconds. This measures responsiveness to user input.
• CLS must be under 0.1. This measures visual stability during load.

Good thresholds are defined in the web.dev vitals documentation. https://web.dev/articles/vitals

Mobile devices have slower CPUs and less memory than desktops. LCP and INP targets are harder to hit on phones. The same page that scores green on desktop may score red on mobile.

Images are the largest contributor to mobile page weight. The average mobile page in 2025 served 2.4 MB of images. Reducing image weight directly improves LCP.

Use modern formats. WebP and AVIF compress images 30% to 50% more than JPEG and PNG. Serve AVIF to browsers that support it with WebP as a fallback. Use the <picture> element with multiple source types. https://developer.mozilla.org/en-US/docs/Web/Media/Guides/Formats/Image_types

Add explicit width and height attributes to all images. This prevents layout shift and CLS. Without dimensions, the browser reserves zero space until the image loads, then shifts the content.

Use responsive images with srcset and sizes attributes. Serve a 400-pixel-wide image to phone screens, not the same 2000-pixel image served to desktop. The savings are direct: smaller images mean faster downloads.

Font files are a hidden speed killer. A single variable font file can be 200 KB or more. Formats like WOFF2 compress font data well but still add load time.

Use font-display: swap in your @font-face declarations. This tells the browser to show text in a fallback font immediately and swap to the custom font when it loads. Text is visible instantly even if fonts are slow.

Prefer system font stacks for body text. System fonts like system-ui load instantly. They are already on the device. Reserve custom fonts for headings only.

JavaScript is the second-largest contributor to mobile page weight. The median mobile page in 2025 shipped 400 KB of JavaScript. Reduce it.

• Remove unused CSS with tools like PurgeCSS.
• Defer non-critical JavaScript with the defer attribute.
• Split bundles by route. Send only the JavaScript needed for each page.
• Remove render-blocking resources above the fold.

Google's advice on render-blocking resources is direct. Eliminate them. https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources

Use Chrome User Experience Report (CrUX) data for real-user measurements. CrUX shows LCP, INP, CLS, and FCP for your site across real devices and network conditions. Access it in Search Console under Core Web Vitals or via the CrUX API.

Field data matters more than lab data. Lab tests on a desktop with a throttled connection do not match real mobile conditions. Prioritize CrUX metrics.

• [ ] Check mobile LCP, INP, and CLS in CrUX
• [ ] Convert all images to WebP or AVIF
• [ ] Add width and height attributes to all images
• [ ] Use responsive images with srcset
• [ ] Enable HTTP/3 at the CDN
• [ ] Switch to system font stack or font-display: swap
• [ ] Remove render-blocking resources above the fold
• [ ] Measure and reduce JavaScript bundle size per route

Note the gap between lab test results and field data. Lab tests are useful for debugging. Field data tells you what real mobile users experience.

Audit quarterly.