サイト高速化のためにブログで実施した施策を紹介

2021/11/7(日) 2024/3/20(水) きむおば

このブログではアフィリエイト・アドセンス広告を利用しています

当ブログでは、アドセンス・アフィリエイト広告を掲載しています。
消費者庁が発表しているルールに沿って記事を作成していますが、問題のある表現を見つけた際にはご連絡ください。

あなたのブログのPage Speed Insightsのスコアは何点ですか？

実は、このブログのモバイルのスコアがすこぶる悪いのを長い間放置していました。PCスコアは88点なのにモバイルスコアは46点みたいな状況だったのです。

Googleアドセンスや楽天広告ウィジットを貼り付けているブログだから、これ以上の表示スピード改善は無理だと諦めていたのですが、いくつか試してみたところ、PCスコア96点、モバイルスコア51点に改善しました。

ブログ高速化のためにした事をご紹介します。

目次（読みたいところへジャンプ！）

サイト高速化のための改善策のヒント

サイト高速化のためのヒントは、Page Speed Insightsのアドバイスに従うのが近道でした。
悪い部分を細かくチェックしてくれているからです。

このブログで指摘されていたのは次の6点でした。

適切なサイズの画像
次世代フォーマットでの画像の配信
画像要素で width と height が明示的に指定されていない
静的なアセットと効率的なキャッシュポリシーの配信
使用していない JavaScript の削減
レンダリングを妨げるリソースの除外

ページスピード改善の指摘の内容とその施策について、順に説明していきたいと思います。

ページスピードスコア改善につながった施策

適切なサイズの画像

プラグイン「EWWW Image Optimizer」を使い、圧縮されていない画像をまとめて圧縮してみました。管理メニューのメディア→一括最適化から行います。

一括最適化後に、再度Page Speed Insightsでチェックしてみると、テーマで使用している画像などがNG対象になっていたのです。

そこで、適切なサイズになっていない画像を1枚ずつ、サイズ調整後に圧縮をかけて再アップロードしていきました。画像圧縮を時短化するために次の方法を導入していますが、pngquant未使用の方はTinyPNGを利用すれば、オンラインで簡単に圧縮することができます。

＞＞＞pngquantとAutomatorでブログ画像を右クリックで自動化〜リサイズ／ウォーターマーク／圧縮〜

この対策で、スコアは微増しました。

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

次世代フォーマット画像も、EWWW Image Optimizerプラグインで対応することができます。

すでにプラグインを導入しているなら、次の手順でWebP対応が完了します。

①プラグイン設定で「WebP 変換」にチェックを入れる

②表示されたコードを.htaccessファイルへコピペする

③メディアの一括最適化メニューで最適化対象画像をチェック後、最適化を実行する

より詳しい手順が必要な方は、次の記事でプラグインのインストールから手順が紹介されているのでチェックしてみてください。

＞＞＞画像フォーマットWebPをEWWW Image Optimizerプラグインで設定する方法

画像をWebPに変換すると、PageSpeedInsightsスコアがかなり改善されました。試してみる価値があると思います。

画像要素で width と height が明示的に指定されていない

imgタグ内で画像の幅と高さが指定されていない部分があるなら、しらみつぶしに修正していきましょう。

ウィジットなら、widthとheightの記述を追加していきます。

テーマが設定するロゴ画像のサイズ指定が抜けていたため、PHPのgetimagesize関数の記述を追加しました。getimagesize関数を使うと、指定画像ファイルの幅と高さを取得することができます。

$imagesize = getimagesize($image_file);
 if ($imagesize) {
     $image_width = $imagesize[0];
     $image_height = $imagesize[1];
} ?>

<img src='<?php echo get_the_logo_image_url(); ?>' alt='<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>' width='<?php echo $image_width; ?>' height='<?php echo $image_height; ?>

画像のwidthとheight指定は徹底したほうがSEOの観点からも有利になりますので、面倒な作業ですがやってみる価値はあります。

静的なアセットと効率的なキャッシュポリシーの配信

エックスサーバーを利用しているため、サーバーの高速化設定だけでも簡単に対応できるのですが、キャッシュの保存期間はもっと長いほうがいいという指摘をされてしまいます。

PageSpeedInsightで指摘されたファイルのみ、.htaccessファイルを使ってキャッシュ期間をさらに伸ばしてみました。

# キャッシュ保存期間の延長
SetEnvIf Request_URI ".*" Ngx_Cache_NoCacheMode=off
SetEnvIf Request_URI ".*" Ngx_Cache_AllCacheMode
<FilesMatch "\.(css|js|jpg|jpeg|gif|png|svg|svgz|webp|ico|bmp|woff|woff2|ttf|otf)$">
Header set Cache-Control "max-age=1814400"

使用していない JavaScript の削減

不必要なJavaScriptやスタイルシートを読み込まないようにテーマのfunctions.phpファイルを修正していきました。

ホーム画面でしか使用していないスライダー関連のJavaScriptとCSSはホームでだけ読み込むようにし、記事でしか使用しないプラグインが使用するファイルはホームでは読み込まないようにしました。

if文とWordPress関数（is_home, is_page(), is_single, is_category(), is_tag()）を使えば対応できます。

/* 必要ファイル読み込み */
function add_my_scripts() {
    if(is_admin()) return;
	if ( is_home()) {
		wp_enqueue_style('owl-carousel-css', get_template_directory_uri() .'/css/owl.carousel.min.css', array(), '2.3.4');
		wp_enqueue_style('owl-carousel-default-css', get_template_directory_uri() .'/css/owl.theme.default.min.css', array(), '2.3.4');
	    wp_enqueue_script('owl-carousel-js', get_template_directory_uri() .'/js/owl.carousel.min.js', array());
	    //不要なファイルを読み込まない
	    wp_dequeue_style( 'wpal' );
	    wp_dequeue_style( 'wp-ulike' );
	    wp_dequeue_style( 'wp-ulike-custom' );
	    wp_dequeue_style( 'yyi_rinker_stylesheet' );
	    wp_dequeue_script( 'wp_ulike' );
	    wp_dequeue_script( 'codoc-injector-js' );
//	    wp_dequeue_script( 'yyi_rinker_event_tracking_script' ); // なぜかスライダー非表示になるため読み込むしかない
	}elseif( is_page('contact')){
	    wp_enqueue_script('classie-js', get_template_directory_uri() .'/js/classie.js', array(), '1.1.2');
	    wp_enqueue_script('recaptcha', 'https://www.google.com/recaptcha/api.js?render=XXX', array());
	    wp_enqueue_script('recaptcha', 'https://www.google.com/recaptcha/api.js', array());
	}
}
add_action('wp_enqueue_scripts', 'add_my_scripts');

お問い合わせプラグインContact Form7で使用するCSSファイルが全ページで読み込まれるため、お問い合わせページ以外では読み込まないように、お客様のサイトにコードを追加しています。

＞＞＞Contact Form 7プラグインのCSS読み込みを停止する方法

不要な読み込みファイルを探す方法は、ページのソースを表示から地味に一つずつチェックしていくのが確実かなと思っています。