PageSpeedとCore Web Vitalsを改善する方法を学ぶ サイトのパフォーマンスを向上させるためのテクニック。 Arjen Karellinkedin 私は企業が Core Web Vitalsを修正し、堅牢なCore Web Vitals RUMトラッキングを設定し、PageSpeedの意識を向上させ、 Core Web Vitalsのベストプラクティスの実装を管理するのを支援します。 時々、時間があるとき(最近はあまりありませんが)、Core Web Vitalsについて書きます。 話しましょう Coralogix RUMが初期ネットワークを奪うのを防ぐ Coralogix RUMはロード中にビーコンを送信し、自身のLCPからネットワークを奪います。代わりにイベントをバッファリングし、ページ非表示時にフラッシュしましょう。 HubSpotチャットウィジェットのレイアウトシフトを修正する ブラウザのレイアウトシフト除外ルールを2つ活用し、0.91のCLSを0.02に下げる回避策 JavaScript を遅延・スケジュールする14の方法 JavaScript の遅延とスケジュールの方法を学ぶ 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スキルです。 JavaScript を遅延・スケジュールする14の方法 JavaScript の遅延とスケジュールの方法を学ぶ 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を最適化する 予算の限られたハードウェアで高速なサイトを実現するには、多くのチームが認めるよりも厳しいトレードオフが必要な理由 Core Web Vitals に合格するための最適な CloudFlare 設定 CloudFlare を最大限のページスピードに設定し、活用すべき設定項目を理解する Cloudflare WorkersとTransform Rulesでトラッキングパラメータを除去する fbclidやgclidのようなトラッキングパラメータは、CDNキャッシュをバイパスする一意のURLを作成します。これを修正する3つの方法を紹介します。 Elementor のヒーロー画像を2分で高速化! Elementor のヒーロー画像を、遅い背景画像から高速な通常画像にわずか2分で切り替える方法を学びましょう CSS View Transitions がウェブパフォーマンスに与える影響 view transitions がウェブパフォーマンスに影響を与える理由と状況を理解する ページ読み込みを高速化するためのJavaScript優先度の最適化 スクリプトの優先順位を効果的に設定してCore Web Vitalsを向上させる方法を学びましょう。 レスポンシブ Web フォント読み込み、新しい戦略 レスポンシブなプリロードとレスポンシブな font-face 宣言による、低速モバイルデバイス向けフォント読み込みの最適化 Core Web Vitals を最適化するための理想的な Chrome Network パネル設定 Chrome DevTools の Network パネルを最大効率に設定する Core Web Vitals の28日遅延が神話である理由 Google が Core Web Vitals データは28日遅れていると言うとき、本当に意味していることを理解する Um menu bootstrap mais rápido e simples Baseado em CSS puro e Vanilla JavaScript 無料の最後の手段としてのページスピード最適化スクリプト 最も遅いページでさえも改善するこの最後の手段で、修正不可能なページを高速化しましょう Calendlyの統合を高速化する Core Web Vitalsを低下させることなくCalendlyを埋め込む 無料のWebサイトキャッシュウォーマー Core Web Vitals を無料で高速化するために、Webサイトのキャッシュを事前にウォームアップ 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に与える影響とその対策 背景画像は害悪である ウェブサイトで背景画像を避けるべき理由、背景画像を素早く見つける方法、そしてこの問題の修正方法を学びましょう HTMLリフローとページスピードへの影響を理解する リフローは、ブラウザがWebページ内の要素の位置とジオメトリを再レンダリングのために再計算するときに発生します。これがページスピードにどのように影響するかを学びましょう。 Um menu bootstrap mais rápido e simples Baseado em CSS puro e Vanilla JavaScript JavaScriptの配置:ヘッドとフッター – メリットとデメリット フッターまたはヘッダーのJavaScript?Core Web Vitalsにどのような影響があり、どちらを使うべきか? Defer vs Async JavaScript と Core Web Vitals への影響 最適な Core Web Vitals の結果を得るために、JavaScript を async にするタイミングと defer にするタイミングを学ぶ スクリプトが必要になるまで遅延させる IntersectionObserverとユーザーインタラクションのトリガーを使用して、オンデマンドでJavaScriptを読み込む Lighthouse の 'reduce unused JavaScript' 警告を修正する方法 未使用の JavaScript を削減して Core Web Vitals を改善する あなたが話している「Core Web Vitals スコア」とは何ですか? 「Core Web Vitals スコア」についての質問への答え方を学びましょう。いつかは必ず話題に上がるものです 完璧な Core Web Vitals でチャットウィジェットを読み込む方法 PageSpeed や Core Web Vitals に影響を与えないチャットウィジェットの読み込み方法 広告ネットワークに事前接続(Preconnect)すべきか? LCPに依存します 広告ネットワークへの事前接続は、悪影響を与えることもあれば役立つこともあります。すべてはLCP画像がすでに最適化されているかどうかにかかっています。 Core Web Vitals のための画像最適化 画像が Core Web Vitals にどう影響するか、そしてその最適化方法を学ぶ 画像の自動サイズ調整によって引き起こされるレイアウトシフトを修正する autoのwidthとautoのheightを持つ画像はレイアウトシフトを引き起こします。これを修正する方法を学びましょう Core Web Vitals ビジュアライザー Core Web Vitals ビジュアライザーを誇りを持ってご紹介します ミスによる遅延 vs 設計による遅延: ウェブパフォーマンスのフレームワーク パフォーマンスの問題を分類することで、適切なものを最初に見極めて修正する方法 背景画像の遅延読み込み Largest Contentful Paintを高速化するための背景画像の遅延読み込みとlazy load JavaScript を遅延・スケジュールする14の方法 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) NextJS Core Web Vitals - レンダーブロッキングCSSを削除する NextJS Core Web Vitals 究極ガイド - レンダーブロッキング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を改善する方法を学ぶ PageSpeed hack:ページを編集せずにHubSpotフォームをdeferする方法 render blockingなHubSpotスクリプトを排除する Lighthouse の「Eliminate render-blocking resources」警告を修正する方法 レンダーブロッキングリソースを排除して Core Web Vitals を改善する Defer offscreen images の Lighthouse 警告を修正する方法 Defer offscreen images を修正して 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 「Ensure text remains visible during webfont load」の修正方法 Lighthouse の「Avoid Chaining Critical Requests」を修正する方法 Lighthouseの「Remove unused CSS」を修正する方法 Lighthouseのavoid excessive-DOM size警告を修正する Excessive-DOM sizeを回避してCore Web Vitalsを改善する Google maps 100% pagespeed