ウェブ プラットフォーム ダッシュボードと、その HTTP API をクエリしてベースラインに達した機能に関するデータを取得し、開発ワークフローのツールを構築する方法について学びます。

Core Web Vitals の重要性が増すなか、サイト所有者とデベロッパーはパフォーマンスと主要なユーザー エクスペリエンスにますます注目しています。Google はページの評価、最適化、モニタリングに役立つツールを数多く提供していますが、データのソースとその効果的な使用方法について、ユーザーが混乱することがよくあります。このガイドでは、複数のツールを組み合わせたワークフローを提案し、開発プロセスにおける各ツールがどのような意味を持つのかを明確化します。

2025 年 2 月のベースラインに関するさまざまな出来事についての記事

ruby-align がベースラインの一部になりました

公開日: 2025 年 2 月 20 日 大規模な AI モデルを確実にダウンロードすることは、困難なタスクです。ユーザーがインターネット接続を失ったり、ウェブサイトまたはウェブ アプリケーションを閉じたりすると、ダウンロードが完了していないモデルファイルが失われ、ページに戻ったときに最初からやり直す必要があります。 Background Fetch API を段階的な拡張として使用することで、ユーザー エクスペリエンスを大幅に改善できます。 Browser Support Source

rel=prefetch リソースヒントとその使用方法について学習します。

Cumulative Layout Shift（CLS）は、ページ コンテンツが急激に変化した頻度を定量化する指標です。このガイドでは、ディメンションや動的コンテンツのない画像や iframe など、CLS の一般的な原因の最適化について説明します。

レイアウト シフトを特定して修正する方法を学習します。

CSS scrollbar-color と scrollbar-gutter がすべての主要なブラウザ エンジンに実装されたため、ベースラインで新たに使用できるようになりました。

ベースライン マンスリー ダイジェストは、Google とウェブ デベロッパー コミュニティの両方で 2025 年 1 月にベースラインで発生した出来事について取り上げています。

WebAssembly ガベージ コレクションと Wasm テールコールの最適化がすべての主要なブラウザ エンジンに導入され、ベースラインとして新たに利用可能になりました。

この投稿では Largest Contentful Paint（LCP）指標を紹介し、その測定方法について説明します

Promise.try がすべての主要なブラウザ エンジンに導入され、ベースラインで新たに利用可能になりました。

簡単な説明

公開日: 2024 年 1 月 13 日 これは、LLM と chatbot に関する 3 部構成のシリーズの第 1 部です。 WebLLM を使用したチャットボットの構築 に関するパート 2 と、 Prompt API の使用 に関するパート 3 はすでに公開されています。 大規模言語モデル（LLM）は、ソフトウェア開発の重要な構成要素になりつつあります。LLM は、自然言語テキストの生成と処理に適しており、データ抽出、要約、ユーザーデータとのやり取りの促進などのユースケースを実現できます。

公開日: 2024 年 1 月 13 日 AI では、従来の ML モデルや新しい大規模言語モデル（LLM）を使用して、さまざまなプロジェクトを構築できます。LLM を使用すると、コンピュータは新しいコンテンツの生成、要約の作成、テキストの感情分析など、さまざまなことができます。この数年間、ユーザーは Gemini や ChatGPT などのアプリケーションを利用する機会がありました。これらのアプリケーションは、高度な自然言語処理（NLP）を使用してユーザーとの会話を行います。 Google

「メインスレッドをブロックせず、長いタスクを分割する」と言われましたが、そのようなことをするとはどういう意味でしょうか？

CSS マスキングでは、画像をマスクレイヤとして使用できます。つまり、画像、SVG、グラデーションをマスクとして使用して、画像エディタを使わずに面白い効果を作り出すことができます。

web-features データセット、ウェブ プラットフォーム ステータス ダッシュボード、ベースライン ステータス ウィジェットなど。2024 年のベースラインを振り返ります。

この記事では、遅延読み込みと、動画の遅延読み込みに使用できるオプションについて説明します。

モジュールのプリロードを使用すると、JavaScript モジュールを事前に宣言的に読み込むことができます。

ユーザー エクスペリエンスを最適化するには、ユーザーがフォームをどのように操作しているかを把握することが重要です。このプロセスにおいて、ブラウザの自動入力は重要な役割を果たします。ユーザーがフォームで自動入力を使用する方法に関するデータを収集して分析する方法について学びます。

有害なコンテンツの検出は、ユーザーを保護し、より安全なオンライン環境を構築します。パート 2 では、有害性を検出して軽減するクライアントサイドの AI ツールを作成する方法について学習します。

この投稿では、合計ブロック時間（TBT）指標とその測定方法について説明します。

LCP の内訳と、改善が必要な重要分野を特定するための手順ガイドです。

サイトの健全性を示す基本的な指標

ウェブのパフォーマンスを最適化し、Core Web Vitals を改善するための最善の方法として Chrome が特定したベスト プラクティスのコレクション

実際の環境とラボ環境の両方でサイトの Web Vitals を測定する方法を学びます。

CSS の content-visibility プロパティがベースラインで新しく利用可能になりました。

ウェブに関する主な指標のしきい値の背景にある調査と手法

フィールド データを調べたところ、インタラクションが遅いことがわかりました。次のステップでは、これらのインタラクションを手動でテストする方法と、その背後にある原因を特定する方法を学びます。

この記事では、Baseline の起源、Google の関与、WebDX コミュニティ グループの所有権について説明します。

ブラウザの [戻る] ボタンと [進む] ボタンでページが瞬時に読み込まれるように最適化する方法をご覧ください。

CSS のネスティングが大幅に改善されました。

パフォーマンス データとデバッグ情報を結び付け、アナリティクスでユーザーの実際の問題を特定して修正する方法を学習します

この投稿では、初回入力遅延（FID）指標を紹介し、その測定方法について説明します

Google ツールを使用して、Core Web Vitals と広告収入を関連付ける方法を学びます。

@property は CSS のパフォーマンスにどのような影響を与えますか？

この投稿では、load 属性と、それを使用して iframe の読み込みを制御する方法について説明します。

ブラウザにデータを保存するためのさまざまな方法があります。お客様のニーズに最適な方法をお選びください。

ステップバイステップのインタラクティブなチュートリアルでは、プッシュ通知サブスクリプションを管理し、ウェブ push プロトコル リクエストを push サービスに送信するサーバーを構築する方法について説明します。

同じドメインを再利用して複数の PWA を構築する場合の推奨方法と推奨されない方法を確認し、それぞれの長所と短所を紹介します。

ウェブアプリ マニフェストで PWA 用のアイコン、ショートカット、色、その他のメタデータを変更するために必要な手順。

プログレッシブ ウェブアプリがインストール可能かどうかの基準。

良いプログレッシブ ウェブアプリの特徴

ウェブアプリ マニフェストは、ウェブアプリの動作をブラウザに伝えるためのシンプルな JSON ファイルです。

クロスサイト スクリプティングに対する多層防御として、スクリプトのノンスまたはハッシュに基づく CSP をデプロイする方法を学習します。

この記事では、ウェブ デベロッパーがデバイスに応じて適切なハードウェア API を選択する方法について説明します。

関連オリジン リクエストを使用して、サイト間でパスキーを再利用できるようにする方法をご確認ください。

この投稿では、load 属性と、それを使用して画像の読み込みを制御する方法について説明します。

ウェブサイトに最適化された画像を提供するには、まず適切な画像形式を選択します。この投稿は、正しい選択をするうえで役立ちます。

カスタム指標を使用すると、サイトに固有の要素を測定して最適化できます。

ウェブに関する指標のデータを Google アナリティクス 4 プロパティに送信し、BigQuery と Looker Studio にデータをエクスポートして分析する方法について学習します。

このガイドでは、ウェブサイトが機密性の高い機能（カメラ、マイク、位置情報など）にアクセスする許可をユーザーに求める場合に、不要なメッセージやアクセスのブロックを最小限に抑えるためのベスト プラクティスについて説明します。

Cookie に関する通知がパフォーマンス、パフォーマンス測定、ユーザー エクスペリエンスにどのように影響するかをご確認ください。

ウェブ デベロッパーは、Media Session API を使用して、メディア通知をカスタマイズし、シークやトラック変更などのメディア関連のイベントに対応できます。

ラボで遅いインタラクションを再現してウェブサイトの Next Paint のインタラクションを最適化する前に、フィールド データを利用してそれらを見つける必要があります。このガイドでは、その方法について説明します。

要素のタブ位置を明示的に設定するには、tabindex 属性を使用します。

この投稿では、最初のバイトまでの時間（TTFB）指標と、その測定方法について説明します。

さまざまな LLM、モデル、モデルサイズで望ましい結果を得るためにプロンプトを調整する方法を学習します。

この投稿では、Interaction to Next Paint（INP）指標の概要、その仕組み、測定方法、改善方法の提案について説明します。

description: light-dark() 関数を使用して、使用されたカラーパターンに反応する色を定義します。

このガイドでは、WebAssembly を活用したいウェブ デベロッパーを対象に、実行中のサンプルを参照しながら、Wasm を利用して CPU 負荷の高いタスクをアウトソーシングする方法を学びます。

CSS グリッドでは、`grid-template-columns` プロパティと `grid-template-rows` プロパティを使用して、それぞれグリッドの列および行のサイズと線名を定義できます。これらのプロパティの補間をサポートすると、グリッド レイアウトがアニメーションまたは遷移の中間点でスナップするのではなく、状態間をスムーズに遷移できるようになります。

Gamepad API を使用してウェブゲームを制御する方法を学習します。

inert プロパティは、フォーカス イベントや支援技術のイベントなど、要素のユーザー入力イベントを削除、復元する方法を簡素化するグローバル HTML 属性です。

証明書利用者は、AAGUID を調べることでパスキーの取得元を特定できます。その仕組みをご紹介します。

ExampleScript というおもちゃの合成言語の例を使って、JavaScript で Binaryen.js API を使用して WebAssembly モジュールを記述し、最適化する方法を学びます。

<model-viewer> ウェブ コンポーネントを使用すると、ウェブページで 3D モデルを宣言的に使用できます。

音声/動画のキャプチャは、長い間ウェブ開発の「聖杯」でした。 長年にわたり、ブラウザ プラグイン（ Flash や Silverlight ）に頼らざるを得ませんでした。 さあ、始めましょう。 HTML5 が解決策です。一見するとわかりにくいかもしれませんが、HTML5 の普及に伴い、デバイスのハードウェアへのアクセスが急増しています。 位置情報 （GPS）、 Orientation API （加速度計）、 WebGL （GPU）、 Web Audio API （オーディオ

WebAuthn で「userVerification」を使用する方法

RUM データに CrUX と異なるウェブに関する主な指標の数値が表示されることがある理由について説明します。

誰もが参加できるインクルーシブなサイトを構築することが重要です。最適化できる主な障がいには、視覚、聴覚、可動性、認知、発話、神経の少なくとも 6 つの領域があります。

サードパーティ スクリプトは便利な機能を幅広く提供し、より動的なウェブ体験を実現します。サードパーティ スクリプトの読み込みを最適化して、パフォーマンスへの影響を軽減する方法について説明します。

ユーザーのパスワード マネージャーにすでにパスキーが存在する場合に新しいパスキーが作成されないようにする方法をご確認ください。

IndexedDB の基本のガイド。

強力で安定した、価値ある CSS をご紹介します。

Time to First Byte 指標を最適化する方法を学習します。

ホスト、サイト、オリジンの違いeTLD+1 とは何ですか？この記事ではその方法について説明します。

検出可能な認証情報と、ユースケースに適したユーザー エクスペリエンスの構築方法を学習します。

ユーザーは、サイトやアプリがうまくいかないことに気づくため、レンダリング パフォーマンスの最適化は非常に重要です。

「ResizeObserver」は、要素のコンテンツ長方形のサイズが変更されると通知し、それに応じて対応できるようにします。

不要なリソースのダウンロードをなくすために、ページの読み込み速度を向上させるためにできる最善の方法は、残りのリソースを最適化および圧縮して、全体のダウンロード サイズを最小限に抑えることです。

このドキュメントでは、OffscreenCanvas API を使用して、ウェブアプリでグラフィックをレンダリングする際のパフォーマンスを向上させる方法について説明します。

この投稿では、First Contentful Paint（FCP）指標を紹介し、その測定方法について説明します

この記事では、コンテンツ配信ネットワーク（CDN）の概要を説明します。また、CDN 設定を選択、設定、最適化する方法についても説明します。

ユーザーがウェブサイトからログアウトしたときにどう対処すべきかについての実践的なデベロッパー ガイダンス。

この投稿では、操作可能になるまでの時間（TTI）指標と、その測定方法について説明します

Fetch Priority API は、ブラウザに対するリソースの相対的な優先度を示します。これにより、読み込みを最適化し、ウェブに関する主な指標を改善できます。

:user-valid と :user-invalid の疑似クラスについて、およびそれらを使用して入力検証のユーザー エクスペリエンスを改善する方法

ビジネスの意思決定者でもデベロッパー以外の人でも、ウェブに関する主な指標を改善する方法についてご確認ください。

base64 エンコードとデコードを文字列に適用する際の一般的な問題を理解し、回避します。

Subgrid を使用すると、グリッドの共有が可能になり、ネストされたグリッドを祖先や兄弟に合わせることができます。

昨今のデジタル社会において、オンライン広告は、誰もが利用できる無料のウェブの重要な要素です。ただし、広告の実装が適切でないと、ブラウジングが遅くなり、ユーザーの不満を招き、エンゲージメントの低下につながる可能性があります。ページ速度に影響を与えることなく広告を効果的に読み込み、シームレスなユーザー エクスペリエンスを実現し、ウェブサイト所有者の収益機会を最大化する方法を学びます。

コード カバレッジとは何か、およびその測定の一般的な 4 つの方法を確認します。

テストする必要があるものと除外できるものを特定します。

テスト対象を決定し、テストケースを定義して、優先順位を付けます。

ユーザー目線のパフォーマンス指標は、サイトの利便性を把握し、実際のユーザーにとって有益な形で改善するための重要なツールです。

優れたユーザー エクスペリエンスを確保するためにレスポンシブ画像をプリロードする、新しい画期的な方法について学びます。

ユーザーがコンテンツを最大限に読みやすくなるように、ユーザーの好みに合わせてフォントを適用する方法。

さまざまなテストタイプを組み合わせて、プロジェクトに適した合理的な戦略を作成する方法を学習します。

まずは基本から始めましょう。2 つの一般的なテストモードと、一般的な 3 種類のテスト自動化について説明します。

リソースを定期的に監査して、各リソースがユーザー エクスペリエンスの向上に役立っていることを確認する必要があります。

WebAssembly（Wasm と略されることもあります）、実行可能プログラム用のポータブル バイナリコード形式と対応するテキスト形式、プログラムとそのホスト環境との間のインタラクションを容易にするソフトウェア インターフェースの概要。

mkbitmap C プログラムは、画像を読み込み、次のオペレーションの 1 つ以上を、反転、ハイパス フィルタリング、スケーリング、しきい値設定の順序で適用します。各オペレーションは個別に制御でき、オンとオフを切り替えることができます。この記事では、mkbitmap を WebAssembly にコンパイルする方法について説明します。

ファイル システム標準では、ページのオリジンに固有のストレージ エンドポイントとしてオリジン専用ファイル システム（OPFS）が導入されています。このシステムはユーザーには表示されず、パフォーマンスを重視して高度に最適化された特別な種類のファイルへのアクセスをオプションで提供します。 オリジンの非公開ファイル システムは最新のブラウザでサポートされており、Web Hypertext Application Technology Working Group（ WHATWG ）の File

ユーザーが管理するコンテンツをウェブ アプリケーションに安全に表示する方法

エコシステムでの AVIF の採用方法と、デベロッパーが静止画像とアニメーションに対して AVIF から期待できるパフォーマンスと品質のメリットについて説明します。

ウェブサイトの Interaction to Next Paint を最適化する方法を学びます。

ベースラインに含まれる機能のごく一部について説明します。

DOM サイズが大きいと、インタラクションが速くなるかどうかが左右されます。DOM サイズと INP の関係や、DOM サイズを小さくする方法など、ページに多数の DOM 要素がある場合にレンダリング処理を制限する方法をご確認ください。

スクリプトを読み込む際、ブラウザが実行前にスクリプトを評価するのに時間がかかるため、タスクに時間がかかる可能性があります。スクリプト評価の仕組みと、ページの読み込み中にスクリプト評価によって長時間のタスクが発生しないようにする方法をご確認ください。

JavaScript を使用した HTML のレンダリングは、サーバーから送信された HTML のレンダリングとは異なり、パフォーマンスに影響する可能性があります。このガイドでは、これらの違いや、特にインタラクションに関して、ウェブサイトのレンダリング パフォーマンスを維持するための方法について説明します。

入力遅延は、全体的なインタラクション レイテンシに大きく影響し、ページの INP に悪影響を及ぼす可能性があります。このガイドでは、入力遅延の概要と、入力遅延を短縮してインタラクティブ性を高める方法について説明します。

この投稿では、Cumulative Layout Shift（CLS）指標を紹介し、その測定方法について説明します。

WebAssembly を使用して、ブラウザのみで動作する PHP による完全な WordPress

WebAssembly によってウェブで利用できるツールのショーケース。

ソースマップにより、ウェブ デバッグのエクスペリエンスが向上します。

プログレッシブ ウェブアプリは、Android Play ストアや Microsoft Store などのアプリストアに送信できます。

強力で安定した、価値ある CSS をご紹介します。

CSS で正弦、余弦、接線などを計算します。

requestVideoFrameCallback() メソッドを使用すると、ウェブ制作者は、新しい動画フレームがコンポジタに送信されたときにレンダリング ステップで実行されるコールバックを登録できます。

これは Google Developers Experts（GDE）プログラムのメンバーにインタビューするシリーズの 1 つです。

スコープ設定されたカスタム プロパティと background-clip を使用して、アニメーション化されたグラデーション テキスト効果を作成しましょう。 CodePen に移動して、新しいペンを作成します。 テキストのマークアップを作成します。「Speedy」という単語を含むヘッダーを使用します。 次に、 body に暗い background-color を設定します。 テキストの font-size を大きくします。 clamp を使用してレスポンシブにします。 使用する色に 2

このブログ投稿では、メディアアプリの新しいパターンをご紹介します。

Chrometober で楽しく恐ろしいヒントとコツを共有できるスクロール ブックが誕生した経緯をご紹介します。

色適応的でアクセスしやすいツールチップのカスタム要素を作成する方法に関する基本的な概要。

パスキーを使用すると、ウェブサイトのユーザー アカウントの安全性、シンプルさ、使いやすさが向上し、パスワードが不要になります。この記事では、ユーザーがウェブサイトのパスキーを作成できるようにする方法について説明します。

パスキーを使用すると、ウェブサイトのユーザー アカウントの安全性、シンプルさ、使いやすさが向上し、パスワードが不要になります。この記事では、既存のパスワード ユーザーに対応しながら、パスキーを使用したパスワードレス ログインを設計する方法について説明します。

色適応型、レスポンシブで利用しやすい FAB コンポーネントを作成する方法の基本概要です。

Core Web Vitals に合わせてウェブフォントを最適化する方法について説明します。

デザインのユーザー補助に適した色のコントラストをテストして検証するための 3 つのツールと手法の概要。

スコープ設定されたカスタム プロパティと animation-timing-function を使用して、アニメーション化された CSS ローダーを作成しましょう CodePen に移動して、新しいペンを作成します。 ローダのマークアップを作成します。インライン カスタム プロパティを使用していることに注意してください。 ジェネレータ（ Pug ）を使用して行数を構成することもできます。 ローダーにスタイルを設定します。 絶対配置と calc と transform

これは Google Developers Experts（GDE）プログラムのメンバーにインタビューするシリーズの 1 つです。

このチュートリアルでは、ウェブサイトのアクセス可能なメイン ナビゲーションを作成する方法について説明します。セマンティック HTML とユーザー補助、および ARIA 属性の使用が時折メリットよりデメリットとなることについて学習します。

この便利な CSS 疑似セレクタを使用すると、モーダルな要素を選択できます。

Core Web Vitals 向けにタグとタグ マネージャーを最適化する。

リストのスタイルを設定する便利でクリエイティブな方法。

CSS を使って目の錯覚を再現する楽しい方法を探ります。

デザイン システムとコンポーネント ライブラリでカスタム プロパティを使用するメリット

個別の変換、回転、スケーリングを行う CSS プロパティを使用して、直感的な方法で変換を行う方法を学習します。

CSS で境界線をアニメーション化する方法をいくつか検討しています

BBC は、セキュリティとパフォーマンスを向上させるため、自社のウェブサイトに HSTS を導入しています。その意味と、HSTS がどのように役立つかをご確認ください。

Core Web Vitals の指標をモニタリングするツールでレポートされる数値が異なる理由と、その差異を解釈する方法について説明します。

GDE Enrique Fernandez Guerra 氏による、NGO HelpDev のオープンソース化

Maersk.com のお客様と開発者にとって、Internet Explorer の終了サポートはどのような意味を持ちますか？

長い間、HTML5Rocks のことをよく知っています。

ファーストパーティの Cookie を設定してセキュリティを確保し、ブラウザ間の互換性を確保し、サードパーティ Cookie が廃止された後の破損の可能性を最小限に抑える方法について説明します。

Web Audio API を使用すると、AV 同期を適切に行うことができます。

円錐状のグラデーションを使用すると、この美しいボーダーの例のような興味深い効果を作成できます。 Adam Argyle が作成したこの CodePen （元々は Twitter の ツイート で共有）では、 円錐形グラデーション を使用して境界を作成する方法を示しています。 Terry Mun は、Adam の CodePen を フォーク して、この CodePen を作成しました。要素にマウスを移動すると、グラデーションが変化します。これは、回転角度を格納する CSS カスタム

クライアントサイドの JavaScript 環境のコンテキストで、フレームワークとライブラリの違いを理解します。

Fetch API 使用時のエラーのキャッチ。

JavaScript ライブラリまたはフレームワークの使用に関する意思決定を理解する。

Google Fonts CSS API に関する最新情報 - 仕組み、使用方法、ウェブフォントを効率的に配信する方法

この資料は、ターミナルの操作をすばやく見つけるのに役立ちます。

GOV.UK は、フロントエンドから jQuery への依存関係を取り除きました。何が起きたのかは推測できません。（はい、できます）。

色適応型、応答性が高く、利用しやすいコンポーネントを構築する方法の基本的な概要。

ブラウザのプリロード スキャナの概要、パフォーマンスの向上の仕組み、プリロード スキャナの抑制方法についてご確認ください。

現在の分析ツールでウェブに関する指標を測定する方法

ウェブ向けの開発が簡単になる。

ウェブ向けの Google Developers エキスパートが、メンタリング プログラムによってどのようにリーダーになれるかについて語ります。

可変フォントの実践的なガイドと、さまざまな例を紹介します。

Josh W Comeau が開発したこのツールを使えば、見た目が美しいグラデーションをとても簡単に作成できます。

ウェブ デベロッパーとの 1 対 1 の対話から収集された、最大の課題に関する分析情報のコレクション。

イメージツールの状態をご確認ください。

スコープと、JavaScript でのスコープの仕組みについて学習します。

「」要素を使用して、色を適応させ、レスポンシブで、ユーザー補助に対応したミニモーダルとメガモーダルを構築する方法の基本的な概要。

ウェブでのメディア再生エラーのデバッグ方法を学習する。

これは Google Developers Experts（GDE）プログラムのメンバーにインタビューするシリーズの 1 つです。

最初のビューポート内の画像を即時読み込みし、残りの画像を自由に遅延読み込みすることで、バイト数を減らしながら Core Web Vitals を改善できます。

`` 要素を使用して、色適応的でアクセス可能な読み込みバーを作成する方法の基本的な概要。

登録フォームとログイン フォームはできる限りシンプルにします。 ログイン フォームから認証情報を保存して、ユーザーが再訪問したときに再ログインしなくて済むようにします。 フォームからユーザーの認証情報を保存するには: 続行する前に、フォームに autocomplete 属性が含まれているかどうかを確認します。これにより、Credential Management API はフォームから id と password を見つけて、認証情報オブジェクトを作成できます。 また、認証情報管理 API

ユーザー エージェント文字列の変更、Chrome と Firefox による影響の緩和策、およびユーザーの支援方法について説明します。

アダプティブ ファビコンの作成方法の基本概要。

Emscripten を使用して、WebAssembly からウェブ上の 2D グラフィックをキャンバスにレンダリングする方法を学びます。

Cache-Control ヘッダーを忘れたり誤って使用したりすると、ウェブサイトやユーザーのプライバシーに悪影響を及ぼす可能性があります。価値の高いウェブサイトに関するおすすめ情報を入手できます。

サイトの健全性を示す基本的な指標

ウェブアプリから USB 経由で外部カメラを制御するために、gPhoto2 を WebAssembly に移植しました。

ネットワーク エラー ロギング（NEL）を使用して、クライアント側のネットワーク エラーを収集します。

すべてのブラウザでユーザーをサポートしながら、最新の WebAssembly 機能を使用する方法を学びます。

WebAssembly API と Fugu API を使用して、外部デバイスと通信するコードをウェブに移植する方法を学びます。

アダプティブで利用しやすいテーマ切り替えコンポーネントを作成する方法に関する基本的な概要。

WebAssembly ライブラリに JavaScript コードを埋め込んで外部と通信する方法について説明します。

Oculus Quest 2 は、Meta の部門 Oculus が開発したバーチャル リアリティ（VR）ヘッドセットです。デベロッパーは、Oculus Quest 2 のマルチタスク機能を活用した 2D および 3D のプログレッシブ ウェブアプリ（PWA）を構築して配布できるようになりました。この記事では、Oculus Quest 2 のエクスペリエンスと、PWA の構築、サイドローディング、テストの方法について説明します。

ホリデー カレンダーのようなデザインの Designcember エクスペリエンスを構築するために使われているプロセスとツールについてご紹介します。

ウェブ上に太陽光発電計算機を再現するスキューモーフィックな試み。周囲光センサーとウィンドウ コントロール オーバーレイ機能を使用します。

長い間、回避策やライブラリを利用して JavaScript 値のディープコピーを作成する必要がありました。プラットフォームには、ディープコピー用の組み込み関数である「structuredClone()」が付属しています。

アダプティブでアクセス可能なトースト コンポーネントを作成する方法の基本的な概要。

Chrome から UI ファンドを発表。デザインツール、CSS、HTML に携わる人々に資金を提供することを目的としています。

レスポンシブで、アダプティブで、アクセス可能な 3D ゲームメニューを作成する方法についての基本的な概要。

ページとサイトの品質測定と最適化に役立つ PageSpeed Insights の最新情報をご確認ください。

アニメーションの測定、アニメーション フレームについての考え方、ページ全体の滑らかさについて学習します。

新しい Lighthouse API を試して、ユーザーフロー全体のパフォーマンスとベスト プラクティスを測定しましょう。

2021 Chrome Dev Summit の主要な発表の概要と、詳細を確認できるリンクが記載されています。

Chrome はこの 3 年間、ブラウザの可能性の限界を押し広げようとするウェブ アプリケーションを支援するために取り組んできました。その一つに Photoshop があります。数年前までは、Photoshop のような複雑なソフトウェアをブラウザで直接実行するという考えは想像もつかなかったでしょう。その一方で、さまざまな新しいウェブ テクノロジーを活用することで、Adobe は Photoshop の公開ベータ版をウェブに導入しました。

ユーザー エクスペリエンスの並べ替えとフィルタリングを行う、レスポンシブで、アダプティブで、利用しやすく、複数選択が可能なコンポーネントを構築する方法の基本的な概要。

Navigation API と Resource Timing API を使用して現場の読み込みパフォーマンスを評価する基本的な方法を学びます。

新しい Sanitizer API は、任意の文字列をページに安全に挿入できる堅牢なプロセッサを構築することを目的としています。この記事では、API の概要とその使用方法について説明します。

このドキュメントでは、サードパーティの埋め込みを読み込む際に使用できるパフォーマンスに関するベスト プラクティス、効率的な読み込み手法、一般的な埋め込みのレイアウト シフトを減らすのに役立つ Layout Shift Terminator ツールについて説明します。

SPA、ウェブに関する主な指標、Google が現在取り組んでいる測定の制限に対処する計画に関するよくある質問への回答を紹介します。