ブログのサイトスピードを上げたので、方法をご紹介します。
サイトスピードとはページが表示されるまでの時間のことです。
気にしたことはありますか？
違和感なく表示されているからいいよーという人もいると思いますが、
サイトスピードを上げるだけでいいことがあるので、改善をおすすめします。
今回は使用したプラグインと、参考になった他の方のページをご紹介し、
私のブログにあった変更点を記述します。
WordPressのJinを使用しています。ですが他のテーマでも参考になると思います。
※2022/01/07 SWELLに変更しています。一応この記事は残しておきます。
プラグインを入れたりCSS・phpを変更します。必ずバックアップを取ってください。
Googleアドセンスで自動広告をカスタマイズしている人は影響がでる恐れがあります。
変更すると予期せぬ画面になることがあります。一つ作業したらそのつどPC・モバイルで確認するようにしてください
サイトスピードを上げるメリット
サイトスピードを上げるメリットを簡単に書きます。
直帰率や離脱率が下がる
ページを開くときに重いと、途中で帰っちゃう人がたくさんいます。
それを防ぎます。
2018年のGoogleの調査では、サイトスピードが1秒から3秒になると直帰率が32%増えるとのことです。
SEOで有利になる
サイトスピードがGoogleの検索順位にも考慮されます。
サイトスピードを調べる方法「PageSpeed Insights」
サイトスピードを調べる方法はいくつかありますが、
私はGoogleが提供している「PageSpeed Insights」で調べました。
ブログのトップページのURLを入力すれば全体を調べてくれ、スコアを表示します。
モバイルのスコアとPCのスコアを分けて調べてくれます。
やってみればわかります。
私がやったbefore-afterを載せます。
before：モバイルのスコアがひどいです
after：モバイルがなんとか持ち直し、PCは大丈夫になりました。
さらに「PageSpeed Insights」では以下のように
改善できる項目と項目に該当するファイルが表示されます。
それでは実際にどう改善したのかを書いていきます。
使用していない JavaScript の削減
私が使用していないJavaScriptは以下でした。
これに対応するには「Flying Scripts by WP Speed Matters」というプラグインを入れます。
指定したJavaScriptを一度読み飛ばして、ユーザからのイベントがなくなってから実行するというものです。
簡潔でわかりやすい操作が「nuno1977」さんの「プラグインで「使用していない JavaScript の削除」を改善」にあります。
私の場合「recaptcha__en.js」以外の「*.js」で終わっているものだけを選択して上手く動作しました。
※試すときは一つづつ試しましょう。
※Googleアドセンスに関するJavaScriptも入っています。
自動広告でカスタマイズしている人は影響が出る恐れがあります。
確認して入力するようにしてください。
「recaptcha__en.js」 はお問い合わせフォームに設置したreCAPTCHAが、他のページでも読み込まれているために起こっています。
これはプラグインでは解決できず、functions.phpを修正する必要があります。
修正方法は「みらいクリエイターズ」の「Google reCAPTCHA V3 をお問い合わせ以外で非表示にする方法【2021年修正版】」を参考ください。
レンダリングを妨げるリソースの除外
これはレンダリング（画面の描画）を妨げるリソースが該当します。
こちらは「Autoptimize」と「Async JavaScript」という2つのプラグインを導入し、
JavaScriptとCSSの読込の最適化および遅延をすることで対応します。
詳しい説明と方法が「ラピン」さんの「PageSpeed Insights「レンダリングを妨げるリソースの除外」のやり方【WordPress】」にあります。
※こちらも実施するときは一つづつ試しましょう。
私の設定は以下です。
・Autoptimize「JS、CSS & HTML」
JavaScriptでは「https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js?ver=5.8.1」を除外しています。これはスマホの右上のメニューに影響したからです。
CSSでは「インラインのCSSも連結」のチェックを外しています。PCの表示に影響があったからです。
・ Autoptimize「追加」
Googleフォントについては「Googleフォントの削除」にしています。
「Jin」のデフォルト「sans-serif」しか使用していないからです。
・Async JavaScript
私はDeferにした方が動作・速度が良かったです。
使用していない CSS の削減
こちらは先ほどの 「Autoptimize」 で同様の対策が出来ています。
ただそれでも消えないのは以下です。
「https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&display=swap」
これはフォントである「Noto Sans JP」を読み込んでいるために起こります。
私はこのフォントを使用していないのですが、読み込んでいるのは「Rich Table of Contents」が勝手にimportしているからです。
なのでその部分をコメントアウトします。
詳しくは「はなげんき(トリマー兼店長)」さんの「使用していないCSSの削除｜Noto Sans JPに対応【原因はRTOC】」を参照ください。
コメントアウトだけでいいと思います。
あと「Autoptimize」を使用していると、逆に
「wp-content/cache/autoptimize/css/autoptimize_f734eb2b6ab00d6f165aa4c72b74713c.css」
のようなものがひっかかりますが、こちらは解決できませんでした。
一応 「Autoptimize」 のCSS設定で「Eliminate render-blocking CSS?」にチェックを入れ、
主要なCSSをこちらのサイトでクリティカルパスとして生成するという方法もあるのですが、
私は上手くいきませんでした。
なのでこのままです。
適切なサイズの画像と次世代フォーマットでの画像の配信
ここでは画像の読み込み速度の最適化およびフォーマットを変更しました。
今までの画像フォーマットと言えば「PNG 」や「JPEG」ですが、
次世代のフォーマットは「JPEG 2000」、「JPEG XR」、「WebP」らしく、
「PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができる」とのことです。
なので対応しましょう。
ここで使用するのは「 EWWW Image Optimizer 」というプラグインです。
元々入れている人も多いと思いますが、設定を追加しました。
詳しい設定が「ikuzo(いくぞう)」さんの「2021年版 EWWW Image Optimizerの設定とWebPへの変換方法」にあります。
一括でフォーマットを変更し、圧縮してない画像も一括で圧縮しました。
ここまでやれば完了です。
最後の確認
どの作業をした後でも確認して欲しいですが、最後にもう一度確認しましょう。
ひっかかるのが自分で残したものか、
「wp-content/cache/autoptimize/css/autoptimize_f734eb2b6ab00d6f165aa4c72b74713c.css」
ぐらいになったら完了です。
確認する度にスコアが変わりますが、
モバイルはオレンジに、PCは緑の範囲にいればいいと思います。
まとめ
以上、サイトスピードを改善する方法を紹介しました。
サイトスピードを上げると、読者が増えたり検索順位が上がったりするのでおすすめです。
ぜひ改善してみてください。
最後に、リンクでご紹介した皆様に感謝申し上げます。
大変参考になりました。
それでは今後もブログ運営頑張りましょう。
コメント