おおきに！まめもんです。
今回はサムネ画像を見ていただいたとおり
サイトの読み込み速度を改善するためにやったこと５選
を紹介していきます。
元々、スマホでのPageSpeed Insightsの点数が30～50前後をウロウロしていたのですが、これから紹介する5つをやってみたら＋37と大幅に改善されました！
読み込み速度が速いとSEOでも有利なので、ぜひやってください。
ちなみに…サイトの速度改善を行う方は、念のためデータのバックアップをとっておくことを強くおススメします。
目次
1.PageSpeed Insightsで速度改善できた項目
①レンタリングを妨げるリソースの除外
「レンタリング」というのは、めちゃくちゃざっくり言うと「サイト開いたときに見える部分を表示すること」。
自身のブログを開いて右クリック→「ページソースの表示」を見ていただけたらわかると思いますが、<body>前に膨大な情報（リソース）が埋め込まれていますよね。
そのリソースの一部がレンタリングを妨げているということです。
レンタリングを妨げるリソースを除外するためには？
- レンタリングをするのに重要度の高いリソース
→リソースのファイルサイズを減らす - レンタリングをするのに重要度の低いリソース
→レンタリング後にリソースを読み込む - リソースを同時に読み込む
この項目を改善するためには、プラグイン「Autoptimize」と「AsyncJavaScriput」を導入します。
②使用していないJavascriptの削減、第三者コードの影響を抑えてください
これも先ほどの「レンタリングを妨げるリソースの除外」と近いものですが、GoogleAdsenseやGoogleアナリティクス、その他のCDNのコードの影響でページの読み込み速度が遅くなっているというものです。
使用していないJavascriptの削減、第三者コードの影響を抑える方法は？
これらのコードも遅延させることで読み込み速度が改善します。
プラグイン「Flying Scripts by WP Speed Matters」を導入すれば、Javascriptの実行を遅延させることができます。
「使用していないJavascriptの削減」を改善すれば、「第三者コードの影響を抑えてください」の項目も改善されます。
③次世代フォーマットでの画像の配信
一般的な画像形式としてイラストはPNG形式、写真はJPEG形式が主流ですが、この両方の良いところを合わさったのが次世代フォーマット画像形式WebP（うぇっぴー）です。
次世代フォーマットでの画像に変換させる方法は？
プラグイン「EWWW Image Optimizer」を導入すると、今まで追加した画像をWebPに変換させることが可能です。
④静的なアセットと効率的なキャッシュポリシーの配信
アセットとは、画像やCSSのことをいいます。
キャッシュとは、ブラウザ上に読み込んだ情報を一時的に保存し、再訪した際に素早く読み込むためのシステムです。
この項目でエラーが出ているのは、おそらくキャッシュの設定を行っていないのが原因だと考えられます。
静的なアセットと効率的なキャッシュポリシーの配信方法は？
こちらはプラグインではなく、レンタルサーバー内の「.haccess」にてコードを挿入する必要があります。
ただし、この項目を改善してもパフォーマンスの点数が90点以上でなければエラーは出たままになるので、「キャッシュのTTL」に保存期間が設定されていればそのままにしておきましょう。
⑤使用していないCSSの削除
この項目の該当ソースをよく見ると、全く使用されていないCSSが紛れていることがあります。
これはテーマが原因なのかWordpressのアップデートが原因なのかわからないのですが、デフォルトのCSSと圧縮版のCSSの２種類のファイルが存在していることがあります。
使用していないCSSの削除方法とは？
PHPに以下のコードを追加することで、使用していないCSSファイル（wp-block-library-css）を削除することができます。
function dequeue_plugins_style() {
//プラグインIDを指定し解除する
wp_dequeue_style('wp-block-library');
}
add_action( 'wp_enqueue_scripts', 'dequeue_plugins_style', 9999);2.PageSpeed Insightsで速度改善できなかったこと
残りのCSSファイルを最適化できなかった…
よく見ると「レンタリングを妨げるリソースの除外」と「使用していないCSSの削除」の該当ファイルが全く一緒なんです。
おそらく
- 使用していないCSSのルールを削除
- 該当のCSSファイルの読み込みを非同期or遅延させる
すれば改善はするのですが、最適な改善方法がまだ見つかっていないという状態です…。
改善策が見つかり次第、紹介しますね。
PHPいじってプレビューしたらコードまみれになった…（実話）