Skip to main content
web.dev
Resources
  • Web Platform
  • Dive into the web platform, at your pace.
  • HTML
  • CSS
  • JavaScript
  • User experience
  • Learn how to build better user experiences.
  • Performance
  • Accessibility
  • Identity
  • Learn
  • Get up to speed on web development.
  • Learn HTML
  • Learn CSS
  • Learn JavaScript
  • Learn AI
  • Learn Performance
  • Learn Accessibility
  • More courses
  • Additional resources
  • Explore content collections, patterns, and more.
  • AI and the web
  • Explore
  • PageSpeed Insights
  • Podcasts & shows
  • Developer Newsletter
  • About web.dev
Discover Baseline How to use Baseline Blog Case Studies
/
  • English
  • Deutsch
  • Español
  • Español – América Latina
  • Français
  • Indonesia
  • Italiano
  • Polski
  • Português – Brasil
  • Tiếng Việt
  • Türkçe
  • Русский
  • עברית
  • العربيّة
  • فارسی
  • हिंदी
  • বাংলা
  • ภาษาไทย
  • 中文 – 简体
  • 中文 – 繁體
  • 日本語
  • 한국어
Sign in
  • Articles
AI and the web Fast load times Learn Core Web Vitals Identity Progressive Web Apps Payments Notifications How to optimize INP Network reliability React Animations Mini apps Media Safe and secure WebAssembly Devices Easily discoverable Test automation Angular
web.dev
  • Resources
    • More
    • AI and the web
    • Fast load times
    • Learn Core Web Vitals
    • Identity
    • Progressive Web Apps
    • Payments
    • Notifications
    • How to optimize INP
    • Network reliability
    • React
    • Animations
    • Mini apps
    • Media
    • Safe and secure
    • WebAssembly
    • Devices
    • Easily discoverable
    • Test automation
    • Angular
  • Discover
  • Baseline
  • How to use Baseline
  • Blog
  • Case Studies
  • Introduction
  • Why does speed matter?
  • What is speed?
  • How to measure speed?
  • How to stay fast?
  • Core Web Vitals
  • Web Vitals
  • User-centric performance metrics
  • Defining the Core Web Vitals metrics thresholds
  • Largest Contentful Paint (LCP)
  • Cumulative Layout Shift (CLS)
  • Interaction to Next Paint (INP)
  • Optimize Largest Contentful Paint
  • Optimize Cumulative Layout Shift
  • Optimize Interaction to Next Paint
  • The most effective ways to improve Core Web Vitals
  • Core Web Vitals workflows with Google tools
  • Optimizing Core Web Vitals for business decision makers
  • Measure performance in the field
  • Using the Chrome UX Report to look at performance in the field
  • Why lab and field data can be different (and what to do about it)
  • Why is CrUX data different from my RUM data?
  • Optimize your resource delivery
  • Optimize Time to First Byte
  • Content delivery networks (CDNs)
  • Prioritize resources
  • Preload critical assets to improve loading speed
  • Establish network connections early to improve perceived page speed
  • Prefetch resources to speed up future navigations
  • Fast playback with audio and video preload
  • Adaptive serving based on network quality
  • Optimize your images
  • Choose the right image format
  • Choose the correct level of compression
  • Use Imagemin to compress images
  • Replace animated GIFs with video for faster page loads
  • Serve responsive images
  • Serve images with correct dimensions
  • Use WebP images
  • Use image CDNs to optimize images
  • Lazy-load images and video
  • Browser-level image lazy loading for the web
  • Optimize web fonts
  • Best practices for fonts
  • Avoid invisible text during font loading
  • Optimize web font loading and rendering
  • Reduce web font size