画像を次世代フォーマットに変換してサイトの表示スピードアップ

PageSpeed Insights.htaccess
目的はユーザビリティの向上

目的はユーザビリティの向上

今回の目的は、
ユーザビリティ(有効さ、効率、ユーザの満足度の度合い)の向上の為の、
ひとつを実現すること。

方法は画像の軽量化

方法は、
サイトの応答時間を短縮させるに必要な画像の軽量化(最適化)すること

手段は適切なプラグインの導入

画像の最適化前に、どの程度表示速度に影響があるのかを把握しておき、

影響を最小限に抑えるための適切なプラグインの導入と、

プラグインの導入で実現する画像の最適化により削減された応答時間を確認します。

次世代フォーマット変換前では

モバイル/パソコン

PageSpeed Insights
PageSpeed Insights

測定タイミングによっては、上記以上のことも承知しています。

この値は計測したタイミングでの瞬間値ということは理解・承知していることです。

サイトの応答時間を遅くさせる理由(原因)はこれ!

モバイルでは、

サイトの応答時間を遅くさせる理由(原因)
特にモバイルでサイトの応答時間を遅くさせる理由(原因)

モバイルでは、「次世代フォーマットでの画像の配信」で、3.9秒の短縮が見込める様です。

.3.9秒を侮ることなかれ。「3秒の壁」を乗り越える重要性・・・

最初の「3秒の壁」は、「ファーストビュー」が表れるまでです。ここが3秒以上かかってしまうとキャンセルされてしまう。つまり、あなたのホームページは訪問されない可能性が大きくなってくるのです。いまやネットに訪れる主役はパソコンではなく、スマホ(モバイル端末)です。

スマホの登場以来スマホの性能は飛躍して進歩してきましたが、まだパソコンの能力には及びません。

ネットを閲覧する際の端末の6割超がスマホからです。ですからスマホの性能を意識したサイト作りが大事になってくるのです。

パソコンでもつまり、

パソコンでは0.48秒(ここからもまだ、モバイル端末の非力がお分かり戴けると思います)

次世代フォーマットでの画像の配信

次世代フォーマットでの画像の配信
次世代フォーマットでの画像の配信

JPEG 2000、JPEG XR、WebP などの画像フォーマットは、PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができます。

WordPressサイトにはプラグインが有効

アップロードした画像を最適なフォーマットに自動変換するプラグインまたはサービスの使用をご検討ください。

Google Search ConsoleのPage Speed Insightsの結果のLINKからWordPressサイトでの表示でのプラグインは以下の様なものがありますが、

WordPressサイトにはプラグインが有効
Google Search ConsoleのPage Speed Insightsの結果のLINKからWordPressサイトでの表示でのプラグイン

使うプラグインはこれ

EWWW Image Optimizer

EWWW Image Optimizer
EWWW Image Optimizer

選択基準は、可用性、信頼性、保守性

  • WordPressの最新バージョンでテストされていること(信頼性)
  • 使用中のWordPressと互換性があること(有効性)
  • 更新頻度がある程度あること(保守性)
  • 有効インストール数がある程度あること(信頼性)

このプラグインは、インストール、有効化の他に、プラグイン外でのサーバー設定が必要となります。

インストール・有効化

管理画面(ダッシュボード)サイドバーの「プラグイン」➡

プラグイン「新規追加」

プラグイン「新規追加」
管理画面(ダッシュボード)サイドバーの「プラグイン」➡プラグイン「新規追加」

➡ キーワードに「web P」を入れてプラグインの検索

キーワードに「web P」を入れてプラグインの検索
キーワードに「web P」を入れてプラグインの検索

 「インストール」➡「有効化」

EWWW Image Optimizer
「インストール」➡「有効化」

設定

プラグインの設定画面からWebPをオンにする

管理画面(ダッシュボード)サイドバーの設定 > EWWW Image Optimizerを開き、「設定」クリック

EWWW Image Optimizer
EWWW Image Optimizerの設定

Web Pタブを開きます。

Web Pタブ
Web Pタブ

「  」 JPG から WebP への変換は非可逆ですが、品質の損失は最小です。 PNG からWebP への変換はロスレスです。のチェックボックスをON✅し、「変更を保存」します。

WEbPタブ
チェックボックスをON✅し「変更を保存」

「変更を保存」した後に、下部にでてくる「コード」を.htaccessに貼り付ける。

「変更を保存」した後に、下部にでてくる「コード」
「変更を保存」した後に、下部にでてくる「コード」

「コード」をコピーし、一度テキストエディタなどに貼り付けます。

テキストエディタなどに貼り付け
SublineText3

.htaccessを編集

.htaccessによる自動振り分
jpgpng画像ファイルに対して、同名のWebPファイルが同じ階層にある場合、
WebPをサポートしているブラウザではWebPファイルを、
そうでないブラウザはjpgまたはpngを自動で読み込む。

「EWWW Image Optimizer」がWebP設定時に吐き出すコードを利用します。

.htaccess」を編集します。以下の例はエックスサーバーの例です。

.htaccessを編集
エックスサーバーの例

XSERVERの例では、Web FTPから編集できます。

.htaccessを編集
#BEGIN WordPressの前に、挿入※貼り付けます。

#BEGIN WordPressの前に、挿入貼り付けます。

前後のステートメントを削除したり、更新・上書きしない様、最新の注意を払って行ってください。(.htaccessファイルはとても重要なものです)

.htaccess
「.htaccess」を編集

保存する」で更新されます。

.htaccess
更新

先ほどのEWWW Image Optimizerの画面を見るとグリーンに変わっています。

EWWW Image Optimizerの画面
グリーンに変わっています

これで設定は完了です。

.htaccessを設定する以前は、レッド(未適用で.pngでした。

.htaccessを設定する以前
.htaccessを設定する以前

※. キャッシュプラグイン「WP Fastest Cache」を利用している場合は、WebP用のコードが入っているため、グリーンになっています。

既にアップしている画像のWebP化

管理画面(ダッシュボード)サイドバーのメディアから一括最適化を選び、

最適化されていない画像をスキャンする」をクリックします。

画像のWebP化
「最適化されていない画像をスキャンする」をクリック

右側ボックスのWeb Pのみ、チェックボックスを入れます。

右側ボックス
Web Pのみにチェック

確認表示に応えます。

確認表示
確認表示

最適化が開始され、進捗状況が表示されます。

最適化が開始され、進捗状況が表示
最適化が開始され、進捗状況表示

進捗状況

進捗状況
最適化進捗状況表示

最適化完了

進捗状況
最適化完了

最適化が終わったら

メディアライブラリの一覧で開き確認できます。

メディアライブラリの一覧
右端の画像最適化部分

見えにくいと思いますので、右端の画像最適化部分のみ切り出します。

メディアライブラリの一覧
右端の画像最適化部分のみ切り出し

筆者の場合、予め「Tiny Ping」で画像圧縮を行い、プラグインの「Regenerate Thumbnails」で調整も行っている為、サイズ圧縮値は、目だつ物がない様ですが、これでも有効なのです。

筆者のこのブログの様にたくさんの画像を使う場合は(塵も積もれば山となるです。)

Web Pに変換されているか確認する

検証モードに切り替えます。 「Ctrl」+「Shift」+ 「I」 

またはマウス右クリックで出てきたポップアップの一番下 検証(I)

Network」表示。

(下の様に、開いた時、何もデータが表示されていないことがあります。

その場合は「ctrl」+「R」で再読み込み(リロード)して下さい。

Network」表示

検証モード
開いた時、何もデータがない

青枠で囲んだ部分が、次世代フォーマットWebP化された部分です。

検証モード
青枠で囲んだ部分が、次世代フォーマットWebP化された部分

Search Consoleで確認

この記事を執筆しながら行った関係で、最初計測してから4時間以上かかってしまいました。

ネットが混んできている時間帯でもあり、想定程のスピードが出ていません

(この検証は、明日、同じ時間帯に試みてみようと思います)15:52

Search Consoleで確認

Search Console
PageSpeed Insights
PageSpeed Insights
「次世代フォーマットでの画像配信」は3.9秒から0.15秒に

モバイル

それでも、改善できる項目の「次世代フォーマットでの画像配信」は3.9秒から0.15秒になりました。

パソコンは

「次世代フォーマットでの画像配信」が、0.48秒から、表示がなくなりました。

つまり画像に関してはGoogleの評価では改良の余地はない(改善できる点がない)ということです。

まとめ

目的は、表示スピードのアップを求めるのではない。

ユーザビリティの向上の向上を目指して

「次世代フォーマットでの画像配信」対応のプラグインを使うことで、結果的にスピードアップにつながった・・・ということです。

PageSpeed Insights
次世代フォーマットでの画像配信

コメント

タイトルとURLをコピーしました