WordPressサイトで表示速度、パフォーマンスを改善したいけど、サイト構成は簡単に変えられないし、サーバ載せ替えも現実的じゃない。そんな方でも何とかできるかもしれない、BBNでも活用しているパフォーマンス改善のtipsの中から、比較的簡単なものを6つご紹介します。
ご自身でfunctions.php等を編集できる技術者さん向けのトピックスになるので、その点はあらかじめご了承ください。
目次
画像の多いWordPressサイトでも、早くできるの？
PageSpeed Insightsのスコアは低いし、表示速度も明らかに遅いWordPressサイトでも、パフォーマンス改善なんてできるのか。高速サーバに移転する費用も時間的な余裕もない。
そんなサイトでも何とかできるかもしれない、BBNでも取り入れているすぐ実践できそうなTips、早速ご紹介しましょう。
1.余計なコードを減らす
BX-00のテーマリポジトリ、libの中のmanagement.php(https://github.com/Yuuji-Hasegawa/wp-bx-00/blob/main/wp-content/themes/bx-00/lib/management.php)の168行目~203行目をご覧いただくとすぐにお分かりいただけると思いますが、WordPressが生成する色んなコードを抑制するfunctionを記述しています。
emoji関係は不要だなとか、Gutenber用のCSSは要らないなとか、埋め込み用の機能、自動生成するsitemapも不要だなとか、wp_headで挿入されるコードを少しでも減らす記述を入れています。
ちなみに、script-load.php(https://github.com/Yuuji-Hasegawa/wp-bx-00/blob/main/wp-content/themes/bx-00/lib/script-load.php)の6~13行目や、47〜51行目も同様の記述です。どこに書いても良いので、ご自身で分かりやすいところに記述して、データを更新もしくはファイルを置き換えてください。
2.jQueryの読み込み抑制、jsのdefer読み込み
お問い合わせフォームのプラグイン、Contact Form7やgoogle reCAPTCHAを有効化している時に、フォームが関係ないページでもバッジが表示されているのなら、ここを見直すのが良いかもしれません。
上記でも触れたscript-load.php(https://github.com/Yuuji-Hasegawa/wp-bx-00/blob/main/wp-content/themes/bx-00/lib/script-load.php)の各記述が主要な部分ですが、さらにその前提として、jQueryに依存しない、Vanilla JSで構築したテーマ用のjsを別途作成、生成しておくというのもポイントです。
管理画面内やjQueryに依存するプラグインが関係しない場所では、jQueryを読み込まなくて良いようにできたなら、後はscript-load.phpの2,3行目のadd_filterや、23~35行目の”if(!is_admin())”のif文、38~45行目までの”recatcha_hidden()”の記述など、”inquiry”のslug以外では、jQueryやreCAPTCHAを抑制した上に、内蔵しているjQueryを読み込むのではなく、CDNの比較的軽量なjQueryを読み込むように設定できます。
フォームのあるページは早くなくてもいい、と割り切ってもいいですしね。
その上で、14行目以降のJS、CSSの読み込み制御の部分と、55行目以降のadd_asyncの記述を組み合わせて、JSの読み込み部分でdeferが挿入されるように置換しています。
type=”module”で読み込まれるようにしたり、構造化マークアップのJSON-LDも挿入されるようにしたり、直接関係ないコードも書いてありますが、技術者の方であれば特に問題なく読み解いていただけるでしょう。
3.CSSはインラインで読み込もう
テーマ用のCSSも、上記JS同様に別途生成する環境を作ってあれば、JSを読み込む記述の部分で一手間加えれば、インラインで読み込むことが可能です。概ね30~40KB前後であれば、インラインで読み込んであっても特に問題はないと思います。固定ページで20ページ未満のWebサイトで、もしCSSファイルが40KB以上の場合は記述をまとめられると思うので、改めて見直しても良いかもしれません。
CSSをインラインで読み込む具体的な方法ですが、これもscript-load.phpに該当コードがあります。
14行目以降の部分、18~22行目の部分がそれです。
テーマフォルダ直下のstyle.cssは管理画面用のファイルとして使い、テーマ説明のコメント等が入っていないCSSを、file_get_contentsで取得し、@font-faceでfontファイルを読み込んでいる場合はurlを置換させてから、wp_add_inline_styleで挿入するようにしています。
複数に分割したCSSを読み込むスタイルではなく、Sassで一つにまとめてからインラインで読み込む方式を取っているのも、これが楽にできるから。これで、CSSファイルの読み込みがレンダリングをブロックする要素ではなくなりました。
余計なコードを抑制するという意味では、fontawesomeやGoogle fonts関係のCDNも極力回避し、fontawesomeならSVGの埋め込み、Google fontsならDLかつwoff2変換をかけてローカル読み込み、という方策も合わせて取っています。
4.次世代フォーマットを使った画像表示
投稿やカスタム投稿ごとに設定するアイキャッチ画像を除き、固定ページ内等で用いる画像に関しては可能な限り手元の開発環境で、AvifやWebPを生成するようにしています。
具体的には、テーマ用のCSS/JS生成ボイラープレートの、gen.mjs(https://github.com/Yuuji-Hasegawa/html-bx-00/blob/main/npm-scripts/gen.mjs)をご確認いただきたいのですが、Viteの環境下でViteの側でimportをせず、src/imageディレクトリ内の画像を対象に、public/imgへ、ディレクトリを維持しながらAvif/WebPを、sharpを使って生成するスクリプトとしています。
このままでも使えるとは思いますが、ご自身の環境に合わせて調整してください。キャッシュ等も特に組み入れていないので、効率に関しては改善の余地あり、です。
これらで生成した画像を、『Every Layout』のpictureタグを用いた`frame`を使って、front-page.php(https://github.com/Yuuji-Hasegawa/wp-bx-00/blob/main/wp-content/themes/bx-00/front-page.php)の3~11行目のようにしています。
外枠のpictureで画像が表示される領域を確保しているので、loading=”lazy”にしても問題ありません。ファーストビューでないなら、loading=”lazy”、fetchpriority=”row”で良いでしょう。ファーストビューの画像が問題になるなら、次のtipsを組み合わせても良いかもしれませんね。
また、もし固定ページ等でも上記の手法を取る場合、恐らくテーマディレクトリまでのurlをget-vars.php(https://github.com/Yuuji-Hasegawa/wp-bx-00/blob/main/wp-content/themes/bx-00/lib/get-vars.php)の26~30行目のようにショートコード化していると思うので、これに加えて同ファイル直下の32~38行目のようにしておけば、srcsetの中でもショートコードが有効になるよう追記しておいてください。
こうすれば、固定ページの本文（the_content内）でも、上記のpictureを用いた手法が問題なく使えます。
5.”IntersectionObserver”を用いたLazyload
Google MapsやYoutubeなど、iframeの埋め込みで`loading=”lazy”`を指定していても、実際のパフォーマンスとしては全く効果がない場合があります。また、ファーストビューの画像には`loading=”lazy”を指定するな`と、PageSpeed Insightsで指摘されることもあります。
そういう時は、”IntersectionObserver”を用いたLazyloadを活用してみましょう。色んなやり方があると思いますが、Google Mapsの場合、page-company.php(https://github.com/Yuuji-Hasegawa/wp-bx-00/blob/main/wp-content/themes/bx-00/page-company.php)の79~83行目のように書いて、srcにはダミーの1×1ピクセルのgif画像を指定しつつ、data-srcの方に実際のURLを指定しつつ、`.c-lazy-map`に対して、lazyMap.js(https://github.com/Yuuji-Hasegawa/html-bx-00/blob/main/src/scripts/lazyMap.js)を加えてやれば、mapの部分が画面内に入らない限りは、Lazyloadが効いてくれるのでオススメです。
画像に対しても同様の技術を使っていたので、ファーストビュー内の画像をどうしても遅延読み込みしたい場合は、転用して良いと思います。
6.GTMを経由したGAタグの読み込み
BBNでは、Google Analyticsのタグを直接埋め込まず、Google Tag Manager経由で設定しています。
Google Tag Managerの「ウィンドウの読み込み」をトリガーにするという一手間だけで、GAタグ読み込みによる影響はかなり軽減できます。
今回ご紹介するテクニックの中でも、お手軽な割に効果が比較的高いテクニックです。GTMを導入して損することもあまりないと思うので、今のうちに導入してみては？
細かい工夫を重ねれば、パフォーマンスは改善可能
テーマファイルを直接編集するリポジトリだけでなく、CSSやJSを別途生成するリポジトリ、ボイラープレートを用意してあるのも、これまでに触れた細かな工夫を活用するため、です。数々の細かな一手間を加えることで、表示速度とリッチな表現の両立を果たしています。
BBNでは、少しでも余計なコードを減らせる新しい技術、スキルも果敢に導入し、余計なコードを挿入しようとする最新のWordPressとも向き合って、ノウハウ、技術を磨いています。
WordPressサイトのパフォーマンス改善は、BBNへご相談ください
WordPressを使ったサイトで表示速度の改善や、Pagespeed Insightsのスコア改善に悩んでいる、あるいは手助けをして欲しいというお客様、もしくは事業者様がいらっしゃいましたら、是非一度、BBNにご相談ください。
