【サイト高速化】読み込み速度が改善!?WordPressブログで複数の画像(写真)を劣化なしでまとめて軽くする方法。

image_resize

遅いんです。

何がって??

ぼく
このブログの表示速度だよ!!

 

えぇ、もうこんな感じです。


スマホでアクセス—アクセス—

loading–読み込み—

4〜5秒後

スマホ表示—表示—

ぼく
遅ぇー!!


 

 

それもその筈。Googleの表示速度チェックサービス「PageSpeed Insights」で測定したぼくのブログの評価は以下の通り。


PageSpeed Insights

PageSpeed Insights_mobilePageSpeed Insights_pc
ぼく
スマホ・パソコン共に30点台…

 

まぁ、この測定結果を見る前から思ってました。

自分のサイトの表示速度が遅いんじゃないかってことに。

だって画像をめっちゃ使ってるからね!

 

とはいえ、画像は最適化している筈… これ以上、画像を軽くできるのか…?と思っていたら、

PageSpeed Insightsから、「もっと圧縮できるよ (‘∀`) ニッコリ 」と お叱りの声 指摘が。

PageSpeed Insights_画像圧縮

ピンクの枠で囲っている部分が圧縮可能な画像情報。ご覧の通りずらーっとでてきます。

このサービスが凄いのは、速度チェックだけではなく、

「こうすれば、もっと早くなりますよー」という改善点まで教えてくれるところ。

ぼく
流石Google様やで〜。ちなみに上の画像で見えているのは、ほんの一部分。カーソルを下にスクロールすると修正が必要な画像情報がまだまだでてくるよ☆

 

改善点は分かった。ただ、今までサーバーにアップした画像を一つ一つ圧縮(リサイズ)していくのはダルすぎる。

 

そんなあなたにオススメしたいのが・・・

今回ご紹介する「EWWW Image Optimizer」だー!

 

画像圧縮プラグイン「EWWW Image Optimizer」について

まずこのプラグインの素晴らしい点は以下2点


  1. 過去のアップした全ての画像(写真)をまとめて軽くしてくれる。
  2. これからアップする画像も自動的に軽くしてくれる。

 

一度入れて設定さえすれば、今後画像のリサイズに関してはノータッチ!

ぼく
とはいえ、このサービスの圧縮率には限界がある為、そもそも画像(写真)に関しては「TinyJPG」などのサービスを利用し、圧縮をしてからWordPressにアップした方が良いです。

 

ぼくみたいに画像を大量に使うブログには欠かせないプラグインといえるでしょう。

 

それではまず設定方法からいってみましょー!

 

EWWW Image Optimizerの初期設定

EWWW Image Optimize_プラグインに追加

WordPress管理画面から「プラグイン」→「新規追加」ボタンをクリックします。

EWWW Image Optimizerを追加

キーワードに「EWWW Image Optimizer」と入力後、「今すぐインストール」をクリック

ぼく
画像の通り、同じアイコンが2つ出てきますが、左側の日本語表記の方をインストールしてください。 

EWWW-Image-Optimizerを有効化

「有効化」をクリック 。

EWWW-Image-Optimizerをクリック

WordPress管理画面 「設定」に「EWWW Image Optimizer」が追加されているのでクリック


すると「EWWW Image Optimizer」の設定画面へ辿りつきます。

項目が複数あって、ややこしい様に見えますが、必要な作業はたった一つです。

ぼく
圧縮するにあたり必要な作業項目に関しては、最初からチェックマークが付いています。これから行う作業は、圧縮とは関係ありません。詳細は後述。

 

EWWW-Image-Optimizerの設定

「変換設定」のタブを選択し、項目内「コンバージョンリンクを非表示」にチェックをつけ、「変更を保存」をクリックします。

no name
この項目にチェックをつけると、写真データの拡張子の変換を防げます。

 

—–どういうこと??—–

jgpをpngに変換を消す

「コンバージョンリンクを非表示」にチェックをつけなければ、WordPress管理画面 「メディア」→「ライブラリ」の画像最適化の項目内に「jpgをpng」ボタンが表示されます。

 

このボタンを押すと、写真データの拡張子、要はファイルの種類自体が変わってしまいます。

押し間違いによる拡張子の変換を防ぐ為、このボタン自体を消そう!というのが、

「コンバージョンリンクを非表示」にチェックをつけるという作業になります。


ぼく
これにて設定は終了!次は、圧縮作業。

 

EWWW Image Optimizerによる圧縮方法

EWWW-Image-Optimizer_Scan for unoptimized images

WordPress管理画面 「メディア」→「一括最適化」 →「Scan for unoptimized images」ボタンをクリック。

EWWW-Image-Optimizer_一括最適化

「最適化を開始」をクリック。

ぼく
このボタンを押すと圧縮開始!今までアップした画像が全て軽くなります。ぼくの場合は、3,653枚が一括圧縮!

EWWW-Image-Optimizer_圧縮中

圧縮中。

ぼく
しばし休憩…ε-ヾ(´ε`;)ゝ

EWWW-Image-Optimizer_圧縮完了

青色のゲージが右端に達したら圧縮完了です。

ぼく
3,653枚の圧縮にかかった時間は、約17分。

 

それでは結果発表ー!

 

EWWW Image Optimizerによってどれ位 画像が軽くなったのか?

圧縮前のサイズ(before)

圧縮前の画像サイズ

207MB(メガバイト)

圧縮後のサイズ(after)

圧縮後の画像サイズ

199.8MB(メガバイト)

 

ぼく
7.2MB軽くなったよ!(4%圧縮)

・ 

あれ..思った程じゃ…ない

 

ひょ、評価は…

 

「EWWW Image Optimizer」により「PageSpeed Insights」の評価がどれくらい改善されたのか?

 

圧縮前の評価(before)

PageSpeed Insights_mobilePageSpeed Insights_pc

スマホ:37点 / PC:39点

 

 

圧縮後の評価(after)

スマホ_圧縮後の評価PC_圧縮後の評価 

スマホ:39点 /  PC:41点

ぼく
2点あがったよ!

2点かよ……(-。-) ボソッ

 

正直期待していた程では無かったですが、ブログの読み込み速度が改善したのは事実。

圧縮後の画像に関しても、見た感じ全く劣化されていない(様に見える。)

 

ブログに訪れてくれる方の半数以上は、スマホからの為、光回線ほど爆速ではありません。

その為、1KBでも画像サイズを軽くし、読み込み速度を速くするのは、必須です。

Googleも「AMP」を押している訳ですし、いかにサイトを軽くするのかが、今後サイト(ブログ)を運営していく上での肝となってくるのは間違い無し。

 

EWWW Image Optimizerは、ボタン1つで今までアップしていた画像をまとめて圧縮してくれるのに加え、これからアップする画像に関しても自動的に軽くしてくれる。

写真にめちゃめちゃこだわりがあって、

少しの劣化も許さん!って方「以外」は入れるべきプラグインです。

 

ぼく
とはいえ、まだまだサイトは重い。どうすれば..と思い、色々調べていたら、根本的な問題に行き着いた… 100%改善はできるけど、その作業をこれからしなくちゃと考えるとめまいがします。あぁ、嫌だ..