PageSpeed で「CLS に関する問題」が指摘される場合があります。
この表示に対する解決策を記載します。
改善方法は主に2つあります。
これらについて解説します。
必要のない JavaScript でしたら削除しましょう。
CLS に関する問題本当に必要なスクリプトなのかを判断するきっかけにすると良いです。
JavaScript を削除したくないケースとしてそもそもサーバーの応答速度が遅くなっている可能性があります。
サーバーの応答速度を上げましょう。
その他選択肢として、JavaScript のチューニングするという選択肢もあります。
しかし、多くの場合はコストパフォーマンスが合わないのではないかと考えます。
現実的な選択肢としては、先に挙げた2点をおすすめします。
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
PageSpeed Insights で、「使用していない JavaScript の削除」をせよと指示されるケースの対策です。
PageSpeed で「使用していない JavaScript を削除せよ」と指示されています。
LCP に効果がある施策とされます。
「JavaScript の削除」指摘の対策には、2つの方法をがあります。
いずれも有効な方法ですのでお試しください。
PageSpeed が指摘している JavaScript を削除すれば、指摘はでなくなります。
しかし、エンジニアなど専門スタッフでない場合、JavaScript を削除していいのか判断がつかないケースもあります。
そのようなケースは次の defer 属性付与が有効です。
JavaScript 読み込み時の属性を defer で記述します。
該当のスクリプトが遅延読み込みになります。そのため PageSpeed のパフォーマンス改善へ効果があります。
PageSpeed Insights を確認して「使用していない JavaScript の削除」という記述で該当の JS が消えていれば OK です。
今回は defer 属性追加の対応で PageSpeed の点数に改善がみられました。
defer 設定なしでは、モバイル43点、デスクトップ88点でした😇
モバイルは赤評価になっています。
defer ありでは点数が改善しました。
モバイルで7点、デスクトップで4点の改善となりました。
「使用していない JavaScript の削除」の対応は確実に PageSpeed の改善となります。
PagePeed の点数、パフォーマンス改善の参考としてください。
以下の対策でも同様の手法が有効です。
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
PageSpeed Insights の表示で、「最初のサーバー応答時間を速くしてください」あるいは「Reduce initial server response time」をせよと指示されるケースの対策です。
英語のメッセージでしたら「Reduce initial server response time」を直訳すれば、「最初のサーバー応答時間を速くしてください」ということです。
つまり、このメッセージはサーバーの応答時間が遅いという指摘になります。
サーバーの応答が遅いので、サーバーの応答速度を上げるのがよいです。
レンタルサーバーでしたら上位のプラン、VPS やクラウドサーバーならチューニングを行うのが良いでしょう。
WordPress の場合はキャッシュプラグインの導入がよいです。
キャッシュプラグインとして以下をご紹介します。
これらプラグインでは WordPress のキャッシュを作成したり、CSS や HTML などの圧縮を実現してくれます。
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
PageSpeed Insights の点数改善で、Twitter のウィジェットを削除した場合の点数を比較しました。
Twitter のウィジェットとは以下のようなものです。
Twitter Publish からウィジェットを作成してウェブサイトに貼り付けることができます。
しかし、Twitter ウィジェットは PageSpeed との相性がよくありません。 PageSpeed で指摘される様々なポイントが、Twitter ウィジェットとぶつかります。
試しに、Twitter ウィジェットを削除してみましょう。
どれくらいの影響があるのかその上でウィジェットの利用の参考にすることができます。
削除前はモバイル版で、80点でした。
削除後はモバイル版で、89点でした。
モバイルで+9点の改善となりました。
Twitter ウィジェットを削除してもデスクトップ版への影響はありませんでした。
Twitter のウィジェットを削除すると、PageSpeed で指摘される項目が減ったり変化しました。
ページの表示を遅延させる要素が減少して、表示速度が改善したということになります。
以下の項目は PageSpeed で表示されなくなりました。
５項目が削除されているので、多岐に渡り効果が出ています。
以下の項目は PageSpeed で変化がありました。
リクエスト数が74から25に減少しました。
今回 Twitter のウィジェットを削除してみたところ、PageSpeed のモバイルで9点の改善となりました。
また、前後比較により削除されたり変化した項目を見ると、Twitter ウィジェットのように外部通信するウィジェットが表示のパフォーマンスに大きな影響を与えていることがわかります。
PageSpeed 視点では Twitter ウィジェットはネガティブに働きますが、Twitter ウィジェットの有効活用を目指しているケースもあるはずです。
ケースに合わせ Twitter ウィジェットの利用を検討ください。
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
PageSpeed Insights の表示で、「ウェブフォント読み込み中のテキストの表示」をせよと指示されるケースの対策です。
この表示される理由は、ウェブフォントのロードによりページ表示の遅延になっているためです。
近年では、fontawesome や googlefont など woff2 フォントが原因となり、この指摘が出てしまうケースが多いのではないでしょうか。
ウェブフォントが原因の遅延対策としては、二つご紹介します。
CSS を利用する場合はの @font-face を指定してフォントを遅延読み込みさせます。
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 の設定前はデスクトップ版で、91点でした。
デスクトップ版の swap ありの点数です。
僅かですが PageSpeed の点数が改善しました。
「ウェブフォント読み込み中のテキストの表示」の表示が消えました。
ウェブフォントをそもそも消してしまうというのもありです。
あまり環境に左右されずに対応できます。
<link href="https://fonts.googleapis.com/css?family=Spinnaker" rel="stylesheet">例えばこういうフォントの読み込み表示を丸ごと削除します。
削除後のモバイルの点数は+3点となりました。
モバイルでの点数改善は大きいですね。
デザインに左右されないフェーズでしたら、思い切って削除もありというスタンスです。
「ウェブフォント読み込み中のテキストの表示」に対する対策として二つの対策をご紹介しました。
CSS の swap 読み込みは、「過大なネットワーク ペイロードの回避」対策 でも有効な方法です。
また、ウェブフォントの使い所にもよりますが、削除するのも高速化の選択肢として有力だと考えています。ゴールやフェーズに合わせて意思決定をしていきたいです。
PageSpeed で「ウェブフォント読み込み中のテキストの表示」が指摘された際には点数改善が期待できますので対応するべきポイントでしょう。
Ensure text remains visible during webfont load
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
PageSpeed Insights で、「静的なアセットと効率的なキャッシュ ポリシーの配信」をせよと指示されるケースの対策と改善手法です。
キャッシュのTTL が None になっています。
アセットにキャッシュが設定されていないことがわかります。アセットとは画像や、CSS、JavaScript などのファイルと考えてください。
WordPress などウェブサイトを使っている想定した場合、キャッシュポリシーを設定することが対策となります。
Apache を利用している、あるいは .htaccess 記法が使えるレンタルサーバーで WordPressを利用している際に通常利用できる手法をご紹介します。
Apache などの Web サーバーでは Expires 指定をしてキャッシュすることができます。キャッシュの指定は PageSpeed に影響があり表示速度改善が期待できます。
具体的なキャッシュの指定はウェブサーバーに合わせた指定にしてください。
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 の設定前はデスクトップ版で、90点でした。
デスクトップ版のキャッシュありの点数です。
90点から94点となり+4点の変化となりました。
モバイル版では点数の変動はありませんでした。
大きなポイントではないかもしれませんが、キャッシュ指定は忘れず対応したい設定です。
mod_expires – Apache HTTP サーバ バージョン 2.2
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
PageSpeed Insights の表示で、「オフスクリーン画像の遅延読み込み」をせよと指示されるケースの WordPress での対策です。
オフスクリーンとは、画面に表示されない部分ということで、表示されない画像のロードを遅れてロードせよという指示になります。
この記事では、WordPress の対策をメインにご紹介します。
WordPress では遅延ロードに対応したプラグインを使いましょう。
WordPress の画像遅延読み込みには、lazy load プラグイン を使えと PageSpeed の指示があります。
今回は、Autoptimize – WordPress plugin を使ってみます。
WordPress 以外の場合は、JavaScript の Lazy-load プラグインを使うといいでしょう。
プラグイン Autoptimize をインストール＆有効化してください。
設定 > Images と進みます。
ここから Lazy-load images? にチェックを入れます。
「Lazy-load images?」にチェックを入れて 変更を保存 を押せば設定は完了です。
PageSpeed Insights を確認して「オフスクリーン画像の遅延読み込み」という記述が消えていれば OK です。
Autoptimize プラグインなしでは、モバイル38点でした😇
Autoptimize ありではモバイルで点数が改善です。
モバイルで、5点の改善となりました😁
改善の点数はわずかですが、モバイルの点数改善は難易度が高めなので、対応したい項目です。
プラグインを入れるだけなので WordPressは やりやすいですね。
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
PageSpeed Insights の表示で、「レンダリングを妨げるリソースの除外」をせよと指示されるケースの JavaScript の対策です。
上図では、JavaScript の jQuery などライブラリファイルがレンダリングを妨げるリソースとして指摘されています。
JavaScript の読み込みを遅らせることで、レンダリングの妨げにならないようにします。基本的には遅延ロードなどをすれば点数改善ができます。
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 設定なしでは、モバイル41点でした😇
defer ありでは点数が改善しました。
モバイルで、17点の改善です😁
defer 設定、やる価値のある対応ですね。
当記事でご紹介した手法を WordPress で使う場合は wp_head() をカスタマイズする必要がある場合があります。wp_head() で出力される JavaScript に defer 属性を付与するには、functions.php で wp_head() の出力を変更します。
以下の記事も合わせてご覧ください。
Eliminate render-blocking resources
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
PageSpeed Insights の表示で、「レンダリングを妨げるリソースの除外」をせよと指示されるケースの対策です。
CSS がレンダリングを妨げているようなので、CSS の読み込みを送らせます。
PageSpeed で指摘された CSS を読み込んでいるタグを修正します。
以下のように外部 CSS を読み込んでいた箇所が PageSpeed の指摘です。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">rel=”preload” と as=”style” を足します。
<link rel="stylesheet" rel="preload" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" as="style">rel 属性に preload して欲しいという記述と、リソースを style と指定しました。この指定、以前はブラウザごとに実装に差があったようなのですが、最近は概ね対応してきているようです。
PageSpeed Insights を確認して「レンダリングを妨げるリソースの除外」という記述が消えていれば OK です。
CSS のプリロードの影響はモバイルでは少し改善し、
デスクトップは大きなポイント改善となりました。
preload 設定なしでは、モバイル65点でした😇
デスクトップは79点
preload ありでは点数が改善しました。
モバイルで+3点、デスクトップで+15点です。
モバイルで+3点、デスクトップで+15点改善されました。
レンダリングを妨げるリソース部分が改善されたようでよかったです😁
しっかり改善したようなので、preload は対応する価値がありそうですね。
当記事でご紹介した手法を WordPress で使う場合は wp_head() をカスタマイズする必要がある場合があります。wp_head() で出力される style.css などに preload 属性を付与するには、functions.php で wp_head() の出力を変更します。
以下の記事も合わせてご覧ください。
Eliminate render-blocking resources
rel=”preload” によるコンテンツの先読み – HTML: HyperText Markup Language | MDN
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。
当記事では PageSpeed Insights の表示で、「テキスト圧縮の有効化」をせよと指示されるケースの対策と改善手法をご紹介します。
上図ではテキストリソースの JavaScript や CSS を圧縮して通信量を抑えるように指摘されています。
この対策について見ていきましょう。
テキスト圧縮は、ウェブサーバーが返すリソースへ圧縮の指定がよくある手法です。
Apache などの Web サーバーで gzip や deflate の圧縮指定をします。
圧縮指定をすれば PageSpeed の表示が消えて、速度改善が期待できます。
具体的な設定はサーバーに合わせた指定をしてください。
Web サーバーの設定を直接変更できないレンタルサーバーなどは、.htaccess に記述して deflate の圧縮指定を追加できる場合があります。
ご利用のレンタルサーバーの設定を確認してください。
以下は Apache を利用しているケースでの .htaccess の圧縮指定の紹介です。
.htaccess の IfModule mod_rewrite.c タグ内に AddOutputFilterByType DEFLATE を追加します。
<IfModule mod_rewrite.c>
AddOutputFilterByType DEFLATE text/html
</IfModule>これは HTML だけしか指定していないので、他にも追加する場合は後ろに複数追加できます。
<IfModule mod_rewrite.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/js application/x-javascript application/javascript
</IfModule>js と css が PageSpeed の指摘にありましたので追加しました。
再度 PageSpeed Insights を確認します。
deflate の指定前は37点でした。
こちらが deflate 設定後の点数です。
37点から66点になっています😁
29点の改善となりました。
この結果を踏まえると、速度改善では gzip と deflate の圧縮をまず検討するべきと言えますね。
mod_deflate – Apache HTTP サーバ バージョン 2.2
CAMON.TOKYO の吉澤修です。
記事に関連したお困りごとやお仕事のご相談などはお問い合わせからご連絡ください。