「CLS に関する問題」対策で速度改善

PageSpeed で「CLS に関する問題」が指摘される場合があります。
この表示に対する解決策を記載します。

改善方法

改善方法は主に2つあります。

  • 該当する JavaScript を削除する
  • サーバーの応答速度を上げる

これらについて解説します。

JavaScript を削除する

必要のない JavaScript でしたら削除しましょう。
CLS に関する問題本当に必要なスクリプトなのかを判断するきっかけにすると良いです。

サーバーの応答速度を上げる

JavaScript を削除したくないケースとしてそもそもサーバーの応答速度が遅くなっている可能性があります。
サーバーの応答速度を上げましょう。

その他

その他選択肢として、JavaScript のチューニングするという選択肢もあります。
しかし、多くの場合はコストパフォーマンスが合わないのではないかと考えます。

現実的な選択肢としては、先に挙げた2点をおすすめします。

参考

Cumulative Layout Shift (CLS)

「使用していない JavaScript の削除」対策で速度改善

PageSpeed Insights の表示で、「使用していない JavaScript の削除」をせよと指示されるケースの対策です。

使用していない JavaScript の削除
使用していない JavaScript の削除

PageSpeed から使用していない JavaScript を削除せよと指定されています。

改善方法

削除せよとあるのですが、2つの方法をご提案します。

  • JavaScript を削除する
  • JavaScript の読み込み属性を defer にする

いずれも有効な方法ですのでお試しください。

JavaScript を削除

PageSpeed が指摘している JavaScript を削除すれば、指摘はでなくなります。
指摘部分がなくなるので当然です。

ただし、エンジニアなど専門スタッフでなければ JavaScript を削除していいのか判断がつかないケースもあります。
そのようなケースは次の defer 属性付与が有効です。

JavaScript の読み込み属性を defer にする

JavaScript 読み込み時の属性を defer で記述します。
該当のスクリプトが遅延読み込みになります。そのため PageSpeed のパフォーマンス改善へ効果があります。

パフォーマンスの確認

PageSpeed Insights を確認して「使用していない JavaScript の削除」という記述で該当の JS が消えていれば OK です。

パフォーマンスへの影響

今回は defer 属性追加の対応で PageSpeed の点数に改善がみられました。

defer 設定前の点数

defer 設定なしでは、モバイル43点、デスクトップ88点でした😇

モバイルの点数43点
モバイルの点数43点

モバイルは赤評価になっています。

デスクトップの点数88点
デスクトップの点数88点

defer 設定ありの点数

defer ありでは点数が改善しました。

モバイルの点数50点で7点の改善
デスクトップの点数92点で4点の改善

モバイルで7点、デスクトップで4点の改善となりました。

「使用していない JavaScript の削除」まとめ

JavaScript の削除で PageSpeed の改善となりました。
パフォーマンス改善の参考としてください。

以下の対策でも同様の手法が有効です。

「最初のサーバー応答時間を速くしてください」対策で PageSpeed 点数改善

PageSpeed Insights の表示で、「最初のサーバー応答時間を速くしてください」あるいは「Reduce initial server response time」をせよと指示されるケースの対策です。

Reduce initial server response time
Reduce initial server response time

原因

英語のメッセージでしたら「Reduce initial server response time」を直訳すれば、「最初のサーバー応答時間を速くしてください」ということです。

つまり、このメッセージはサーバーの応答時間が遅いという指摘になります。

改善対策

サーバーの応答が遅いので、サーバーの応答速度を上げるのがよいです。
レンタルサーバーでしたら上位のプラン、VPS やクラウドサーバーならチューニングを行うのが良いでしょう。

WordPress ならキャッシュプラグイン

WordPress の場合はキャッシュプラグインの導入がよいです。
キャッシュプラグインとして以下をご紹介します。

これらプラグインでは WordPress のキャッシュを作成したり、CSS や HTML などの圧縮を実現してくれます。

Google の検索表示結果をカスタマイズする

Google で検索した検索結果をカスタマイズしたい、よりコンテンツをユーザー正確に伝えたいと考えている方も多いでしょう。

この部分をどこから調べるのかといえば SearchConsole からになります。

ヘルプセンターを探そう

検索での見え方 – Search Console ヘルプ から検索エンジン表示をコントロールする様々な施策の手法を確認できます。

簡単にご紹介しましたが、SearchConsole で表示をカスタマイズするための機能が用意されています。

まずは構造化データなど表示周りから手を付けてみるのがおすすめです。

サイトに Google オプティマイズ でコロナ対応バナーをだす

新型コロナウィルスの影響で、営業時間を変更したり、業務内容の変更を余儀なくされている方は多いでしょう。

Google オプティマイズ を使うと、サイトにコロナ対策を周知するバナーをだすことができます。

コロナ対策のエクスペリエンスを作成

オプティマイズのエクスペリエンスから、「COVID-19のバナー」を作成します。

COVID-19のバナー

バナーの編集画面

バナー編集画面からバナーのデザインや文言を修正します。

COVID-19バナー編集画面

編集が済んだら「完了」を押下します。

バナーの確認

バナーが確認できたら成功です。

Twitter ウィジェット削除比較は PageSpeed で9点改善となりました

PageSpeed Insights の点数改善で、Twitter のウィジェットを削除した場合の点数を比較しました。

Twitter のウィジェットとは以下のようなものです。

Twitter Publish からウィジェットを作成してウェブサイトに貼り付けることができます。

しかし、Twitter ウィジェットは PageSpeed との相性がよくありません。 PageSpeed で指摘される様々なポイントが、Twitter ウィジェットとぶつかります。

PageSpeed 対策で削除

試しに、Twitter ウィジェットを削除してみましょう。
どれくらいの影響があるのかその上でウィジェットの利用の参考にすることができます。

削除前の点数

削除前はモバイル版で、80点でした。

削除後の点数

削除後はモバイル版で、89点でした。

モバイルで+9点の改善となりました。

デスクトップ版は変わらず

Twitter ウィジェットを削除してもデスクトップ版への影響はありませんでした。

ウィジェット削除で変わる PageSpeed 項目

Twitter のウィジェットを削除すると、PageSpeed で指摘される項目が減ったり変化しました。

ページの表示を遅延させる要素が減少して、表示速度が改善したということになります。

消えた項目

以下の項目は PageSpeed で表示されなくなりました。

  • 次世代フォーマットでの画像の配信
  • 第三者コードの影響を抑えてください 第三者コードによってメインスレッドが 270 ミリ秒間ブロックされました
  • メインスレッド処理の最小化 
  • 静的なアセットと効率的なキャッシュ ポリシーの配信
  • JavaScript の実行にかかる時間の低減 

5項目が削除されているので、多岐に渡り効果が出ています。

変化した項目

以下の項目は PageSpeed で変化がありました。

  • リクエスト数を少なく、転送サイズを小さく維持してください 74 件のリクエスト

リクエスト数が74から25に減少しました。

Twitter ウィジェット削除比較まとめ

今回 Twitter のウィジェットを削除してみたところ、PageSpeed のモバイルで9点の改善となりました。

また、前後比較により削除されたり変化した項目を見ると、Twitter ウィジェットのように外部通信するウィジェットが表示のパフォーマンスに大きな影響を与えていることがわかります。

PageSpeed 視点では Twitter ウィジェットはネガティブに働きますが、Twitter ウィジェットの有効活用を目指しているケースもあるはずです。

ケースに合わせ Twitter ウィジェットの利用を検討ください。

「ウェブフォント読み込み中のテキストの表示」対策で PageSpeed 点数改善

PageSpeed Insights の表示で、「ウェブフォント読み込み中のテキストの表示」をせよと指示されるケースの対策です。

原因

この表示される理由は、ウェブフォントのロードによりページ表示の遅延になっているためです。

近年では、fontawesome や googlefont など woff2 フォントが原因となり、この指摘が出てしまうケースが多いのではないでしょうか。

改善対策

ウェブフォントが原因の遅延対策としては、二つご紹介します。

  • CSS でフォントを遅延ロードする
  • ウェブフォント読み込みを削除する

CSS を利用する場合はの @font-face を指定してフォントを遅延読み込みさせます。

CSS で遅延ロード、@font-display を swap 指定にする

CSS を編集して @font-face に swap を設定します。

ただ、今回指摘された箇所は WordPress プラグイン内の CSS でした。ですので、 WordPress プラグインの CSS に対して直接 @font-face を指定しました。

まずはプラグインの該当 CSS を見てみます。

@font-face{font-family:ez-toc-icomoon;src:url(fonts/ez-toc-icomoon.eot?-5j7dhv);src:url(fonts/ez-toc-icomoon.eot?#iefix-5j7dhv) format('embedded-opentype'),url(fonts/ez-toc-icomoon.ttf?-5j7dhv) format('truetype'),url(fonts/ez-toc-icomoon.woff?-5j7dhv) format('woff'),url(fonts/ez-toc-icomoon.svg?-5j7dhv#ez-toc-icomoon) format('svg');font-weight:400;font-style:normal}

実際にこちらがロードされているコードです。フォントが複数指定されています。

@fon-face に font-display の swap を追加します。

@font-face{font-family:ez-toc-icomoon;src:url(fonts/ez-toc-icomoon.eot?-5j7dhv);src:url(fonts/ez-toc-icomoon.eot?#iefix-5j7dhv) format('embedded-opentype'),url(fonts/ez-toc-icomoon.ttf?-5j7dhv) format('truetype'),url(fonts/ez-toc-icomoon.woff?-5j7dhv) format('woff'),url(fonts/ez-toc-icomoon.svg?-5j7dhv#ez-toc-icomoon) format('svg');font-weight:400;font-display: swap;font-style:normal}

プラグイン の CSS を上書きして swap を追加しました。

swap 設定前の点数

swap の設定前はデスクトップ版で、91点でした。

swap 設定後の点数

デスクトップ版の swap ありの点数です。

僅かですが PageSpeed の点数が改善しました。
ウェブフォント読み込み中のテキストの表示」の表示が消えました。

ウェブフォント読み込みを削除して速度改善

ウェブフォントをそもそも消してしまうというのもありです。
あまり環境に左右されずに対応できます。

<link href="https://fonts.googleapis.com/css?family=Spinnaker" rel="stylesheet">

例えばこういうフォントの読み込み表示を丸ごと削除します。

ウェブフォント削除前の点数

ウェブフォント削除後の点数

削除後のモバイルの点数は+3点となりました。

モバイルでの点数改善は大きいですね。
デザインに左右されないフェーズでしたら、思い切って削除もありというスタンスです。

「ウェブフォント読み込み中のテキストの表示」対策まとめ

「ウェブフォント読み込み中のテキストの表示」に対する対策として二つの対策をご紹介しました。

CSS の swap 読み込みは、「過大なネットワーク ペイロードの回避」対策 でも有効な方法です。

また、ウェブフォントの使い所にもよりますが、削除するのも高速化の選択肢として有力だと考えています。ゴールやフェーズに合わせて意思決定をしていきたいです。

PageSpeed で「ウェブフォント読み込み中のテキストの表示」が指摘された際には点数改善が期待できますので対応するべきポイントでしょう。

参考

Ensure text remains visible during webfont load

PageSpeed の「静的なアセットと効率的なキャッシュ ポリシーの配信」対策で速度改善

PageSpeed Insights で、「静的なアセットと効率的なキャッシュ ポリシーの配信」をせよと指示されるケースの対策と改善手法です。

キャッシュのTTL が None になっています。
アセットにキャッシュが設定されていないことがわかります。アセットとは画像や、CSS、JavaScript などのファイルと考えてください。

改善対策

WordPress などウェブサイトを使っている想定した場合、キャッシュポリシーを設定することが対策となります。

Apache を利用している、あるいは .htaccess 記法が使えるレンタルサーバーで WordPressを利用している際に通常利用できる手法をご紹介します。

Expires の指定を追加

Apache などの Web サーバーでは Expires 指定をしてキャッシュすることができます。キャッシュの指定は PageSpeed に影響があり表示速度改善が期待できます。

具体的なキャッシュの指定はウェブサーバーに合わせた指定にしてください。

レンタルサーバーは .htaccess にキャッシュを指定

Apache を利用しているレンタルサーバーなどは、.htaccess に記述すればキャッシュの Expires の指定を追加できます。

<IfModule mod_rewrite.c>
    ExpiresActive On
    ExpiresDefault "access plus 1 days"
    ExpiresByType image/png "access plus 1 months"
    ExpiresByType image/jpeg "access plus 1 months"
    ExpiresByType image/gif "access plus 1 months"
    ExpiresByType text/css "access plus 30 minutes"
    ExpiresByType text/javascript "access plus 10 hours"
    ExpiresByType application/javascript "access plus 10 hours"
</IfModule>

PageSpeed の指摘では JavaScript や画像が出ていたので、画像や JavaScript、CSS を追加します。

パフォーマンスへの影響を確認

再度 PageSpeed Insights を確認します。

相変わらず「静的なアセットと効率的なキャッシュ ポリシーの配信」という項目は表示されています。
しかし、キャッシュの TTL None の項目が消えています。
また、赤いだった表示が、黄色いアイコンになりました。

Expires 設定前の点数

Expires の設定前はデスクトップ版で、90点でした。

Expires 設定後の点数

デスクトップ版のキャッシュありの点数です。

90点から94点となり+4点の変化となりました。
モバイル版では点数の変動はありませんでした。

大きなポイントではないかもしれませんが、キャッシュ指定は忘れず対応したい設定です。

参考

mod_expires – Apache HTTP サーバ バージョン 2.2

WordPressで「オフスクリーン画像の遅延読み込み」対策で速度改善

PageSpeed Insights の表示で、「オフスクリーン画像の遅延読み込み」をせよと指示されるケースの WordPress での対策です。

オフスクリーン画像の遅延読み込み

オフスクリーンとは、画面に表示されない部分ということで、表示されない画像のロードを遅れてロードせよという指示になります。

改善対策

この記事では、WordPress の対策をメインにご紹介します。

WordPress の対策

WordPress では遅延ロードに対応したプラグインを使いましょう。

WordPress の画像遅延読み込みには、lazy load プラグイン を使えと PageSpeed の指示があります。
今回は、Autoptimize – WordPress plugin を使ってみます。

WordPress 以外の対策

WordPress 以外の場合は、JavaScript の Lazy-load プラグインを使うといいでしょう。

Autoptimize の設定

プラグイン Autoptimize をインストール&有効化してください。
設定 > Images と進みます。

Autoptimize 設定

ここから Lazy-load images? にチェックを入れます。

「Lazy-load images?」にチェックを入れて 変更を保存 を押せば設定は完了です。

パフォーマンスの確認

PageSpeed Insights を確認して「オフスクリーン画像の遅延読み込み」という記述が消えていれば OK です。

Autoptimize 設定前の点数

Autoptimize プラグインなしでは、モバイル38点でした😇

オフスクリーンロード無しのモバイルの点数

Autoptimize 設定ありの点数

Autoptimize ありではモバイルで点数が改善です。

AutoptimizeのLazyーLoadありの点数

モバイルで、5点の改善となりました😁
改善の点数はわずかですが、モバイルの点数改善は難易度が高めなので、対応したい項目です。

プラグインを入れるだけなので WordPressは やりやすいですね。

参考

Defer offscreen images

PageSpeed の「レンダリングを妨げるリソースの除外」対策でJS読み込み速度改善

PageSpeed Insights の表示で、「レンダリングを妨げるリソースの除外」をせよと指示されるケースの JavaScript の対策です。

JavaScript がレンダリングを妨げるリソース

上図では、JavaScript の jQuery などライブラリファイルがレンダリングを妨げるリソースとして指摘されています。

改善対策

JavaScript の読み込みを遅らせることで、レンダリングの妨げにならないようにします。基本的には遅延ロードなどをすれば点数改善ができます。

link タグに defer 属性を追加

JavaScript の遅延読み込みには、async と defer があるそうなのですが、今回は defer を使います。

元のタグ

以下のように外部 JS を読み込んでいた箇所が PageSpeed の指摘です。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
             crossorigin="anonymous">

改善したタグ

defer 属性を足します。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"
             crossorigin="anonymous" defer>

script タグの最後に defer を足しています。一番後ろに書きましたが、属性なので script タグ内のどこに足しても大丈夫です。

PageSpeed で指摘された読み込み JS には全部 defer を足しておくとパフォーマンス改善が期待できます。

パフォーマンスの確認

PageSpeed Insights を確認して「レンダリングを妨げるリソースの除外」という記述で該当の JS(jquery-3.2.1.slim.min.js)が消えていれば OK です。

パフォーマンスへの影響

defer 属性で PageSpeed の点数に改善がみられました。

defer 設定前の点数

defer 設定なしでは、モバイル41点でした😇

defer 無しの js 読み込みの点数

defer 設定ありの点数

defer ありでは点数が改善しました。

defer を js 読み込み設定後の点数

モバイルで、17点の改善です😁
defer 設定、やる価値のある対応ですね。

WordPress の wp_head() でライブラリが出力される場合は?

当記事でご紹介した手法を WordPress で使う場合は wp_head() をカスタマイズする必要がある場合があります。wp_head() で出力される JavaScript に defer 属性を付与するには、functions.php で wp_head() の出力を変更します。

以下の記事も合わせてご覧ください。

参考

Eliminate render-blocking resources