ブログ表示速度の改善

  • Days
砂時計

あるサイトやページをインターネットで検索し、表示されるまでの速度の重要性はネットの進化に伴ってますます大きくなっています。特に最近はGoogleだけでなくユーザー側もモバイルファーストが主流なので、基本的にPCよりも読み込みに時間がかかりがちなスマホなどのモバイル端末でいかに表示速度を上げるかは離脱率低下にも繋がると思います。
表示速度改善のために色々試したりしたので、備忘録として書いていきます。

表示速度改善開始前

ブログの表示速度把握にはGoogleの「Page Speed Insights」を利用しています。Basic認証をかけている状態でも使えるのでありがたいです。

Page Speed Insightsページ
検索したいページのURLを入力するだけです
page speed insightsのスコア
スコアは3段階で色分けされています

以下は先月頃に初めてこのブログを速度調査した時の結果(100点満点)です。

  • モバイル:28点
  • PC:43点

モバイルもPCも「極めて要改善」状態でした。この時は自分のandroid実機で表示確認する際も「重いな…」とはっきり分かるくらい表示が遅かったのですが、Page Speed Insights曰くサーバーへの応答時間が4秒もかかっていました。
読み込みが速いスマホサイトなら通常1秒以内で表示されるので、体感時間で数秒もかかっているのは明らかに遅すぎました。

次が今朝の速度調査結果です。

  • モバイル:73点
page speed insightsのモバイル
  • PC:98点

PCは最高記録更新、且つほぼ満点なので嬉しかったです。

速度改善のためにしたこと

読み込みが遅い原因は大体「画像が重い」「不要なCSS, Java Scriptが多い」「プラグインが多い/合っていない」「PHPのバージョンが古い」などですが私の場合は主に2番目が原因でした。
以下は実際に改善の際に行った順番と作業内容です。

  1. 画像の圧縮
  2. データベースの不要データ一掃
  3. 未使用CSSの除去
  4. スマホにキャッシュ残存
  5. 未使用JS,HTMLの圧縮

特に効果があったのは3.~5.です。それでは順を追って…

1.画像の圧縮

初めて速度調査した時、私はブログ内のサムネイル画像なども含めて全てpngフォーマットでした。一応どの画像も「compresspng.com」で圧縮してメディアにアップロードしていたのですが、jpgの方がファイルサイズを削減できると知ったので全てjpgに変換し直しました。
その後はcompresspng.comよりも比較的圧縮率の高かった「iloveimg.com」で圧縮しました。

ただ、pngからjpgにした程度ではスコアの改善は微々たるものだったので、画像圧縮プラグインとして有名な「EWWW Image Optimizer」を導入しました。
このプラグインについては「EWWW Image Optimizer の設定方法と使い方」ページを参考にしました。

このプラグイン導入後の厳密なスコアは覚えていないのですが、改善されたと感じられる程の結果ではありませんでした。

2.データベースの不要データ一掃

WordPressでは記事を書いている際に自動で下書きが変更履歴である「リビジョン」として保存されていきます。記事が膨大にあるほどこのリビジョンも溜まっていくので、それを片付けると速度も上がることを知りました。
このために導入したのが「WP-Optimize」です。「【2021年最新】WP-Optimizeの使い方・設定方法まとめ」という記事を参考にしました。

この記事通りに設定していくとリビジョンだけで2,000件くらいありました。リビジョンを残さないように自分でphpに記述する方法もあるそうですが、その場合は記述前に存在していたリビジョンの一掃は難しいと知ったので過去分もまとめて消してくれるこのプラグインを導入しました。

このプラグイン導入後のスコアは以下です。

  • モバイル:44点
  • PC:76点

徐々に改善されてきたものの、スマホでの表示が遅いのには変わりなかったです。

3.未使用CSSの除去

速度調査結果ではいつも「レンダリングを妨げるリソースの除外」で引っ掛かり、「使用していない JavaScript の削除」「使用していない CSS を削除してください」項目でも注意されていました。ヘッダーで読み込んでいるコードをフッターで読み込ませるようにする、という方法を知ったのですがファーストビュー表示の際に不可欠なコードの抽出作業が素人の自分には不安だったのでこの方法はやめました。
その時に参照したページ:「レンダリングを妨げるリソースの除外/CSSを非同期で読み込む

ページで使用されていないCSSのセレクタを見つけてくれる「Unused CSS」」という記事で知った「UnusedCSS」というツールを試したりもしましたが、結果が詳細すぎてこちらも素人の私には把握が難しかったので残念ながら活かせませんでした。

私の場合、使用していないCSSやJavaScriptの把握方法は「CSSで未使用のセレクタを見つけて削除しちゃうよ!不要な記述をなくしてファイルサイズを減らそう」という記事がとても参考になりました。
レスポンシブ表示確認やcss、padding確認の際はこれまでWeb制作の仕事でもこのブログ作成においても開発者ツールを使っていましたが未使用のセレクタ表示は知りませんでした。

記事通り「More tools > Coverage」を開くと、このサイト内のCSSとJavaScriptの使用状況が分かります。

矢印の箇所を選択します

私の環境では未使用部分は赤で、使用されている部分は青で表示されました。

「Unused Bytes」で未使用の比率も分かります。上のCSSでは96.4%が未使用なので「ほぼ不要なのでは?」と思うことでしょう。
ただ、これとは別のCSSを実際に見てみるとフォント設定やその他の設定で使っていても赤色になっているものもあったので、赤色部分を一括削除するよりも本当に要らないCSSだけを厳選して除いた方が良さそうです。
その際丸ごと削除するのは不安だったので、何かあれば復元できるようにコメントアウトだけしてアップロードし直していました(JS修正は私にはハードルが高かったのでCSSファイルのみ触りました)。

このCSS削減は読み込み速度改善にかなり繋がりました。上図では未使用率100%となっているものでも実際にはコメントアウトしているものもあります。

4.スマホにキャッシュ残存

キャッシュと言うと負の印象がありますが、2回目以降の閲覧時に速度を上げてくれる利点もあります。特にスマホでは毎回毎回サーバーからデータを貰ってくるよりは以前の訪問時のデータを使った方が速く表示できるので、「WP-Optimize」の「キャッシュ」という設定で「モバイル端末用に別のファイルを生成」をONにしました。

3.と4.の作業後のスコアは以下です。

  • モバイル:75点
  • PC:85点

私の場合はこの2つの対策が1番効果を感じました。特にモバイルでの改善が著しく、実機で見た際も「かなり速くなった」と体感できるほどでした。今までのゆっくりとした読み込みが嘘のようでした。

ただ、ここまで来るともっと速度を上げたいと思ったので最後に5.の設定をしました。

5.未使用JS,HTMLの圧縮

Page Speed Insightsからもアドバイスされていた不要なソースコードの削減です。これも「WP-Optimize」の設定から行いました。

最初、「CSSファイルを処理」も選択したのですがそうするとサイト内のCSSが崩れたのでHTMLとJSのみ圧縮処理するよう設定し直しました。

この作業後にはモバイルでは4秒だった「サーバーの応答時間」も2秒になり、PCに至っては小数点以下にまで縮まりました。「レンダリングを妨げるリソースの除外」「不要なCSS、JSの削除」などにおける注意も改善され、モバイルでもPCでも2~3秒かかっていたそれらの処理も今は0.2~0.6秒ほどです。
いかに不要なJS・CSSファイルが占めていたのかを実感しました。数値でいうと、3.未使用CSSの除去での2枚目の図のCoverage項目の1番上のJSファイルは当初95%以上が未使用でしたが現在は59.4%にまで減っています。
「WP-Optimize」さまさまです。

終わりに

私自身、スマホでもPCでもページの読み込みが遅いと「もういいや」と即座にそのページの閲覧を諦めて別のページやサイトに行きます。そのため、自分のブログの表示速度改善の意義も強く感じていました。

「最初のサーバー応答時間を速くしてください」というアドバイスが出ていた時はさくらサーバーが原因だろうかと疑ってしまったのですが、さくらサーバーの「遅いからって引っ越しする前にちょっと待って!さくらのレンタルサーバで快適にWordPressを動かす方法」ページを参考にしながら自分の環境のバージョンなどを調べても特に問題は無かったので首を傾げたりもしました。
今なら分かるのですが、不要なCSSやJSコードが無駄に読み込まれていただけであってさくらサーバーは全然悪くなかったのです…

WordPressのレンダリングを妨げるリソースを除外する方法(CSSとJavaScript)」というページで通常のサイト表示の際どのようにコードが読み込まれ、その結果なぜ遅延が発生するのかが解説されていて成程なあと思ったりもしました。読み込み様式には「async」「defer」というものがあることも初めて知りました。
エンジニアはこういう知識を基にサイト構築していくんですね。

また、「プラグインが多いと重くなる」とはよく聞くものの、私はプラグイン無しでゼロからPHPやJSコードを記述できるようなエンジニアではないのでやはりプラグインに頼る部分も多く、現在は21個のプラグインを有効化しています。
恐らく、ブログに特化した通常の日本のテンプレートテーマにはプラグイン導入などしなくてもいいように色々と機能が揃っていると思うのですが、私はこのNeveテーマであれこれと試していくのが楽しいので個人的にはプラグインが多かろうが特に気にしていないです。
むしろ、そんなWordpress環境であっても表示速度は大幅に改善できるものなんだなあと今回の件を通して思いました。

現状でも満足していますがいつかモバイル版でも90点以上出せたら「表示速度問題ナシ!」ですね~

タグ:

Next >

< Prev