モバイル表示の大幅改善～a3 Lazy Loadの導入とAutoptimizeの設定見直し

モバイル表示速度に重点を置いて

2019年3月のアクセス分析をしていると、3月14日以降に大きく検索エンジンからの流入が減少し、アクセスが20%以上落ちていることがわかりました。

そこで本ブログで採用しているエックスサーバーの新機能「Xアクセラレータ Ver.2」の導入をしてみましたが、Google Page Speed Insightsの評価は相変わらず低スコアでした。モバイルは30ポイント、パソコンは75ポイントです。

Google Page Speed Insightsの評価において、改善できる項目というものがあり、モバイル表示における優先順位の高い3つの項目は以下のとおりです。

具体的に何をすればいいのかは、これを見ただけでは素人の私にはわかりませんが、いろいろらべて見ると、使えそうなもプラグインが見つかりました。

オフスクリーン画像の遅延読み込みについて、Google Page Speed Insightsの詳細な説明を読むと以下のように書かれています。

オフスクリーンの非表示の画像は、クリティカルなリソースをすべて読み込んだ後に遅れて読み込むようにして、インタラクティブになるまでの時間を短縮することをご検討ください。

つまり、画面上には見えていない画像については、すべて読み込んでから表示せず、必要になったら表示するようにすればいいということでしょうか。本ブログでテーマとして使っているSimplicity2にはこの要求に対して合致する「Lazy Load」の機能が実装されています。