モバイルのweb表示速度を改善した方法　2021.06

PageSpeed Insightsでモバイルの表示だけどうしても遅い・・・

色々改善項目があるけど、どうしたらいいか分からない・・・

この記事は、 WordPressを使っていて、自分のページの表示速度が遅い・・・・( ；∀；)（特にモバイル）

と悩んでいる方向けの記事です。

この記事から分かること

・サイト表示スピードが遅いとどうなるのか

・計測の方法

・実際に改善した方法

前提

・Wordpressを使ってブログやサイトを運営している人
・テーマは無料テーマを使用してます
・計測は、PageSpeed InsightsとGTmetrixを使います
・【追記】2021年の6月のGoogleアップデート後に速度が下がった人

四苦八苦してトライ＆エラーの続出なので、この記事が誰かの参考になればと思います・・・。

1. サイト表示スピードの重要性
2. 改善結果
3. 計測する
- 3.1. 対応前の測定結果
4. いざ、改善。試したこと

サイト表示スピードの重要性

まずは、「なぜ表示速度が大事なのか」です。

サイト表示のスピードの重要性は2018年にGoogleでも以下のように記載されています。

ページの読み込み速度をモバイル検索のランキング要素に使用します
サイト制作に関わるみなさまには、パフォーマンスがそのページのユーザー体験にどのように影響するかを広く考え、そしてさまざまなユーザーエクスペリエンスの指標を考慮することをおすすめします。
引用元：ウェブマスター向け公式ブログ

つまり、

サイトの表示スピードが遅い（パフォーマンスが遅い）と、検索のランキング要素に影響してしまう

ということになります。

また、もし自分があるサイトをクリックしたときに、いつまでも読み込みせず、ずーーーとローディングしていたらどうでしょうか。

そのページ閉じて、違うサイト見に行っちゃうかも・・・・

そう、離脱率も上がることになります。

つまり、サイトの表示スピードが遅いと、せっかく作ったサイトも記事も、見てもらえないのです。

改善結果

まずは試したことで、どう変わったかになります。

モバイル表示スピード

色々いじったり、JavaScriptを使用したりしているので70後半～90が多くなってしまいましたが、初期と比べたら全然マシです。

【2021.06追記】

Googleのアップデートにより現在は70～80後半になりました。

オレンジ色なので引き続き対策を探していきたいと思います。

では計測の説明から入るので、計測が終わっている方は、「いざ、改善。試したこと」からお読みください。

計測する

今のスピードがどうなのか、計測をします。

計測には、以下2つを使いました。

PageSpeed Insights

GTmetrix

PageSpeed Insigh・・・Googleから提供されているツール。

「改善できる項目」に記載されている部分で、どこが問題か判断できる。

ラボデータの部分、改善項目部分を主にチェックします。

Gtmetrix・・・PageSpeed Insighと同じような感じだが、タブで細かい内容まで見れる。

対応前の測定結果

PageSpeed Insightsは 30～40 （モバイル）・・・・( ；∀；)

GTmetrixの方は写真撮り忘れたのですが、確か E でした・・・・( ；∀；)

※この画像は何回か違う改善を試した後の数値で44なんです・・・・( ；∀；)

えっ・・・・・・・そんなに低いの・・・・・？？

ショックでした（　＾ω＾）・・・

いざ、改善。試したこと

さあ、改善します。

物事にはなからず原因があるので、どうにかできるはず・・・・・！！！

私がPageSpeed Insightsで引っかかったのは、

適切なサイズの画像

使用していない JavaScript の削減

レンダリングを妨げるリソースの除外

（サ－バーの応答時間を短くしてください）

でした。

サーバーについてはどうしようもないので、一旦保留とします。

改善案として以下を実施しました。

使っていないプラグインを停止・削除

➡全体の軽量化を図る

Autoptimize（プラグイン）の設定見直し

➡JavascriptやCSSの最適化の再確認/レンダリングを妨げるリソースの除外の対応

Contact Form 7とreCaptchaの読み込みを限定的に変更　

➡　使用していない JavaScript の削減対応

画像の圧縮、サイズ変更

➡　適切なサイズの画像対応

アドセンスの画像表示読み込み遅延※アドセンス導入している方のみ

この辺を実施して、かなり改善されました。

順番に見ていきます！
試しながら再計測して、ベストを見つけてください！！

1.全体の軽量化　使っていないプラグインを停止・削除

当たり前なのですが、これを実施しました。

プラグインが大量にあると、その分読み込み速度は落ちます。

つまり、使うプラグインは厳選して使いたい所。

私の場合は使っていないタグ表示のプラグインや、人気の表示だけ取得するプラグインを停止、削除しました。

色々試しすぎで、プラグインで重い部分もあったのよね（　＾ω＾）・・・

2.レンダリングを妨げるリソースの除外 Autoptimize（プラグイン）の設定見直し

「レンダリングを妨げるリソースの除外」とは、

ページ読み込み時に、あるリソース（コード等）が邪魔して、表示に時間がかかっている状態なので、それを除外してね。

という状態。

ページの First Paint をリソースがブロックしています。
重要な JavaScript や CSS はインラインで配信し、それ以外の JavaScript やスタイルはすべて遅らせることをご検討ください。
引用元：https://web.dev/render-blocking-resources/?utm_source=lighthouse&utm_medium=unknown

この対策にはJavaScriptの遅延、コードの最適化を実施します。

Autoptimizeのプラグインを使用します。

Autoptimize はCSSやJavaScriptファイルの圧縮、画像遅延読み込み、フォントの最適化など、

表示スピードを改善するのに大いに役立ってくれるプラグインです。

これは元々導入していたプラグインなのですが、少し設定を見直しました。

Javascriptオプションを下記のように設定します。

私の場合は連結するとうまく表示されない現象をすでに確認していたので、「連結しないで遅延」にチェックを入れました。

CSSのオプションは「CSSコードを最適化」「CSSファイルの連結」

（必要に応じて、※1「CSSのインライン化と遅延」）を設定しました。

※1は要注意なので以下を確認下さい

CSSのインライン化と遅延

見えるページのCSSをHTML内に直接記載する形にして、その他のCSS読み込みを遅延する方法。

！！注意！！

この設定でCSSが崩れる場合もあるようです。
表示がおかしいなと思ったらチェックを外すのをお勧めします。

※1　2021.08　追記

この設定をミスるとPageSpeed InsightsのCLSに問題が出てきます。

「レイアウトが大きく変わらないようにする」という指摘が出た場合は、チェックを外すことをお勧めします。

レイアウトが複雑ではなく、ファーストビューのレイアウトが分かっている方は、以下の方法でクリティカルパスを作成できます。

CSSのインライン化と遅延を設定する場合は、チェックを入れその空白枠内に、トップページ、記事ページの最初に目につくであろうCSS部分を記載します。

クリティカルパスCSSジェネレーター

これを使って、初期表示部分のCSSを抽出します。

クリティカルパスCSSジェネレーター

1 .1に自分のURLを入力します。（TOPページ）

2 .2にWordpressのテーマから、style.cssをコピーして貼り付けます。

子テーマや、CSSをカスタマイズしている場合はそちらも貼り付けます。※

3 .3のボタンを押します。

4 .クリティカルパスが作成されるので、先ほどのAutoptimize、CSSのインライン化と遅延に貼り付けます。

※style.cssは　管理画面の外観　⇒　テーマエディター　⇒　右側にstyle.css　のファイルがあります。

トップページを貼り付けたら、1に記事ページのURLを入力して、2.3.4を繰り返します。
（ここはお好みで!!やってもやらなくてもいいかと思います）
私は検索キーワードでアクセスしたときに、CSS崩れるの嫌だなと思ったので、記事ページも実行しました。

ここまでできたら、プラグインAutoptimizeの「変更の保存とキャッシュの削除」を押します。

もしレイアウトがおかしい場合は CSSのインライン化と遅延 はチェックを外してください。

3.使用していない JavaScript の削減　 Contact Form 7 、reCaptchaの読み込みを限定的に変更

どうやら、「使用していない JavaScript の削減」に上がってきているのが、 reCaptcha 、 Contact Form 7 でした。

使っているのに、使用していないとはどういうことだろう・・・と思っていたところ、

調べてみたら、 トップページ等、このスクリプトを使ってないところでも読み込んでいるよう。

個人的には問い合わせフォームに適用だけで問題ないので、その設定をします。

※reCaptchaはサイト全体（ログイン画面、コメントなどにも）適用できるので、必要な方はそのままの方がいいと思います。

私はセキュリティ系プラグインを入れていたので、お問い合わせのみ適応しています。　


//リキャプチャを問い合わせページのみ
function load_recaptcha_js() {
 if ( ! is_page( 'contact' ) ) {
  wp_deregister_script( 'google-recaptcha' );
 }
}
add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );

//リキャプチャを問い合わせページのみ

function load_recaptcha_js() {

if ( ! is_page( 'contact' ) ) {

wp_deregister_script( 'google-recaptcha' );

}

add_action( 'wp_enqueue_scripts', 'load_recaptcha_js',100 );

このコードを、子テーマ（ない場合は親テーマ）のfunctions.phpの最後の方に貼り付けます。

if ( ! is_page( ‘contact‘ ) ) {　のcontactは、自分のお問い合わせのページのパーマリンク（URL）にしてください。

ここね！！↓

ちなみに、固定ページにお問い合わせ作っている人は、if ( ! is_page～、投稿ページはif ( ! is_single～となります。

functions.phpを触るときは注意！バックアップは必ず取っといた方がいいです。

これで、お問い合わせページにreCAPTCHAのマークがあればOKです！

参考にさせてもらったサイトはこちら

　https://mirai-creators.com/6033/

実は、これが一番効果あったかも・・・！！！

使用していないJavaScriptの削除　 Flying Scripts by WP Speed Mattersプラグインの追加

【2021.06追記】

実はGoogleの6月のアップデート時に「使用していないJavaScriptの削除」にアナリティクスの観測タグ（gtag)が上がってきていました。

使用していないといっても、アナリティクスは使っているので、JSを遅延読み込みする方法をとります。

他のjsファイルも複数上がっていたので、プラグインを導入しました（　＾ω＾）・・・

プラグイン追加で　Flying Scripts by WP Speed Matters

で検索し、インストール ⇒ 有効化をします。

設定 ⇒ Flying Scripts ⇒　Include Keywords　の部分に PageSpeed Insightsの「使用していないJavaScriptの削除」

に上がってきている.jsファイルをコピーして貼り付けます。

※.js の前の部分のみ（○○.js）のような形でOKです。

これだけで、JSが遅延読み込みされました！

4.適切なサイズの画像対応　画像の圧縮、サイズ変更、拡張子変更

これは、画像サイズが大きいよってことです。

プラグインじゃなくて無料ツールで実施しました。

測定で引っかかった画像を圧縮して差し替えます。

使ったツールはこの2つ。

https://www.iloveimg.com/ja 一括で画像編集できるすべてのツール

https://tinypng.com/ 画像圧縮ツール

私は一括で画像編集できるすべてのツールを使う方が多いです。

.png　⇒　.jpg への変換や画像の圧縮、画像の向きの変更、画像サイズの変更を複数枚、一括でできるのでめっちゃ便利。

便利なんですが、ちょっと画質が落ちる感があるので、画質が落ちないtiny.pngも併用して使っています。

開発者さん、ありがとう・・・！！！

こんな感じで少しずつ改善されていることを願います・・・( ；∀；)

5.次世代フォーマットでの画像の配信　画像をWEBP形式に変更

【2021.06追記】

中々速度が落ちでしまったので、画像形式をGoogleさん推奨のWEBPに変更しました。

AVIFとWebPは、古いJPEGやPNGに比べて、優れた圧縮と品質の特性を備えた画像形式です。
画像をJPEGやPNGではなくこれらの形式でエンコードすると、画像の読み込みが速くなり、セルラーデータの消費量が少なくなります。
引用元：https://web.dev/uses-webp-images/?utm_source=lighthouse&utm_medium=unknown

メリットが大きそうなので、

WebP Converter for Media　のプラグインを使用して変換をします。

使い方はこちらを参考にさせてもらいました。

WordPressサイトの画像をWebPに変換・対応できるプラグイン「WebP Converter for Media」

アドセンスの遅延読み込み

これはアドセンスを表示している方に限られるのですが、これも効果があったので記載します。

【2021.06追記】

先ほど紹介したFlying Scripts by WP Speed Mattersプラグインの追加 でも改善できそうです。

コードで遅延読み込みしたい方は、以下を参考にしてみてください。

！！注意！！

ファーストビュー内に広告がある場合、たまに広告が表示されない時があります・・・

参考にさせてもらったサイトはこちら

https://nesla.info/pagespeed-insight-adsense-tag

https://blog.zdienos.com/2019/03/mempercepat-loading-blog-yang-terpasang-iklan-google-adsense.html

アドセンス広告のscriptに含まれる、


<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

コレ!!!　このコード。

なんと上のサイトを参考にさせてもらったところ、毎回JSを読み込んでいるらしい・・・

だから遅くなっちゃうのね( ；∀；)

このコードを、広告内から一旦すべて削除します。

上記サイトを参考に、</body>直前に以下のコードを貼り付けます。


   <!-- アドセンス遅延読み込み追加 -->
    <script>
        //<![CDATA[
        //lazy load ads 
        var lazyloadads = false;
        window.addEventListener("scroll", function() {
            if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {
                (function() {
                    var ad = document.createElement('script');
                    ad.type = 'text/javascript';
                    ad.async = true;
                    ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
                    var sc = document.getElementsByTagName('script')[0];
                    sc.parentNode.insertBefore(ad, sc);
                })();
                lazyloadads = true;
            }
        }, true)
        //]]>
    </script>
    <!-- アドセンス遅延読み込み追加 ここまで-->