どうも、現在ブログを350記事ほど書いてますダリーウメモです。
今回は、過去に何回も記事にしてますが、ワードプレスブログのページ読み込み、表示の高速化の方法の続きです。
プラグインはできるだけ少ないほうがいいので両方かぶって使わないように。
関連：ページスピード高速化作業、疲れたのでいったんやめます。
STORK（ストーク）のページスピードを高速化する方法を説明。スピード改善のためにやるべき事【2019最新版】
さらに追記：2019年、ぼくが使っているテーマ「SANGO」が非常に優秀でして、プラグインを入れずとも高速化できる設定がSANGOではできるようになってます。
ぼくの場合、SANGOの高速化機能とAutoptimizeの高速化機能を両方使ってます。かなり高速化に成功してます。
というわけでSANGOが初心者から玄人までめっちゃオススメです・・・。マジで文句のつけようがありません。
関連：2019年おすすめブログテーマはSANGO！WordPress（ワードプレス）でブログを始める方法とブログのメリットを解説。
ブログの表示速度計測にはグーグルが提供するページスピードインサイトを使うのはブロガーのみなさんは知ってると思いますが、そこでどうしてもぼくが解決できずにいた「オフスクリーン画像の遅延読み込み」の改善が解決したので記事にしたいと思います。
参考にしたのはこちらのブログ記事です。ありがとうございます。
今回もワードプレスでブログやってる人向けの記事です。
そして細かいプログラミングはちょっとわからないなという人向け。
前置きとして、グーグルのページスピードインサイトは年々、サイトの査定基準が厳しくなってきている印象。
細かいことに口出しするようになってきていると思います。
これも全て、グーグルはユーザーのことを1番に考えているからなんです。
少し前までは60点取れていたサイトがある日測ると40点なんてことが起こり得ます。
というわけで神経質になりすぎてもいけないのですが、ページの高速化には多少、気を使って行きましょう。
一つの有効な方法として、ぼくはキャッシュを強めに設定しています。
関連：【ブログページスピード高速化】ブラウザのキャッシュを活用する方法（マナブログより）
結論をいうと、今回紹介する方法を使ってモバイルの計測結果は43点から60点くらいになりました。
90点とかには中々、なりませんのでご注意ください。
今の所、モバイル60点で満足しております（とりあえず及第点）。
90点を目指すには外注に頼むとかプログラミングを勉強するとかが必要になってくると思います。
ぼくの場合、テーマはストークを使ってますがなぜかパソコン表示は90点と高得点を取れています。
関連：遅いと言われるワードプレステーマストーク（STORK）だけど2年使ってみた感想としてはやはりいい感じ。ページスピードも高速化できた！
「オフスクリーン画像の遅延読み込み」でブログの表示速度をアップさせる方法。Autoptimize導入でOK。
そりゃ、プログラミングができたら、サイトを爆速にすることなんて簡単だと思いますが…。
というわけで実はぼくは現在a3 Lazy Loadは削除しました・・・。記事書いててアレなんですが。
ぼくはプラグインの数を減らしたかったのでAutoptimizeのみにしてます。
ぶっちゃけ、AutoptimizeはCSSのインライン化やHTMLの最適化なんかもやってくれるので外せないプラグインです。
そもそも「オフスクリーン画像の遅延読み込み」って何なのか？要は「見えてないところは後から表示させろ」ってことです。ページスピードインサイトにヒントは書いてあっても、具体的な方法は書いてない…。
この画像をみてください。ページスピード計測、モバイル43点で焦ってた時のスクリーンショットです。
これを解決すれば6秒くらいは速くなりまっせ！と、書いてありますが、具体的な方法は、何も書いてないので、自分で調べるしかありません。
1番目の「次世代フォーマットでの画像配信」はJPEG2を導入しろとか無茶ぶり的な内容だったので今回はとりあえず、無視。
グーグルがここで言いたいのは「ページに表示されてない画像は後で読み込むように設定すれば最初に出てくるページが早めに出てくるからそういう風に設定してみるといいと思うよ！」ということです。
その際、オススメのプラグインとかも案内してくれればいいのですが、そこまではやってくれません笑。
で、実際a3 Lazy Loadプラグインを入れてみた結果（当時はこれでしたがAutoptimizeでOK）。
おおっ！「オフスクリーン画像の遅延読み込み」を導入しろ！という文言が改善策からなくなっているではないか！
ページスピード改善作業において、ここまでサクッとクリーンヒット的に改善できるのは割と珍しいのでぼくは喜んだ次第ですはい。
実験：a3 Lazy Load（画像遅延プラグイン）導入でページスピードインサイトの点数はどれくらい上がったのか？43点が60点になりました（モバイル）。
まずは導入前画像。
43点。死亡寸前です。流石にテンション下がり、何か対策しなくては・・・となる点数です。
a3 Lazy Load導入後の点数は60点に！
まあ60点あればギリギリオーケーでしょう。元々、弱小ブログですしね・・・。
でもグーグルのページスピード基準の改定によってはまた40点台に戻ったりするかもしれませんので油断できませんね。
定期的にチェックした方がいいと思います。
※計測はa3 lazy loadで行いましたが、おすすめはAutoptimizeです。
後日、遅いと言われるテーマのストークですが、ページスピードをモバイルで80点超えまで改善させることに成功しました。記事にもしております。
遅いと言われるワードプレステーマストーク（STORK）だけど2年使ってみた感想としてはやはりいい感じ。ページスピードも高速化できた！
まとめ：ページスピードインサイトで「オフスクリーン画像の遅延読み込み」と言われたらAutoptimizeを導入せよ。
神経質になりすぎるのもよくないですが、ワードプレスでブログ運営している人は、たまにページスピードのことも意識してみてください。
傾向としては、モバイル計測の方が点数が割と厳しめ、採点が辛口です。
というのもモバイル（すなわちスマホ）の場合、パソコンでネットするよりも、回線や機能面でシビアな環境に置かれているからです。
それなのに、現在、スマホでネットしている人が全体の80%くらいになっているので、グーグルもモバイル速度にはかなり敏感なのです。そういう背景があります。
というわけで「オフスクリーン画像の遅延読み込みって何！？意味わからん！」という人は参考にしてみてください。
ちなみにページスピードインサイトで「次世代フォーマットで画像の配信」もやりなさい、みたいな事を言ってきますが、プラグインで解決させようとしたところ、見事に死にました。下記記事参照。
悲しいお知らせです。画像がアップロードできなくなりました→解決した。。。
原因はWebP Expressというプラグインが大暴れしたことなんですが・・・。対処に苦労しました。
WebPとは「ウェッピー」と読みまして、グーグルが推奨する新しい画像フォーマットです。
結論、まだウェッピーはやめといた方がいいです。
Googleの言うことを全て鵜呑みにせず、とりあえず画像のピクセル数を小さくする、今回案内した画像の遅延などで対処でOK。
別記事でワードプレスのブログでプログラミングがわからなくてもできるページスピード改善の対策をまとめました。
また参考にしてみてください。
関連：STORK（ストーク）のページスピードを高速化する方法を説明。スピード改善のためにやるべき事【2019最新版】
【実体験】30代後半で転職を決めた理由。無理ゲーじゃないのでご安心を。 
【転職活動の前にやるべき事】＝ミイダスで自分の市場価値を無料で理解すること。 
【病む原因】自分を犠牲にしないと仕事が回らない会社で働くメリットは無し。活躍し過ぎても給料は上がりませんし、すぐできる退職方法も解説。 
【ブログ初心者向け】自分語りはウザい！読まれない！SEOにも悪影響です。タイトル、見出しの書き方も解説。 
【故障予防策】MacBook Proのキーボードカバー（US配列用）を買って実際使ってみた感想。 
YouTubeのアップロード時間が異常に長い！通信速度の速いモバイルルーターはSpeed Wi-Fi NEXT W 05がおすすめ 
【高収入】フリーランスエンジニアが正直、うらやましい。実は未経験でも20代なら派遣エンジニアとしてスタートできるので解説。
ダリー
にほんブログ村参加中〜クリックで応援お願いします↓
にほんブログ村
