ケケンタ

SWELLにしたらPageSpeed Insightsのスコアがめっちゃ伸びた！（98点‼）

そう喜んだ直後、スマホの方のスコアが36点になっていることに気が付きました。

この時点ではスコアの合格ラインははっきり分かっていませんでしたが、このスコアが低すぎるのは一目瞭然だったため、改善すべくあれこれ奮闘しました。

その結果「スマホスコア：最高91点（10点ぐらい振れ幅があります）」に到達することができたため、今回はそこに至るまでの過程で取り組んだ内容を記事にまとめたいと思います。

ケケンタ

この記事でご紹介する方法でスマホスコアが40～50点近くもアップしました。
SWELL以外のテーマをお使いの方でも実践できる内容を多く含んでいるためぜひご参考にしていただけると嬉しいです。

最新のスコア（78～91点ぐらいの幅があります）

あわせて読みたい

PHPやWordPressを学ぶのにおすすめのプログラミングスクール【７選】 僕はこれまで独学でPHPを学習してきました。結論から言えば、それでもPHPを習得することはできました。 しかし、それに費やした累計学習期間は1年ほど。モチベーション…

PageSpeed Insightsとは？

今回言っている「スコア」は「パフォーマンス」の部分のことを指しており、

いわゆる合格点については各サイトによって記述されている内容が異なりますが、おおよそ以下のような点数が目安になるようです。

• スマホ……50～70点以上
• パソコン……80～90点以上

この目安によると、（……よらなかったとしても）僕の「スマホ：36点」があまりに低い評価だったことは間違いありません。

しかもGoogleによるとパソコンのスコアよりもスマホのスコアの方がSEO的に重要とのことです（モバイルファーストの考え）

ケケンタ

この事実を知ってからは出来る限り早くPageSpeed Insightsのスコアを上げなきゃ、と必死になりました……。

ただし注意点として、スコアはあくまで目安です。必ずしも高ければ高いほど良いというものではなく、サイトを訪れるユーザーの利便性を考慮することを第一とした上で最適化を行っていきましょう。

以下が僕がスコアアップのために行ったことの一覧です。

ケケンタ

ひとつずつ順番にご紹介していきます！

【その１】使用していないJavaScriptの削減

PageSpeed Insightsでは「使用していないJavaScriptの削減」という項目があり、その中には以下にご紹介する２パターンのファイルたちが含まれていました。
この章ではそのファイルたちを最適化したときの内容をご説明します。

Google reCAPTCHA関係のjsファイル

Google reCAPTCHAのjsファイルは不要なページ（お問い合わせページ以外すべて）でも読み込まれているらしく、しかもファイル容量が大きいため最優先で以下のソースコードをfunctions.phpに追加して最適化しました。

ケケンタ

これだけで点数が20～30点ほど上がりました……！
めちゃくちゃおすすめです。

functions.phpに追加したソースコード

/**
 * お問い合わせページでのみrecaptchaのjsファイルを読み込む
 */
function only_contact_load_files() {
    if ( ! is_page( 'contact' ) ) {
        wp_deregister_script( 'google-recaptcha' );
        wp_deregister_script( 'wpcf7-recaptcha'  );
    }
}
add_action( 'wp_enqueue_scripts', 'only_contact_load_files', 100 );

□ 参考にさせていただいたサイト：https://nowaki.work/recaptcha-2

GA4関係のjsファイル【※SWELL機能を利用した作業】

PageSpeedの「使用していないJavaScriptの削減」項目にjsファイルのフルパスが表示されています。

そのパスをコピーし

「SWELL設定」→「遅延読み込み機能」→「スクリプトの遅延読み込み」に以下の５項目を追加しました。

adsbygoogle.js?client=ca-pub-000000000000000000,
adsbygoogle.js,
https://www.googletagmanager.com/gtag/js?id=G-○○○○○○○○,
googletagmanager.com/gtag/js,
gtag(,

SWELL設定画面で遅延読み込みさせるjsファイルを列挙

Highlighing Code Block関係のjsは遅延読み込みさせると「行番号」や「コピー機能」が正常に動作しなくなったため、以下のjsファイルは上記リストから取り除いています。

hcb_script.js

【その２】特定CSSの遅延読み込み

【その１】と似たようなもので「使用していないCSSの削減」という項目がありました。

ケケンタ

僕のケースでは以下の１つのファイルが対象だったのですが、多くの記事で必要なCSSだったため、該当ページから除外するのではなく、遅延読み込みさせる方向で最適化をしました。

atom-one-dark-reasonable.min.css

こちらは僕の個人的なカスタマイズが関係しているCSSファイルのため、もしかしたら該当する方は少ないかもしれません。

プラグイン「Highlighing Code Block」をCDNで利用する際に使用している「atom-one-dark-reasonable.min.css」です。

どうやらこのCSSファイルがページのレンダリングを遅らせているようだったので、遅延読み込みすることにしました。

functions.phpに追加したソースコード

/**
 * 特定のCSSを非同期読み込みにする
 */
function my_preload_css($tag){
	$match = preg_match("/atom-one-dark-reasonable.min.css/", $tag); //非同期にするファイル名を記述
	if ($match) {
		$tag = preg_replace( '/stylesheet/' , 'preload', $tag );
		$tag = preg_replace( '/ />/' , ' as="style" onload="this.onload=null;this.rel='."'stylesheet'".'" />', $tag );
	}
    return $tag;
}
add_filter('style_loader_tag', 'my_preload_css');

CSSファイルの読み込みについては、以下の記事を参考にさせていただきました。本来であればこちらの記事のような方法が理想的のようです。
しかし、自分で追加したCSSの関係で表示崩れが解消できなかったため、今回は上記のソースコードに置き換えさせていただきました。

□ 参考にさせていただいたサイト：https://blogger-no-mori.com/eliminate-render-blocking-javascript-css

【その３】自作ファイルは必要なページでのみ読み込ませる

その他の個別対応として、自作ファイル（CSS）は実際に使用しているページでのみ読み込まれるようにきちんと条件分岐で制御しました。

functions.phpに追加したソースコード

/**
 * PHP学習サービスでのみ読み込む
 */
function ctrl_link_files() {
    // カテゴリーID
    global $post;
    $cat_num = $post->post_category[0];
    if( $cat_num == 51 ) {
        wp_enqueue_style( 'php-study-service', get_stylesheet_directory_uri() . '/css/php-study-service.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'ctrl_link_files', 100 );

【その４】全アイキャッチ画像を一度tinypngで圧縮してからアップロードし直し

tinypngは画像を無料で圧縮できるWebサービスです。

僕は画像圧縮対策としてプラグイン「EWWW Image Optimizer」を導入しています。

しかし、こちらによる圧縮だけでは不十分と感じ、いったんすべてのアイキャッチ画像をtinypngで圧縮してから再アップロードするという作業を行いました。

ケケンタ

この作業はとても大変でしたが、スコアが５～１０点ぐらい上がったため効果としては「ほどほど」という感じでした。

スコアを再確認するときの注意点

個人的にスコアを再確認するときに「これは注意した方がいいな」と思ったことがあるため、簡単にご紹介します。

ケケンタ

僕の場合、1回目の再測定では点数が変わらなかったのに、念のため2回目の測定を行ったところ正常に最新状態が反映されて、点数が30点ほど上がりました。
（キャッシュなどの関係で、反映にラグなどがありそうな様子でした）

まとめ

ケケンタ

以上の方法でスコアが40～50点近くも上がりました！

初めてPageSpeed Insightsでスコア計測をしたのがSWELLに変えたばかりの頃だったのですが、そのときにスマホの絶望的なスコアを見て非常に焦りを感じました。

しかし、SWELLではその他の対策がしっかり行われている分、上記のような対策を施すことで期待以上のスコア改善が見られました。

僕はGoogleアドセンスやGoogle reCAPTCHA、15個以上のプラグインを導入しており、その上でこのスコアを出せるのは非常にすごいことなのではないかと思います。

また、今回も多くのサイトの助けを得ながらどうにかこうにかスコア改善の具体的な方法を実践することができました。本当に感謝です。

ケケンタ

この記事でご紹介した方法でどなたかのスコアを救えたなら何よりです！

それでは最後までご覧いただきありがとうございました。

□ 今回参考にさせていただいた記事（再掲）
https://nowaki.work/recaptcha-2
https://blogger-no-mori.com/eliminate-render-blocking-javascript-css

SWELLのその他の記事はこちら

 SWELL記事一覧

今回ご紹介した内容のテーマ 

＼　19,800円・買い切り　／

今すぐSWELLを購入する　>>