WordPressを始めたばかりのとき気になったのが、ブログページの表示速度の遅さ！ツールでパフォーマンスの改善し、『画像の圧縮をして』ページ表示速度アップに成功しました。
WordPressはファイルが多いのに、記事や画像・テンプレートへの追記がこれからも増えます。『ブログ表示速度の最適化』を初心者のうちから考えておきましょう！
画像の圧縮に便利な「TinyPNG」と、WordPressのプラグイン「EWWW Image Optimizer」の圧縮方法。速度を最適化のため、改善点などを教えてくれるツール、PageSpeed InsightsとGTmetrixをご紹介しますね。
ブログ表示速度の最適化ツールで改善点を見つける
ブログの表示速度の改善をおしえてくれる、PageSpeed InsightsとGTmetrix。これらはGoogleのデベロッパーツールで、アクセスしてURLを入力するだけで、改善点を表示するツールです。
PageSpeed Insights
ページ読み込みのパフォーマンスをオンライン上で測定するPageSpeed Insightsを試すと、画像の最適化の修正点を指摘されます。
後述する「TinyPNG」で圧縮する前後の表示スピードを比較してみると、左：圧縮後、右：圧縮前。
ページ速度が52から57にあがったのがわかります。
赤の感嘆符『改善が必要』な『画像を最適化する』を展開して、画像をダウンロードし、圧縮→再度アップしなおす作業をしました。
※緑は良い状態で黄色は『修正を考慮」程度なので放置。
スピードの結果が目で見て分かるツールGTmetrix
GTmetrixもオンラインで使え、URLをコピペすれば解析して、ページ速度の改善点や読み込み時間、重さなどを教えてくれます。
画像を使わなければ、ページの読み込みは早いんですよ…。私は、ローカルで出来る速度対策をとった事と、画像を使っていないこともありページの読み込み時間がなだらかに短縮されました。
「history」タブをクリックすればページのスピード結果が一目瞭然でわかります。ページの読み込み時間が遅くないですかぁ？4秒とか５秒って遅いですよね…。（当時ロリポップ・ライトプラン）
そもそもレンタルサーバーのプランによって表示速度が変わりますが…。
LINKGTmetrix
どこまですれば早さ的に満足できるのか、人それぞれある事でしょうけど。できる範囲の事だけはしておこう！って事で、修正が必要そうな画像の最適化を実施してみました。
キレイなままでpng・jpg画像圧縮するTinyPNG
TinyPNGは画像の拡張子がpng・jpgのものをオンラインで圧縮してくれるサイト。画像をドロップしたら、圧縮を始めて完了したら、ダウンロードするだけで綺麗に圧縮してくれます。
モバイルの表示速度が52だったが、TinyPNGを使って画像を差し替えると、57に改善されたほど優れもの！
速度や圧縮率は状態によって差はあるものの、スクリーンショットのpng画像は60～70%前後は軽くなるから毎回、圧縮して画像をアップしてます。
これが一番速度的にオススメの方法です。
私の場合は、スクリーンショットをリサイズして、文字入れした後、TinyPNGでキレイに圧縮が定番です。加工の工程が多いと画質も気になるので、少しでも良いってものを使ってます。
サイズは小さく圧縮、画像は見た目変わらないって、うれしいですよねっ♪
LINKTinyPNG
WordPressのプラグインEWWW Image Optimizerは画像圧縮に便利
EWWW Image Optimizerは、普段は画像アップした時に自動的に約30％程圧縮してくれます。
※TinyPNGは60％で圧縮されているので、EWWW Image Optimizerより手間がかかるけど優秀です。
なので普段はプラグインを有効化せず、一括で写真を圧縮する時に有効化して使ってましたが、最近は使ってません。圧縮しすぎると画質が落ちすぎ困るので・・・。
ただ一度も試したことがないなら、やってみてくださいね。
optimize Media Libraryの機能と使い方
optimize Media Libraryは、メディアライブラリの過去の画像を一括で圧縮できる機能です。使い方は、WordPress管理画面のメディアより
- Bulk Optimize
- optimize Media Library
- start optimizingとクリック
これで、過去の記事の写真を一括で圧縮できます。
Optimize Everything Elseの機能と使用方法
使用中テーマ内の画像を圧縮するのがOptimize Everything Elseのスキャンで、WordPress管理画面左側のメディアより
- Bulk Optimize
- Optimize Everything Else
- scanとクリック
これでスキャンが始まって、テーマ内画像の圧縮を一括でします。
バズ部さんが『EWWW Image Optimizer の設定方法と使い方』を詳しく紹介してますので、参考にして下さいねっ。
さいごに
画像の圧縮なら難しい作業がないので初心者でもできるし、ページの速度にも関係するので是非試してください。
面倒と感じるかもですが、訪問者（ユーザー）さんがページを見ようとしても、ナカナカ表示されないと読まれる前に離脱する可能性があります。
Googleのいう『ユーザーの利便性』に欠けるし。。
WordPressを運営して４記事目にブログの表示速度が遅い！と「パッとみ」で思ったほど。画像は必要だけど枚数は増えるので圧縮は大事ですね。
では、かうたっくでしたっ♪
Comments