Learn Performance | web.dev
This course is designed for those new to web performance, a vital aspect of the user experience. It covers key web performance concepts and techniques for improving performance.| web.dev
Large DOM sizes can be a factor in whether interactions are fast or not. Learn more about the relationship between DOM size and INP, and what you can do to reduce DOM size and other ways to limit rendering work when your page has lots of DOM elements.| web.dev
This course is designed for those new to web performance, a vital aspect of the user experience. It covers key web performance concepts and techniques for improving performance.| web.dev
Learn what are discoverable credentials and how to build user experiences that suit your use case.| web.dev
Passkeys make a website's user accounts safer, simpler, easier to use and passwordless. This document discusses how to allow users to create passkeys for your website.| web.dev
Create a sign in experience that leverages passkeys while still accommodating existing password users.| web.dev
Sites should focus on optimizing for user-centric happiness metrics. Tools like Lighthouse (baked into web.dev!) highlight these metrics and help you take the right steps toward improving your performance. To stay fast, set and enforce performance budgets to help your team work within the constraints needed to continue loading fast and keeping users happy after your site has launched.| web.dev
Learn how to optimize your website's Interaction to Next Paint.| web.dev
Create sites that respond to the needs and capabilities of the device they're viewed on.| web.dev
Our latest news, updates, and stories for developers| web.dev
CSS has a range of inbuilt functions. In this module you will find out about some of the key functions, and how to use them.| web.dev
Learn how you can use the individual translate, rotate, and scale CSS properties to approach transforms in an intuitive way.| web.dev
An overview of what push notifications are, why you might use them, and how they work.| web.dev
Improve the legibility of text when using fallback fonts.| web.dev
Users notice if sites and apps don't run well, so optimizing rendering performance is crucial!| web.dev
There are several different ways to specify color in CSS. In this module we take a look at the most commonly used color values.| web.dev
Serving desktop-sized images to mobile devices can use 2–4x more data than needed. Instead of a "one-size-fits-all" approach to images, serve different image sizes to different devices.| web.dev
Workbox is a high-level service worker toolkit built on top of the Service Worker and Cache Storage APIs. It provides a production-ready set of libraries for adding offline support to web apps.| web.dev
UNION や Intersection などの JavaScript の set メソッドが相互運用可能になり、集合の操作が簡単になりました。| web.dev
Learn how to use the Baseline Status web component or logos to show the Baseline status of features.| web.dev
Everything displayed by CSS is a box. Understanding how the CSS Box Model works is therefore a core foundation of CSS.| web.dev
One critical step in the critical rendering path involves the construction of the render tree, performing layout operations to create a page from it, as well as painting the pixels of the resulting page to the screen.| web.dev
Discover the features included in Interop 2025.| web.dev
Mixed content occurs when initial HTML is loaded over a secure HTTPS connection, but other resources are loaded over an insecure HTTP connection.| web.dev
Introducing Trusted Types: a browser API to prevent DOM-based cross-site scripting in modern web applications.| web.dev
An evergreen accessibility course and reference to level up your web development.| web.dev
The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals.| web.dev
How to correctly use sectioning elements to give meaning to your content.| web.dev
Learn how to structure your HTML documents with a solid foundation.| web.dev
Learn about the different global attributes along with attributes specific to particular HTML elements.| web.dev
Learn how HTML information can be exposed and manipulated using JavaScript.| web.dev
Semantic custom properties with @property just reached Baseline newly available.| web.dev
While much of performance deals with what you can do to optimize and eliminate unnecessary resources, it may seem a bit paradoxical to suggest that some resources should be loaded before they're needed. However, there are some cases in which it _might_ be appropriate to load certain resources ahead of time. In this module, this aspect of performance is explored, as prefetching and prerendering are discussed.| web.dev
Min, max, and clamp provide powerful CSS capabilities that enable more responsive styling with fewer liens of code. This post goes over how to control element sizing, maintain proper spacing, and implement fluid typography using these well-supported CSS math functions.| web.dev
Interaction to Next Paint is now a stable Core Web Vital metric, replacing First Input Delay.| web.dev
Learn how to implement CSS custom properties with semantic typing, a fallback value, and more, directly in your CSS file.| web.dev
Resource hints are a collection of features available in HTML that can assist the browser in loading resources earlier and possibly even with higher resource priority. In this module, a few resource hints that can help your pages load even faster are covered.| web.dev
This post introduces the Interaction to Next Paint (INP) metric and explains how it works, how to measure it, and offers suggestions on how to improve it.| web.dev
This case study explains how Swappie team increased conversions and revenue by optimizing their web app for Core Web Vitals.| web.dev
You've looked through your field data, and it turns out that you have some slow interactions. The next step is to learn more about how to manually test those interactions, and identify the causes behind them.| web.dev
As a page loads, many resources are referenced within its HTML that provide a page with its appearance and layout through CSS, as well as its interactivity through JavaScript. In this module, a number of important concepts related to these resources and how they affect a page's load time are covered.| web.dev
The popover API lands in all modern browser engines.| web.dev
Calculate the sine, cosine, tangent, and more in CSS.| web.dev
Logical, flow relative properties and values are linked to the flow of text, rather than the physical shape of the screen. Learn how to take advantage of this newer approach to CSS.| web.dev
Learn why tools that monitor Core Web Vitals metrics may report different numbers, and how to interpret those differences.| web.dev
Interaction to Next Paint will officially become a Core Web Vital and will replace First Input Delay on March 12| web.dev
The benefits of using Custom Properties in design systems and component libraries.| David Darnes
Again in 2024, all major browser vendors, and other stakeholders, work together to solve the top browsers compatibility issues.| web.dev
Navigation is a key element of any site of application, and it starts with HTML.| web.dev
The research and methodology behind Core Web Vitals thresholds| web.dev
Flexbox is a layout mechanism designed for laying out groups of items in one dimension. Learn how to use it in this module.| web.dev
This HTML course for web developers provides a solid overview for developers, from novice to expert level HTML.| web.dev
Learn how to attribute your performance data with debug information to help you identify and fix real-user issues with analytics| web.dev
An introduction to Progressive Web Apps (PWAs) and the three pillars that separate them from other web apps.| web.dev
The prefers-reduced-motion media query detects whether the user has requested that the system minimize the amount of animation or motion it uses. This is for users who either require or prefer minimized animations; for example people with vestibular disorders often prefer animations to be kept to a minimum.| web.dev
Emscripting a C library to Wasm| web.dev
By default CSS is treated as a render blocking resource. Learn how to prevent it from blocking rendering.| web.dev
Content Security Policy can significantly reduce the risk and impact of cross-site scripting attacks in modern browsers.| web.dev
Eric Bidelman| web.dev
The Origin-Agent-Cluster header cuts off synchronous access to other origins on the same domain, and hints to the browser to give your origin dedicated resources.| web.dev
An SXG is a delivery mechanism that makes it possible to authenticate the origin of a resource independently of how it was delivered.| web.dev
This article lists the most important security headers you can use to protect your website. Use it to understand web-based security features, learn how to implement them on your website, and as a reference for when you need a reminder.| web.dev
Sometimes two or more competing CSS rules could apply to an element. In this module find out how the browser chooses which to use, and how to control this selection.| web.dev
'This module takes a deeper look at specificity, a key part of the cascade.'| web.dev
Constructable Stylesheets provide a seamless way to create and distribute styles to documents or shadow roots without worrying about FOUC.| web.dev
By running an A/B test specifically focused on optimizing Web Vitals, Vodafone found that a 31% improvement in LCP led to 8% more sales, a 15% improvement in their lead to visit rate, and a 11% improvement in their cart to visit rate.| web.dev
In this collection, you'll learn what makes a Progressive Web App special, how they can affect your business, and how to build them.| web.dev
Shadow DOM allows web developers to create compartmentalized DOM and CSS for web components| web.dev
Consider using an image CDN to optimize your site's images and reduce its data cost for your users.| web.dev
"same-site" and "same-origin" are frequently cited but often misunderstood terms. This page explains what they are and how they are different.| web.dev
This post introduces the First Contentful Paint (FCP) metric and explains how to measure it| web.dev
Recommendations for implementing logic and rendering in apps.| web.dev
A step-by-step guide on how to break down LCP and identify key areas to improve.| web.dev
Over the last three years, Chrome has been working to empower web applications that want to push the boundaries of what's possible in the browser. One such web application has been Photoshop. The idea of running software as complex as Photoshop directly in the browser would have been hard to imagine just a few years ago. However, by using various new web technologies, Adobe has now brought a public beta of Photoshop to the web.| web.dev
The Chrome team announces that INP is no longer experimental and will replace FID as a Core Web Vital in 2024| web.dev
Strategies to migrate your site from relying on the user-agent string to the new User-Agent Client Hints.| web.dev
In this module find out how to size elements using CSS, working with the flexible medium of the web.| web.dev
This post introduces the Largest Contentful Paint (LCP) metric and explains how to measure it| web.dev
Learn to diagnose costly, work-preventing user interaction.| web.dev
This post introduces the Time to First Byte (TTFB) metric and explains how to measure it.| web.dev
Find out what the browser preload scanner is, how it helps performance, and how you can stay out of its way.| web.dev
You've been told "don't block the main thread" and "break up your long tasks", but what does it mean to do those things?| web.dev
An evergreen CSS course and reference to level up your web styling expertise.| web.dev
This post introduces the Cumulative Layout Shift (CLS) metric and explains how to measure it.| web.dev
Subgrid enables grid shareability, allowing nested grids to align to ancestors and siblings.| web.dev
Cumulative Layout Shift (CLS) is a metric that quantifies how often users experience sudden shifts in page content. In this guide, we'll cover optimizing common causes of CLS such as images and iframes without dimensions or dynamic content.| web.dev
Learn to optimize your pages for instant loads when using the browser's back and forward buttons.| web.dev
