PageSpeed Insightsのスコアを90に上げた方法【中上級編】| コアウェブバイタル対策

前回のあらすじ

2021-05-25 PageSpeed Insightsのスコアを90に上げた方法【基礎編】| コアウェブバイタル対策

PageSpeed Insightsで叩きだした9点という超低スコアから90点オーバーを叩きだしたスコアアップ対策の中から、プラグインを中心とした対策を紹介しています。

【Before】9点かよ！

【After】90点台！

ここではテーマ編集を中心とした、PageSpeed Insightsスコアアップ対策をお伝えします。

想定レベル：高め

WordPressテーマ「sango」とエックスサーバーでの対応例ですが、他のテーマでも応用できます。
WordPressのテーマを編集するので、WordPressやPHP、cssなどの知識が必要となることもあります。

実際に動作確認した上で掲載していますが、あくまで自己責任の上でご対応ください！

MEMO

特に記載がない場合、子テーマのfunctions.phpに記載しています。
対象テーマはsango 2.5.3
子テーマはporipu tears 1.27です。

コンテンツ

コンタクトフォームは使う時だけ
- コンタクトフォームを複数使っている場合は？
自動広告をフッターに
外部参照対応
- FontAwesomeを内部化
- Googleフォントを無効化
Autoptimizeのcss分割
- 除外CSSを追記
- autoptimizeのcssを</body>に引っ越し
テーマの見直し
- インストール直後はほどほどのスコア
- テーマの入れ替えもアリ？
サーバーを変えたらどうなるか？
- 別業者で試してみた
さいごに
- 対応のメリットはあるの？
- 対応は続く

目次へ

コンタクトフォームは使う時だけ

コンタクトフォーム（Contact Form 7）は便利な反面、専用のcss、jsを全ての画面で呼び出す仕様になっています。
スコアダウンの原因となるため対策します。

専用のcss、jsは、コンタクトフォームを使うページだけで呼び出すようにします。
使っている固定ページ名が「contact」の場合、こんな感じで記載します。

functions.php

add_action( 'wp', function() {
    if ( is_page( 'contact' ) ) return;
    add_filter( 'wpcf7_load_js', '__return_false' );
    add_filter( 'wpcf7_load_css', '__return_false' );
});

コンタクトフォームを複数使っている場合は？

contact、mailという固定ページの場合、こんな感じです。

functions.php

add_action( 'wp', function() {
    if ( is_page( array('contact', 'mail') ) ) return;
    add_filter( 'wpcf7_load_js', '__return_false' );
    add_filter( 'wpcf7_load_css', '__return_false' );
});

array(‘ページ名’, ‘ページ名2′,’ページ名3’)
という形で記述すればOKです。

自動広告をフッターに

スコアアップの難関の一つがAdSenseの自動広告。
PageSpeed InsightsもAdSenseも同じGoogleのサービスなのに、AdSenseがスコアに悪影響を与えているとはこれいかに。
Googleのサービス同士なんだから仲良くしてくれ！って感じです。

自動広告を遅延読み込みをさせればいいのですが、これがなかなかうまくいかない！
そんな時、神のようなサイトが見つかりました。

参考
AdSenseの広告を遅延表示させてスコア改善とページ表示スピードを高速化Qwerty.Work

この記載内容をいただきました。

対象ファイルはfooter.phpです。

注意

バージョンアップ時の対応が必要です！

footer.php

<?php go_top_btn(); //トップへ戻るボタン?>
<?php
// プレビューでは表示しない
if( !is_preview() ){
	if (is_single() && get_post_meta( $post->ID, 'disable_ads', true )) {
	}
	// 「広告を非表示にする」チェックボックスを入れてない場合、自動広告を出力
	else { 
?>
		<script type="text/javascript">
		(function(window, document) {
【Qwerty.Workさんの内容と同じなので、そちらを参考にしてください！】
		})(window, document);
		</script>
		<!--/ Adsense 遅延読み込み -->
<?php 
	};
};
?>

ついでにporipuの自動広告部分をコメントアウトしました。

functions.php

require_once get_stylesheet_directory() . '/library/functions/prp_cpt_items_widget.php'; // カスタム投稿タイプ:アイテム情報のウィジェットに関する.php

/*
 * 自動広告出力を無効にする
function poripu_insert_auto_ads() {
（略）
    add_action('wp_head', 'poripu_insert_auto_ads');
*/

/************************
function.phpへの追記は以下に
*************************/

外部参照対応

sangoで使っているFontAwesomeやGoogleフォントは外部参照。
これらもスコアダウンの原因となるので、対策します。

外部参照って何？

自分のドメイン以外のURLを呼び出す（参照）していることを外部参照と言います。
例えばGoogleフォントのcssは

HTML

<link rel='stylesheet' id='sng-googlefonts-css'  href='https://fonts.googleapis.com/css?family=Quicksand%3A500%2C700&#038;display=swap' type='text/css' media='all' />

とGoogleから呼び出しているため、速度遅延の原因になります。

FontAwesomeを内部化

FontAwesomeは内部参照にします。
FontAwesomeからファイル一式をダウンロードし、内部参照に修正します。
細かな手順については、以下をどうぞ！

2021-05-18 【sango】FontAwesomeのcssを軽量化！| コアウェブバイタル対策

Googleフォントを無効化

Googleフォントについては思い切って無効化しました。
無効化すると英字に丸みがなくなります。
ウイバレでは英字をあまり使っていないので、違いは感じませんでした。

functions.php

function dequeue_header_css() {
  wp_dequeue_style('sng-googlefonts');
}
add_action('wp_enqueue_scripts', 'dequeue_header_css', 9999);

Autoptimizeのcss分割

「使用していない CSS を削除してください」にautoptimizeのcssが出ることもあります。

あのー、必要なcssしか入れてないんですけどー

全てのcssファイルがautoptimizeに入ってて、headタグ内にあるのが問題なのでしょう。
となるとheadに入れておく必要のあるcssファイルは残し、その他は</body>に移動させちゃえばいいんだ！

除外CSSを追記

sangoで描画時に必要なcssは、この2つで十分かな？

wp-content/themes/sango-theme/style.css,
wp-content/themes/sango-theme/entry-option.css

ということで「設定」→「Autoptimize」にある「Autoptimize から CSS を除外」で上記2ファイルを定義します。

設定値

wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css, wp-content/themes/sango-theme/style.css, wp-content/themes/sango-theme/entry-option.css

さらに「除外された CSS ファイルと JS ファイルを最小化」にチェックを入れる。

その他オプション

これでheadに残すべきcssは定義完了。

autoptimizeのcssを</body>に引っ越し

次にfunctions.phpの書き換え。
「autoptimize_filter_css_replacetag」というフィルタがあるので、これを使います。

functions.php

function autoptimize_css_replace($target) {
    return array("</body>","before");
}
add_filter('autoptimize_filter_css_replacetag', 'autoptimize_css_replace');

ここまで設定後、Autoptimizeのキャッシュを削除してみましょう。
autoptimizeのcssが</body>に移動し、headには必要な2つのcssがキャッシュに乗っているはずです。

見事にスコアも上がったけど、今度はheadに残した2つのcssが「使用していない CSS を削除してください」に出てきやがる。
もう無視。