デジタルマーケッター・ブログ集客専門家 時々 おもろいおっさん

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

  
WordPress高速化
\ この記事を共有 /
WordPressサイトの高速化ができたので実施した9個の対策をメモ

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

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

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

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

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

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

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

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

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

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

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

対策1.画像のwebp化

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

対策2.画像の圧縮

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

でも1枚ずつきっちり圧縮するなら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フォルダに入っているファイルから、

  1. fa-brands-400.woff2
  2. fa-regular-400.woff2
  3. fa-solid-900.woff2

の3つのwoff2ファイルだけWordPressテーマのwebfontフォルダ(なければ作る)にアップロード

同じくDLしたフォルダの中のcssフォルダに入っているファイルから、

  1. 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の結果も良くなった。

対策9.jQueryはWordPressのものを使う

jQueryっていうのは、JavaScriptでできることを、より簡単な記述でできるようにするためのライブラリ。ライブラリっていうのは、便利なプログラムの部品を沢山集めてひとまとめにしたファイルのこと。

このjQueryなんだけど、今まではGoogleのCDNのjQueryを読み込んでいたんだけど、どうしてもそれが原因でPSIの点数が上がらない…。

でもよくよく調べてみると、WordPressのパッケージの中にはすでにjQueryが入っている。だから、GoogleのCDNとかMicrosoftのCDNにおいてあるjQueryをわざわざ読み込まなくても良いみたい。

そんで、WordPressに備え付けのjQueryを読み込んだほうが速いんじゃない?という予想のもと、なんだか速そうだったGoogleのCDNの読込を辞め、WordPressのjQuery読込に切り替え。

結果…。

速くなった!

9つの対策をやってみて

正直、かなり大変だたった…。PSIで改善案を出されて、参考ページに飛ぶと英語サイトばかりで、根っからのプログラマーではない僕には言っていることがなかなか理解できず(本職マーケッターなんです笑)苦戦しました。英文は読めるんだけど、専門用語出されるとなかなか理解しづらいのよぉぉぉ。

ただ、頑張った結果収穫は多かった。余計なプラグインとか、解析タグ(タグマネとかアナリティクスとか)を入れなければ、PageSpeed Insightsの得点はモバイル90~98点、パソコン99~100点くらいが安定して出せるようになった。

でもどうしてもWebサイト運用に必要なアナリティクスとかタグマネを入れると、それだけでもモバイルの点数が20~30点下がってしまうし、そこはもう妥協しないといけないところだなと思う。(解析タグが入れられなかったらWebサイトの効果計測できないしね!)

効果の大きかった施策は結局どれ?

  • Googleフォント
  • 画像
  • JavaScript

これがPSIの得点をかなり左右すると思った。

これはもうちょっとちゃんと検証した記事を書こうと思うんだけど、画像は最適化しないと1枚1枚がめちゃくちゃ重くなるですよね。画像1つでめっちゃ読込速度が変わるから、画像関係の対策、今回の記事で紹介した、

  1. 対策1
  2. 対策2
  3. 対策7

は、ぜひとも優先的に取り組んだほうがいいと思う。

まとめ

自分のためのメモ、備忘録としてまとめたんだけど、意外と大ボリュームになってしまった。もう少し、1つ1つ丁寧にまとめた記事も書こうと思います。

まだまだ最適化できる部分もあると思うので、そこも順次進めていきたいなと思います。

あと、また合わせてLighthouseというページのパフォーマンスを測定するツールの点数対策もしたのでそれも別の記事でまとめたいなと!

ということで、今回はザーッとまとめただけですが、あなたのWordPressサイトの高速化対策の参考になれば嬉しいです。

 

今までの僕のブログ集客のノウハウを全部つぎ込んで しかも無料で配布することにしました。

【今すぐ読める無料Ebook】 広告費を一切使わずブログだけで 19,000人以上を集客した全手法!

総ページ100ページ以上の 大ボリュームE-bookです。

是非あなたのブログのお役立てください。

今のうちにゲットしてください。

Ebook