2021年06月09日 HPを更新しました!

ワードプレステーマVer.5.5から画像遅延処理があるのご存知?

ワードプレス

これで余計なプラグインも不要!
ワードプレスのVer.5.5から画像遅延処理も追加されています。

どうもー。
connieです。

意外と知らない事実。
ワードプレスのVer.5.5以降からは画像の遅延処理が搭載されています。

今まではプラグインなどで

画像遅延処理を行わなければ「ページ表示速度にも影響がある」

という事で、皆さん必死にプラグインを探しては検証をしていたと思います。

実際に僕もプラグインで遅延処理などを施していました。
今ではテーマ側で設定も出来るようになってきています。

それでもやはり、不要なプラグインの追加は避けたいものですよね。

そもそも画像遅延処理とは?

そもそもワードプレスでブログを書き始めた人なんかは「画像遅延処理ってなんのことですか?」と
頭の中がチンプンカンプンになっていると思います。

ホームページというのは、裏でhtmlという英数字や記号で書かれています。
いわゆるページソースと呼ばれ、それはプログラミングをされる方などが主に作業する物。

皆さんがいつも閲覧しているサイトやyahooなどの検索エンジンを表示するにも
htmlと言う物が使われています。
もちろんサイト上では何も表示されません。

そして、サイトを表示するには検索エンジンが

「ながいながーーーーーーーーい長文の英数字を上から順に読み込んでいきます。」

サイトの中のページ数や、1ページ辺りの表示件数が多くなればなるほど
ソースコードと呼ばれる物もどんどん追加され、その分読み込みにも時間がかかるようになります

テキストなどの文字だけだとサイト表示にはほとんど影響もありませんが
画像ファイルと言うのは本当に容量が様々で、大きい画像程容量が大きくなります。

皆さんがよく聞く、kb(キロバイト) MB(メガバイト)TB(テラバイト)などの単位のアレです。
テラバイトの画像なんか一枚差し込むだけでサーバーがエラーを返しそうですが・・・(;^ω^)

要するに、上から順番にhtmlを読み込んでいる途中で
画像などの大きなファイルは邪魔な訳です。
(どっか行ってください読み込みの邪魔です状態(-_-;))

この画像ファイルを読み込んでいる間に、サイト表示が止まってしまい
皆さんが昔よくみた

「Loadingマークのクルクルが画面いっぱいに表示」されたり
「真っ白な画面だけが数秒から、サイトが重ければ数分間表示される」

という自体になるわけです。
ユーザーエクスペリエンスにもダイレクトに繋がってきます。

お気に入りのサイトが、リニューアルでロード画面が長くなってしまったら
「もう見るのやめよう」となってしまいますよね。

なので

ページの中で一番重たいファイルでもある画像ファイルは
スクロール中に見える範囲だけで先に読み込みをしましょうね。
見えない部分は、スクロールをした時に遅れて表示させましょう。
だって、どうせ見えていない部分なんだから問題ないでしょう。

という意味です。
その処理を今まではワードプレス側では機能がありませんでしたが
バージョン5.5以降の物にアップデートすると、画像遅延処理が自動で適用されるように
なったわけなのです。(パチパチパチパチ👏)

なので干渉するプラグインなどは削除か無効化しておきましょう

さきほど言ったようにワードプレスの「2021年2月現在の最新バージョン」を入手している人は
画像遅延処理が自動適用されていますので安心してください。

サイトなどで下にどんどんスクロールすると、画像が遅れて表示される事がありますよね?
それが遅延処理をしている証拠です。

現在のワードプレスでもそれが適用されています。
なのでPage Speed Insightsでも画像遅延処理のプラグインを外しても警告は来ないはずです。

画像遅延処理のプラグインと重複した場合、テーマやプラグインによっては
サイト表示に不具合が出る場合もあります。

さらには、干渉をしてしまい逆にページ表示が遅くなってしまう事も十分ありえます。
なので、プラグインは無効化か削除しておきましょう。
画像遅延処理だけのプラグインであれば削除で問題無いかと思います。

ただし問題が

テーマによっては、テーマ側の画像遅延処理効果の方が早い可能性もあります。

プラグインをやみくもに削除する前に「必ずバックアップを取り」
テーマの遅延処理の方が優れているか、ワードプレスの遅延処理の方が優れているかを
Page Speed Insightsで何度も検証してから削除・無効化するようにしましょう。

※プラグインの追加・削除について当方では一切の責任は取れませんので自己責任でお願いします。

画像遅延処理適用は僕が運営しているサイト
ユニスタオンラインでもご確認頂けます