Layout patterns
Layout patterns built using modern CSS APIs to help you build common interfaces such as cards, dynamic grid areas, and full-page layouts.
- Part 1: Client-side AI to combat online toxicity
- Part 2: Build client-side AI toxicity detection
- Total Blocking Time (TBT)
- Web Vitals
- Getting started with measuring Web Vitals
- The most effective ways to improve Core Web Vitals
- Optimize Largest Contentful Paint
- The CSS content-visibility property is now Baseline Newly available
- Compare LLM capability with summarization
- How the Core Web Vitals metrics thresholds were defined
- Core Web Vitals workflows with Google tools
- Manually diagnose slow interactions in the lab
- Baseline
- Back/forward cache
- CSS nesting improves with CSSNestedDeclarations
- First Input Delay (FID)
- Debug performance in the field
- Benchmarking the performance of CSS @property
- Improve performance and UX for client-side AI
- Correlating Core Web Vitals and ad revenue with Google tools
- It's time to lazy-load offscreen iframes!
- Storage for the web
- Building multiple Progressive Web Apps on the same domain
- The Web Push Protocol
- What makes a good Progressive Web App?
- How Chrome handles updates to the web app manifest
- What does it take to be installable?
- Add a web app manifest
- Mitigate cross-site scripting (XSS) with a strict Content Security Policy (CSP)
- Accessing hardware devices on the web
- Allow passkey reuse across your sites with Related Origin Requests
- Browser-level image lazy loading for the web
- Choose the right image format
- Custom metrics
- Measure and debug performance with Google Analytics 4 and BigQuery
- Web permissions best practices
- Best practices for cookie notices
- Customize media notifications and playback controls with the Media Session API
- Find slow interactions in the field
- Using tabindex
- Time to First Byte (TTFB)
- Understand LLM sizes
- Practical prompt engineering for smaller LLMs
- Optimize Time to First Byte
- Optimize long tasks
- Interaction to Next Paint (INP)
- CSS color-scheme-dependent colors with light-dark()
- WebAssembly performance patterns for web apps
- CSS animated grid layouts
- Play the Chrome dino game with your gamepad
- The inert attribute
- Meet the Web.dev AI Team
- Upgrade your site search: Contextual answers with generative AI
- Ethics and AI
- What is Artificial Intelligence?
- Determine the passkey provider with AAGUID
- Compiling to and optimizing Wasm with Binaryen
- The <model-viewer> web component
- Capture audio and video in HTML5
- userVerification deep dive
- Why is CrUX data different from my RUM data?
- Accessibility for web developers
- Load Third-Party JavaScript
- Largest Contentful Paint (LCP)
- Prevent creation of a new passkey if one already exists
- Work with IndexedDB
- 5 CSS snippets every front-end developer should know in 2024
- What are the parts of a URL?
- Discoverable credentials deep dive
- Rendering performance
- ResizeObserver: it's like document.onresize for elements
- Optimize the encoding and transfer size of text-based assets
- Preload modules
- OffscreenCanvas—speed up your canvas operations with a web worker
- First Contentful Paint (FCP)
- Content delivery networks (CDNs)
- What makes for a good sign-out experience?
- Time to Interactive (TTI)
- Optimize resource loading with the Fetch Priority API
- The :user-valid and :user-invalid pseudo-classes
- Optimize Core Web Vitals for business decision makers
- The nuances of base64 encoding strings in JavaScript
- CSS subgrid
- Effectively loading ads without impacting page speed
- Four common types of code coverage
- To test or not to test, a technical perspective
- Defining test cases and priorities
- User-centric performance metrics
- Preload responsive images
- Adapting typography to user preferences with CSS
- Pyramid or Crab? Find a testing strategy that fits
- Three common types of test automation
- Eliminating Unnecessary Downloads
- What is WebAssembly and where did it come from?
- Compiling mkbitmap to WebAssembly
- Securely hosting user data in modern web applications
- The origin private file system
- Deploying AVIF for more responsive websites
- Optimize Interaction to Next Paint
- Baseline features you can use today
- Client-side rendering of HTML and interactivity
- Optimize input delay
- How large DOM sizes affect interactivity, and what you can do about it
- Script evaluation and long tasks
- Optimize Cumulative Layout Shift
- Using the Web Vitals extension to debug Core Web Vitals issues
- Build in-browser WordPress experiences with WordPress Playground and WebAssembly
- Cumulative Layout Shift (CLS)
- New functionality for developers—brought to you by WebAssembly
- What are source maps?
- PWAs in app stores
- 6 CSS snippets every front-end developer should know in 2023
- Trigonometric functions in CSS
- Perform efficient per-video-frame operations on video with requestVideoFrameCallback()
- GDE community highlight: Lars Knudsen
- New patterns for media apps
- Speedy CSS Tip! Animated Gradient Text
- Building Chrometober!
- Building a tooltip component
- Sign in with a passkey through form autofill
- Create a passkey for passwordless logins
- Building a floating action button (FAB) component
- Best practices for fonts
- Testing Web Design Color Contrast
- GDE community highlight: Alba Silvente Fuentes
- Speedy CSS Tip! Animated Loader
- Building the main navigation for a website
- Is it :modal?
- Best practices for tags and tag managers
- Creative list styling
- Building a crooked grid illusion
- How Nordhealth uses Custom Properties in Web Components
- Finer grained control over CSS transforms with individual transform properties
- CSS border animations
- New patterns
- How the BBC is rolling out HSTS for better security and performance.
- Why lab and field data can be different (and what to do about it)
- A win-win situation
- The end of Internet Explorer
- Farewell to HTML5Rocks
- First-party cookie recipes
- Synchronize audio and video playback on the web
- Use conic gradients to create a cool border
- The difference between JavaScript libraries and frameworks
- Choose a JavaScript library or framework
- Implement error handling when using the Fetch API
- The Front-End Developer's Guide to the Terminal
- An API for fast, beautiful web fonts
- GOV.UK drops jQuery from their front end.
- Building a button component
- Don't fight the browser preload scanner
- Best practices for measuring Web Vitals in the field
- Bridging the gap
- Finding courage and inspiration in the developer community
- Variable fonts in real life
- Quickly create nice CSS gradients with the CSS Gradient Creator
- Deep dive into top web developer pain points
- Make your site picture perfect with images.tooling.report
- Global and local variable scope
- Building a dialog component
- Debug media playback errors on the web
- GDE community highlight: Nishu Goel
- The performance effects of too much lazy loading
- Building a loading bar component
- Save Credentials from Forms
- Chrome and Firefox soon to reach major version 100
- Building an adaptive favicon
- Drawing to canvas in Emscripten
- Improve security and privacy by updating HTTP Cache
- Additional HTML elements
- Porting USB applications to the web. Part 2: gPhoto2
- Network Error Logging (NEL)
- WebAssembly feature detection
- Porting USB applications to the web. Part 1: libusb
- Building a theme switch component
- Embedding JavaScript snippets in C++ with Emscripten
- PWAs on Oculus Quest 2
- Building Designcember
- Designcember Calculator
- Deep-copying in JavaScript using structuredClone
- Building a toast component
- The UI fund
- Building a 3D game menu component
- Lighthouse user flows
- Everything announced at Chrome Dev Summit 2021
- What's new in PageSpeed Insights
- Towards an animation smoothness metric
- Photoshop's journey to the web
- Building a multi-select component
- How to assess loading performance in the field with Navigation Timing and Resource Timing
- Safe DOM manipulation with the Sanitizer API
- Best practices for using third-party embeds
- How SPA architectures affect Core Web Vitals
- JavaScript eventing deep dive
- Bundling non-JavaScript resources
- Building a split-button component
- Using CSS Module Scripts to import stylesheets
- CSS accent-color
- Building a switch component
- User preference media features client hints headers
- Building a breadcrumbs component
- Using WebAssembly threads from C, C++ and Rust
- PWA with offline streaming
- Media encryption
- Media frameworks
- Media streaming basics
- Find your way with field data in the Web Vitals extension update
- CSS size-adjust for @font-face
- Building a color scheme
- Using AVIF to compress images on your site
- CSS for Web Vitals
- Evolving Cumulative Layout Shift in web tooling
- New CSS functional pseudo-class selectors :is() and :where()
- New Progressive Web App training now available
- The new responsive: Web design in a component-driven world
- Migrate to User-Agent Client Hints
- Excalidraw and Fugu: Improving Core User Journeys
- Security headers quick reference
- ES modules in service workers
- Building a media scroller component
- Optimizing Web Vitals using Lighthouse
- Using asynchronous web APIs from WebAssembly
- Keeping third-party scripts under control
- Customize the window controls overlay of your PWA's title bar
- Breaking down barriers using the DataTransfer API
- Fill OTP forms within cross-origin iframes with WebOTP API
- Building split text animations
- Evolving the CLS metric
- Web Developer Satisfaction
- Building a Settings component
- Debug layout shifts
- JavaScript: What is the meaning of this?
- Programming the mini app way
- What are H5 and QuickApp?
- What are mini apps?
- Mini app components
- Applying the mini app programming principles to an example project
- Mini app DevTools
- Concluding thoughts about mini apps from a web developer
- Other mini app runtime environments
- Mini app open source projects
- Project structure, lifecycle, and bundling
- Mini apps and super apps
- Mini app markup, styling, scripting, and updating
- Mini app standardization
- Streams—The definitive guide
- Building a Tabs component
- A guide to enable cross-origin isolation
- Requesting performance isolation with the Origin-Agent-Cluster header
- The CSS aspect-ratio property
- Best practices for carousels
- WebRTC is now a W3C and IETF standard
- Feedback wanted: The road to a better layout shift metric for long-lived pages
- Use HTTPS for local development
- When to use HTTPS for local development
- Building a sidenav component
- Codelab: Building a Sidenav component
- Centering in CSS
- Codelab: Centering in CSS
- Love your cache ❤️
- Publish, ship, and install modern JavaScript for faster applications
- Cross-browser paint worklets and Houdini.how
- Address form best practices codelab
- Payment and address form best practices
- Payment form best practices codelab
- Sign-up form best practices codelab
- Automating audits with AutoWebPerf
- SMS OTP form best practices
- Sign-up form best practices
- Workers overview
- Imperative caching guide
- Two-way communication with service workers
- Broadcast updates to pages with service workers
- Disable mouse acceleration to provide a better FPS gaming experience
- Codelab: Building a Stories component
- Building a Stories component
- Browser-level lazy loading for CMSs
- Schemeful Same-Site
- Codelab: Build a push notification server
- Codelab: Build a push notification client
- Push notifications overview
- Measuring offline usage
- Examples of high-performance CSS animations
- Signed Exchanges (SXGs)
- CSS min(), max(), and clamp()
- Logical layout enhancements with flow-relative shorthands
- How to create high-performance CSS animations
- Why are some animations slow?
- Handling range requests in a service worker
- Control camera pan, tilt, and zoom
- What are third-party origin trials?
- Detached window memory leaks
- Create an offline fallback page
- Core Web Vitals
- Apply effects to images with CSS's mask-image property
- Create interesting image shapes with CSS's clip-path property
- Custom bullets with CSS ::marker
- Help users change passwords easily by adding a well-known URL for changing passwords
- Handling optional payment information with a service worker
- Orchestrating payment transactions with a service worker
- Media accessibility
- ARIA: poison or antidote?
- Debugging memory leaks in WebAssembly using Emscripten
- content-visibility: the new CSS property that boosts your rendering performance
- Unblocking clipboard access
- Web on Android
- Referer and Referrer-Policy best practices
- Building a PWA at Google, part 1
- Performance monitoring with Lighthouse CI
- Designing the user experience of passkeys on Google accounts
- @property: giving superpowers to CSS variables
- Registering a web-based payment app
- Providing shipping and contact information from an Android payment app
- Service worker caching and HTTP caching
- Web-based payment apps overview
- Relating site speed and business metrics
- Using the Chrome UX Report to look at performance in the field
- Handling navigation requests
- Pixel-perfect rendering with devicePixelContentBox
- Ten modern layouts in one line of CSS
- web.dev LIVE wrap-up
- Sign-in form best practices
- Progressively enhance your Progressive Web App
- Use cross-platform browser features to build a sign-in form
- Web developer tools for debugging JavaScript issues in Google Search
- Building resilient search experiences with Workbox
- Add media to a web page
- Media file basics
- Boldly link where no one has linked before: Text Fragments
- How to file a good browser bug
- Make your PWA feel more like an app
- Measure performance with the RAIL model
- Speed up navigations in React with Quicklink
- Protect your resources from web attacks with Fetch Metadata
- Content reordering
- Web Animations API improvements in Chromium 84
- Empowering payment apps with Web Payments
- Life of a payment transaction
- Setting up a payment method
- Android payment app developers guide
- More variable font options for the macOS system-ui font in Chromium 83
- More variable font options for the macOS system-ui font in Chromium 83
- Get things done quickly with app shortcuts
- How Progressive Web Apps can drive business success
- Preparing for AppCache removal
- Persistent storage
- How to define your install strategy
- How CommonJS is making your bundles larger
- Why you need "cross-origin isolated" for powerful features
- Profiling Web Audio apps in Chrome
- Improved Next.js and Gatsby page load performance with granular chunking
- "Same-site" and "same-origin"
- Making your website "cross-origin isolated" using COOP and COEP
- Monitor your web page's total memory usage with measureUserAgentSpecificMemory()
- web.dev engineering blog #1: How we build the site and use Web Components
- Improved dark mode default styling with the color-scheme CSS property and the corresponding meta tag
- Ensure your website is available and usable for everyone during COVID-19
- Accessible tap targets
- Fix an overloaded server
- Accessible responsive design
- Color and contrast accessibility
- Prevent DOM-based cross-site scripting vulnerabilities with Trusted Types
- Using a PWA in your Android app
- Prevent layout shifting and flashes of invisible text (FOIT) by preloading optional fonts
- How to set up Signed HTTP Exchanges (SXG) using nginx
- How to distribute Signed HTTP Exchanges (SXG) using nginx
- Optimize CSS background images with media queries
- Fixing website speed cross-functionally
- Scroll snapping after layout changes
- How to set up Signed Exchanges using Web Packager
- How to provide your own in-app install experience
- Positioning virtual objects in real-world views
- Virtual reality comes to the web, part II
- Augmented reality: You may already know it
- Advancing the web framework ecosystem
- What are Progressive Web Apps?
- Adaptive icon support in PWAs with maskable icons
- Integrate PWAs into built-in sharing UIs with Workbox
- Improving page dismissal in synchronous XMLHttpRequest()
- Threading the web with module workers
- Speed tooling evolutions: highlights from Chrome Developer Summit 2019
- Adaptive loading: improving web performance on slow devices
- Use web workers to run JavaScript off the browser's main thread
- Feedback from the summer 2019 image optimization survey
- Build a push notifications server
- Route prefetching in Next.js
- Performance as a default with Next.js
- Code splitting with dynamic imports in Next.js
- Integrate with the OS sharing UI with the Web Share API
- How AMP can guarantee fastness in your Next.js app
- Virtual reality comes to the web
- Understanding cookies
- SameSite cookie recipes
- Fast ads matter
- Use push notifications to engage and re-engage users
- Get started with the Notifications API
- Use a Service Worker to manage notifications
- Fixing layout instability
- Techniques to make a web app load fast, even on a feature phone
- Smarter custom properties with Houdini’s new API
- Two ways to prefetch: <link> tags and HTTP headers
- Prefetch resources to speed up future navigations
- Fixing mixed content
- What is mixed content?
- Going beyond images with basic video for the web
- Add an Apple touch icon to your Progressive Web App
- Ready Player Web
- Progressive Web Apps in multi-origin sites
- Optimize WebFont loading and rendering
- Reduce web font size
- Create a Progressive Web App with the Angular CLI
- Identify slow third-party JavaScript
- Efficiently load third-party JavaScript
- Use image CDNs to optimize images
- Third-party JavaScript performance
- More capable form controls
- Optimize third-party JavaScript
- Establish network connections early to improve perceived page speed
- Create OS-style backgrounds with backdrop-filter
- Keeping things fresh with stale-while-revalidate
- Virtualize large lists with the Angular CDK
- Route preloading strategies in Angular
- Optimize Angular's change detection
- Faster web navigation with predictive prefetching
- Adapt video to image serving based on network quality
- Audit your Angular app's accessibility with codelyzer
- Performance budgets with the Angular CLI
- Precaching with the Angular service worker
- prefers-color-scheme: Hello darkness, my old friend
- Route-level code splitting in Angular
- Top tips for web performance
- Get started: optimize an Angular application
- Web components: the secret ingredient helping power the web
- Use Lighthouse for performance budgets
- Updates to the Web Payments APIs
- The value of speed
- Address Bar Install for Progressive Web Apps on the Desktop
- How can performance improve conversion?
- Service worker mindset
- Patterns for promoting PWA installation
- How do I notify users that my PWA is installable?
- Image policies for fast load times and more
- Extract and inline critical CSS with Critical
- Are long JavaScript tasks delaying your Time to Interactive?
- Extract critical CSS
- Speed at scale: what's new in web performance?
- Introducing PROXX
- SameSite cookies explained
- Visual searching with the Web Perception Toolkit
- Adaptive serving based on network quality
- Hands-on with Portals: seamless navigation on the web
- Minify and compress network payloads with brotli
- web.dev at I/O 2019
- What is speed?
- How to measure speed?
- How to stay fast?
- Add a web app manifest with Create React App
- Virtualize large lists with react-window
- Pre-render routes with react-snap
- Get started: optimize your React app
- Code splitting with React.lazy and Suspense
- Accessibility auditing with react-axe and eslint-plugin-jsx-a11y
- Precaching in Create React App with Workbox
- Codelab: Preload critical assets to improve loading speed
- prefers-reduced-motion: Sometimes less movement is more
- Defer non-critical CSS
- Trust is good, observation is better: Intersection Observer v2
- Responsive web design basics
- Constructable Stylesheets
- Rendering on the Web
- Using bundlesize with Travis CI
- Incorporate performance budgets into your build process
- Setting performance budgets with webpack
- Using Lighthouse Bot to set a performance budget
- Emscripten and npm
- Is your app installed? getInstalledRelatedApps() will tell you!
- Serve modern code to modern browsers for faster page loads
- Adapting to Users with Client Hints
- Semantics and screen readers
- Style focus
- Use semantic HTML for easy keyboard wins
- Control focus with tabindex
- Keyboard access fundamentals
- Headings and landmarks
- Labels and text alternatives
- What is accessibility?
- Art direction
- What is network reliability and how do you measure it?
- Security should not be so scary!
- Serve images with correct dimensions
- Same Origin Policy & iframe
- Serve responsive images
- Configuring HTTP caching behavior
- Serve images with correct dimensions
- Identify resources loaded from the network
- What are security attacks?
- How search works
- Working with service workers
- Use density descriptors
- Serve modern code to modern browsers for faster page loads