GoogleAnalyticsのサイト表示スピード『速度の提案』ー画像のロスレス圧縮

GoogleAnalytics項目が多くて使いこなすには多少の知識が必要でなかなか情報量を有効活用しきれていないのだが、その中でもサイトの肝ともいえる『サイトの表示速度』のが気になったのでGoogleAnalyticsを活用してみることにした。GoogleAnalyticsでサイトの速度表示の分析結果を見るところから、Wordpressにおけるサイトの速度表示改善をプラグインで簡単に行ってしまう方法をまつめるのが本記事の趣旨だ。

 

GoogleAnalyticsでサイト表示の速度を確かめる方法

Google analytics サイト表示の速度

GoogleAnalyticsを開いたら、レポートをクリック。
画像の画面になるので左サイドバーの行動→速度の提案と進む。

サイト内のページ別に表示速度についての分析結果レポートが表示される。

Google analytics サイト表示の速度2

一番右側の『Page Speed スコア』がページごとの表示速度の目安を表しており、
数字が低いほどサイト表示速度が遅く改善の余地あり、ということだ。

そこで、中央列の ”PageSpeedの提案” をクリックした。

Before (ロスレス圧縮前)
『画像を最適化する』の中で画像の圧縮を提案されるのだが、画像圧縮の方法として『ロスレス圧縮』が推奨されている。
『ロスレス圧縮』とは、いったい何・・・?そしてどうやってすれば良いのだ?

サイト表示速度をあげるための画像圧縮方法『ロスレス圧縮』とは

ロスレス圧縮(可逆圧縮)とは、データの欠落がまったく起こらない圧縮方式のこと。可逆圧縮方式により圧縮された符号を復号すると、圧縮前のデータを完全に復元できる。プログラムや文字データなどはデータが1ビットでも欠けるとまったく異なった結果になることから、圧縮を行う場合には必ず可逆圧縮を用いる必要がある。(IT用語辞典より引用)

 

つまり、元のデータを保持したまま容量を圧縮できる方法が『ロスレス圧縮』といわれる圧縮法。元データを保持しているので、いつでも元データに戻すことができる。

 

WordPressでの『ロスレス圧縮』の方法 : プラグイン『EWWW Image Optimizer』

本サイトのようにWordpressを使用してサイト作成をしている場合は、Wordpressのプラグインを使うと既に記事の中で使用している画像までをもロスレス圧縮することができるようだ。ロスレス圧縮をしてから、再度記事に画像をアップする必要があるかと思ったので、これで助かるかも、と胸をなでおろした。

WordPressでメディアライブラリにアップロード済みの画像をロスレス圧縮をするためのプラグインは『EWWW Image Optimizer』だ。

 

ロスレス圧縮『EWWW Image Optimizer』のインストール

ロスレス圧縮のプラグイン

WordPressでプラグイン追加。プラグインの評価は上々!期待できそう。

 

ロスレス圧縮をするためのプラグイン『EWWW Image Optimizer』は、有効化をしていればメディアをアップする際に自動的にロスレス圧縮を行ってくれるというから、手間がかからない。『EWWW Image Optimizer』をインストールしたら、たった2つだけ設定を変更しておこう。

 

『EWWW Image Optimizer』の設定変更

1つ目の変更点:《Basic Settings》画像内のメタ情報を削除してくれる設定に変更。
2つ目の変更点:《※Conversion Settings》

※Conversion Settings:コンバージョンセッティング。ネットビジネスの世界で重要視される”コンバージョン”といわれる指標。例えば、広告クリックがどの程度成果に結びついたか等の最終的な成果を示す考え方である。 プラグイン『EWWW Image Optimizer』の設定画面では、Conversionの元来の単語の意味 ”転換・変換” で使われている。つまり『Conversion Settings=画像の変換設定』。 成果指標としての”コンバージョン”は、成果にどこまで転換できたか、という意味合いからきている。

プラグイン『EWWW Image Optimizer』の設定変更 1

ロスレス圧縮のプラグイン 設定

設定をクリックすると開くのが『Basic Settings』の画面。中央の『Remove metadata』 にチェックをいれて保存するだけ。

 

プラグイン『EWWW Image Optimizer』の設定変更 2

ロスレス圧縮のプラグイン 設定2『Conversion Settings』のタブを開き、最初の項目『Hide Conversion Links』にチェックをいれて有効にしよう。

『Hide Conversion Links』とは、画像変換リンクを隠す=非表示にする。
何の項目が非表示になるかというと、『Hide Conversion Links』の下にある画像変換のオプションだ。
ロスレス圧縮のプラグイン 設定3ーPNG to JPG に変換とか
ーJPG to PNG に変換とか
ーDelete Originals をしたい場合は
最初の項目『Hide Conversion Links』にチェックは不要。

画像変換について詳しくない得意ではないなら、非表示にしておいた方が誤ってクリックして勝手に画像変換されてしまうことを防げるのだ。

 

これで、新たにアップデートする画像についてのロスレス圧縮は万全!次は、既存にアップデートされている画像、記事に既に使っている画像をプラグイン『EWWW Image Optimizer』でロスレス圧縮を実行しよう!

 

アップデート済みの画像を『EWWW Image Optimizer』でロスレス圧縮する手順

ロスレス圧縮画像ツール『EWWW Image Optimizer』プラグインの設定画面を開くと、一番上にメッセージがありそこに親切に『新規にメディアにアップロードした画像は自動的に最適化される』旨と、『既存の画像を最適化したい場合は ”Bulk Optimize”tool を使うように』という旨が書かれている。

 

既存画像のロスレス圧縮ツール『Bulk Optimize』をクリック

ロスレス圧縮の方法 既存の画像

Bulkとは容量のこと。Bulk Optimize =容量の最適化。

 

『Bulk Optimize』をクリックすると、
どの画像について容量を最適化するかオプションが出てくる
ロスレス圧縮のプラグイン 既存の画像圧縮
オレンジ色で囲んだ『Start optimizing』をクリックすると、
メディアライブラリにアップデートしてある既存の画像を圧縮することができる

『Start optimizing』をクリックすると、画像の最適化が始まる
bulk optimize 画像の最適化
『EWWW Image Optimizer』を使用して画像の最適化にかかった時間は、108枚で7分だった。

サイト表示速度は改善したか?

『EWWW Image Optimizer』プラグインで画像をロスレス圧縮したことで、GoogleAnalyticsによるサイト速度の評価は改善したのだろうか?

画像圧縮前 GoogleAnalytics 『速度の提案』Before

Google analytics サイト表示の速度2

画像圧縮後 GoogleAnalytics 『速度の提案』After

Google analytics サイト表示の速度 圧縮後ページ表示速度評価のPage Speedスコアが各ページにつき数点あがっている。
微々たるものに思えるが、サイト全体にするとページ表示スピードへのストレスは多少改善したのではないだろうか。

-Google, Googleアナリティクス
-, ,