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

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

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

ホームシアター オーディオ ブログ 運営コスト レンタルサーバー エックスサーバー ドメイン 更新料 初期費用 Whois代行業務 WordPress テーマ Simplicity2 表示速度の改善 WP Hyper Response Autoptimize CSS・HTML・JavaScriptの圧縮 レスポンス改善 001 Prime Strategy Translate Accelerator ブラウザキャッシュの利用 .htaccessへの記述の追記 画像の最適化 EWWW Image Optimizer AMP対応 Accelerated Mobile Pages Pagespeed Insights SSL化 安全性 URL変更 Search Regex Xアクセラレータ Ver.1 Ver.2 a3 Lazy Laod Autoptimize モバイル表示 Google Page Speed Insights

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

ホームシアター オーディオ ブログ 運営コスト レンタルサーバー エックスサーバー ドメイン 更新料 初期費用 Whois代行業務 WordPress テーマ Simplicity2 表示速度の改善 WP Hyper Response Autoptimize CSS・HTML・JavaScriptの圧縮 レスポンス改善 001 Prime Strategy Translate Accelerator ブラウザキャッシュの利用 .htaccessへの記述の追記 画像の最適化 EWWW Image Optimizer AMP対応 Accelerated Mobile Pages Pagespeed Insights SSL化 安全性 URL変更 Search Regex Xアクセラレータ Ver.1 Ver.2 a3 Lazy Laod Autoptimize モバイル表示 Google Page Speed Insights

アクセス急減を受けて 2019年3月のアクセス分析をしていると、3月14日以降に大きく検索エンジンからの流入が減少し、アクセスが20%以上落ちていることがわかりました。 本ブログのアクセスのほとんどは検索エンジン経由によるも...



改善できる項目に対策を打ってみる

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

ホームシアター オーディオ ブログ 運営コスト レンタルサーバー エックスサーバー ドメイン 更新料 初期費用 Whois代行業務 WordPress テーマ Simplicity2 表示速度の改善 WP Hyper Response Autoptimize CSS・HTML・JavaScriptの圧縮 レスポンス改善 001 Prime Strategy Translate Accelerator ブラウザキャッシュの利用 .htaccessへの記述の追記 画像の最適化 EWWW Image Optimizer AMP対応 Accelerated Mobile Pages Pagespeed Insights SSL化 安全性 URL変更 Search Regex Xアクセラレータ Ver.1 Ver.2 a3 Lazy Laod Autoptimize モバイル表示 Google Page Speed Insights

  1. オフスクリーン画像の遅延読み込み
  2. レンダリングを妨げるリソースの除外
  3. 次世代フォーマットでの画像の配信

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

オフスクリーン画像の遅延読み込み

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

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

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



Sponsored Link

フォローしてね!

Sponsored Link