こんばんは。今日のテーマはWordPressブログの表示速度改善です。
有料テーマを利用するにようになってから、しばらくWebサイトのパフォーマンス改善を怠ってしまっていたのですが、最近ふと気になってパフォーマンスを計測したところ、衝撃的な低速・・・！
Googleもオフィシャルにアナウンスしていますが、2018年以降、サイトの表示速度も検索結果を左右する重要な要素の一つとなっています。せっかく良い記事を書いてもサイトが低速で検索ランクが低い・・なんてことはもったいないですね・・
ので、今回はその速度を高めるためにあれこれやってみた過程と結果を記録しておこうと思います！
Contents
[Before] まずは現状把握
サイトの表示速度を評価するには、Google Speed Insightsがおススメです。
https://developers.google.com/speed/pagespeed/insights/?hl=JA
こちらを使って自分のサイトのスピードを計測してみました。
モバイル
PC
ぐお！！！！！お・・・・スコアが非常に低い・・・・！
特にモバイルは端末に搭載されているプロセッサの処理能力もパソコンには劣るため、より結果がシビアにでてしまいますね。
実際私のサイトのアクセス履歴を見ていると、モバイルからの訪問者が少なく、もしかするとこの表示速度の遅さが原因かもしれません・・・一刻も早くなんとかせねば・・！
改善に入る前に、もう少し、分析を見ていきます。（ここから先はモバイルのものをみています）
はじめに計測値の実績です。これは後で比較する際の比較元にします。が、インタラクティブになるまでの時間が23秒って！笑 遅すぎますねー。
続けて改善できる項目のアドバイスを見ます。
なるほど・・つまり、
- とにかく画像が重たい
- CSSやJavaScriptに不要なコードが残っていて重たい
ということみたいです。
アプリケーションのパフォーマンスに影響した項目の詳細についても見ておきます。
最後に、合格したポイントについても確認しておきます。
導入しているプラグインのおかげで、基本的なコードや画像の最小化・圧縮はある程度効果を発揮しているようです。一方で上で改善項目としてもトップに挙がっているので、「頑張ってるのは認めるがさらなる改善が必要」ということのようです。
それでは、次から上記を具体的に改善していきたいと思います。
[改善] 画像を最適化する
はじめに画像の最適化を行っていきます。
画像最適化プラグインを利用する
いろいろ調べてみると、以下の「EWWW Image Optimizer」というプラグインを使ってらっしゃる方が多いようだったので、自分もこれを使ってみることにしました。
プラグインからこちらをインストールします。
すると、「メディア」タブから「一括最適化」というメニューが使えるようになります。
「最適化されていない画像をスキャンする」をクリックすると、既にアップロード済の19000枚ほどの画像がスキャンされて、数秒で出てきた結果がこちら！！
うおおおおおおおおおおおおおおおお
最適化の余地がありすぎるようでした笑 というわけで早速「15806点の画像の最適化」をお願いしました。
各画像数十%程度ずつサイズが圧縮されていきました！特に、JpegよりPngの方が圧縮率が高いように感じました。png画像によっては80%ほど圧縮されたものもありました。
しかしこの方法、二つ難点が・・・
- 時間がかかる・・・！15000枚程度の画像があれば数時間はかかるでしょう・・・
- 途中で謎のエラーが起きて、サイト全体がダウンする
ほんと、２つ目はマジで勘弁してほしかったです・・・！これ、原因は不明だったのですが、サーバーにログインしてプラグインのディレクトリ毎削除すれば復旧することができましたが、それが分かるまでなんどかLightSailのインスタンスを作り直すハメになりました・・・。
こちらは、一度インストールしておくと、以後アップロードするたびに自動で画像最適化処理が行われるので、この点は便利です。（バグだけは直してまじで）
手動で画像のサイズを変更する
上記の作戦も有効ですが、私の場合もっとクリティカルに改善できる方法がありました。それが、手動で特定の容量が大きな画像のサイズを小さくすることです。
もともと1.2MBほどのサイズの画像があったのですが、「画像の編集」からサイズを変更（もともと、9000×6000くらいのサイズだったものを900×600くらいに変えると、10×10で100倍軽量になります。
というわけで、プラグインでの一括圧縮＋手動で大きくリサイズを行ってもう一度スピードテストを実施した結果がこちら！
スコアは19⇒24と小幅な改善ですが、
- First Contentful Paint：2.8秒⇒2.3秒
- 速度インデックス：14.9秒⇒9.9秒
- 累積レイアウト変更：0.344⇒0.085
に改善し、画像最適化による改善余地も、2.85秒⇒0.6秒と大幅に改善しました！
（その他の項目が悪化したのはなぜだろう・・・）
いったん画像はこのくらいにして、次の改善を進めてみようと思います！
[改善] JavaScript、CSSその他の読み込み・実行時間を短縮する
お次はこちら。ただ、削減しろって言われているJavaScriptやCSSを見てみると、ブログテーマに組み込まれているCSSや、Google Adsenseに関するものが多い・・・。
私のブログは、サードパーティのテーマを利用していることもあり、また、Google Adsenseも外すことができないので、ここに関しては、基本的に「最小化」「遅延読み込み」という技術で対処して行きました。
ただ、Webサイトを調べていると、個別に使わないJavaScript/CSSを削除していっている記事もあったので、こちらを試してみても良いかもしれません。
https://deve-cat.com/not-useing-check/
以下、かなり試行錯誤しましたので、結果的に効果のあったものをご紹介します。
JavaScript/CSSの最適化
色々とネットの記事を読んで参考にした結果、合計5つのプラグインを使いました。それぞれ、重複する機能もありますが、それぞれでないとできない最適化もありますので、次にそれぞれでできることをご紹介していきます。（最初の3つは最初のスピードテスト時に既に考慮済でした）
- Jetpack
- WP Fastest Cache
- Autoptimize
- WP-Optimize（今回追加）
- Async JavaScript（今回追加）
Jetpack
こちらは総合的なSEOパッケージとして有名です。このJetpackを使うと「画像の読み込み」を効率化してくれます。「遅延読み込み」を設定することで、ページ読み込みの際に画像の読み込身のために他の処理がストップすることがなくなり、ユーザがページコンテンツを読み始められるようになるまでの時間が短縮されます。
WP Fastest Cache
WP Fastest Cacheでは、以下に関してかなりいろいろな設定ができます。
- CSS、JavaScriptの圧縮
- キャッシュの有効化
- その他は有料機能
こちらは以下のように設定しました。
キャッシュを設定しておくことで、毎回サーバでコンテンツを一から生成することなく、生成済みのものをダウンロードさせるようになるので、表示にかかる時間が短縮されます。
あとはファイルを圧縮してクライアントに転送させることで通信容量を削減しています。
Autoptimize
このプラグインでは、CSS/JavaScriptのコードを最適化することができます。
設定は簡単で、下記にチェックを入れるだけです。画像の最適化もできるのですが、こちらはEWWW Image OptimizerやJetpackと若干重複しているので、不要かもしれません。
WP-Optimize
こちらは他のプラグインとは異なる視点での最適化機能があります。
はじめにデータベース。Wordpressアプリケーションのバックエンドで動いているMySQLデータベースの最適化が行われます。やっていることを見ると、余分なデータを削除してデータベースの検索性能を高めているように見えますが、果たしてこれがどれだけ表示速度の改善に貢献しているのかはちょっと不明です。
まあ、やっておくに越したことはないと思うのでやっておこう、くらいです。
こちらにあるキャッシュ設定では、モバイルページのキャッシュも可能です。これがFastest Cacheとの大きな違いです。Fastest Cacheの場合、この機能は有料なので、このプラグインで補えば良いです。
モバイルページのキャッシュは、スマホからの検索速度を高めるためには非常に有効です。実際、これを設定することでモバイル検索速度はかなり向上したように感じます。
さらに便利なのが下のプリロード機能！キャッシュは通常誰かがそのページを検索したときに初めてキャッシュされますが、逆に言うと初回のロードは遅いままになってしまいます。この機能を使うと、設定したタイミングで一括でキャッシュを作成しておくことができます。
あとは、Autoptimizeの最適化と一部重複する部分もあるかもしれませんが、JavaScriptとCSSの最小化の設定も可能です。
Async JavaScript
最後はこちら。これはまたどのプラグインとも機能が競合していません。
このプラグインでは、JavaScriptの遅延読み込みが可能になります。
JavaScriptの実行は、画面表示の時間を大幅にロックします。このプラグインではこれを非同期で読み込む設定が可能です。非同期で読み込む方法にはAsyncとDeferの２つがあります。
AsyncとDeferの違いはこちらのQiitaの記事でわかりやすく解説されていますが、Asyncではまだ描画中にJavaScript実行のためのロックが発生するのに対し、Deferでは描画が完全に終わった後にJavaScriptの実行が始まるため、事前の描画ロックを避けることができます。
今回はAsyncとDeferの両方を試しましたが、Deferの方が速度が出たので、こちらで設定しました。
https://qiita.com/phanect/items/82c85ea4b8f9c373d684
Google Fontを利用しないようにする
上記で、大枠の改善はできましたが、
Google Fontを利用する際は、通常CDNと呼ばれるインターネット上の場所からFontのダウンロードが発生し、これが表示時間をわずかに長くします。
これによる表示速度の遅延を防ぐためには以下のように対処する必要があります。
- Google Fontを利用しないようにする
- 予めダウンロードしておいたGoogle Fontを利用するようにする
- Google Fontを遅延読み込みするようにする
Google Fontをどうしても使いたい場合は2,3番目の案をとるしかないですが、今回私はGoogle Fontの利用をやめました。
Google Fontの利用有無は、いろいろなプラグインで設定可能なのですが、今回私はAutoptimizeで設定しました。
[改善] その他実施したこと
これだけ実施しても、まだ以下の課題が残っていました。
- テーマ関連のJavaScript/CSSの実行時間が絶対的に長い
- Google Adsenseの広告関連の画像・JavaScriptの処理が長い
ということで、以下を試してみました。
* AMP化する (今回は未実施)
AMPはモバイルの表示速度を圧倒的に高める必殺技です。
が、以下理由により今回は利用を断念しました・・。
- 利用しているテーマのレイアウトが維持できて、Google Adsenseの広告も出せるプラグインがない
AMP対応は、以下の２つのプラグインが有名です。
- AMP：Transparentというモードで元のテーマのレイアウトを維持してAMP化できるのですが、Google Adsenseの広告を入れれませんでした。
- AMP for WP：Google Adsenseの広告は設定できるのですが、元のレイアウトを維持する設定ができませんでした。
Google Adsenseの表示改善
どうにかしてGoogle Adsense広告の表示を改善できないか探していると・・・ありました。
Advanced Adsプラグインの有料版を購入すると、Google Adsense広告画像の最適化と、画像・スクリプトの遅延読み込みが可能になります。
この有料版を使うと、広告の配置位置の自由度も高めることができるので、今回試しに購入してみることにしました。
[After] 結果、どうなったか？
モバイル版
PC版
それなりには改善することができたようです！！
ラボデータもモバイル版のBefore/Afterで比較してみると・・
Before
After
全体的に高速化することには成功したようです！！
Google Adsenseを使わなかったり、AMP化すると90点台もすんなり出るのですが・・今の要件の中でできる中では割とできる限りのことはやってみたような気がします・・・
[After] で、結局アクセスは増えたか？
さて、気になるのは、ここまでのスピード改善をして、結局アクセスが増えたのかというところです。特に遅かったモバイルからのアクセスが増えて欲しいところ・・・
改善後1週間運用を続けてみた結果を、改善前1週間の結果と比較してみました！
まずは検索順位！（上が最近１週間、下が改善前１週間）
あら、こちらはあまり変わっていないようです・・。記事の質の問題という可能性もあるし、もう少し期間を見る必要もあるのかな？
続いてはデバイス別アクセス数。
おおおお！確かに両方増えた！し、モバイルが大きく改善した！
というわけでやはりSEO対策には一定の効果がありそうです。
今後もさらなる高速化に向けて改善を積みたいと思います・・！
以上、本日も最後までご覧いただきありがとうございました！
コメントを残す