Angular/Lighthouseで解析

Google Lighthouseは、ウェブページの品質を測定するためのオープンソースの自動化ツールです。

用途

Webページのパフォーマンス、アクセシビリティ、検索エンジン最適化を監査します。PageSpeed Insights、WebPageTest、GTmetrixなどの速度テストツールと組み合わせて、使ってみてください。

当初「PWA（プログレッシブウェブアプリ）」監査を目的としていました。PWA
HTML、CSS、JavaScriptなどの一般的なウェブテクノロジーを使用して構築された、ウェブを通じて配信されるアプリケーションソフトウェアの一種。

手順

1. Chrome DevToolsから利用する
2. Googleの拡張機能から利用する
3. Nodeモジュールとして利用する

指標「Core Web Vitals」

Webサイトの保有者が焦点をあてるべき重要な指標として
LCP（Largest Contentful Paint）：読み込み時間
コンテンツの読み込みにどれくらいの時間がかかるか
FID（First Input Delay）：インタラクティブ性
ユーザーが最初にクリック／タップしてからブラウザが応答するまでにどれくらいの時間がかかるか
CLS（Cumulative Layout Shift）：視覚的安定性
画面の要素がどれくらい安定しているか（レイアウトのズレを評価）

SEOチェックの機能

現在のチェック項目は以下の14点です。

モバイルフレンドリーか
構造化データが適切か
<meta name=”viewport”>タグがwidthとinitial-scaleと一緒に使われているか
文章に<title>が使われているか
メタタグでdescriptionが使われているか
HTTPステータスコードを正しく使っているか
リンクのアンカーテキストが適切か
読みやすいフォントサイズに設定されているか
インデックスをブロックしていないか
robots.txtが有効か
画像にalt属性があるか
文章に適切なhreflangが設定されているか
文章に適切なrel=”canonical”が設定されているか
JavaやFlashなどの不要なプラグインがないか