PageSpeedとCore Web Vitalsの改善方法を学ぶ サイトパフォーマンスを改善する技術です。 Arjen Karel linkedin 企業を対象に、Core Web Vitalsの改善、堅牢なCore Web Vitals RUMトラッキングの構築、 表示速度への意識向上、そしてベストプラクティスに基づいたCore Web Vitals実装の管理を支援しています。 時間に余裕があるときは（最近はあまりありませんが）、Core Web Vitalsについて書いています。 ご相談はこちら Showing articles. Show all 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スキルです。 Core Web Vitalsを監視するAIエージェント：MCP経由の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ガイド 最初に読み込むリソースと待機させるリソースを制御する dataLayerイベントのスケジューリングによるINPの最適化 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 Networkパネル設定 筆者が毎回のCore Web Vitals診断で行っているNetworkパネルの設定 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 transitionによるレイアウトシフト レイアウトシフトを引き起こすCSS transitionを特定して削除する方法を解説します。 限られた予算でのページ速度改善：最も重要な最適化 予算を抑えた戦略でCore Web Vitalsを改善する方法を解説します スタイルシートのプリロードが意味をなす（なさない）ケース CSSのプリロードが通常役に立たない理由と、それが機能する唯一のケース WordPressでjQueryを遅延読み込み（defer）する ページの表示速度を向上させるために、WordPressでjQueryを遅延読み込みする方法を学びましょう アナリティクスとトラッキングスクリプトを制限すべき理由 アナリティクスとトラッキングスクリプトがCore Web Vitalsに与える影響とその対策 背景画像は悪です。 背景画像がCore Web Vitalsを悪化させる理由と、その置き換え方法 nostepments ブラウザのリフロー：何がトリガーとなり、Core Web Vitalsにどう影響するのか リフローは要素の位置を再計算し、main threadをブロックします。何がトリガーになるのか、どのように検出し、どのように防ぐのかを学びましょう。 Google FontsをセルフホストしてCore Web Vitalsを改善する 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) とは：計測方法と改善方法 INPの計測対象、FIDとの違い、3つのフェーズのうちどれを最初に対策すべきか。 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がメールアドレス難読化スクリプトを修正（私がきっかけだったかもしれません） Cloudflareのメールアドレス難読化スクリプトは、かつてレンダリングをブロックしていました。Cloudflareのプロダクトマネージャーがこの記事を読み、修正をリリースしました。SEOやセキュリティの問題は、依然として回避する価値があります。 遅いヒーロー画像とCore Web Vitalsを改善する 遅いヒーロー画像を高速化して、Largest Contentful Paintを改善してください。 Cumulative Layout Shift (CLS) とは？その改善方法 CLS の計測内容、スコアの計算方法、まず確認すべき原因。 103 Early Hints: サーバーの処理時間中に重要なリソースをプリロードする ページが準備される前に、サーバーの処理時間を利用してLCP画像と重要なCSSをプリロードする LCPを70%削減した方法 Core Web Vitalsを改善するための高度な手法を学ぶ Largest Contentful Paint 画像をプリロードしてください。 LCP画像をプリロードしてCore Web Vitalsを改善する方法を学びましょう。 HubSpot Formsの遅延：ページを編集せずにrender blockingを解消する render blockingなHubSpotフォームスクリプトの、そのまま使える修正方法 「オフスクリーン画像の遅延読み込み」を修正する：Core Web Vitalsのためのlazy loadingガイド 画面外の画像を遅延させ、Core Web Vitalsを改善してください。 YouTube動画で完璧なCore Web Vitalsを達成する PageSpeedを落とすことなくYouTube動画を埋め込む方法 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が組み込まれていません。手動で追加する方法は次のとおりです。 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%達成ガイド ページスピードを落とさずにGoogle Mapsを埋め込む
