はじめに
ページが重すぎる
こんにちは。ランドゥです。最近肩こってませんか？
そう、あなたの肩がこるのと同じ様に、Webページもちゃんとケアしないと凝り凝りになって、重くなるんです。
こちらが、僕のサイトのトップページの速度(モバイル)の点数です。
ぶっちゃけ、酷い数字です。0-49は「遅い」とみなされるんですが、その中でも下の下の遅さということですから。もし対策済みの人が見たら、悲鳴を上げるでしょう。
▶ あなたのサイトもこのPageSpeed Insightsで調べられます(リンク参照)。
ちなみに、パソコンでの点数も平均的といったところ。🤔
改善できる項目の一つ
PageSpeed Insightsは改善方法を提案してくれるよ。
次世代フォーマットでの画像の配信
PageSpeed Insightsに提案された改善方法の最上位がこちら。一言でいうと「画像なんとかしろや」と。
なんでも、次世代フォーマットで画像を配信するべきだそう。言われるがままに画像を最適化するプラグインをいくつか調べてみた。
webpとは？
そもそも「webp」というのは何か。調べてみるとファイル形式の一つだそうです。
WebPは、Web上の画像に優れた可逆圧縮と非可逆圧縮を提供する最新の画像形式です 。
A new image format for the Web | WebP | Google Developers(翻訳)
PNGやJPEGの重い画像をこの形式へ変換することで、ページの読み込むスピードが軽くなるというわけか。🤔
画像を最適化できるプラグイン3選
webpに簡単に変換できるWordPressプラグインを調べてみたよ！
Smush
調べた中で一番インストール数が多かった。登録不要で「有効化」したらそれ以降アップロードした画像を勝手に圧縮してくれる。もちろん、導入以前の画像も。
EWWW Image Optimizer
その次にインストール数が多かったプラグイン。無料。こちらも有効にした後のアップロードには勝手に適用される。Smushとこれは便利な分、画像のバックアップも重要。
Imagify
上記二つと違い、こちらはAPIキーの取得が必要。といってもメールアドレスを登録すればすぐ利用できる。また、無料版は25MB/月までしか最適化できないのも特徴だ。
検証方法
3つのプラグインの効果を測定
それでは、この3つのプラグインがページ速度をどれくらい改善できるのか徹底的に検証してみましょう。方法は以下の通りです。
- 同一のページのメディアごと複製してテストページを3つ作る。
- プラグインを1つずつ有効化して画像を圧縮
- PageSpeed Insightsで点数を測定
そして、画像圧縮系のプラグインを導入する際は必ずバックアップを取りましょう。誰でも簡単にバックアップがとれる便利ツールはここで紹介しています。
具体的な検証方法
それでは信憑性も大事ですので、検証方法を詳しく説明しておきます。
まず、対象となる記事は出来るだけ重いのがいいですね。サイズの大きさで悪名高い記事はこちらです。どん。
この記事は30選という名の通り写真がメインの記事です。モバイルが18点というのも非常によろしくないですが、
PCでさえもこの体たらく。あと少しで「遅い」認定されてしまいます。
このサイトを「Duplicate Post」というプラグインを使用して複製しました。添付されたファイルごと複製する設定にしたので、メディアライブラリの元記事の画像が4倍に増えているはずです。きっと恐ろしいデータ量。
ちなみにこれ、全部実際に公開しています。ちょっと大胆過ぎる？PV数が少ないブロガーの強みと言ってほしいです。🙃
結果発表
Smushの結果
特に設定をせず、ひとまずデフォルトの圧縮率で検証を行いました。
モバイルの点数
モバイルは23点。5点ほど改善された。
パソコンの点数
PCは71点。20点も改善されている。
EWWW Image Optimizerの結果
こちらもデフォルトの圧縮率で検証を行いました。
モバイルの点数
18点。もとの点数から変化なし。
パソコンの点数
78点。パソコンはsmushよりも改善されている。
Imagifyの結果
圧縮度合いは「AGGRESSIVE」で行い、それ以外の設定はデフォルトでの検証です。
モバイルの点数
20点。2点だけ改善された。
パソコンの点数
77点。こちらはEWWWに次ぐ点数となった。
無料版の上限
実は画像最適化の途中でImagify無料版の上限が来ており、この点数は全ての画像を圧縮した結果ではない。それにしては3つの中でも見劣りしないことは評価に値する。
まとめ
検証結果
検証結果はこのようになった。
| モバイルの点数 | パソコンの点数 | |
| なし | 18点 | 51点 |
| Smush | 23点 | 71点 |
| EWWW | 18点 | 78点 |
| Imagify | 20点 | 77点 |
モバイルはSmush、パソコンはEWWWが最高点か。
あと、Imagifyの無料版には制限があることも考慮したいね。
Smushをオススメしたい
やはり、点数が著しく低かったモバイルを改善した点は評価できるのと、無料で全ての画像を圧縮できたことを評価すると、オススメは「Smush」となった。
皆さんもブログの読み込みが遅いときにこのプラグインを試してみてほしい。
さらに点数を上げるため、僕は画像以外の方法にもチャレンジしたいと思う。
（文責・ランドゥ）
コメント