「オフスクリーン画像の遅延読み込み」を導入してブログ表示スピードを改善する方法。実はAutoptimizeで解決する。

「オフスクリーン画像の遅延読み込み」を導入するプラグインを紹介します。

本ページには広告が含まれています。

どうも、現在ブログを350記事ほど書いてますダリーウメモです。

今回は、過去に何回も記事にしてますが、ワードプレスブログのページ読み込み、表示の高速化の方法の続きです。

 

MEMO
過去にa3 lazy loadというプラグインをおすすめしていましたが、Autoptimizeという有名なプラグインに画像の遅延読み込み機能が追加されてましたのでそちらを使えばOK。

プラグインはできるだけ少ないほうがいいので両方かぶって使わないように。

 

関連:ワードプレスプラグインは極力減らしましょう。28個も使ってた情弱より。

関連:ページスピード高速化作業、疲れたのでいったんやめます。

STORK(ストーク)のページスピードを高速化する方法を説明。スピード改善のためにやるべき事【2019最新版】

MEMO
目安として、モバイルで70点くらい取れれば合格だと思います。100点とか目指さなくてもOKです。40点以下でも収益めちゃめちゃ出してるブロガーもいますので。

さらに追記:2019年、ぼくが使っているテーマ「SANGO」が非常に優秀でして、プラグインを入れずとも高速化できる設定がSANGOではできるようになってます。

ぼくの場合、SANGOの高速化機能とAutoptimizeの高速化機能を両方使ってます。かなり高速化に成功してます。

というわけでSANGOが初心者から玄人までめっちゃオススメです・・・。マジで文句のつけようがありません。

関連:2019年おすすめブログテーマはSANGO!WordPress(ワードプレス)でブログを始める方法とブログのメリットを解説。

ブログの表示速度計測にはグーグルが提供するページスピードインサイトを使うのはブロガーのみなさんは知ってると思いますが、そこでどうしてもぼくが解決できずにいた「オフスクリーン画像の遅延読み込み」の改善が解決したので記事にしたいと思います。

参考にしたのはこちらのブログ記事です。ありがとうございます。

ブログの高速化にはLazy Loadが必須。当ブログのスピードアップはどこまで可能だったのか。

今回もワードプレスでブログやってる人向けの記事です。

そして細かいプログラミングはちょっとわからないなという人向け。

 

前置きとして、グーグルのページスピードインサイトは年々、サイトの査定基準が厳しくなってきている印象。

細かいことに口出しするようになってきていると思います。

これも全て、グーグルはユーザーのことを1番に考えているからなんです。

 

少し前までは60点取れていたサイトがある日測ると40点なんてことが起こり得ます。
というわけで神経質になりすぎてもいけないのですが、ページの高速化には多少、気を使って行きましょう。

一つの有効な方法として、ぼくはキャッシュを強めに設定しています。

関連:【ブログページスピード高速化】ブラウザのキャッシュを活用する方法(マナブログより)

結論をいうと、今回紹介する方法を使ってモバイルの計測結果は43点から60点くらいになりました。

90点とかには中々、なりませんのでご注意ください。

今の所、モバイル60点で満足しております(とりあえず及第点)。

90点を目指すには外注に頼むとかプログラミングを勉強するとかが必要になってくると思います。
ぼくの場合、テーマはストークを使ってますがなぜかパソコン表示は90点と高得点を取れています。

MEMO
追記:いろいろブログの表示スピード改善対策をした結果、ページスピードインサイトのモバイルでも80点以上取れるように後日なりました。

ページスピードインサイトでhttps://dallyumemo.comの結果。83点のスコアです(モバイル)。

関連:遅いと言われるワードプレステーマストーク(STORK)だけど2年使ってみた感想としてはやはりいい感じ。ページスピードも高速化できた!

「オフスクリーン画像の遅延読み込み」でブログの表示速度をアップさせる方法。Autoptimize導入でOK。

そりゃ、プログラミングができたら、サイトを爆速にすることなんて簡単だと思いますが…。

MEMO
冒頭にも書きましたが「画像の遅延読み込み」機能ってAutoptimizeというプラグインで解決します(2019年8月現在)。

というわけで実はぼくは現在a3 Lazy Loadは削除しました・・・。記事書いててアレなんですが。

 

ぼくはプラグインの数を減らしたかったのでAutoptimizeのみにしてます。

 

ぶっちゃけ、AutoptimizeはCSSのインライン化やHTMLの最適化なんかもやってくれるので外せないプラグインです。

そもそも「オフスクリーン画像の遅延読み込み」って何なのか?要は「見えてないところは後から表示させろ」ってことです。ページスピードインサイトにヒントは書いてあっても、具体的な方法は書いてない…。

この画像をみてください。ページスピード計測、モバイル43点で焦ってた時のスクリーンショットです。

オフスクリーン画像の遅延読み込みを実行しなさいというグーグルからのアドバイス画像

これを解決すれば6秒くらいは速くなりまっせ!と、書いてありますが、具体的な方法は、何も書いてないので、自分で調べるしかありません。

1番目の「次世代フォーマットでの画像配信」はJPEG2を導入しろとか無茶ぶり的な内容だったので今回はとりあえず、無視。

 

グーグルがここで言いたいのは「ページに表示されてない画像は後で読み込むように設定すれば最初に出てくるページが早めに出てくるからそういう風に設定してみるといいと思うよ!」ということです。

その際、オススメのプラグインとかも案内してくれればいいのですが、そこまではやってくれません笑。

で、実際a3 Lazy Loadプラグインを入れてみた結果(当時はこれでしたがAutoptimizeでOK)。

a3 Lazy Loadを導入するとグーグルからの警告が消えた!場面

おおっ!「オフスクリーン画像の遅延読み込み」を導入しろ!という文言が改善策からなくなっているではないか!

ページスピード改善作業において、ここまでサクッとクリーンヒット的に改善できるのは割と珍しいのでぼくは喜んだ次第ですはい。


実験:a3 Lazy Load(画像遅延プラグイン)導入でページスピードインサイトの点数はどれくらい上がったのか?43点が60点になりました(モバイル)。

まずは導入前画像。

オフスクリーン画像の遅延読み込みを導入する前のページスピードインサイトのモバイルの点数は43点でしたという図

43点。死亡寸前です。流石にテンション下がり、何か対策しなくては・・・となる点数です。

a3 Lazy Load導入後の点数は60点に!

オフスクリーン画像の遅延読み込み導入後の点数は60点になりましたの図。

まあ60点あればギリギリオーケーでしょう。元々、弱小ブログですしね・・・。

でもグーグルのページスピード基準の改定によってはまた40点台に戻ったりするかもしれませんので油断できませんね。

定期的にチェックした方がいいと思います。

※計測はa3 lazy loadで行いましたが、おすすめはAutoptimizeです。

後日、遅いと言われるテーマのストークですが、ページスピードをモバイルで80点超えまで改善させることに成功しました。記事にもしております。

ひらめき、電球 遅いと言われるワードプレステーマストーク(STORK)だけど2年使ってみた感想としてはやはりいい感じ。ページスピードも高速化できた!

まとめ:ページスピードインサイトで「オフスクリーン画像の遅延読み込み」と言われたらAutoptimizeを導入せよ。

神経質になりすぎるのもよくないですが、ワードプレスでブログ運営している人は、たまにページスピードのことも意識してみてください。
傾向としては、モバイル計測の方が点数が割と厳しめ、採点が辛口です。

 

というのもモバイル(すなわちスマホ)の場合、パソコンでネットするよりも、回線や機能面でシビアな環境に置かれているからです。

それなのに、現在、スマホでネットしている人が全体の80%くらいになっているので、グーグルもモバイル速度にはかなり敏感なのです。そういう背景があります。

というわけで「オフスクリーン画像の遅延読み込みって何!?意味わからん!」という人は参考にしてみてください。

 

ちなみにページスピードインサイトで「次世代フォーマットで画像の配信」もやりなさい、みたいな事を言ってきますが、プラグインで解決させようとしたところ、見事に死にました。下記記事参照。

悲しいお知らせです。画像がアップロードできなくなりました→解決した。。。

原因はWebP Expressというプラグインが大暴れしたことなんですが・・・。対処に苦労しました。

WebPとは「ウェッピー」と読みまして、グーグルが推奨する新しい画像フォーマットです。

 

結論、まだウェッピーはやめといた方がいいです。

 

Googleの言うことを全て鵜呑みにせず、とりあえず画像のピクセル数を小さくする、今回案内した画像の遅延などで対処でOK。

 

別記事でワードプレスのブログでプログラミングがわからなくてもできるページスピード改善の対策をまとめました。

また参考にしてみてください。

関連:STORK(ストーク)のページスピードを高速化する方法を説明。スピード改善のためにやるべき事【2019最新版】

ブログ運営関連記事はこちら

仕事を辞めたい会社員 【実体験】30代後半で転職を決めた理由。無理ゲーじゃないのでご安心を。 転職支援サービスのミイダスのトップページ 【転職活動の前にやるべき事】=ミイダスで自分の市場価値を無料で理解すること。 まだ自己犠牲で仕事してるの?体調崩しますよ? 【病む原因】自分を犠牲にしないと仕事が回らない会社で働くメリットは無し。活躍し過ぎても給料は上がりませんし、すぐできる退職方法も解説。 SEOの基本を理解しよう。読者第一主義がブログ成功の鍵です。解説します。 【ブログ初心者向け】自分語りはウザい!読まれない!SEOにも悪影響です。タイトル、見出しの書き方も解説。 MacBook Proのキーボードを買ってみたダリーウメモ 【故障予防策】MacBook Proのキーボードカバー(US配列用)を買って実際使ってみた感想。 UQの Speed Wi-Fi NEXT W05が快適だった話 YouTubeのアップロード時間が異常に長い!通信速度の速いモバイルルーターはSpeed Wi-Fi NEXT W 05がおすすめ フリーランスエンジニア現在、最高の働き方で羨ましいです。35歳以上なら普通に転職活動しましょうね。 【高収入】フリーランスエンジニアが正直、うらやましい。実は未経験でも20代なら派遣エンジニアとしてスタートできるので解説。