この記事にはプロモーションが含まれています。

PageSpeedのスマホスコアを約50点アップするためにしたこと

2024-06-092024-06-12

ケケンタ

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

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

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

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

この記事で分かること

PageSpeed Insightsとは何か？
PageSpeed Insightsでスマホのスコアを上げるためにしたこと（※一部作業はSWELLでのみ対応）

ケケンタ

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

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

＼Web制作を仕事にしたいなら／

こちらの記事で

Web制作コース独学プラン

についてご紹介しています。

Web制作を10万円以下で学べるオンライン型プログラミングスクール｜忍者CODE

まずは無料相談してみる >>

￣￣￣

「仕事が忙しい」、「すぐに欲しい商品がある」という方、必見のサービス

　Amazon Prime　

by Amazon

日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる

最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る　
※ご注文の時間帯やお住まいの地域によります。

Amazonプライムの無料体験は「何度でも」利用可能

Amazonプライムの無料体験を何度も利用する方法

Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
会員の自動更新を解除しておく＝期限が来たら自動解約
１～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される

商品をカートに入れ、カート画面に行ったときに「無料体験の案内」が表示されていれば
1ヶ月間の無料体験を受け取ることが可能です。

ケケンタ

僕自身、過去に少なくとも３回は無料体験を利用しています。

※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。

Amazonで買い物をする　>>

PageSpeed Insightsとは？

PageSpeed Insightsとは？

PageSpeed Insightsとは、簡単に言うとそのサイトの「表示速度」、「SEO対策」、「ファイルの読み込み状況」などを評価し、スコア化してくれるGoogle公式のサイト評価サービスです。

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

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

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

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

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

ケケンタ

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

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

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

PageSpeed Insightsのスコアアップのために行ったこと

使用していないJavaScriptの削減
特定CSSの遅延読み込み
自作ファイルを必要なページでのみ読み込ませる
全アイキャッチ画像を一度tinypngで圧縮してからアップロードし直し

ケケンタ

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

【その１】使用していない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 );