ウェブサイトの表示が、遅いと感じたときは、無償のグーグルのスピードテスト^※01を試してみるのは如何でしょうか？

ウェブサイトの表示遅延は、「致命的と言っていい程の問題です。」

目的は、ウェブサイトの利便性の向上「画像を次世代フォーマットに変換してサイトの表示スピードアップ」

ウェブページの問題

ウェブページ（ウェブサイト）の切り替えやページの表示の問題

「ウェブサイトの閲覧に3秒以上かかる場合、モバイルユーザの53%はサイトから離脱する」

とGoogleが発表しています。

モバイルユーザ（スマホでのインターネット利用者）を無視できないのは、もはやネットの主役がパソコンではなくスマホだからです。

（パソコン用に作られたサイトでは、パソコンに比べ非力なスマホでは遅くなったりします）

　　関連記事➡「目的を達成するためには、ホームページが利用されること」

役に立つホームページに必要なこと。検索で注目をされること

役に立つホームページに必要なことは検索で注目をされること。これは、ホームページが利用され・目的を達成するために必要なことと同義ですが、まず最初に検索で目立つこと、その為に必要なことはマーケティング視点であなたのお客様になってくれるかも知れな...

a-itc.info

表示速度を遅くする大きな原因としてページで使われている画像容量が大きい・枚数が多すぎることで読込が遅くなってしまうことは容易に想像ができると思います。

それなら、画像の枚数を減らすのも一つの手段ではあります。

✅ 文字を画像で表示

✅ 背景の装飾に大きな画像を使用

✅ 過剰な装飾のある画像は避ける

など、時間がかかりそうなコンテンツは画像以外の手段で表現できないか？を検討する。

しかし、文字よりも画像の方が伝えやすい。

ECサイト（物販サイト）の様に画像が有ってこそのサイトもあります。

物販サイトでなくても、画像は情報を伝える最も有効な手段の一つです。

画像（写真）の重要性について

その、画像を少なくすることは得策とは言えません。

「現在人間が注意力を持続できる時間は８秒しかない」

「ウェブサイトの目的を達成させるために大事になってくる視覚効果の一つとして、適切な画像選定があります」

「ウェブサイトにおいて写真などの視覚的要素は必要不可欠です。」

「欲しいコンテンツにきちんと誘導できるかのカギを握ると言ってもいいほど、画像はかなり影響力のあるものに値する」

例えば、Googleの検索エンジンから調べ物をしようとした時、その目的がテキスト情報だったとしても、結果として画像が出てきた時にはTOPの項目ではなくその画像情報に目が行きます！

「ウェブサイトには、当たり前のように画像や動画が使われていますが、それらの重要性を気にかけたことはありますか？」

「画像や動画なんて、あってもなくても同じじゃないの？」と思っているのなら、本来獲得できていた訪問者をこれからも失い続けるかもしれません。

ウェブサイトの目的

あらゆるウェブサイトの目的は集客です。

目的を達成するために

目的を達成するために必要なこと

探しやすく・使い易く・分かりやすく・見つけやすくするための、コンテンツの提供

　　関連記事➡「あなたのホームページGoogleに見つけてもらう・見つけてもらってる？」

Googleに見つけてもらう？あなたのホームページ

あなたのホームページは、Webの世界で有効か？　あなたのコンテンツページは、Googleで認識されて（見つけてもらって）いるか？　あなたのホームページが、Webの中に存在しているだけなら、ウェブの利用者（検索者）にとっては「存在していないの...

a-itc.info

　　関連記事➡「ウェブサイトの姿」

ホームページのあるべき姿スマホ対応は必須です。横浜スマホ最適　

あなた以上にあなたのサービスを知る人はいません。あなたのビジネスホームページのご支援を横浜からどの様に実現できるかを記載しています。ウェブサイトはお客様のために見やすく使いやすくお客様の目的が探しやすいものでなければなりません。その為に店舗...

a-itc.info

ウェブサイトの利便性の向上が必要となります。

コンテンツの条件

コンテンツの内容は商品やサービスを紹介することですが、

商品やサービスを説明することが主ではありません。

商品やサービス使うことで、得られるメリットやベネフィットを伝えるのです。

「ドリルが欲しいのではない」

　　関連記事➡「検索が絶大あなたのホームページにもたらす影響」

検索が絶大ホームページにもたらす影響ｰ横浜スマホ最適サイト

検索はすでに自然言語に近い形で行われています。地域での検索はスマホのＧＰＳが自動的に選びます。必要なのはあなたのホームページに検索にマッチした内容があることです。スマホ最適化ホームページ制作であなたのビジネスのキーワードをセールスライティン...

a-itc.info

　　関連記事➡「HP持っている人こっちコッチできるマーケティング」

HP自分でできるマーケティングCMS横浜スマホ最適サイト

あなたがビジネスオーナーなら、10分時間をください。あなたのホームページはあなたのビジネスの役に立っているでしょうか？「ホームページは名刺代わり」「ホームページを作ったときは期待したが今はあるだけの存在で放置」とは、よくお聞きすることです。...

a-itc.info

あなたの商品やサービスを使うことによって得られる良い未来を想像してもらうのです。

文書だけでは伝わらない、伝えにくいイメージを画像で伝えるのです。

ユーザビリティの提供

コンテンツを伝える上で重要なのが画像です。

華美で重厚な画像が必要な訳ではありません

（綺麗な画像や重厚な画像はそれだけでサイトの表示が重くなり利便性を損ないます）

適度な、利用者にとって使い勝手が良く・分かりやすい画像が必要です。

（綺麗な画像を見たくてウェブサイトに訪問している訳ではないのです）

綺麗な画像を表示するために処理が重くなってしまっては本末転倒です。

訪問者の目的に適うもの

訪問者の目的に適うもの表示速度を落とすことなく快適にウェブサイト内が閲覧できること

✅ 探しやすく

✅ 使い易く

✅ 分かりやすく

✅ 目的のものが見つけやすいサイト

「ユーザビリティ」の提供が必要です。

「注釈」※01. Page Speed Insights

 Google Search Consoleから Page Speed Insightsでウェブサイトのスピードを計測

PageSpeed Insights

developers.google.com

した際「改善できる項目」に「次世代フォーマットでの画像の配信」と表示されることがあります。

ここから、改善要素を把握できます。

Page Speed Insightsでは表示速度を改善するために「次世代フォーマットでの画像配信」を推奨しています。

次世代フォーマット

次世代の画像フォーマットの１つWebP^※02でサイト表示速度の改善

php7.4でWebP※02をサポートを開始

しかし、ウェブサイトの情報を処理する言語(php)をただ、バージョンアップして7.4にするだけでは意味がありません。

それまでに、アップしていた画像は、元のままの重たい画像です。

しかもWebP^※02に対応していないウェブ・ブラウザもありますからその為の対応も必要です。

対応の詳細は、別の記事に譲ります　➡

　「WebP^※02化の目的はユーザビリティの向上」

　関連記事➡「画像を次世代フォーマットに変換してサイトの表示スピードアップ ※Lazy Loadの扱いについても注意が必要です。（以下の記事に注意書きがあります。）」

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

次世代フォーマットでの画像配信：アップロードした画像を最適なフォーマットに自動変換するプラグイン目的はユーザビリティの向上。方法はサイトの応答時間を短縮させるに必要な画像の軽量化（最適化）すること手段は次世代フォーマットでの画像の配信が出来る（PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができる）プラグインを使うこと

イイネ.biz

2022.04.04

PHP 7.4 は現在公式にサポートされているPHPの最新バージョンです。
PHP 7.3 以前よりも高速な処理を実現するとともに、
安定した動作が可能となるよう、機能追加や最適化が施されています。
また、PHPのGD^※03モジュールにおいて、WebP^※02形式の画像に対応しました。
今後はWordPressなどのPHPプログラムからWebP^※02形式の画像を直接扱うことが可能^※04です。

「注釈」^※02　WebP（ウェッピー）とは、Googleが開発した、静止画の画像形式です。

　PNG(.png)やJPEG(.jpg)、GIF(.gif)などの従来の画像形式と比較し、画質はそのまま、ファイルサイズをより軽量化（データ容量の圧縮率が高いというメリットがあるため、高速化に寄与）できる特徴があります。

　WebP^※02形式の画像を使用することで、より高速なウェブサイトの運営が可能です。

オープンな画像フォーマット。ファイル拡張子(.webp)Googleが使用を推奨。

可逆圧縮ならPNG画像と比べてサイズが26％小さくなり、非可逆圧縮ならJPG画像より25〜34％小さくなり、JPG / PNG / GIF (アニメーション含む)に対しての代替となります。

「注釈」^※03  GD（画像処理・画像変換）Graphics Draw：グラフィックを描く

主要ブラウザのWebP※02対応状況 

（出典：https://caniuse.com/#search=WebP）

iOSは、2020/07/23現在13.6です。

SafariとChromeのiOS14.0版で、

WebP^※02対応(出典：https://caniuse.com/#search=WebP)とされていますが時期は未定です。

主要ブラウザのバージョンとWebP※02対応状況まとめ

日本で使用される主要ウェブ・ブラウザ

上記棒グラフを表形式に変換してまとめてみました。

日本のスマホシェア

スマホ対応が必要（スマホ対応は必須）

　　関連記事➡「スマホがつなぐネットに縁がなかった人たちをWebに」

スマホがつなぐネットに縁がなかった人たちをWebに横浜スマホ最適サイト

ウェブマーケテイング視点であなたのホームぺージを提案する横浜のＩＴコーデネータです。スマホの普及が今までパソコンに縁がなかった人たちをインターネットにつなぐ。あなたのビジネスのホームページは、その様なスマホ利用者に優しい・見やすく・操作しや...

a-itc.info

　　関連記事➡「統計から知るスマホ対応サイトの必要性」

統計から知るスマホ対応サイトの必要性 横浜スマホ最適

統計から多くのスマホ未対応ホームページにお知らせ。あなたのホームページをスマホ最適化を、単なるスマホ対応よりスマホ最適化があなたのホームページに必要です。ページのどこにいても、どのページにいてもタップでスグに電話できます。スマホからGoog...

a-itc.info

WebP※02に対応していないブラウザへの対応

「注釈」^※04 WebPに対応していないブラウザ（iPhoneなど）からのアクセスには、従来の画像形式（JPG / PNG / GIF）での表示切替サポートが必要となります。

　　関連記事➡「画像を次世代フォーマットに変換してサイトの表示スピードアップ」にどうぞ

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

次世代フォーマットでの画像配信：アップロードした画像を最適なフォーマットに自動変換するプラグイン目的はユーザビリティの向上。方法はサイトの応答時間を短縮させるに必要な画像の軽量化（最適化）すること手段は次世代フォーマットでの画像の配信が出来る（PNG や JPEG より圧縮性能が高く、ダウンロード時間やデータ使用量を抑えることができる）プラグインを使うこと

イイネ.biz

2022.04.04

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

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

方法は画像の軽量化

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

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

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

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

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

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

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

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

サイトの応答時間を遅くさせる理由（原因）はこれ！

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

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

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

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

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

パソコンでもつまり、

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

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

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

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

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

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

使うプラグインはこれ

EWWW Image Optimizer

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

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

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

インストール・有効化

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

プラグイン「新規追加」

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

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

設定

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

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

Web Pタブを開きます。

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

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

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

.htaccessを編集

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

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

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

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

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

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

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

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

これで設定は完了です。

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

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

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

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

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

確認表示に応えます。

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

進捗状況

最適化完了

最適化が終わったら

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

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

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

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

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

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

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

「Network」表示。

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

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

「Network」表示

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

Search Consoleで確認

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

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

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

Search Consoleで確認

モバイル

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

パソコンは

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

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

まとめ

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

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

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

考慮事項

設定注意事項