WordPressサイトの高速化ができたので実施した9個の対策をメモ

2021

07/01

Published

2021.07.01

どうも！デジタルマーケッターのジュンイチです。

GoogleのPageSpeed Insightsを使うと、Webサイトの読込速度がどれくらいか？という点数が出るんですが、かれこれ数年本気で対策をしていなかったら、Web Vitalsのようなユーザー体験の評価基準も取り入れられたりして、どんどんスコアが悪くなっていました。

そこで、新しいWordPressテーマを開発するのと同時に、どうせなら速いテーマを作ろうと思い、色々対策を進めていました。速さは正義。速ければデジタルマーケの成果も絶対上がる。それだけ大事だと信じてます。

今回の記事では、まずは備忘録がてらWordPressサイトの高速化（モバイル90～98点、パソコン99～100点）につながったと思う対策をメモしておこうと思います。

1. まずは現状把握（サイトのパフォーマンスの確認）
2. パフォーマンス改善のためにやってみた9つの施策と効果について
3. 9つの対策をやってみて
4. 効果の大きかった施策は結局どれ？
5. まとめ

まずは現状把握（サイトのパフォーマンスの確認）

サイトスピードの可視化、パフォーマンスを下げている問題点の発見のために使ったツール

この2つはめっちゃ使いました。

特にGoogle PageSpeed Insightsはこの１ヶ月半で死ぬほど使いまくりました。PageSpeed Insights（略してPSI）の点数をSEOでも特に基準になってくると思うので、このスコアをいかに上げられるか？っていうのを意識しました。

とにかくスコアを上げるには「現状を知る」ってのが大事ですよね。常にスコアを確認しながら改善施策を色々試してみました。

パフォーマンス改善のためにやってみた9つの施策と効果について

以下、思い出せる範囲でザーッとメモしていきたいと思います。

対策1.画像のwebp化

画像のwebp化（メジャーなEWWW Image Optimizerでもいいんだけど、今回は試しにWebP Converter for Media）を使ってみた。ちゃんとWebpに変換されるし良かった。PSIのエラー（次世代の画像形式にしてください的なやつ）も消える。EWWWのほうが日本語対応してるから、初心者の方には優しいかなぁ。WebP Converterは英語表記だから、英語アレルギーある人はちょっと「うっ」ってなるかも。

対策2.画像の圧縮

普段使っているTiny PNGもいいけど、今回は初めてSquooshも使ってみた。かなりサイズを減らせるしキレイなままだしめっちゃ良い。ただ、１枚ずつしか圧縮できないから複数を同時に圧縮するならTiny PNG。

でも１枚ずつきっちり圧縮するならSquoosh！Squooshはかなり圧縮して綺麗なままサイズ減らせるからめちゃくちゃおすすめ。

対策3.Googleフォントの読込みについて（結論は読み込まないほうが断然速い）

Googleフォントは美しいからぜひとも使いたい…。なんとしてでも使いたい！と思い、色々調べながら挑戦しました。…が、結論から言うと今の段階（2021年6月30日）では、どうしてもGoogleフォントを読み込むだけでも20点前後はPSIのスコアが下がる…！どう頑張っても下がる…！だから、本来は最速を目指すならGoogleフォントの使用はやめたほうがいい。

でも、どうしても使うなら、以下の方法が一番速い。

Googleフォントのサイトからフォントデータをダウンロードする（例：Noto Sans JP）
↓
太さは1種類にする（regular）
↓
落としたフォントファイルを「サブセットフォントメーカー」で使う文字（第一水準漢字＋ひらがな＋記号）だけに削る
↓
woffコンバーターを使ってwoff2に変換（woff2に変換）
↓
これをWordPressテーマファイルにimgフォルダなどを作ってその中にアップロード（名前はNotoSansJP-Regular.woff2に。）
↓
@font-faceを使ってフォントを読込み（font-display:swap;は必須）
↓

@font-face{
    font-display:swap;
    font-family:'Noto Sans JP';
    font-style:normal;
    font-weight:400;
    src:url('<?php bloginfo('template_directory'); ?>/fonts/NotoSansJP-Regular.woff2') format("woff2")
}

あとは、読み込んだフォントをfont-family:"Noto Sans JP",sans-serif;などと使ってあげればOK。

Googleフォントを使うとしても、この方法がPSIでも一番ましな読込方法だった。
（スピードを求めるなら、使わないのが一番。でもNoto Sans JPは美しいんだ…。本当なら使いたい…。）

対策4.アイコンWebフォントfontawesomeの読込について

Googleフォントと同様、fontawesomeの読込の最適化も結構大変だった。
↓

（　こういうアイコン。可愛いから使いたいんだけどサイト高速化の邪魔にはなる…。でも使いたい。）

とりあえず、今の僕の最適解としては、以下の方法がベストだった。

fontawesomeのデータを公式サイトからダウンロード
↓
DLしたフォルダの中のwebfontフォルダに入っているファイルから、

fa-brands-400.woff2
fa-regular-400.woff2
fa-solid-900.woff2

の３つのwoff2ファイルだけWordPressテーマのwebfontフォルダ（なければ作る）にアップロード
↓
同じくDLしたフォルダの中のcssフォルダに入っているファイルから、

all.min.css

をWordPressテーマのcssフォルダ（なければ作る）にアップロード
※ただしall.min.cssの最後あたりに、ttfとかwoffとか余計な読込み部分があったと思うのでそれは削除。

↓
あとはhead内でcssを読み込むときに、以下のように非同期で読み込んであげると速い。

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/css/all.min.css" media="print" onload="this.media='all'">

参考：CSSを非同期ロードする最も簡単な方法

対策4-1.fontawesomeは突き詰めれば実はもっと最適化できる

fontawesomeはとことん最適化しようと思ったら、使う分のアイコンだけに絞って、上で紹介したall.min.cssから使うもの以外は消してあげると、cssもより軽量化できる。（面倒くさかった…）

対策5.ファーストビューで見えない部分のCSSは読込を遅らせる

Webサイトのデザインを作るスタイルシート（css）は、デザインが複雑になればなるほど、コードが増えますよね。（僕はなかなか書き方が最適化できない…！）

PSIによると、cssは画面に初めに映る部分以外は後から読み込ませたらいいよってこと。

だから、ファーストビュー（スクロールせずに、初めに画面に映し出される部分）に関わるCSS（クリティカルCSSと言うそうです）は、<head>内に書いてしまえばいいみたいなんです。

↓　こんなふうに。

<head>
    <style>
    ここにクリティカルCSSを書く
    </style>
</head>

（とは言うものの、結構ファーストビューに使うCSS多いから長いんだよなぁ、、、ほんまにこれ最適化できるんか？と思いつつも実施するとPSIの「使わないCSSは後で読み込みなさい」の警告は消えました。ほっ）

対策5-1.残りのCSSは遅延読み込みを

残りのCSSについては、非同期で読み込むようにしました。

<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css" media="print" onload="this.media='all'">

↑　この書き方万能説。・・・かは分かんないけど、先程の非同期の方法をそのまま使って、残りのCSSも読み込もうという感じです。

対策6.CSSを圧縮する

CSSの書き方は人それぞれだとは思うんだけど、「余計な改行」「余計な余白」はCSSのファイルのサイズを大きくしてしまいます。

↓　例えばこんな感じは余計な改行や、余計な余白がある状態。

.hoge{
    background:#ffffff;
    color:#1a1a1a;
    display:block;
    position:relative;
}

↓　これを圧縮して、余計な改行や余計な余白を消すと、以下のようになります。

.hoge{background:#ffffff;color:#1a1a1a;display:block;position:relative;}

これが要素1つ分だけだったら手動でやってもいいんだけど、なにせWordPressテーマの中で書いてあるCSSなんてめちゃくちゃ多いから、手動では大変。そこで使うのがCSS圧縮ツールなるもの。

僕が好んで使っているのは以下のサイト。
⇒CSS Compressor

ここに圧縮したいCSSのコードをコピペして圧縮するとあっという間にファイルのサイズが小さなCSSになります。これはぜひともやりたいところです。

このCSSの圧縮は、使っているCSSファイル全てやるといいと思います。

対策7.loading=”lazy”で画像遅延読み込みをする

今まではJavaScriptとかプラグインを使わないとできなかった画像の^※Lazy Load（遅延読み込み）。これはGoogleもぜひともやってくれ！と言っています。対策しておかないと、PSIでももれなく警告がきます。

※Lazy Loadっていうのは、画面の見えていないところにある画像は読み込まず、スクロールして見えそうになったら読み込む、という方法です。これを適用してあげるとサイトの読込速度は上がります。

でも、プラグインとかjsはサイトのパフォーマンスを下げる可能性があるから、できるだけ使いたくない。そんなときに使えるのが、loading="lazy"というもの。使い方は簡単で、画像の要素の中に突っ込んであげるだけ。

遅延読み込みなし

<img src="https://hogehoge.com/gazou.jpg" width="300" height="300" alt="画像だよ"/>

遅延読み込みあり（Lazy Load適用）

<img src="https://hogehoge.com/gazou.jpg" width="300" height="300" alt="画像だよ" loading="lazy"/>

こんな感じで、loading="lazy"を足すだけ。これだけでPSIのスコアも改善されるのでめちゃくちゃオススメ。

対策8.JavaScriptはできるだけ後の方に読み込む

JavaScriptは<head>内で読み込んでしまうと、その時点で他のファイルの読込みがストップされてしまうみたいなんですよね。（HTMLとかCSSのファイルなどなど）

なので、JavaScriptを読み込むのは最後の最後。つまり</body>の直前が望ましいんですよね。WordPressでいうと、</body>タグがあるのは大抵footer.phpなので、その読み込ませる。

でも、以前僕がやっていたのは、直接footer.phpに記述していたんですよね。でも実はJavaScriptはfunctions.phpを使って読み込むのが通例みたいなので、それに従って読み込ませてみました。

<?php wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); ?>

↓　例えばこんな感じ

// JavaScript 読込
function add_my_theme_script() {
    wp_enqueue_script(
      'custom-script', //jsに名前をつけてあげる
      get_template_directory_uri().'/js/custom_script.js', //読み込むjsのファイル
      array( 'jquery' ) );　//WPのjQueryを読み込む
      '1.0', // バージョン
      true // trueでbody閉じタグ前に出力
}
add_action( 'wp_enqueue_scripts', 'add_my_theme_script' );

こうすることで、footerに指定のJavascriptファイルが読み込まれる。コレをやったほうがこころなしかPSIの結果も良くなった。