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

usability .htaccess
目的はユーザビリティの向上
記事内に広告が含まれています。
PR広告

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

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

Thank you for reading this post, don't forget to subscribe!

方法は画像の軽量化

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

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

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

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

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

PR広告

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

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サイトでの表示でのプラグインは以下の様なものがありますが、

Google Search ConsoleのPage Speed Insightsの結果のLINKから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」を入れてプラグインの検索

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

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

設定

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

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

EWWW Image Optimizerの設定
EWWW Image Optimizerの設定

Web Pタブを開きます。

Web Pタブ
Web Pタブ

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

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

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

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

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

SublineText3
SublineText3で編集

.htaccessを編集

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

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

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

エックスサーバーの例
エックスサーバーの例

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

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

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

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

「.htaccess」を編集

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

更新
更新

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

グリーンに変わっています
グリーンに変わっています

これで設定は完了です。

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

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

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

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

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

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

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

Web Pのみにチェック
Web Pのみにチェック

確認表示に応えます。

確認表示
確認表示

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

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

進捗状況

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

最適化完了

最適化完了
最適化完了

最適化が終わったら

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

右端の画像最適化部分
右端の画像最適化部分

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

右端の画像最適化部分のみ切り出し
右端の画像最適化部分のみ切り出し

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

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

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

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

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

Network」表示。

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

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

Network」表示

開いた時、何もデータがない
開いた時、何もデータがない

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

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

Search Consoleで確認

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

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

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

Search Consoleで確認

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

モバイル

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

パソコンは

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

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

まとめ

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

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

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

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

考慮事項

一つだけ、付け加えておきます。
それは、外部リソースに起因する点数ダウン※は、どうしようもない。ということです。

.アドセンスAnalyticsFacebookTwitterなど※※の外部が読み込まれている場合。
※※.自サイトの情報以外、広告やSNSなどの情報も含みます。
(理由は、自身でコントロールできないからです。)

設定注意事項


Lasy Load
Lazy Load(遅延読み込み)は有効にしない(WordPress 5.5 から標準サポート)
Lazy Load(遅延読み込み)は有効にしない(WordPress 5.5 から標準サポート)

WordPress 5.5 から標準で Lasy Load がサポートされる様になったため、
プラグインで機能する Lasy Load の設定は ✅ を付けないこと
これは何も、「EWWW Image Optimizer」に限ったことでなく、

Lazy Load 機能を備えたプラグインはこれらの機能は指定しないこと。
(重複するとコンフリクト・干渉してしまい
 不具合を起こす可能性があるので、✅を付けない方が良い)

Lasy Load が関連するプラグイン(私が把握している範囲)

  • a3 Lazy Load
  • Image optimization & Lazy Load by Optimole
  • Jetpack
  • lazy-load
  • SG Optimizer
  • Unveil Lazy Load

コメント

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