2015/05/02

初心者のページ速度最適化!画像圧縮TinyPNGとEWWW Image Optimizerで表示スピードを改善

WordPressを始めたばかりの初心者が気になったのが、ブログページの表示速度の遅さ!ツールでパフォーマンスの改善し、『画像の圧縮をして』ページ表示速度アップに成功しました。

WordPressはファイルが多いのに、記事や画像・テンプレートへの追記がこれからも増えます。『ブログ表示速度の最適化』を初心者のうちから考えておきましょう!

画像の圧縮に便利な「TinyPNG」と、WordPressのプラグイン「EWWW Image Optimizer」の圧縮方法。速度を最適化のため、改善点などを教えてくれるツール、PageSpeed InsightsとGTmetrixをご紹介しますね。

スポンサーリンク

ブログ表示速度の最適化ツールで改善点を見つける

ブログの表示速度の改善をおしえてくれる、PageSpeed InsightsとGTmetrix。これらはGoogleのデベロッパーツールで、アクセスしてURLを入力するだけで、改善点を表示するツールです。

PageSpeed Insights

ページ読み込みのパフォーマンスをオンライン上で測定するPageSpeed Insightsを試すと、画像の最適化の修正点を指摘されます。

後述する「TinyPNG」で圧縮する前後の表示スピードを比較してみると、左:圧縮後、右:圧縮前。

速度と画像の最適化PageSpeed Insightsを使った結果

ページ速度が52から57にあがったのがわかります。

赤の感嘆符『改善が必要』な『画像を最適化する』を展開して、画像をダウンロードし、圧縮→再度アップしなおす作業をしました。

※緑は良い状態で黄色は『修正を考慮」程度なので放置。

LINKPageSpeed Insights

スピードの結果が目で見て分かるツールGTmetrix

GTmetrixもオンラインで使え、URLをコピペすれば解析して、ページ速度の改善点や読み込み時間、重さなどを教えてくれます。

画像を使わなければ、ページの読み込みは早いんですよ…。私は、ローカルで出来る速度対策をとった事と、画像を使っていないこともありページの読み込み時間がなだらかに短縮されました。

TinyPNG使用後の画像サイズPCで173.3KB

「history」タブをクリックすればページのスピード結果が一目瞭然でわかります。ページの読み込み時間が遅くないですかぁ?4秒とか5秒って遅いですよね…。

そもそもレンタルサーバーのプランによって表示速度が変わりますが…。

LINKGTmetrix

どこまですれば早さ的に満足できるのか、人それぞれあるでしょう。できる範囲の事だけはしておこうって事で、修正が必要そうな画像の最適化を実施してみました。

キレイなままでpng・jpg画像圧縮するTinyPNG

TinyPNGは画像の拡張子がpng・jpgのものをオンラインで圧縮してくれるサイト。画像をドロップしたら、圧縮を始めて完了したら、ダウンロードするだけで綺麗に圧縮してくれます。

モバイルの表示速度が52だったが、TinyPNGを使って画像を差し替えると、57に改善されたほど優れもの!

速度や圧縮率は状態によって差はあるものの、スクリーンショットのpng画像は60~70%前後は軽くなるから毎回、圧縮して画像をアップしてます。

これが一番速度的にオススメの方法です。

TinyPNGでの圧縮率

私の場合は、スクリーンショットをリサイズして、文字入れした後、TinyPNGでキレイに圧縮が定番です。加工の工程が多いと画質も気になるので、少しでも良いってものを使ってます。

サイズは小さく圧縮、画像は見た目変わらないって、うれしいですよねっ♪

LINKTinyPNG

WordPressのプラグインEWWW Image Optimizerは画像圧縮に便利

EWWW Image Optimizerは、普段は画像アップした時に自動的に圧縮してくれます。約30%程です。TinyPNGは60%で圧縮されているので、EWWW Image Optimizerは、アップ時にそれ以上圧縮してくれません。

なので普段はプラグインを有効化せず、一括で写真を圧縮する時に有効化して使ってます。最近は使ってません。圧縮しすぎると、画質が落ちすぎると困るので・・・。

一度も試したことがないなら、やってみてください!

optimize Media Libraryの機能と使い方

optimize Media Libraryは、メディアライブラリの過去の画像を一括で圧縮できる機能です。使い方は、WordPress管理画面のメディアより

EWWW Image Optimizerの一括メディアライブラリ画像圧縮方法

  1. Bulk Optimize
  2. optimize Media Library
  3. start optimizingとクリック

これで、過去の記事の写真を一括で圧縮できます。

Optimize Everything Elseの機能と使用方法

使用中テーマ内の画像を圧縮するのがOptimize Everything Elseのスキャンで、WordPress管理画面左側のメディアより

管理画面:Optimize Everything Elseの場所

  1. Bulk Optimize
  2. Optimize Everything Else
  3. scanとクリック

これでスキャンが始まって、テーマ内画像の圧縮を一括でします。

バズ部さんが『EWWW Image Optimizer の設定方法と使い方』を詳しく紹介してますので、参考にして下さいねっ。

さいごに

画像の圧縮なら難しい作業がないので初心者でもできるし、ページの速度にも関係するので是非試してください。

面倒と感じるかもですが、関係して訪問者(ユーザー)がページを見ようとしてナカナカ表示されないと、グーグルのいう『ユーザーの利便性』に欠けるし、読まれる前に離脱してしまうと、残念ですから。

WordPressを運営して4記事目にブログの表示速度が遅い!と「パッとみ」で思ったほど。画像は必要だけど枚数は増えるので圧縮は大事ですね。

では、かうたっく@kautakkuでしたっ♪

書いた人:かうたっく

何も知らない初心者ですが、WordPressでブログを始めました。 ブログの技術系でつまずいたエラーを経験したことからエラー関連を、初心者が初心者に向けて分かりやすい言葉で書いてます★子どもの喘息様気管支炎や、幼い子どもとの生活ページなどよく読まれる雑多ブログを運営中^^♪ご意見、感想、質問はお問い合せよりお待ちしています。

Twitterフォロー