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 – 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
  • Optimize your CSS
  • Defer non-critical CSS
  • Minify CSS
  • Extract critical CSS
  • Optimize CSS background images with media queries
  • Optimize your third-party resources
  • Third-party JavaScript performance
  • Identify slow third-party JavaScript
  • Efficiently load third-party JavaScript
  • Best practices for tags and tag managers
  • Optimize your JavaScript
  • Optimize long tasks
  • Optimize Interaction to Next Paint
  • Apply instant loading with the PRPL pattern
  • Reduce JavaScript payloads with code splitting
  • Remove unused code
  • Minify and compress network payloads
  • How CommonJS is making your bundles larger
  • Build a performance culture
  • The value of speed
  • How can performance improve conversion?
  • What should you measure to improve performance?
  • Fixing website speed cross-functionally
  • Relating site speed and business metrics
  • Set performance budgets
  • Performance budgets 101
  • Your first performance budget
  • Incorporate performance budgets into your build process
  • Use Lighthouse for performance budgets
  • Using bundlesize with Travis CI
  • Using Lighthouse Bot to set a performance budget
  • Performance monitoring with Lighthouse CI
  • Web Platform
  • HTML
  • CSS
  • JavaScript
  • User experience
  • Performance
  • Accessibility
  • Identity
  • Learn
  • Learn HTML
  • Learn CSS
  • Learn JavaScript
  • Learn AI
  • Learn Performance
  • Learn Accessibility
  • More courses
  • Additional resources
  • AI and the web
  • Explore
  • PageSpeed Insights
  • Podcasts & shows
  • Developer Newsletter
  • About web.dev
  • Home
  • Articles
  • Resources
  • Fast load times

Optimize WebFont loading and rendering Stay organized with collections Save and categorize content based on your preferences.

Ilya Grigorik