WordPressテーマ変更!SimplicityからCocoonへ
スポンサーリンク

初心者のページ速度最適化!画像圧縮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 の設定方法と使い方』を詳しく紹介してますので、参考にして下さいねっ。

さいごに

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

面倒と感じるかもですが、訪問者(ユーザー)さんがページを見ようとしても、ナカナカ表示されないと読まれる前に離脱する可能性があります。

Googleのいう『ユーザーの利便性』に欠けるし。。

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

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

この記事が気に入ったら
いいね!しよう
最新情報をお届けします。
プラグイン
フォローする
スポンサーリンク
スポンサーリンク
ビバ★りずむ

Comments

個人情報の取り扱いについてはリンク先をご確認ください。

ご了承・ご理解いただいた上でコメントお待ちしております?

トップへ戻る
タイトルとURLをコピーしました