PageSpeedとCore Web Vitalsを改善する方法 サイトパフォーマンスを向上させるためのテクニックです。 Arjen Karel linkedin 企業のCore Web Vitals改善、堅牢なCore Web VitalsのRUMトラッキング構築、スピードに対する意識向上、そしてCore Web Vitalsベストプラクティス導入の管理を支援しています。 時間ができたとき（最近はあまりありませんが）、Core Web Vitalsについて記事を書いています。 お問い合わせ INP改善のためにメインスレッドへyieldする方法 scheduler.yield()を使用して長いタスクを分割し、ページの応答性を維持する Coralogix RUMが初期ネットワークを奪うのを防ぐ Coralogix RUMはロード中にビーコンを送信し、自身のLCPからネットワークを奪います。代わりにイベントをバッファリングし、ページ非表示時にフラッシュしましょう。 HubSpotチャットウィジェットのレイアウトシフトを修正する ブラウザのレイアウトシフト除外ルールを2つ活用し、0.91のCLSを0.02に下げる回避策 スクロールトリガーのアニメーションがCLSを引き起こす仕組み スクロール時に非表示になるヘッダーは、気づかないうちにCLSで不合格になっている可能性があります。その原因と、修正方法を説明します。 Webパフォーマンスにおける比例的推論 ボトルネックとは、絶対的なしきい値を超えるフェーズではなく、合計時間の中で最も大きな割合を占めるフェーズのことである。 AIエージェントでINPを修正する：ラボツールでは測定できない指標 INPはシミュレーションできません。これは、AIエージェントを使用してInteraction to Next Paintを診断し修正するための、フィールドデータに接続されたワークフローです。 AIエージェントでLCPを修正する：フィールドデータからコードの修正まで CWV Superpowersを使用した完全なLCP診断ワークフロー：フィールドデータにおけるボトルネックフェーズの特定から、具体的なコード変更まで。 I will list the contents of the workspace directory to find the English text file that needs to be translated. I will view the contents of the latest JSON file in the directory to find the English text that needs to be translated. I will view the contents of the translation python script to understand the expected output format. I will view more of the `stateless_translate.py` file to understand the workflow and what input/output formatting is expected. I will view the contents of the macOS LaunchAgent plist file to see how the translation script is being run. I will view the rest of the translation script to understand how translation fields are handled and where the input comes from. I will search the translation changelog to see how the name "CWV Superpowers" or similar terms were translated previously. I will search the translation changelog for "ja" to see if there are any successful Japanese translation entries to learn from. I will view the `translated_text.html` file to see if it contains any previous translations and what they look like. I will list the contents of the `parts` subdirectory in the workspace. I will search the translation changelog for the job ID related to `cwv-superpowers` to see how it was translated previously. I will search `launchagent_out.log` for logs of Japanese translations to see the exact translated strings from previous runs. I will search `launchagent_out.log` specifically for the term "CWV Superpowers" to see how it was logged/translated. I will search the launchagent output log for "cwv-superpowers". I will view `GEMINI.md` to see if there are any workspace-specific rules or context related to translations. I will view another temporary source file to see if there are other examples of translation jobs or structures. CWV Superpowers: Core Web Vitalsの自動診断 CoreDashのfield dataとChromeに接続してLCP、INP、CLSの問題を診断し、コード修正を生成する無料のClaude Codeスキルです。 AIエージェント Core Web Vitals：Field Dataがすべてを変える理由 AIエージェントをCore Web Vitalsデータに接続するMCPサーバーは3種類あります。Googleがランキングに実際に使用するデータを提供するのは、そのうちの1つだけです。 JPEG XLとCore Web Vitals: Chromeでのサポート開始にあたり知っておくべきこと JPEG XLとAVIF、WebP、JPEGの比較、Core Web Vitalsへの影響、そして今日から配信を開始する方法 Prerender Until Script: PrefetchとPrerenderの中間 スクリプトを実行したりアナリティクスを汚染したりすることなく、サブリソースを読み込んでDOMを構築する モバイルでのオフスクリーン画像の遅延：ネイティブlazy loadingガイド ネイティブのlazy loading、content-visibility、そしてJavaScriptによる画像の遅延読み込みがなぜ無用の長物なのか リソースの優先順位付けに関するCore Web Vitalsガイド 最初に読み込むリソースと待機させるリソースを制御する INPを最適化するためのdataLayerイベントのスケジューリング ブラウザの描画後までGTMイベントを遅延させることでINPスコアを改善する方法 ローエンドデバイス向けにCore Web Vitalsを最適化する 予算の限られたハードウェアで高速なサイトを実現するには、多くのチームが認めるよりも厳しいトレードオフが必要な理由 Core Web Vitalsに合格するための最適なCloudflare設定 ページ速度を最大化するためにCloudflareを設定し、調整すべき設定を理解してください。 Cloudflare WorkersとTransform Rulesでトラッキングパラメータを除去する fbclidやgclidのようなトラッキングパラメータは、CDNキャッシュをバイパスする一意のURLを作成します。これを修正する3つの方法を紹介します。 Elementorのヒーロー画像を2分で高速化！ Elementorのヒーロー画像を、遅い背景画像から高速な通常の画像へ2分で切り替える方法を解説します。 CSS View Transitions がウェブパフォーマンスに与える影響 view transitions がウェブパフォーマンスに影響を与える理由と状況を理解する JavaScriptの5つの優先度とその使い方 すべてのスクリプトが同じではありません。正しい順序で読み込んでください。 レスポンシブなWebフォントの読み込み：デバイスに応じた戦略 LCPの高速化とレイアウトシフトゼロを実現するレスポンシブなフォント読み込み戦略 Core Web Vitals向けのChrome DevToolsネットワークパネル設定 すべてのCore Web Vitals監査で私が使用しているネットワークパネルの設定 Core Web Vitalsの28日間の遅延が迷信である理由 CrUXのデータは28日前ではなく、2日前のものです。28日間のローリングウィンドウの本当の意味は次のとおりです。 JavaScriptによるスクロールをやめて、Interaction to Next Paintを改善してください。 Core Web Vitalsに影響を与えない、美しくスムーズなスクロール体験を作成してください。 最後の手段となる無料のページ速度最適化スクリプト 修正不可能なページをこの最後の手段で高速化してください。最も遅いページでも改善できる方法です。 Calendlyの統合を高速化する Core Web Vitalsを低下させることなくCalendlyを埋め込む 無料のWebサイトキャッシュウォーマー 無料でCore Web Vitalsを改善するために、ウェブサイトのキャッシュをプレウォームしてください。 Speculation Rules による瞬時のページ読み込み 新しい Speculation Rules API でページを瞬時に読み込み、Core Web Vitals を改善する方法を学びましょう INP改善のためにメインスレッドへyieldする方法 scheduler.yield()を使用して長いタスクを分割し、ページの応答性を維持する ECサイトのCore Web Vitals: 購入意欲の高い訪問者が最悪のパフォーマンスを経験する理由 キャッシュプラグインはカートユーザーのキャッシュを無効化します。TTFBの崖を修正する方法を解説します。 究極のCore Web Vitalsチェックリスト (2026) LCP、INP、CLSのパフォーマンスを改善する際に確認すべきすべての最適化 CSS transitionsが引き起こすLayout Shift Layout Shiftを引き起こすCSS transitionsを見つけて修正する方法を学ぶ 予算内で実現するページスピード改善：最も重要な最適化 予算に優しい戦略でCore Web Vitalsを改善する方法を学びましょう スタイルシートのプリロードが意味をなす（なさない）ケース CSSのプリロードが通常役に立たない理由と、それが機能する唯一のケース WordPressでjQueryを遅延読み込み（defer）する ページの表示速度を向上させるために、WordPressでjQueryを遅延読み込みする方法を学びましょう アナリティクスとトラッキングスクリプトを制限すべき理由 アナリティクスとトラッキングスクリプトがCore Web Vitalsに与える影響とその対策 背景画像は悪です。 背景画像がCore Web Vitalsを悪化させる理由と、その置き換え方法 nostepments ブラウザのリフロー：何がトリガーとなり、Core Web Vitalsにどう影響するのか リフローは要素の位置を再計算し、main threadをブロックします。何がトリガーになるのか、どのように検出し、どのように防ぐのかを学びましょう。 Core Web Vitalsを改善するために、Google Fontsをセルフホストしてください。 Google Fontsをセルフホストし、Core Web Vitals改善のために最適化する方法を学びましょう。 HeadとFooterへのJavaScript配置：Core Web Vitalsへの影響 head内でのdeferが現在のベストプラクティスである理由と、footerへの配置が今でも理にかなっているケース JavaScriptのdeferとasync、そしてCore Web Vitalsへの影響 Core Web Vitalsで最高の結果を得るために、JavaScriptのasyncとdeferの使い分けを学びましょう。 スクリプトが必要になるまで遅延させる IntersectionObserverとユーザーインタラクションのトリガーを使用して、オンデマンドでJavaScriptを読み込む Lighthouseの「使用していないJavaScriptの削減」を修正します。 未使用のJavaScriptを見つけて削除し、Core Web Vitalsを改善してください。 Core Web Vitalsスコアは存在しません（そして、それが重要な理由） LighthouseのスコアがCore Web Vitalsのスコアではない理由と、実際の合否を決める要因 Core Web Vitalsが完璧なチャットウィジェット PageSpeedを低下させずにチャットウィジェットを読み込む 広告ネットワークに事前接続（Preconnect）すべきか？ LCPに依存します 広告ネットワークへの事前接続は、悪影響を与えることもあれば役立つこともあります。すべてはLCP画像がすでに最適化されているかどうかにかかっています。 Core Web Vitalsのために画像を最適化してください。 画像がCore Web Vitalsに与える影響と、その最適化方法について学びます。 画像の自動サイズ調整によって引き起こされるレイアウトシフトを修正する autoのwidthとautoのheightを持つ画像はレイアウトシフトを引き起こします。これを修正する方法を学びましょう An update will be available soon. Let's wait for the task to finish. An update will be available soon. Let's wait. An update will be available soon. Let's wait. Core Web Vitals Visualizer：CWVのデバッグ用無料Chrome拡張機能 A free Chrome extension that creates a real-time overlay of your Core Web Vitals, built for developers who debug performance without opening DevTools. ミスによる遅延 vs 設計による遅延: ウェブパフォーマンスのフレームワーク パフォーマンスの問題を分類することで、適切なものを最初に見極めて修正する方法 Core Web Vitalsを改善するために背景画像を遅延させる Largest Contentful Paintを高速化するため、背景画像を遅延させるかlazy loadingしてください。 JavaScriptを遅延またはスケジュールする16の方法 JavaScriptを遅延させ、スケジュールする方法を学びます。 Lighthouseの「Largest Contentful Paint image was lazily loaded」を修正する Lighthouseの警告「Largest Contentful Paint image was lazily loaded」の修正方法を学ぶ Interaction to Next Paint (INP): とは何か、測定および改善方法 ページの応答性を測定する Core Web Vitals 指標、Interaction to Next Paint の理解、測定、および最適化に関する完全なガイド Next.jsでサードパーティスクリプトを修正し、Core Web Vitalsを改善する Next.jsでサードパーティスクリプトによって引き起こされるCore Web Vitalsの問題を修正する Next.jsでCore Web Vitalsを測定する：RUMセットアップガイド Next.jsにおけるCore Web VitalsのためのReal User Monitoring (RUM)の設定 (App RouterおよびPages Router) Next.jsでrender blocking CSSを削除してCore Web Vitalsを改善する Core Web Vitalsの高速化のために、Next.jsでrender blocking CSSを削除してください。 CloudflareはEmail Obfuscationスクリプトを修正した（私が原因かもしれない） CloudflareのEmail Obfuscationスクリプトはかつてレンダリングをブロックしていた。CloudflareのPMがこの記事を読み、修正をリリースした。SEOとセキュリティの問題は依然として回避する価値がある。 遅いヒーロー画像とCore Web Vitalsを改善する 遅いヒーロー画像を高速化して、Largest Contentful Paintを改善してください。 Cumulative Layout Shift (CLS) とは何か、そしてその修正方法 サイトの Cumulative Layout Shift を発見、測定、修正するための究極のガイド 103 Early Hints: サーバーの処理時間中に重要なリソースをプリロードする ページが準備される前に、サーバーの処理時間を利用してLCP画像と重要なCSSをプリロードする LCPを70%削減した方法 Core Web Vitalsを改善するための高度な手法を学ぶ Largest Contentful Paint 画像をプリロードしてください。 LCP画像をプリロードしてCore Web Vitalsを改善する方法を学びましょう。 HubSpot Formsの遅延：ページを編集せずにrender blockingを解消する render blockingなHubSpotフォームスクリプトの、そのまま使える修正方法 Lighthouseの「eliminate render-blocking resources」警告を修正する render blockingリソースを排除し、Core Web Vitalsを改善してください。 「オフスクリーン画像の遅延読み込み」を修正する：Core Web Vitalsのためのlazy loadingガイド 画面外の画像を遅延させ、Core Web Vitalsを改善してください。 Perfect YouTube Core Web Vitals Learn how to embed YouTube videos without losing PageSpeed First Contentful Paint (FCP): 概要と測定・改善方法 First Contentful Paint が何を測定するのか、なぜ Core Web Vitals ではないのか、そしてページのレンダリングを高速化するための実証済みの15の手法を学びましょう 高度な Critical CSS ジェネレーター Critical Path CSS を生成し、ワンクリックで Web サイトを高速化します Shopify Critical CSS: render blocking CSSをステップバイステップで排除する ShopifyにはクリティカルCSSが組み込まれていません。手動で追加する方法は次のとおりです。 「ウェブフォントの読み込み中もテキストが表示されたままにする」の修正 Webfontsは使用前にダウンロードする必要があります。そのため、読み込み中はテキストが一時的に非表示になります。 Lighthouseの「クリティカルなリクエストチェーンの回避」を修正する First Contentful PaintとLargest Contentful Paintを改善するには、クリティカルリクエストチェーンを短縮してください。 Lighthouseの「Remove Unused CSS」を解決する Lighthouseの「Remove Unused CSS」警告を解決し、ページを高速化する方法を学びます Lighthouseのavoid excessive-DOM size警告を修正する Excessive-DOM sizeを回避してCore Web Vitalsを改善する Google Maps 100% PageSpeed ガイド ページスピードを落とさずにGoogle Mapsを埋め込む
