2018年11月に
Google ウェブマスター向け公式ブログ: PageSpeed Insights、
試しにhttps://www.monotalk.xyz の
改善できる<wbr>項目、診断 結果と
改善できる
実施した
改善できる
改善できる
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 tgz
application/font-sfntをmod_expires の 対象 MIME Type と して 追加しました。 JavaScript の
実行に かかる 時間の 低減
<wbr>メインスレッド処理の<wbr>最小化がこの 対策に なっているのかと 思います。
特に何もしませんでした。 過大な
DOM サイズの 回避
これは、特に 対策を しませんでした。
ネストが深すぎたり、 不要な マークアップを 削除したりするのが 対策に 該当するかと 思います。 クリティカルな
リクエストの 深さの 最小化
この警告も 特に 何もしませんでした。 (できませんでした。 )
結果
10点アップ。
Web フォント を
2019年3月に
3月後に
理由は
不要な
JavaScript を 削除
使用していない JavaScript を削除しました。 Google Tag Manager であまり
使わない タグを 一時停止 配信していた
タグを 三つ 停止しました。
タグを
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の自動広告を 外すと 速度が 改善されるのは 本当なのか？ - クラシトトノエ＊賃貸の 階段の ある おうち] (https://www.kurasitotonoe.com/entry/blogadsensjidou)
以上です。
コメント