【WordPress】ブログ画面表示の高速化（まとめ）

記事追加がほとんどできていないにも関わらず、GoogleのPageSpeed InsightsやGTmetrixのスコアが気になり、Wordpressのカスタマイズをしてみました。付け焼き刃のお手軽カスタマイズですが、個別投稿のページで90点以上とれることも出てきたので、一段落としてメモを残します。

① 遅延読込（画像、CSS、JS）
② サーバ設定（ブラウザキャッシュ）
③ プラグイン導入・整理

①遅延読込（画像、CSS、JavaScript）

WordPressでは、大量のパーツを組み合わせてページを表示します。大事なパーツを先に読込んで、追加パーツを「あとから追っかけ読込」とすることで表示の高速化が狙えます。（Lazy Load）

(1)画像

画像は、テキストと比べ容量が大きいので、遅延読込したい代表銘柄です。一般的なテーマで、Wordpress 5.5からWordpress本体でも遅延読込がサポートされています。以前から存在する多数のプラグインも健在で、多数の紹介記事が揃っています。

このブログでは、プラグイン Smush で画像の遅延読込を実現しています。　

WordPress.org 日本語

Smush – Lazy Load Images, Optimize & Compress Images

https://ja.wordpress.org/plugins/wp-smushit/

Compress images & optimize images with lazy load, WebP conversion, and resize detection to make your site load amazingly fast.

(2)CSS、JavaScript

画像と比べるとサイズは小さいですが、実は影響の大きなパーツとして、CSSやJavaScriptが挙げられます。（実際、今回のカスタマイズでスコアアップに一番影響があったのがこれです。）

WordPressでは、「テーマ」や「プラグイン」が、それぞれ大きなCSSを持っていることが多いです。
また、Google Adsense等のタグは、外部のJavaScriptを読込みます。主要コンテンツ描画が完了する前に、外部JavaScriptを読込むので、全体の表示が遅くなる、という訳ですね。

そのため、コアなCSS・JavaScript（それがないとレイアウトが大幅に崩れる等）を除き、基本的に遅延読込とすることで、優先的に主要コンテンツを完成させます。

下記サイトが非常にわかりやすいです。