サイト高速化！PageSpeed insightsの数値を改善する方法（SWELLテーマ）

2024年4月4日2024年4月10日

当サイトには広告が含まれています。

こんにちは、クートス・ラボWEB担当の菅井です。

今回はPageSpeed insightsでページ表示スピードの改善について、私が実際に行った施策をまとめていきたいと思います。

計測のための公式サイトはこちら

そもそも何点あればいいのか？

SEO検定1級テキストによると、モバイルスピードで50点以上あれば問題ないとのことですので、今回は50点以上を目指します。実際、100点を出そうと思ったら色々プラグインを利用しているサイトでは難しいと思いますので、現実的なところを目指したいと思います。

リンク

実際に行ったスピード改善のための施策

元々当サイトは30点くらいしか出てませんでした。
SWELLテーマを使用しているので、SWELLについている速度改善の設定も全てやった上での得点でした。

見てみると画像サイズとjsの読み込みで大きく引っかかっていたので、そこを重点的に修正することにしました。

こちらに紹介するものを実行するだけでもおそらく50点は取れるようになるかと思いますのでぜひ参考にしてみてください。

その１）次世代フォーマットでの画像配信

「次世代フォーマットでの画像配信」ができていなかったので今回はプラグイン「EWWW image optimizer」でWEB-P形式での画像配信を設定しました。

設定画面からWEB-Pを利用するように設定してから、メディアライブラリの下にある「一括変換」ボタンから、今すでにアップロード済みの画像を全てWeb-Pに変換しました。

その２）使用していないjavascriptの削減

削減といっても消したり動かなくすることではありません。読み込みの遅延設定さえできればクリアできます。
こちらはSWELL設定＞高速化＞遅延読み込み機能を利用していきます。

上記の画像はあくまで当サイトの設定ですので、皆さんのテスト結果で「使用していないjavascript」と出ているものを、このキーワード欄に追加してあげてください。

ただし、SWELLですとSwiperを遅延させるとメインビジュアルがバグったりしてたので、それは遅延させてません。表示を確認しながら設定してくださいね。

その３）google reCAPTCHAはフォームのみで実行させる

reCAPTCHAはデフォルトのままだとサイト全ページで実行されています。
これをお問い合わせフォームのページでのみ実行させるようにします。ただしトップページに入力フォームがあるサイトの場合はこの作戦は使えません。

functions.phpに以下を記述する

PHP

// reCAPTCHAを問い合わせページでのみ有効にする場合
function load_recaptcha_js() {
if ( ! is_page( 'contact' ) ) { //ココにお問合せページのスラッグ名
wp_deregister_script( 'google-recaptcha' );
}
}
add_action( 'wp_enqueue_scripts','load_recaptcha_js',100 );

もしくはフォーム記入ページが複数あるサイトなどには以下のコードを記述します。

複数ページに有効化させるコード

PHP

// reCAPTCHAを複数ページで有効化させる
function load_recaptcha_js() {
if ( ! is_page( array('スラッグ名1','スラッグ名2') ) ) { //ページのスラッグ名
wp_deregister_script( 'google-recaptcha' );
}
}
add_action( 'wp_enqueue_scripts','load_recaptcha_js',100 );