対処法

参考:

CSS の実装方法を少し改善するだけで、Web ページの読み込み・表示を最適化するテクニックのまとめ | コリス

Web ページの表示が早くなる!既存ページのクリティカル レンダリング パスを最適化するオンラインツール | コリス

Largest Contentful Paint を最適化する | web.dev

First Input Delay を最適化する | web.dev

Cumulative Layout Shift を最適化する | web.dev

Eliminate Render-Blocking Resources | web.dev

ペイントの複雑さの簡略化とペイントエリアの縮小 | Google Developers [Official]

コンポジタ専用プロパティの優先使用、およびレイヤー数の管理 | Google Developers [Official]

サイトに初回ペイントの遅延を引き起こすリソースを使用しない | Google Developers [Official]

アニメーション

参考:

High Performance Animations | HTML5 Rocks

仕組み

参考:

Inside Look at Modern Web Browser Part 3 | Google Developers [Official]

Lighthouse

こちらのページを参照

参考:

Lighthouse によるウェブアプリの監査 | Google Developers [公式]

Lighthouse Performance Scoring | Google web.dev

GoogleChrome/lighthouse: Auditing, performance metrics, and best practices for Progressive Web Apps – GitHub

lighthouse – npm

Lighthouse | Chrome ウェブストア [公式]

ページエクスペリエンス

こちらのページを参照

参考:

Google 検索へのページエクスペリエンスの導入時期 | Google Developers [公式]

Google 提供ツール

参考:

Make the Web Faster | Google Developers [Official]

web.dev

コアウェブバイタル (Core Web Vitals)
  • LCP (Largest Contentful Paint)最大視覚コンテンツの表示時間
  • FID (First Input Delay)初回入力までの遅延時間
  • CLS (Cumulative Layout Shift)累積レイアウトシフト数
こちらのページを参照

参考:

Performance Audits | web.dev [Official]

Measure | web.dev [Official]

Web Vitals | web.dev [Official]

The Business Impact of Core Web Vitals | web.dev

Largest Contentful Paint (LCP) | web.dev [Official]

First Input Delay (FID) | web.dev [Official]

Cumulative Layout Shift (CLS) | web.dev [Official]

web.dev [Official]

Test My Site

参考:

Test My Site – モバイルサイトの速度を比較しましょう | Google [公式]

Web Vitals Chrome Extension

参考:

Web Vitals | Chrome ウェブストア [公式]

GoogleChrome/web-vitals-extension: A Chrome extension to measure essential metrics for a healthy site – GitHub

WebPageTest

参考:

WebPageTest – Website Performance and Optimization Test [Official]

WPO-Foundation/webpagetest: Official repository for WebPageTest – GitHub

WebPageTest Documentation [Official]

webpagetest.org を利用した Web ページの表示速度測定とチューニング – Qiita

サイトの表示速度を link タグの rel=”preconnect” で上げる/WebPageTest で事前接続を調べる | 些細な日常

WebPageTest の使い方/サイト表示高速化の計測ツール | Heysho

スマホでアクセスした時に、ファーストビューの表示までどのくらいかかる? WebPageTest ですぐに調べてみよう! | アイデアマンズブログ

WebPageTest でサイトのパフォーマンスを定期計測する | アクトインディ株式会社

WebPageTest から始める継続的パフォーマンス改善 | スライド置き場 (azu.github.io)

Private Instances | WebPageTest Documentation [Official]

WebPageTest API Integrations | WebPageTest Documentation [Official]

WebPageTest GitHub Action | GitHub Marketplace [Official]

Sign Up – WebPageTest by Catchpoint | WebPageTest [Official]

gas-webpagetest

参考:

uknmr/gas-webpagetest – GitHub

gas-webpagetest で WebPageTestの パフォーマンス計測を自動化、可視化する | Web Scratch

動画/チュートリアル

The Business Impact of Core Web Vitals

Non-composited Animations and CLS in Page Speed Insights

記事をシェアする:

コメントを残す

メールアドレスが公開されることはありません。

Protected by reCAPTCHA