ページの表示最適化

問い合わせフォームや記事投稿等の画像、様々なプラグインによってサイトのソースコードはもはやどうなっているのかわからない。特に何もしていないので問い合わせフォームのCSSなどをすべてのページ読み込むなど、非効率なローディングが行われていた。画像にしても、pngの形式であり、ファイルサイズの大きい画像も多数存在した。

画像に関しては、EWWW Image Optimizerというプラグインで圧縮、効率化をした。プラグインをインストール、有効化後、コードが生成されるため、サーバ内の「.htaccess」にコードを追加する。

https://ewww.io/

コードの最適化についてはAutoptimizeというプラグインを利用した。

Autoptimize – WordPress plugin | WordPress.org

インストール、有効化後にJavaScriptとCSSの最適化にチェックを入れて、設定の保存をした。

PageSpeed Insightsを利用して、作成しているWebページの表示速度等を測定し、スコア化できる。

https://developers.google.com/speed/pagespeed/insights/?hl=ja

デスクトップ版の表示に関しては100ポイント中98ポイントであったので、現状には満足しているが、モバイル版だと50ポイント程のスコアしか出ない。さらに改良するために、不要なJavaScriptの特定、削除などを行い、スコアアップのさらなる目標ができた。