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

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




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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

90点とかには中々、なりませんのでご注意ください。今の所、モバイル60点で満足しております(とりあえず及第点)。

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

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

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

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



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

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

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

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

a3 Lazy Loadプラグインの説明

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

結論書くと、このa3 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%くらいになっているので、グーグルもモバイル速度にはかなり敏感なのです。そういう背景があります。

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

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

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

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

最後に、全然関係無いですけど、スマホやiPadの充電に便利な大容量のモバイルバッテリーをご紹介します。

緊急用、災害用のバッテリーとして非常に重宝してます。iPhone7も2年くらい使ってると毎日充電しなくてはならず、コンセントの争奪戦でイライラしてましたが、これを買ったら家庭も平和になりました。

お手頃価格でいいものが多いAnker社製です。

iphoneの方は、ライトニングケーブルもAnkerで揃いますのでまたどうぞ。カラーバリエーションも豊富。

こちらも人気

SEOの基本を理解しよう。読者第一主義がブログ成功の鍵です。解説します。

【ブログ初心者向け】自分語りはウザい!読まれない!SEOにも悪影響です。タイトル、見出しの書き方も解説。

2019年3月23日
UQの Speed Wi-Fi NEXT W05が快適だった話

YouTubeのアップロード時間が異常に長い!通信速度の速いモバイルルーターはSpeed Wi-Fi NEXT W 05がおすすめ

2018年12月11日
フリーランスエンジニア現在、最高の働き方で羨ましいです。35歳以上なら普通に転職活動しましょうね。

【高収入】フリーランスエンジニアが正直、うらやましい。若い人は一度は目指してみるべき。

2018年12月5日
まだ自己犠牲で仕事してるの?体調崩しますよ?

【仕事しんどい】自分を犠牲にしないと業務が回らない会社はヤバイので転職すべきです。

2018年11月6日
転職支援サービスのミイダスのトップページ

適正年収はどれくらい?ミイダス【MIIDAS】実際に使ってみた感想、レビュー。特徴まとめ。秒で試してみるべき理由。

2018年9月18日
仕事を辞めたい会社員

朗報:転職は無理ゲーじゃなかった!37歳でも転職ってできることが判明。30代後半でも内定したテッパンの転職方法。

2018年8月31日
MacBook Proのキーボードを買ってみたダリーウメモ

絶対必要!MacBook Proのキーボードカバー(US配列)を買って実際使ってみた感想。

2018年8月16日

スポンサーリンク




スポンサーリンク






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

ABOUTこの記事をかいた人

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