不器用さんのwordpress講座 「EWWW Image Optimizer」で画像を圧縮、表示スピードも38%圧縮しました

シェアする

  • このエントリーをはてなブックマークに追加

「近日出荷」の記事をチェックするために、iPhoneからページを開いたのですが、軽い不満が。サイトの表示スピードが遅いのです。一つ考えられるのが、画像データが重いこと。画像データを圧縮して、より見やすいブログを目指します。

スポンサーリンク
自動サイズレスボンシブ

まずは、現状をチェック

「表示スピードが遅い」と言ってもどれくらい遅いかが分かりません。実際にどれくらいのスピードなのか、数値で確認しておきましょう。


使うのはこのサイト。

スクリーンショット 2015 04 29 11 23 09


GTmetrix」です。


使い方は簡単で、測定したいページのURLを入力してクリックするだけ。

スクリーンショット 2015 04 29 11 22 40


すると、

スクリーンショット 2015 04 29 11 26 13

(No way…)


測定結果が表示されます。 


今回は、比較的多く画像を使っているこの記事

スクリーンショット 2015 04 29 11 30 14


を使って、表示スピードの改善状況を確認していきます。 
測定結果は…、

スクリーンショット 2015 04 29 9 28 10


左がGoogleの評価で「C」、右がyahooの評価で「D」です。 
ここは大まかな評価と考えて下さい。注目するのはその隣にある「Page load time」。 
ページ全体が表示されるまでの時間のことですが、それが「8.90s」になっています。


これが少しでも改善されることを目指します。 

「EWWW Image Optimizer」で画像を圧縮

今回、サイトの表示スピードを改善するために使うのが、こちら。

スクリーンショット 2015 04 29 9 34 01


wordpressのプラグイン「EWWW Image Optimizer」です。 
画像データを圧縮して軽くしてくれます。


今回「EWWW Image Optimizer」を選んだ理由は2つ。


・アップする画像を自動で圧縮

アップ済みの画像を圧縮


特に「アップ済みの画像」まで圧縮してくれるのが魅力です。


「近日出荷」では、すでにかなりの枚数の画像を使っているので、過去記事を手動で圧縮するのは手間がかかりすぎます。 
「ここを効率化できるなら、ベストだ」と思っていましたが、「EWWW Image Optimizer」がそれに応えてくれるということで、迷わず導入を決断しました。


インストールしてみましょう。

「EWWW Image Optimizer」のインストール

「EWWW Image Optimizer」をインストールします。 
手順を解説しますが、以下の点には注意して下さい。

注)新しいプラグインをインストールすると、エラーが発生する可能性があります。エラーが出ても、インストール前の状態に戻せるように、バックアップを取ってからインストールするようにしましょう。

「EWWW Image Optimizer」を検索

wordpressの左サイドバーにある「プラグイン」から「新規」を選んで、画面右上にある検索ウインドウで「EWWW Image Optimizer
」を検索します。

スクリーンショット 2015 04 29 11 59 49


検索結果の最初に出てくるので、右上にある「今すぐインストール」をクリックしましょう。

スクリーンショット 2015 04 29 12 03 25

プラグインを有効化

インストールが完了すると、次のような画面になるので、「プラグインを有効化」をクリック。

スクリーンショット 2015 04 29 9 40 20


これでインストールは完了です。 
ここから、設定に移ります。

「EWWW Image Optimizer」の設定 基本はデフォルトのまま

基本はインストールしたままの状態でOK。 
ただし、より効果的に圧縮するために次の2つのポイントをチェックします。

Basic Settings

設定から「EWWW Image Optimizer」をクリックすると、

スクリーンショット 2015 04 29 10 02 19


「Basic Settings」が開きます。

スクリーンショット 2015 04 29 10 26 16


上から2番目にある「Remove metadata」にチェックを入れて、「Save Change」ボタンをクリックします。

スクリーンショット 2015 04 29 10 33 27

これは、「メタデータを削除する」という設定です。 
「メタデータ」はデータ自体ではなく、そのデータに関連する情報のこと。


データの作成者や作成日時、データ形式などの情報が該当しますが、画像を表示する上では、それがなくても問題ないので、削除してより画像データを軽くします。

Conversion Settings

「Conversion Settings」のタブをクリックします。

スクリーンショット 2015 04 29 11 00 07


画面が開いたら、一番上にある「Hide Conversion Links」にチェックを入れて、「Save Changes」をクリックします。


「EWWW Image Optimizer」には、画像のファイル形式を自動で変換する機能が入っているのですが、この機能を停止させるのが「Hide Conversion Links」です。


このような作業は特に必要はないので、余計な作業を省き、効率よく画像の圧縮を行います。


設定はこの2つだけです。 
準備が終わったので実際に画像を圧縮して、サイトの表示スピードがどれくらい改善されるか確かめてみましょう。

画像を圧縮します

アップ済みの画像を一括で圧縮することもできるのですが、時間がかかるので、検証する記事の画像だけを圧縮して、改善状況を確認します。


個別に画像を圧縮するには、wordpress管理画面の左サイドバーにある「メディア」から「ライブラリー」を開いて、

スクリーンショット 2015 04 29 12 13 12


該当する画像について、「Optimize now!」ボタンをクリック。

スクリーンショット 2015 04 29 12 13 12 のコピー


圧縮が完了すると、

スクリーンショット 2015 04 29 12 17 50


表示が「Optimize now!」から「Re-optimize!」に変わります。


この要領で該当記事に使われている画像を圧縮していきます。 
圧縮が完了したら、再度、ページの表示スピードを確認。 
改善策の成果はどうなるでしょうか。

結果発表 1

測定結果は、こうなりました。


・対策前

スクリーンショット 2015 04 29 9 28 10 のコピー


・対策後

スクリーンショット 2015 04 29 12 35 40


ご覧の通り、Page load timeは「8.90s」から「6.18s」へと改善されました。


ただ、評価はダウングレードしていて、その理由は、


・対策前

スクリーンショット 2015 04 29 9 28 10 のコピー 2


・対策後

スクリーンショット 2015 04 29 12 35 40 のコピー


ページのサイズが大幅増。


ただ、個々の画像については、

スクリーンショット 2015 04 29 12 46 19


7.2%が圧縮されていることが報告されているので、圧縮はできているということだと思います。


このページに表示される、記事以外の画像(サイドバーやフッターなどに表示される画像)の影響かもしれません。


次は、アップされている全ての画像を圧縮した上で、このページの表示速度を測定してみます。


アップされている画像をすべて圧縮するには、左サイドバーの「メディア」にある「Bulk Optimize」をクリック。

スクリーンショット 2015 04 29 12 52 13


このような画面が開くので、中程にある「Optimize Media Library
」の「Start optimizing」をクリックすれば圧縮が始まります。

スクリーンショット 2015 04 29 12 52 13 のコピー


ただし、注意が必要です。 
全ての画像を対象にすると、想像以上に時間がかかる場合があります。


もちろん、サイトによって画像の量は異なるので一概には言えませんが、「近日出荷」の場合を例に挙げると、圧縮の対象になる画像が2402枚、所要時間は3時間12分でした。


圧縮中に何か操作が必要な訳ではないですし、一時停止することも可能なので、特別困ることはないのですが、念のためにおさえておきましょう。

スクリーンショット 2015 04 29 16 57 29


「Finished」の表示が出たら完了です。 
改めて、表示スピードを測定してみましょう。

結果発表 2

では、気を取り直して、結果発表(2回目)です。 
測定結果はこうなりました。


・対策前(表示スピード)

スクリーンショット 2015 04 29 9 28 10 のコピー


・対策後(表示スピード)

スクリーンショット 2015 04 29 17 04 45

・対策前(サイズ)

スクリーンショット 2015 04 29 9 28 10 のコピー 2


・対策後(サイズ)

スクリーンショット 2015 04 29 17 04 45 のコピー


結果をまとめると、

スクリーンショット 2015 04 29 17 22 19


想像以上に時間がかかってヒヤヒヤしましたが、無事成果があってホッとしました。(これで上手くいかなかったら、この記事はボツでした(冷汗))

まとめ

「EWWW Image Optimizer」をインストールして画像を圧縮すると、ページの表示スピードを上げることができます。 
時間はかかりますが、画像ごとに操作する必要がなく、自動で圧縮してくれるので、手間もかからず便利です。

おまけ

紫外線がスゴいです。 
昼間に走ったら、すっかり日焼けしてしまいました。 
夜走るしかないですね。

スポンサーリンク
自動サイズレスボンシブ
自動サイズレスボンシブ

シェアする

  • このエントリーをはてなブックマークに追加

フォローする