PageSpeedとCore Web Vitalsを改善する方法を学ぶ サイトのパフォーマンスを向上させるためのテクニック。 Arjen Karel linkedin 私は企業が Core Web Vitalsを修正し、堅牢なCore Web Vitals RUMトラッキングを設定し、PageSpeedの意識を向上させ、 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スキルです。 JPEG XLとCore Web Vitals: Chromeでのサポート開始にあたり知っておくべきこと JPEG XLとAVIF、WebP、JPEGの比較、Core Web Vitalsへの影響、そして今日から配信を開始する方法 Prerender Until Script: PrefetchとPrerenderの中間 スクリプトを実行したりアナリティクスを汚染したりすることなく、サブリソースを読み込んでDOMを構築する リソースの優先順位付けに関するCore Web Vitalsガイド 最初に読み込むリソースと待機させるリソースを制御する INPを最適化するためのdataLayerイベントのスケジューリング ブラウザの描画後までGTMイベントを遅延させることでINPスコアを改善する方法 ローエンドデバイス向けにCore Web Vitalsを最適化する 予算の限られたハードウェアで高速なサイトを実現するには、多くのチームが認めるよりも厳しいトレードオフが必要な理由 Cloudflare WorkersとTransform Rulesでトラッキングパラメータを除去する fbclidやgclidのようなトラッキングパラメータは、CDNキャッシュをバイパスする一意のURLを作成します。これを修正する3つの方法を紹介します。 Elementor のヒーロー画像を2分で高速化！ Elementor のヒーロー画像を、遅い背景画像から高速な通常画像にわずか2分で切り替える方法を学びましょう CSS View Transitions がウェブパフォーマンスに与える影響 view transitions がウェブパフォーマンスに影響を与える理由と状況を理解する JavaScriptのスクロールライブラリを、1行のCSSに置き換えてください。scroll-behavior: smoothにより、パフォーマンスが向上し、Interaction to Next Paint (INP)が高速化します。 Create a beautiful smooth scrolling experience that does not affect the Core Web Vitals Calendlyの統合を高速化する Core Web Vitalsを低下させることなくCalendlyを埋め込む Speculation Rules による瞬時のページ読み込み 新しい Speculation Rules API でページを瞬時に読み込み、Core Web Vitals を改善する方法を学びましょう INP改善のためにメインスレッドへyieldする方法 scheduler.yield()を使用して長いタスクを分割し、ページの応答性を維持する ECサイトのCore Web Vitals: 購入意欲の高い訪問者が最悪のパフォーマンスを経験する理由 キャッシュプラグインはカートユーザーのキャッシュを無効化します。TTFBの崖を修正する方法を解説します。 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をブロックします。何がトリガーになるのか、どのように検出し、どのように防ぐのかを学びましょう。 スクリプトが必要になるまで遅延させる IntersectionObserverとユーザーインタラクションのトリガーを使用して、オンデマンドでJavaScriptを読み込む 広告ネットワークに事前接続（Preconnect）すべきか？ LCPに依存します 広告ネットワークへの事前接続は、悪影響を与えることもあれば役立つこともあります。すべてはLCP画像がすでに最適化されているかどうかにかかっています。 画像の自動サイズ調整によって引き起こされるレイアウトシフトを修正する 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 設計による遅延: ウェブパフォーマンスのフレームワーク パフォーマンスの問題を分類することで、適切なものを最初に見極めて修正する方法 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) CloudflareはEmail Obfuscationスクリプトを修正した（私が原因かもしれない） CloudflareのEmail Obfuscationスクリプトはかつてレンダリングをブロックしていた。CloudflareのPMがこの記事を読み、修正をリリースした。SEOとセキュリティの問題は依然として回避する価値がある。 Cumulative Layout Shift (CLS) とは何か、そしてその修正方法 サイトの Cumulative Layout Shift を発見、測定、修正するための究極のガイド 103 Early Hints: サーバーの処理時間中に重要なリソースをプリロードする ページが準備される前に、サーバーの処理時間を利用してLCP画像と重要なCSSをプリロードする LCPを70%削減した方法 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 サイトを高速化します 「ウェブフォントの読み込み中もテキストが表示されたままにする」の修正 Webfontsは使用前にダウンロードする必要があります。そのため、読み込み中はテキストが一時的に非表示になります。 Lighthouseの「Remove Unused CSS」を解決する Lighthouseの「Remove Unused CSS」警告を解決し、ページを高速化する方法を学びます Lighthouseのavoid excessive-DOM size警告を修正する Excessive-DOM sizeを回避してCore Web Vitalsを改善する
