2018年11月に PageSpeed Insights が新しくなり、分析エンジンが Lighthouse になりました。
Google ウェブマスター向け公式ブログ: PageSpeed Insights、Lighthouse の使用を開始しました
試しにhttps://www.monotalk.xyz のテストを実行してみたところ 過去の スコアリングに比べて、モバイルのスコアが大分厳しくなっているように思いました。
改善できる項目、診断 結果として幾つか項目が挙がっています。
改善できる項目を改善してどれくらいスコアが改善するか試してみました。
実施したことを記載します。
改善できる項目、診断 結果の内容
改善できる項目、診断 の結果として以下が出力されました。
Google Tag Manager 等でタグ配信していると、自ドメインではない外部ドメインでの警告が出力される場合もあります。
基本的に外部ドメインで発生している場合は対処は難しいかと思います。
警告内容の詳細を開くと、どのドメインのリソースなのか確認できます。
改善できる項目
-
適切なサイズの画像
使用している画像のサイズが適切ではないという警告です。 -
次世代フォーマットでの画像の配信
JPEG 2000、JPEG XR、WebP 等の新しい画像フォーマットを使ったほうがいいという警告です。
以下の記事の内容を読む限り、WebP を使うのがいいのかなと思います。
WebP / JPEG 2000 / JPG XR 主要ブラウザ対応表＆テスト画像 – Jill Tone Blog -
サーバー応答時間の短縮（TTFB）
サーバーが応答を返すまでにかかった時間が長すぎる場合に出力されます。
0.07 s遅い旨の警告が出ました。
診断
-
カスタム速度の記録と計測
User Timing API を使って、アプリケーションのパフォーマンスを計測したほうがいいと言われています。 -
ウェブフォント読み込み中のテキストの表示
ウェブフォントの読み込み中でもテキストが見れるように css を記載したほうがいいと言われています。 -
メインスレッド処理の最小化
JavaScript のサイズが大きいことに由来して、処理が遅くなっていると言われています。 -
静的なアセットと効率的なキャッシュ ポリシーの配信
静的ファイルに、キャッシュポリシーの設定がない。キャッシュポリシーの設定はあるが、時間が短い場合、警告が出力されます。 -
JavaScript の実行にかかる時間の低減
JavaScript の解析、コンパイル、実行時間が長い場合、警告が出力されます。 -
過大な DOM サイズの回避
DOM のノード数が多いと警告が出力されます。1038個で出力されました。 -
クリティカルなリクエストの深さの最小化
クリティカル リクエスト チェーン が長すぎる(時間がかかりすぎる)と警告が出力されます。
警告への対処
改善できる項目
- 適切なサイズの画像
Squoosh を使って画像を圧縮、Desktop 用と、Mobile 用の2種類の画像を用意して、対象となっていた画像を media クエリで 切り替えるようにしました。
<!-- Set your background image for this header on the line below. -->
<style>
.header-bg {
background-image: url('{% static "img/home-bg-1600.jpg" %}')
}
@media screen and (max-width: 767px) {
.header-bg {
background-image: url('{% static "img/home-bg-800.jpg" %}')
}
}
</style>
<header class="intro-header header-bg">
</header>
-
次世代フォーマットでの画像の配信
これは、対象画像が 外部ドメインの画像だったため、対応を見送りました。
WebP を HTML 上で使用する際は、picture タグとの併用が良い感じです。
画像最適化戦略 WebP 編 | blog.jxck.io
Squoosh で JPEG、PNG 等から WebP への変換ができるようです。 -
サーバー応答時間の短縮（TTFB）
詳細ページから、lighthouse のコードへ飛べます。
lighthouse/time-to-first-byte.js at master · GoogleChrome/lighthouse
0.6 秒がしきい値として設定されています。
この時間の短縮は現状難しいので対応を見送りました。const TTFB_THRESHOLD = 600;
改善できる項目
-
カスタム速度の記録と計測
こちらは特に何も設定しませんでした。
Turbolinks を使っているので、ページ遷移にどれくらいの時間がかかるのか測定するのがよいのかもしれません。 -
ウェブフォント読み込み中のテキストの表示
font が読み込まれるまで、テキストが詠み込まれない問題に対処するため、font-displayというプロパティがあるようです。
CSSでwebフォントの読み込みが遅い問題を改善する方法 - Qiita
font-displayのブラウザのサポート状況は以下の通りです。
Can I use… Support tables for HTML5, CSS3, etc
font-awesome 以外の font にfont-display: swap;の記述を追加しました。 -
メインスレッド処理の最小化
メインで読み込んでいた bundle.js を 機能ごとに 2 つに分割しました。
Blog のトップでは片方使用していないため、必要なタイミングで読み込むように修正しました。 -
静的なアセットと効率的なキャッシュ ポリシーの配信
CentOS 7 の javascript の MIME Type について | Monotalk に記載した mod_expires の設定を行っていましたが、ttf のみ 有効期限が設定できていませんでした。
CentOS 7 の ttf の MIME Type の設定は以下の通りです。
# fits, fit, fts: image/fits application/fits application/font-sfnt ttf application/font-tdpfr pfr application/font-woff woff application/framework-attributes+xml application/gzip gz tgzapplication/font-sfntを mod_expires の対象 MIME Type として追加しました。 -
JavaScript の実行にかかる時間の低減
メインスレッド処理の最小化がこの対策になっているのかと思います。
特に何もしませんでした。 -
過大な DOM サイズの回避
これは、特に対策をしませんでした。
ネストが深すぎたり、不要なマークアップを削除したりするのが対策に該当するかと思います。 -
クリティカルなリクエストの深さの最小化
この警告も特に何もしませんでした。(できませんでした。)
結果
10点アップ。
Web フォント を諦める、もしくは typekit/webfontloader: Web Font Loader gives you added control when using linked fonts via @font-face. 等のライブラリを使って 遅延読み込み、preload できるようにすると結構スコアが上がりそうな気がしましたが、結構難しく思われましたので、気が向いたら実施してみようかと思います。
2019年3月に実施したこと
3月後に再度測定しました。
理由はわかりませんが 若干 得点が下がっており、以下対策を実施しました。
-
不要なJavaScript を削除
使用していない JavaScript を削除しました。 -
Google Tag Manager であまり使わないタグを一時停止
配信していたタグを三つ停止しました。
タグを停止し、スコアは14点上昇し、もとの水準に戻りました。
2019年4月に実施したこと
2019年4月 には以下を実施しました。スコア的な変動はありませんでしたが、警告は除去されました。
- CSS のコメントを削除
Webpack 4 の OptimizeCSSAssetsPlugin を使って、CSS ファイルのコメントを削除しました。
Webpack 4 OptimizeCSSAssetsPlugin CSSを最適化する | Monotalk -
JavaScript のコメントを削除
Webpack 4 の TerserPlugin を使って、JavaScript の コメントを削除しました。
Webpack 4 圧縮時にJavaScriptのコメントを全て削除する | Monotalk -
SVG ファイルの最適化
Webpack 4 の svgo-loader を使って、SVGの最適化を行いました。
Webpack 4 svgo-loader を使い、SVG を最適化する | Monotalk -
HTTPサーバー側の性的コンテンツの有効期限の見直し
JavaScript ファイル等の有効期限が 1ヶ月だったのを 6ヶ月にしました。
<IfModule expires_module> ExpiresActive On ExpiresByType image/jpeg "access plus 6 months" ExpiresByType image/gif "access plus 6 months" ExpiresByType image/png "access plus 6 months" ExpiresByType text/css "access plus 6 months" ExpiresByType text/javascript "access plus 6 months" ExpiresByType application/javascript "access plus 6 months" # Font ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType application/font-sfnt "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-opentype "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" ExpiresByType application/font-woff2 "access plus 1 year" ExpiresByType application/font-woff "access plus 1 year" ExpiresByType image/x-icon "access plus 1 year" ExpiresByType image/vnd.microsoft.icon "access plus 1 year" </IfModule> -
woff2 フォントの MIME タイプを追加
CentOS 7 の /etc/mime.types には、woff2 の設定がなく、有効期限が効いていなかったため、woff2 を AddTypeしました。
<IfModule mime_module> # # TypesConfig points to the file containing the list of mappings from # filename extension to MIME-type. # TypesConfig /etc/mime.types # .woff2 AddType application/font-woff2 .woff2 </IfModule> -
試していないが、AdSense の自動広告を外すとスコアが改善されることを知った
35-40前後からスコアがなかなか上りませんが、AdSense 系のリソースで警告が出るので、検索してみたところ、自動広告を OFFにするとスコアが改善されるという情報を見つけました。
Google AdSensの自動広告を外すと速度が改善されるのは本当なのか？ - クラシトトノエ＊賃貸の階段のあるおうち
以上です。
コメント