web.dev

DOM Order Matters

The importance of the default DOM order

How large DOM sizes affect interactivity, and what you can do about it

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.

Jumping the hurdles with the Gamepad API

Downloading resources in HTML5 - a[download]

Chrome now supports the HTML spec's new `download` attribute to `a` elements.

The HTML Drag and Drop API

The HTML5 Drag and Drop API lets developers make almost any element on a page draggable.

Drawing to canvas in Emscripten

Learn how to render 2D graphics to a canvas on the web from WebAssembly with Emscripten.

How Progressive Web Apps can drive business success

Build a solid business case for your PWA. Learn when you should invest, and how you can measure its success.

Easy high DPI images

Effectively managing memory at Gmail scale

Efficiently load third-party JavaScript

Learn how to improve load times and user experience by avoiding the common pitfalls of using third-party scripts.

Best practices for using third-party embeds

This document discusses performance best practices that you can use when loading third-party embeds, efficient loading techniques and the Layout Shift Terminator tool that helps reduce layout shifts for popular embeds.

Emscripten’s embind

Emscripten’s embind

Introduction to Encrypted Media Extensions

Empowering payment apps with Web Payments

Web Payments aims to provide frictionless payment experience on the web. Learn how it works, its benefits, and get ready to integrate your payment app with Web Payments.

Embedding JavaScript snippets in C++ with Emscripten

Learn how to embed JavaScript code in your WebAssembly library to communicate with the outside world.

Emscripten and npm

How do you integrate WebAssembly into this setup? In this article we are going to work this out with C/C++ and Emscripten as an example.

Emscripting a C library to Wasm

Emscripting a C library to Wasm

Enable HTTPS on your servers

Enabling HTTPS on your servers is critical to securing your webpages.

ES modules in service workers

Service workers can use static imports of ES modules to bring in extra code, as an alternative to importScripts().

Data-binding revolutions with Object.observe()

JavaScript eventing deep dive

Stream updates with server-sent events

Excalidraw and Fugu: Improving Core User Journeys

A write-up of Thomas Steiner's Google I/O 2021 talk titled Excalidraw and Fugu: Improving Core User Journeys

Extract critical CSS

Learn how to improve render times with critical CSS technique and how to choose the best tool for your project.

FAQ for hacked sites

This page brings together answers to the questions about hacking we at Google hear most often.

Farewell to HTML5Rocks

So long HTML5Rocks, it's been nice knowing you.

Fast ads matter

Understand the value of fast ads and how to think about ad speed.

Fast playback with audio and video preload

Faster playback start means more people watching your video or listening to your audio. That's a known fact. In this article I'll explore techniques you can use to accelerate your media playback by actively preloading resources depending on your use case.

Optimize Angular's change detection

Learn how to optimize your Angular app's change detection to make it more responsive.

First Contentful Paint (FCP)

This post introduces the First Contentful Paint (FCP) metric and explains how to measure it

Implement error handling when using the Fetch API

Catching errors when working with the Fetch API.

Protect your resources from web attacks with Fetch Metadata

Fetch Metadata is a new web platform feature designed to allow servers to protect themselves from cross-origin attacks.

Optimize resource loading with the Fetch Priority API

The Fetch Priority API indicates the relative priority of resources to the browser. It can enable optimal loading and improve Core Web Vitals.

First Input Delay (FID)

This post introduces the First Input Delay (FID) metric and explains how to measure it

The synchronous FileSystem API for workers

Find slow interactions in the field

Before you can reproduce slow interactions in the lab to optimize your website's Interaction to Next Paint, you'll need to lean on field data to find them. Learn how to do just that in this guide.

First-party cookie recipes

Learn how to set first-party cookies to ensure security, cross-browser compatibility, and minimize chances of breakage once third-party cookies are phased out.

Fix the cloaked keywords and links hack

This guide is created specifically for a type of hack that adds keyword-heavy gibberish pages to your site.

Fix the gibberish hack

This guide is created specifically for a type of hack that adds keyword-heavy gibberish pages to your site.

Fix the Japanese keyword hack

This guide is for a type of hack that creates autogenerated Japanese text on your site.

Fixing layout instability

A walkthrough of using WebPageTest to identify and fix layout instability issues.

Fixing mixed content

Find out how to fix mixed content errors on your website, in order to protect users and ensure that all of your content loads.

Fixing website speed cross-functionally

How other departments can help make your website speed optimization project a bigger success.

Best practices for fonts

Learn about how to optimize web fonts for Core Web Vitals.

Making Fullscreen Experiences

Going fullscreen.

Play the Chrome dino game with your gamepad

Learn to control web games with the Gamepad API.

Finding courage and inspiration in the developer community

Web Google Developers Experts on how mentoring programs empowered them to become leaders.

Get started: optimize an Angular application

Learn how to make your Angular application faster, more reliable, discoverable, installable, and accessible!

Get started: optimize your React app

React is an open-source library that makes building UIs easier. This learning path will cover different APIs and tools within the ecosystem that you should consider using to improve the performance and usability of your application.

Capture audio and video in HTML5

Global and local variable scope

Learn about scope and how it works in JavaScript.

Glossary for hacked sites

The glossary covers a collection of technical terms that are referenced throughout our security documentation.

Rendering HTML5 in older browsers with Google Chrome Frame

Web developer tools for debugging JavaScript issues in Google Search

How to debug SEO issues on individual pages or across an entire site.

GOV.UK drops jQuery from their front end.

GOV.UK dropped their jQuery dependency from their front end. You'll never guess what happened. (Yes, you will.)

Improved Next.js and Gatsby page load performance with granular chunking

Learn how both Next.js and Gatsby have improved their build output to minimize duplicate code and improve page load performance

Help, I think I've been hacked

Learn how and why websites are hacked.

Hacked with malware

This guide explains how to deal with a site that has been hacked with malware.

Handling navigation requests

Navigation requests are requests for HTML made whenever you enter a new URL in the navigation bar, or follow a link on a page. This is where service workers make their biggest impact on performance: by using a service worker to respond without waiting for the network, you can ensure that navigations are reliably fast and resilient.

Handle optional payment information with a service worker

Once a web-based payment app is registered, it's ready to accept payment requests from merchants. This article teaches you how to orchestrate a payment transaction from a service worker during runtime.