「オフスクリーン画像の遅延読み込み」を改善、導入する方法。a3 Lazy Loadプラグイン導入で解決しました!

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




どうも、現在ブログを280記事ほど書いてますダリーウメモです。
今回はこのブログで度々書いてますが、ブログのページ読み込みの高速化のお話の続きです。

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

要はとにかくウェブサイトのページは速い方がいいんですよ。

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

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

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

今回もワードプレスでブログやってる人向けの記事です。そしてプログラミングはちょっとわからないなという人向け。
前置きとして、年々、グーグルのページスピードインサイトは細かい改変があるというか、細かいことに口出しするようになってきていると思います。

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

関連:ページスピード高速化をねらって、キャッシュ効きすぎの状態にしてみました。

結論をいうと、今回紹介する方法を使ってモバイルの計測結果は43点から60点くらいになりました。90点とかにはなりませんのでご注意ください。今の所、モバイル60点で満足しております(とりあえず及第点)。

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


いきなり「オフスクリーン画像の遅延読み込み」を改善しろとグーグルに言われても、普通の人はわからないと思うのですが…ぼくはプログラミングできないので、とりあえずプラグインa3 Lazy Loadで解決させました。

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

そしてコミュニケーションが得意とかむちゃくちゃサイトスピードにこだわってるのだったら、外注に頼むとかもありだと思いますが、ぼくはコミュ力もお金も微妙なのでとりあえずできることをやってみました。

その方法はa3 Lazy Loadというプラグインを有効化して、上記のブログ記事に沿って調整するだけです。

a3 Lazy Loadプラグインの説明

なぜかおなじみのプラグインよく似た名前のLazy Loadでは「オフスクリーン画像の遅延読み込み」の解決には至りませんでした。

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

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

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

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

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

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

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

で、実際a3 Lazy Loadプラグインを入れてみた結果・・・。

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

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

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


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

まずは導入前画像。

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

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

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

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

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

でもグーグルのページスピード基準の改定によってはまた40点台に戻ったりするかもしれませんので油断できませんね。定期的にチェックした方がいいと思います。

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

ひらめき、電球

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

2019年2月10日

まとめ:ページスピードインサイトで「オフスクリーン画像の遅延読み込み」と言われたら、とりあえずa3 Lazy Loadプラグインを入れておこう!効果はかなり感じております。設定も簡単です。

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

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

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

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


スポンサーリンク




スポンサーリンク




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

30代からの転職関連記事!(画像)をクリック

発狂して叫んでしまう会社員

荒ブルース!!なギター弾き語りをお届け中!!

ダリッター!ブルースと情報発信で人生変えよう!フォロワー大募集中!!

ABOUTこの記事をかいた人

35歳から人生と稼ぎ方を見直しに入ったスロースタートな気絶系ブルースマン、ダリーです。大阪市在住。情弱オッサンからの脱却方法をご提案致します。ブルースと転職関連記事が多め。 当ブログは「自分の人生ってホント、面白くないよな〜…」と言う潜在的な悩みを抱えている人たちに向けて書いてます!!!  ネットを駆使して、情弱だったただの社畜オッサンが激ヤバになっていく過程をお届けします。みんなにもそうなってほしいですね〜。 ブログタイトル通り、ブルース好き。2018年10月からYouTubeも始めました。