PageSpeedとCore Web Vitalsを改善する方法を学ぶ サイトのパフォーマンスを向上させるためのテクニック。 Arjen Karellinkedin 私は企業が Core Web Vitalsを修正し、堅牢なCore Web Vitals RUMトラッキングを設定し、PageSpeedの意識を向上させ、 Core Web Vitalsのベストプラクティスの実装を管理するのを支援します。 時々、時間があるとき（最近はあまりありませんが）、Core Web Vitalsについて書きます。 話しましょう HubSpotチャットウィジェットのレイアウトシフトを修正する ブラウザのレイアウトシフト除外ルールを2つ活用し、0.91のCLSを0.02に下げる回避策 JavaScript を遅延・スケジュールする14の方法 JavaScript の遅延とスケジュールの方法を学ぶ Webパフォーマンスにおける比例的推論 ボトルネックとは、絶対的なしきい値を超えるフェーズではなく、合計時間の中で最も大きな割合を占めるフェーズのことである。 AIエージェントでINPを修正する：ラボツールでは測定できない指標 INPはシミュレーションできません。これは、AIエージェントを使用してInteraction to Next Paintを診断し修正するための、フィールドデータに接続されたワークフローです。 AIエージェントでLCPを修正する：フィールドデータからコードの修正まで CWV Superpowersを使用した完全なLCP診断ワークフロー：フィールドデータにおけるボトルネックフェーズの特定から、具体的なコード変更まで。 CWV Superpowers: Core Web Vitals診断の自動化 LCP、INP、CLSのイシューを診断し、コード修正を生成するために、CoreDashのフィールドデータとChromeに接続する無料の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 Vital である 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 First Contentful Paintを高速化してCore Web Vitalsを改善する 高度な 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
