PageSpeed Insightの数値って気にしてますか?

 

雑多ブログのカテゴリの多さを活かすために、ブログのテーマをマテリアルに変更したわけですが、ここで1つ問題が…。PageSpeed Insightの数値、めっちゃ下がった!

確かに、Stinger5-Cheetahを利用していた頃に比べると、カテゴリごとに新着記事を表示したことで、TOPページで利用する写真がめちゃくちゃ多くなりました。でも画像圧縮プラグイン「EWWW Image Optimizer」を導入してるんだけど……。

どうやら、自分で加工した写真などをそのままブログにアップして「EWWW Image Optimizer」で圧縮するだけではダメなのでは?

ということで今回は、 ブログへアップする前に画像を圧縮することで、PageSpeed Insightの数字は改善するのか ということを検証してみましょう。

【今回の流れ】

横幅を整えた画像をアップした状態で計測

画像を圧縮してからブログにアップした場合を計測

さらに、プラグインで圧縮した場合を計測

 

PageSpeed Insightとは

image-compression-01

PageSpeed Insight とは、Googleが提供しているWeb開発者向けサービス(Google Developers)の1つです。携帯端末やデスクトップ端末向けのページのパフォーマンス(表示速度)を計測し、0~100点で結果を通知してくれます。

しかも、改善点も合わせて教えてくれるので、使っているブロガーさんも多いのでは無いでしょうか?

 

スポンサーリンク

表示スピードが早いとどんなメリットが有るの?

読み込み速度が早くなることで、

  • ユーザーのためになる(高速表示することで直帰率が下がる可能性がある)
  • Googleに評価される可能性がある

という利点があります。

特に、 サイト表示が2秒遅くなるだけで直帰率は50%増加する 、と言われているので、ただでさえ直帰率が高めな雑多ブログには特に注意が必要だと分かりました。

ストレスを感じるほど読み込みの遅いWebサイトは論外だとしても、わずか数秒のパフォーマンスの違いが、直帰率やコンバージョン率に跳ね返ってくることをきちんと意識しているだろうか。日本ラドウェア株式会社 技術本部 コンサルタントの増山誠氏は、Webサイトの表示高速化の重要性と、それを実現するソリューションを、DeNAの事例を交えて紹介する。

 

スポンサーリンク

ブログにおける画像圧縮の方法とは

アップする前に画像を圧縮する

自分のカメラで撮影した写真や、インターネットで公開されている有料・無料の写真素材は、かなりサイズが大きい写真であることが多いです。(ブログのコンテンツの横幅が600~700px程度であるのに対し、素材集の写真の横幅は1,000pxを超えるものも多い)

写真を見せる(魅せる)必要のあるサイト は別として、基本的には、ブログに画像をアップロードする前に、ちゃんと圧縮しておく必要があります。

圧縮はWebサービスがとても簡単なのでオススメです。有名どころとしては、TinyJPGCompressor.io などがあります。それぞれのサービスでどれだけ写真が圧縮できてどんな見た目になるのかは、初心者向け記事ならなんでもござれなエローラさん(@uszero800)の下記の記事がとても参考になります。

ブログでよく使われる JPEG 画像。フルカラーのイメージ素材や写真に最適な形式ですが、どうしても容量が大きくなりがちです。 そこで、画像を軽量化(圧縮)してからアップロードするのが常識。 本日は、専用ソフトがなくてもブ &

※当ブログでは、 TinyJPG を利用しています。

 

アップした後に画像を圧縮する

WordPressにプラグインを導入して、すでにブログにアップしている画像を圧縮(最適化)する方法です。

上記で紹介した TinyJPG のプラグイン版(500枚/月まで無料)や、「EWWW Image Optimizer」が有名です。

プラグインの利用方法は下記のサイトの記事が分かりやすかったです。

つい昨日、サーバーを「お名前.comの共用サーバー」から「さくらのスタンダード」に引っ越しました。 そして、2週間のお試し期間は転送量を制限するよ!ということで、503エラー連発して現在ヒィヒィ言ってますw 何とかせな!と思って今日一日、色々試行錯誤してました。 一応、さくらのレンタルサーバーには「リソースブースト」とかいう緊急的に転送量などの制限を緩和してくれる機能があるので、その実力を見ようと根本の解決策は日付が変わってから行う予定です。 なので、今回は焼け石に水かもしれませんが、画像の最適化(再圧縮)をいい感じに行なってくれる、プラグイン「EWWW Image Optimizer」を入れることにしました! ずっと前から存在は知っていましたが、私はあんまりプラグイン入れたくない人なので、ちょっと避けていました&。 しかし今はそんな事言ってる場合じゃない!という訳で、ローカルで試したりステージング環境で試してみて問題無かったので導入しました! EWWW Image Optimizer のインストール方法 公式プラグインなので、WordPressの管理画面から「プラグイン」’「新規追加」’「EWWW Image Optimizer」を検索’「今すぐインストール」とお馴染みの手順です。 インストールが完了したら、「プラグインを有効化」で有効にしておきましょう。 ちなみに「Cloud」が付いているものが隣にありますが、こっちは自分のサーバーに画像を置かずに、よそのサーバーで管理してくれるもの。当然お金がいるので、説明しません! EWWW Image Optimizer おすすめの設定 基本的にはデフォルトのままで問題ないです。 そのままサクッと進めてしまって大丈夫ですが、一応全てではありませんが載せておきますね。 こだわりたい人だけ好きに設定すると良いと思います。 何か他の人の導入記事を見てると、よく分からないからか、おかしな理由を付けて「pngout」を入れてはいけないみたいなことが書かれてますが、本当は入れた方がいいです。 画像はChromeの翻訳機能を利用して翻訳かけていますが、実際は英語です。何となくは理解できるのでオススメします! Basic Settings(基本設定) 左端のCloud

※当ブログでは「EWWW Image Optimizer」を利用しています。

 

実際に画像を圧縮してみた結果

対策前(画像をそのままアップしてプラグインで圧縮)

モバイルは50点

image-compression-02

パソコンは24点

image-compression-03

ついでにGTmetrixを調べると、E(53%)/D(69%)、ロードタイムは7.2秒

image-compression-04

 

すべての画像をアップする前に圧縮したものに差し替え

モバイルは50点のまま

image-compression-05

パソコンは24点→49点

image-compression-06

GTmetrixは、E→D(53%→69%)/D(69%)、ロードタイムは7.2秒→5.8秒

image-compression-07

ページサイズも3.42MB→1.81MBということで確かにページサイズが小さくなり、ロード時間も短縮されている様子。

 

さらに、圧縮してからアップした画像を「EWWW Image Optimizer」で再圧縮

モバイルは50点のまま(!?)

image-compression-08

パソコンは49点のまま(!?)

image-compression-09

GTmetrixは、D(69%)/D(69%)、ロードタイムは5.8秒→5.0秒(!?)

image-compression-10

※ロードタイムは若干の変動があるので、はっきりいってほとんど変化無しといったところです。

 

再圧縮の効果が無かった原因

「EWWW Image Optimizer」の圧縮結果を見てみたところ、「150×150」や「70×70」といった、画像アップロード時に WordPressが作成するサムネイル画像 ばかりが圧縮されている様子。

image-compression-11

一方で、PageSpeed Insightで改善指示が出ている画像を見てみると、「activity-report-201601-00.jpg」「push-notification-hatebu-00.jpg」などといったアップした画像そのもの。

image-compression-12

どうやら事前に圧縮した画像については、EWWWで再圧縮しようとしても、圧縮されていないようです。

2016年2月11日追記

じゃあ「EWWW Image Optimizer」に意味は無いの?とのコメントを頂いたので補足させて頂きます。

今回の検証で、「EWWWで自動的に圧縮していた画像」を、「事前にWebサービスで圧縮しておいた画像」に差し替えることで数値が改善しました。 これは、「EWWWで自動的に画像を圧縮する圧縮率」より、「Webサービスで圧縮した画像の圧縮率」の方が高く、サイズの小さい画像を使っていることを評価してくれたんです。EWWWに意味が 無い、という訳では有りません。

EWWWでも圧縮レベルを高めることで数値は改善するものと思われます。ただし、Webサービスで圧縮した画像を同じくらいのサイズになるようにEWWWの圧縮レベルを高く設定すると、1枚1枚の画像アップロード自体に時間がかかるようになるため、ご注意下さい。

一方、PageSpeed Insightでは、記事のアイキャッチ画像のフルサイズ(原寸大)のものをサムネイルとして利用しているため、こんな小さい領域に表示するのに画像大きすぎるんじゃない?と怒られている模様。そのため、WordPressが自動で生成したサムネイル画像について、「EWWW Image Optimizer」が圧縮しても、数値に変化が無かったんですね。

ですので、もしあなたが利用中のテーマが、記事一覧ページで利用する画像に、WordPressが生成したサムネイルを利用しているテーマであれば、再圧縮時にも数値が改善するものと思われます。

 

TSUNJI(@tsunji1983)的まとめ

今回の検証結果をまとめると、

ブログの画像は事前に圧縮する。

WordPressが自動生成するサムネイル画像を利用するテーマを選んでいる場合は、さらに「EWWW Image Optimizer」で再圧縮する

という流れがオススメです。(自分のテーマが、自動生成のサムネイル画像を利用しているかわからない場合は、両方するもの、とおぼえておくと良いでしょう)

 

やはりブログはユーザーに見てもらってナンボの世界です。ということは、すこしでも使いやすいブログを目指すのは、ブロガーとしてもっとも大切な考え方ですよね。

当ブログのPageSpeed Insightの結果は、モバイル、パソコンともに、まだまだ改善の余地がたくさん有ります。今後は、モバイル、パソコンともにA評価を目指して、ブログの改善に努めたいと思います。

結果は随時アップしていきますので、良ければ参考にしてください。

 

以上、TSUNJI(@tsunji1983)でした。