WordPress│サイトの高速化（コアウェブバイタル）に関する施策

2021年5月のアップデートでCWV（コアウェブバイタル）が検索順位に影響を受けるようになります。
※Web Vitals（ウェブ バイタル）とも呼ばれています。

Google for Developers

Timing for bringing page experience to Google Search  |  Google Search Central Blog  |  Google for D…

コアウェブバイタルでは3つの指標が基準になります。

コアウェブバイタルの合格基準に満たしているか？

それはGoogleのPageSpeed Insightsで計測するとわかります。

青いリボンが付いた所がコアウェブバイタルの審査対象になります

今回は使用しているWordPressテーマ｢SWELL｣にて3つの指標を改善していこうと思います。

著者

motoki

WEB制作をしているデジタルノマド
WordPressのカスタマイズが好きで、色々と自作しています。

WordPressのカスタマイズに困ったらご相談ください！

WordPressテーマSWELL特化のホー...

カスタマイズの依頼・相談

CLS（Cumulative Layout Shift）の改善

Cumulative Layout Shift はビューポート内の視覚要素がどのくらい移動しているかを測定する指標です。

PageSpeed Insights

CLS（Cumulative Layout Shift）は描画時のレイアウトのずれにあたります。

PageSpeed Insightsの診断結果で下記の項目が改善内容に当たります。

レイアウトが大きく変わらないようにするの解決方法は単純で、画像にwidthとheightを記載してあげればおおよそ改善します。

改善方法としては下記の3つの手段を用いて改善します。

①HTML編集で追記する

記事内のブロックをHTMLモードにして、画像の記述の中に画像のサイズをheight="100" width="100"記載しましょう。

<img src="画像URL" class="avatar avatar-100 photo" height="100" width="100" loading="lazy" alt="すいみんのアバター" >

画像のサイズの調べ方はChromeで右クリックから検証を押すと調べることができます。

②テーマのPHPをカスタマイズしてwidthとheightを記述する

FTPを使用してテーマのPHPにwidthとheightを記載してあげます。

SWELLでいうと下記の項目が、｢画像要素で width と height が明示的に指定されていない｣と診断されます。

メインビジュアルの場合

トップページのメインビジュアル画像がサイズ指定されていないことが原因です｡
画像にwidthとheightを記述してあげでば解決します｡

メインビジュアルに関するコードはparts>top>main_visual-single.phpにあります｡
widthとheightの記述を足してあげましょう｡

<img src="<?=esc_url( $pc_img_s )?>" data-src="<?=esc_attr( $pc_img )?>" alt="<?=esc_attr( $img_alt )?>" class="p-mainVisual__img lazyload">

デフォルトの画像サイズが1817px×550pxでしたが､ほぼ同比率の1200px×360pxにて記述してみました｡
（※わかりやすいサイズかつ少し画像を小さくしたかったので）

<img src="<?= esc_url($pc_img_s) ?>" data-src="<?= esc_attr($pc_img) ?>" alt="<?= esc_attr($img_alt) ?>" class="p-mainVisual__img lazyload" width="1200" height="360">

SP（スマホ）の場合は上の記述を追加。

<source media="(max-width: 959px)" srcset="<?=esc_attr( $sp_img_s )?>" data-srcset="<?=esc_attr( $sp_img )?>" width="1080" height="905">

あとは同じ階層構造で子テーマ（swell_child）にデータをアップするだけです｡

キャッシュをクリア（コンテンツ）してCSSが追記されるのを確認してからPSIを再度計測してみましょう｡

画像にすべてサイズ指定しているのにCumulative Layout Shiftが0にならない場合の原因はアドセンス広告が主です｡
消すか､下の方に下げるなどして､レイアウトの崩れを抑えましょう｡

プロフィールアイコンの場合

同様にプロフィールアイコンであれば、

/wp-content/themes/swell/parts/profile_box.phpを開いて

<img src="<?= PLACEHOLDER ?>" data-src="<?= esc_url($user_icon) ?>" alt="" class="p-profileBox__iconImg lazyload" width="100" height="100">

というようにwidthとheightを記述して子テーマにアップします。

③JavaScriptでwidthとheightを記述する

どうしても子テーマに反映できないデータもあります。

その場合は親テーマを編集するわけにはいきませんので、JavaScriptでサイズを追記してあげます。

ロゴにwidthとheightを記述する

.p-termHead__thumbImgは追加したいクラス名です。今回はSWELLのロゴを対象としてみました。

add_action( 'wp_head', function () { ?>
<script>
document.addEventListener('DOMContentLoaded', () => {
	try {
	  const logo = document.querySelector('.c-headLogo__img');
	  logo.setAttribute("width", "176");
	  logo.setAttribute("height", "40");
	}catch (e) {}
});
</script>
<?php } );

コンテンツのキャッシュクリアをしてから変更されているか確認しましょう。

ふきだしにwidthとheightを記述する

複数、同じものがある場合は下記のような記述をします。

add_action( 'wp_head', function () { ?>
<script>
document.addEventListener('DOMContentLoaded', () => {
		try {
	const elems = document.querySelectorAll('.kjk_balloon img');
		for (let i = 0; i < elems.length; i++) {
			elems[i].setAttribute("width", "68");
			elems[i].setAttribute("height", "68");
		}
	}catch (e) {}
});
</script>
<?php } );				

LCP（Largest Contentful Paint）の改善

最大コンテンツの描画は、最も大きなテキストまたは画像が描画されるまでにかかった時間です。

PageSpeed Insights

LCP（Largest Contentful Paint）はブラウザの表示範囲内で一番大きいコンテンツが表示されるまでの時間を指します。

PageSpeed Insightsの診断結果で下記の項目が改善内容に当たります。

こちらもシンプルに該当する最大コンテンツの描画を軽くしてあげるとスコアが改善できます。

改善方法としては下記の3つの手段を用いて改善します。

①画像を軽量化する

手動で画像を軽量化するのであれば、Compressor.ioなどのサービスで軽量化をして画像を差し替えて上げましょう。

あわせて読みたい

Compressor.io – optimize and compress JPEG photos and PNG images Optimize and compress your jpeg and png images online. Compressor is a lossy and lossless photo compression tool.

画像を差し替えた後はブラウザキャッシュをクリアしないと反映が確認できません。

まとめて画像を軽量化したい場合は

画像が一番サイトを重くしている要素なので、改善しましょう！

②モバイルとPCで表示を切り分ける

トップページのヘッダー画像などサイズが大きい画像は、モバイル版では過度に大きいコンテンツになってしまいます。

ですので、PCとモバイルで画像を切り替えをしたほうが良いです。

たとえばSWELLの配置したフッター画像は下記の様に対応しました。

<?php if (IS_MOBILE) : ?>
    <!-- スマホ-->
    <picture class="footer">
        <img src="https:/sample.com/wp-content/uploads/2021/02/footer_sp.png" width="600" height="178">
    </picture>
<?php else : ?>
    <!-- PC-->
    <picture class="footer">
        <img src="https://sample.com/wp-content/uploads/2021/02/footer.png" width="1920" height="568">
    </picture>
<?php endif; ?>

IS_MOBILEなど条件の記述はテーマによって違います。

FID（First Input Delay）の改善

First Contentful Paint は、テキストまたは画像が初めてペイントされるまでにかかった時間です。

PageSpeed Insights

LCP（Largest Contentful Paint）はユーザーの反応にどのくらい速く対応できるかまでの時間を指します。

PageSpeed Insightsの診断結果で下記の項目が改善内容に当たります。

全部要素が関連しています…

上記の要素だと情報が曖昧なので

GTmetrixという別の計測サイトで計測すると改善要素が調べやすいです。

改善方法としては下記の3つの手段を用いて改善します。

FID（First Input Delay）※ユーザーの反応にどのくらい速く対応できるか

Gmetrixをみて、ひたすら削れる要素を探して潰していきます。

①高速化に適したテーマにする

個人的なおすすめはSWELLです。

いままでカスタマイズや高速化診断などで下記のテーマも触ってきましたが、SWELLが高速化しやすかったです。

②混雑していない高速サーバーにする

どのサーバーが速いかなんて、環境や状態によってことなるので言及しません。

ですがPageSpeed Insightsでサーバーの初期応答時間を短縮すると診断された場合は検討するべきでしょう。

サーバーは下記の条件を満たしたものが良いです。

モバイルスコア100のサイトをみたことがありますが、WEXALを利用した高速サーバーでしたので、最高得点を目指すなら良いサーバーに越したことはないです！

③高速化対策のプラグインを使用する

ネットに知見がたくさんあるので、詳細は省きます。

個人的にはWP RocketとShortPixel Image Optimizerの有料プラグインが優秀です。

プラグインの数が増えると別の意味で管理が面倒になるので少ないに越したことがないです。
※できればテーマ側で機能が搭載されていると助かります

④GTmetrixで調べた要素をひたすら削れるか調べて潰していく。

後は個別で要素を削る作業になります。

Code Snippetsというプラグインを使うと安全にfunctions.phpにhtml、css、jacascript、phpを管理できるのでおすすめです。

ここから先は個人的な高速化でやったことのあるメモ書きです。

Webフォントの読み込みを減らす

Noto Sans JPなどは大量のWEBフォントを読み込まれます。

SWELLであれば、にしてあげるとシステムフォントが表示され、読み込むデータ数が減らせます。

Noto Sans JPを軽量化して使用する

まず、サブセット化（文字量を減らしてNotoフォント）をダウンロード

子テーマ直下にfontsというフォルダを置いてFTPを使ってダウンロードしたデータを格納。

追加CSSに下記のCSSを追加

/*----------------------------------
Notoフォント軽量版
-----------------------------------*/
	@font-face {
		font-display: swap;
		font-family: 'Noto Sans JP';
		font-style: normal;
		font-weight: normal;
		src: url('https://www.cg-method.com/side-job/wp-content/themes/swell_child/fonts/NotoSans_Regular.woff2') format('woff2'),
		url('https://www.cg-method.com/side-job/wp-content/themes/swell_child/fonts/NotoSans_regular.woff') format('woff'),
		url('https://www.cg-method.com/side-job/wp-content/themes/swell_child/fonts/NotoSans_regular.otf') format('opentype');
	}

	@font-face {
		font-display: swap;
		font-family: 'Noto Sans JP';
		font-style: normal;
		font-weight: bold;
		src: url('https://www.cg-method.com/side-job/wp-content/themes/swell_child/fonts/NotoSans_Bold.woff2') format('woff2'),
		url('https://www.cg-method.com/side-job/wp-content/themes/swell_child/fonts/NotoSans_bold.woff') format('woff'),
		url('https://www.cg-method.com/side-job/wp-content/themes/swell_child/fonts/NotoSans_bold.otf') format('opentype');
	}

	body{
		font-weight:normal;
		letter-spacing: 0.02em;
		font-family: 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "游ゴシック", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	}

あとはSWELL側のフォント設定を変えるだけです。

カスタマイズ　>　サイト全体設定　>　基本デザイン　>　游ゴシック（※ここはNotoフォントにしない設定に！）

さらに高速化したい場合は親テーマ直下にあるheader.phpに下記のコードを追加して、子テーマに追加してあげてください。

事前にフォントが読み込まれるようになります。

<link rel="preload" as="font" href="https://blog-methods.com/swell/wp-content/themes/swell_child/fonts/NotoSans_Regular.woff2" crossorigin>
<link rel="preload" as="font" href="https://blog-methods.com/swell/themes/swell_child/fonts/NotoSans_Bold.woff2" crossorigin>

<meta name="viewport" content="width=device-width, viewport-fit=cover">の下辺りに追加してあげます。

ラーミア

ページが見つかりません。 | ラーミア

乗り換えサポートプラグインのFontAwesomeやStyle（css）を読み込まない

テーマを変更した時に乗り換えサポートプラグインを入れている場合は、テーマでFont Awesomeを切っていても読み込まれてしまいます。

SWELL

他テーマからSWELLへの「乗り換えサポートプラグイン」一覧 | WordPressテーマ SWELL テーマを乗り換える時、旧テーマの独自機能で文章の装飾などを使っていると 過去記事のデザインが一気に崩れてしまいます。 つまりテーマを途中で乗り換える場合、 過去記…

暫定的な対応ですが、functions.phpで読み込みを止めることが可能です。

SANGOの場合

function deregister_googlefonts() {
　　wp_deregister_style('sango-icon');
　　wp_deregister_style('sango-to-swell-style');
}
add_action('wp_enqueue_scripts', 'deregister_googlefonts', 9999);

AFFINGER5場合

function deregister_googlefonts() {
　　wp_deregister_style('af5-fa');
　　wp_deregister_style('st_svg');
}
add_action('wp_enqueue_scripts', 'deregister_googlefonts', 9999);

プラグインのload_files.phpから調べることができます

Font Awesomeのカスタマイズを変更する

WEBで見つけたカスタマイズはFont Awesomeを使っていることが多いです。

.sample:before {
font-family: 'Font Awesome 5 Free';
    content: '\f185';
}

SWELLなどテーマで予め用意されているアイコンフォントに差し替えてあげます。

SWELL

SWELLで使えるアイコンの一覧 | WordPressテーマ SWELL ここでは、SWELLでフォントファイルとして読み込んでいるアイコンを一覧で紹介しています。 SWELLで標準で使用できるアイコンフォントは、IcoMoonで作成しています。 Font …

JQueryの読み込み停止

JQueryを使っていないのに下記の様に様に読み込まれてしまっている場合

<script type="text/javascript" src="https://blog-methods.com/swell/wp-includes/js/jquery/jquery.min.js?ver=3.5.1" id="jquery-core-js"></script>

functions.phpでwp_deregister_script( 'jquery' );を追加するとWordPressのJQueryが読み込まれなくなります。

さらにトップページなど特定のページだけ読みたい場合はこんな感じで追加してあげます。

function setJquery() {
	wp_deregister_script( 'jquery' );

	if ( is_home() || is_front_page() ) {
		wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js', array(), '3.5.1');
	}
}
add_action('wp_enqueue_scripts', 'setJquery');

子テーマのstyle.cssを読み込ませない

追加CSSにしかCSSは追記しない場合は、function.phpに下記のコードを挿入すると子テーマのStyle.cssは読み込まなくなります。

※あまり重要じゃないですがメモです。

function my_deregister_styles() {
wp_deregister_style( 'child_style' );
}
add_action( 'wp_enqueue_scripts', 'my_deregister_styles', 100);

サイトの高速化（コアウェブバイタル）に関する施策まとめ

本記事では｢【WordPress】サイトの高速化（コアウェブバイタル）に関する施策まとめ｣について書きました。

結論をいうとPCとモバイルでグリーン、90点以上を取得するにはそれなりのお金と技術力が必要になります。

技術的なことは沼ですし収益と結果は比例しないので、高速化をするなら専門家にお任せすることをおすすめします。