サイトの速度なんて速ければ速いほど良い。ということで新たにプラグインを導入した。Wordpressブログを運営しているライバルやブログを始めたい人には是非参考にしてもらいたい。
書いてる人：犬鳴
当ブログガジェ文の管理人。深煎りのコーヒーが好み。ガジェット・文具レビュー、技術解説など、好きなことを好きなだけ執筆してます。
未だに強いSEO
CharGPTの普及やGoogle検索の権威性低下によって、一昔前よりSEOの重要性は低くなったかのように見えて実は全く変わっていない。依然重要である。
事実このブログのアクセスの殆どがGoogle検索によって流入している。つまりGoogle様々。
そんなGoogle様の検索結果に少しでも上に乗るためにはGoogleが掲げる評価基準である”ページ速度”に命を賭ける必要がある。
重い画像がカギ
速度を上げると言っても、シンプル過ぎて読みにくいサイトは普通に低評価を食らう。読みやすいUIと高速化を両立する必要がある。
そこでカギとなるのが画像だ。ブログの大半を占める文字に比べ画像ファイルの大きさは半端ない。ココを削ることで大幅な高速化が可能だ。
EWWW Image Optimizerを使う
重い画像を人力で変えていくと、ろくに記事が書けない。そこでEWWW Image Optimizerというプラグインを導入する。
このプラグインは画像をWebPという軽量なファイル形式に変換するだけでなく、元画像も軽量化してくれる他、アップロード済み画像の最適化まで可能だ。
Modern Image Formatsとの違い
同じようなプラグインとしてModern Image Formatsというwordpress公式開発が作ってるプラグインもあるが、元画像の軽量化やアップロードしてしまった画像の最適化は出来ない。
Modern Image Formatsはあくまでプラグイン有効後にアップロードした画像をWebP変換するという仕様だ。
EWWWの設定
このプラグインの重要な設定を紹介する。ココさえ抑えておけば画像の高速化が可能だ。
WebP設定
JPEGやPNGより圧縮率の高いWebPへの変換設定だ。WebP変換の有効化とリライトルールを挿入する。
Xserverやロリポップ(GMO系)、さくらのレンタルサーバー等ほとんどのサーバーはApacheの.htaccessを認識するため、「リライトルールを挿入する」ボタンを押せばOK。
一部環境の場合、リライトルールによるWebP配信がうまく行かないことが有る。そんなときは下のJS WebP配信をオンにするとうまくいくかも知れない。
メタデータの削除
元データの情報を削ってくれる機能。有効にしておいて損はないだろう。
変換リンクを非表示
必須タブのルディクロスモードをオンにすると現れる機能。コレを有効化することで、メディアライブラリー内の拡張子変換を隠せる。見えてても関係ないならオフでもよい。
画像トリミングはオフ
設定を覗いていると画像トリミング機能というものがあるが、これを有効化すると高解像度な画像を切り取ってくれる。
一見すると便利そうな機能だが、見切れるリスクがあるためオフにしておくことをおすすめする。
保存している画像を最適化する
上の設定によってこれからアップロードする画像は圧縮またはWebP化の両方を行ってくれる。
プラグイン導入前の画像は「一括最適化」という機能で全て圧縮&一部WebP化できる。
クソほど時間がかかる
この一括最適化、ブログで画像を多用していればしているほど時間がかかる。本当にびっくりするくらい時間がかかるから寝る前に開始しておいた方が良い。
自分の環境の場合、約1.8万枚の画像を11時間以上かけて最適化した。
以前Modern Image Formatsを利用していたこともあり、一部WebP化していたのにもかかわらず、この所要時間はとてつもない。
ブラウザは絶対に開きっぱなし
無料版の場合、ちょっと制限がある関係でタブを開きっぱなしにしないといけない。タブを消したりその画面から戻った場合、最適化済みの画像までで一時停止する。
うっかりミスですべてやり直しといったものではないが、本当に気をつけてほしい。
完了後のブラウザのメモリ使用量は半端ないことになるのは面白い。
元データがあると良い
アップロードした画像に手を加えるためアップロード前の画像があると良い。基本的におかしくなることはないはずだが万が一。
検証
EWWWプラグインのリライトルール消去&WebP配信を無効化した場合と、リライトルール記述&WebP配信を有効化した場合のデータ使用量を検証した。
しかしCDNの影響で無効化してもWebPが混じってしまった。あくまで参考程度にしてもらいたい。
なお用いるページは
- ガジェ文ホームページ
- スマートホーム規格「Matter」を徹底解説【特徴や注意点】(普通)
- 「Kensington ExpertMouse(K72359JP) レビュー」角度つけすぎ。(高ボリューム)
これら3つを検証する。
使用ブラウザはVivaldi 7.8.3925.62、OSはmacOS 15.7.2。
開発者ツールのデータ転送量(データ転送量のこと)を見ていく。キャッシュは無効化。レンタルサーバー側の高速化機能も切った。
画像の遅延読み込みが入っているため、最後までスクロールした後の使用量を記録している。
記事AとBは、カルーセルの自動横スクロールが起こるためスクロール後1分放置した。
ホームページ
まず無効化時は1.8MB。ホームページとしては一般的。
次に有効化後の使用量は1.7MB。0.1MB削減できた。
スマートホーム規格「Matter」を徹底解説【特徴や注意点】
画像・文章量のボリュームともに普通な解説記事。
無効化時の使用量は2.9MB。普通。
有効にすると2.5MBになった。0.4MBの削減。
「Kensington ExpertMouse(K72359JP) レビュー」角度つけすぎ。
力作のレビュー記事。無効化したときの使用量は21.5MBだった。まじでへビュー級。
EWWWを有効化すると15.7MBにまで落ち着いた。5.8MBの削減はでかい。
注意点
サーバーの使用量は微増
元画像を圧縮するがWebP画像が新たに増えるためサーバー使用量は微増する。自分の環境だと1GBくらい増えた。
大抵のレンタルサーバーは300GB以上容量があるため、サイトが開かないといったことはないが、UpdraftPlus(バックアッププラグイン)のGoogleドライブへのバックアップがきつくなった。
サーバー使用量をあまり増やしたくない人は、EWWWをインストールするのは止めておいたほうが良いだろう。
画像多用しないなら言うて変わらない
画像の多いページであればかなりの高速化が狙えるが、あまり画像を多用しないのであればさほど変わらない。
ホームページはCocoonテーマの最適化が優位に働いたのか全く削減できなかったため、「画像多いのはホームページくらいやな」という人も必要ないだろう。
まとめ
優良プラグイン
画像がかなり多い自分のブログにおいて高速化できるのは本当にありがたい。
なにより無料版でも十分便利に使えるのはさすが定番プラグインとして名高いだけはある。
バックアップの問題ないならめちゃくちゃあり
サイトの命とも言えるバックアップ機能において問題がないなら全然入れてOK。
画像が少ないサイトでも将来的に画像が増えることも考慮できるため、やはり入れたほうが良い。
「サイトを高速化したいぜ」という人は、EWWW Image Optimizerはとてもおすすめだ。
→WordPressページ