「近日出荷」の記事をチェックするために、iPhoneからページを開いたのですが、軽い不満が。サイトの表示スピードが遅いのです。一つ考えられるのが、画像データが重いこと。画像データを圧縮して、より見やすいブログを目指します。
まずは、現状をチェック
「表示スピードが遅い」と言ってもどれくらい遅いかが分かりません。実際にどれくらいのスピードなのか、数値で確認しておきましょう。
使うのはこのサイト。
「GTmetrix」です。
使い方は簡単で、測定したいページのURLを入力してクリックするだけ。
すると、
（No way…）
測定結果が表示されます。
今回は、比較的多く画像を使っているこの記事
を使って、表示スピードの改善状況を確認していきます。
測定結果は…、
左がGoogleの評価で「C」、右がyahooの評価で「D」です。
ここは大まかな評価と考えて下さい。注目するのはその隣にある「Page load time」。
ページ全体が表示されるまでの時間のことですが、それが「8.90s」になっています。
これが少しでも改善されることを目指します。
「EWWW Image Optimizer」で画像を圧縮
今回、サイトの表示スピードを改善するために使うのが、こちら。
wordpressのプラグイン「EWWW Image Optimizer」です。
画像データを圧縮して軽くしてくれます。
今回「EWWW Image Optimizer」を選んだ理由は２つ。
・アップする画像を自動で圧縮
・アップ済みの画像を圧縮
特に「アップ済みの画像」まで圧縮してくれるのが魅力です。
「近日出荷」では、すでにかなりの枚数の画像を使っているので、過去記事を手動で圧縮するのは手間がかかりすぎます。
「ここを効率化できるなら、ベストだ」と思っていましたが、「EWWW Image Optimizer」がそれに応えてくれるということで、迷わず導入を決断しました。
インストールしてみましょう。
「EWWW Image Optimizer」のインストール
「EWWW Image Optimizer」をインストールします。
手順を解説しますが、以下の点には注意して下さい。
注）新しいプラグインをインストールすると、エラーが発生する可能性があります。エラーが出ても、インストール前の状態に戻せるように、バックアップを取ってからインストールするようにしましょう。
「EWWW Image Optimizer」を検索
wordpressの左サイドバーにある「プラグイン」から「新規」を選んで、画面右上にある検索ウインドウで「EWWW Image Optimizer
」を検索します。
検索結果の最初に出てくるので、右上にある「今すぐインストール」をクリックしましょう。
プラグインを有効化
インストールが完了すると、次のような画面になるので、「プラグインを有効化」をクリック。
これでインストールは完了です。
ここから、設定に移ります。
「EWWW Image Optimizer」の設定 基本はデフォルトのまま
基本はインストールしたままの状態でOK。
ただし、より効果的に圧縮するために次の２つのポイントをチェックします。
Basic Settings
設定から「EWWW Image Optimizer」をクリックすると、
「Basic Settings」が開きます。
上から2番目にある「Remove metadata」にチェックを入れて、「Save Change」ボタンをクリックします。
これは、「メタデータを削除する」という設定です。
「メタデータ」はデータ自体ではなく、そのデータに関連する情報のこと。
データの作成者や作成日時、データ形式などの情報が該当しますが、画像を表示する上では、それがなくても問題ないので、削除してより画像データを軽くします。
Conversion Settings
「Conversion Settings」のタブをクリックします。
画面が開いたら、一番上にある「Hide Conversion Links」にチェックを入れて、「Save Changes」をクリックします。
「EWWW Image Optimizer」には、画像のファイル形式を自動で変換する機能が入っているのですが、この機能を停止させるのが「Hide Conversion Links」です。
このような作業は特に必要はないので、余計な作業を省き、効率よく画像の圧縮を行います。
設定はこの２つだけです。
準備が終わったので実際に画像を圧縮して、サイトの表示スピードがどれくらい改善されるか確かめてみましょう。
画像を圧縮します
アップ済みの画像を一括で圧縮することもできるのですが、時間がかかるので、検証する記事の画像だけを圧縮して、改善状況を確認します。
個別に画像を圧縮するには、wordpress管理画面の左サイドバーにある「メディア」から「ライブラリー」を開いて、
該当する画像について、「Optimize now!」ボタンをクリック。
圧縮が完了すると、
表示が「Optimize now!」から「Re-optimize!」に変わります。
この要領で該当記事に使われている画像を圧縮していきます。
圧縮が完了したら、再度、ページの表示スピードを確認。
改善策の成果はどうなるでしょうか。
結果発表 １
測定結果は、こうなりました。
・対策前
・対策後
ご覧の通り、Page load timeは「8.90s」から「6.18s」へと改善されました。
ただ、評価はダウングレードしていて、その理由は、
・対策前
・対策後
ページのサイズが大幅増。
ただ、個々の画像については、
7.2%が圧縮されていることが報告されているので、圧縮はできているということだと思います。
このページに表示される、記事以外の画像（サイドバーやフッターなどに表示される画像）の影響かもしれません。
次は、アップされている全ての画像を圧縮した上で、このページの表示速度を測定してみます。
アップされている画像をすべて圧縮するには、左サイドバーの「メディア」にある「Bulk Optimize」をクリック。
このような画面が開くので、中程にある「Optimize Media Library
」の「Start optimizing」をクリックすれば圧縮が始まります。
ただし、注意が必要です。
全ての画像を対象にすると、想像以上に時間がかかる場合があります。
もちろん、サイトによって画像の量は異なるので一概には言えませんが、「近日出荷」の場合を例に挙げると、圧縮の対象になる画像が2402枚、所要時間は3時間12分でした。
圧縮中に何か操作が必要な訳ではないですし、一時停止することも可能なので、特別困ることはないのですが、念のためにおさえておきましょう。
「Finished」の表示が出たら完了です。
改めて、表示スピードを測定してみましょう。
結果発表 ２
では、気を取り直して、結果発表（2回目）です。
測定結果はこうなりました。
・対策前（表示スピード）
・対策後（表示スピード）
・対策前（サイズ）
・対策後（サイズ）
結果をまとめると、
想像以上に時間がかかってヒヤヒヤしましたが、無事成果があってホッとしました。（これで上手くいかなかったら、この記事はボツでした（冷汗））
まとめ
「EWWW Image Optimizer」をインストールして画像を圧縮すると、ページの表示スピードを上げることができます。
時間はかかりますが、画像ごとに操作する必要がなく、自動で圧縮してくれるので、手間もかからず便利です。
おまけ
紫外線がスゴいです。
昼間に走ったら、すっかり日焼けしてしまいました。
夜走るしかないですね。
