副業にも趣味にも、大規模商用サイトから中小規模の商用サイトまで大人気の CMS, WordPressですが、欠点がひとつあります。そのままではちょっと遅いということです。
表示がやたら早い芸能人のサイトが定期的に話題になるくらい、2022年現在の Web は遅いです。残念ながら……。
ということで、高速な WordPress サイトの構築を頑張ったので、やったことをご紹介します。
- キャリアのスタートはWebバックエンドエンジニア
- フロントエンドの構築、Webデザインを通してユーザー体験、UXの重要さを痛感
- 現在は、キャリアを活かして Webディレクションやマーケティングも担当
- IT, Webが得意な経営コンサルタントとしても活動中
22:00台にPageSpeed Insightsを実行した結果は……（デスクトップはこの記事の先頭）
モバイルでもグリーンです。ちょっとFCP, LCPのスコアが低いですが、対応が難しい部分なのと、実際にそこまで快適さには影響しないので妥協しています。
なぜ速さを求めるのか
最もシンプルな理由としては、このブログをみてもらっている皆さんに快適な閲覧体験をしてもらうためです。
もうちょっと下心のある表現になりますと、検索エンジンの覇者、Google に気に入ってもらうためです。まだまだ個人のブロガー界隈では話題にならず、商用サイトを担当している人の間で話題といった感じですが、Google はこのユーザー体験を2021年8月末には検索のランキングの要素に適用し終えることを発表しています。2022年現在、全世界のGoogleの検索結果には、このページエクスペリエンスが影響していると考えられます。
こういうテクニカルなSEOとして紹介するとちょっと嫌な顔をされてしまう気がしますが、本来の趣旨は冒頭で述べた「快適な閲覧体験の提供」です。Google がページエクスペリエンスを要素に加えたのも同様で、検索結果から遷移したときに何よりWebの閲覧者が快適であるようにという目的で導入されています。
また、このページエクスペリエンスは、ざっというと速さになりますが、実際には「快適な速さ」となります。例えば、ただ表示がはやければいいのではなくて、「操作出来るまでの速さ」や「最初に表示されるまで」、「レイアウトが急にズレない」といった、見ていていらっとさせない快適さとなっています。
何故かというと、王手ブロガーさんのサイトでもまだまだ対応できていない部分があるということもあると思います。そもそも、CWVはコンテンツ作成が主体であるブロガー、アフィリエイターの範疇ではないということもあると思います。
プラグインやサーバーの組み合わせなどによっても変動しますから、これをすれば必ず向上します！ と言い辛い部分もあります。紹介する側も、これを買えばCWVが向上します、とは言えません。その割に、旧来のSEOが重要なことに変わりはないので、CWVが向上したもののランキングは低下したということも起こり得ます。
決定的なのは、CWVについては PageSpeed Insight などで客観的にスコアが出てしまうからだと思っています。一方で、SEOについては完全なブラックボックスですので……
まずはテーマ選び
年末にサーバーをConoHaWINGに変えたこともあり、常々もうちょっとPageSpeed Insightsのスコアを上げたいなぁと思っていました。そこで、InternetFolks.comの記事を参考に、新しいテーマを選定しました。
InternetFolks.comの記事は長いので、結論だけを述べると、GeneratePress がバランスよくCWVに対応できているということが分かります。Wordpress テーマがインストールされている複数のWebサイトのベンチマークを取っているので、かなり信用できると思います。
そこで、GeneratePressをインストールし、子テーマを作成しました。大規模なデザインの変更などを行わない場合子テーマは導入せずに直接改造した方が楽です。
しかし、高速化にあたってはfunctions.phpのカスタマイズは必須です。Wordpressのサイトを狙った不正アクセスは後をたちませんし、テーマ自体にセキュリティホールがある可能性があるので、古いテーマを使い続けたくはありません。しかもCWVへの対応を考えると、高速さが売りの一つであるこういったテーマはバージョンアップによりさらに高速になる場合があります。
これらを考えると、テーマのアップデートを躊躇するようなカスタマイズは避けるべきです。ということで、少し面倒ですが、GeneratePressの子テーマを作成します。
GeneratePressの子テーマの作成
子テーマの作成は、Wordpressの管理画面上では行うことができないので億劫に感じてしまいがちですが、実はその気になれば簡単です。
PC上に分かりやすく「generatepress-child」という名前でフォルダを作成し、その中に functions.php と style.css という名前でテキストファイルを作成します。筆者はVimやサクラエディタを使いますが、難しいコーディングをするわけではないのでメモ帳でも構いません（文字コードはUTF-8で保存しましょう）。
まず、style.css から編集します。下記は最低限の内容です。
/*
Theme Name: Generate Press Child
Template: generatepress
Version: 3.1.1
*/
CSSは本来、Webページの見た目を制御するものですが、Wordpressのstyle.cssはもっぱら、テーマのメタ情報（名前やバージョン、テーマの親子関係など）を管理するのに使われます。
Theme Name: には、分かりやすいように「親テーマ名＋child」などの名前をつけましょう。これが、Wordpressの管理画面などで表示される内容となります。
Template: は、親となるテーマを指定するのですが、注意点としては親テーマのTheme Nameではないことです。親テーマの「フォルダ名」をここで指定します。今回はGeneratePressの子テーマ作成なので、generatepress として進めます。その他のテーマの場合、FTPソフトなどで確認しましょう。
Version: は、バージョン番号を入力します。子テーマなので、1.0.0からスタートでもいいですし、作成したときの親テーマのVersionを入れてもいいでしょう。
つづいて、functions.phpを編集します。
<?php
if ( ! defined( 'ABSPATH' ) ) {
exit; // 直接アクセスされたら何もせずに終了
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'));
} // 子テーマ最低限のfunctions.phpここまで
function dequeue_plugins_style() {
wp_dequeue_style('wp-block-library');
} // 高速化のためにGutenbergエディタのCSSの読み込みを止める
?>このサイトのfunctions.php にはその他のカスタマイズもされていますが、子テーマと高速化に関わる部分はここまでです。
function dequeue_plugins_style 以降の部分ですが、これはWordpress の新しいエディタ（ブロックエディタ）用のCSSの読み込みを停止するものです。当サイトではクラシックエディタでコンテンツを作成しているので停止しました。ブロックエディタを使用している場合は、停止しないでください。
何故停止したかというと、とにかくこの CSS がサイトの読み込みをブロックするからです。正直、このCSSを読み込む限り、Wordpress でスマホのパフォーマンススコアで90以上は無理なんじゃないかと思います。
子テーマのアップロード
子テーマのアップロードでは、FTPソフトや、ZipファイルにしてWordpressの管理画面からインストールする方法がとられます。
しかし、FTPソフトはサーバーを登録し、かつFTPソフトを起動する手間があり面倒です。
zipファイルの方はわざわざzipファイルを作成しなければならず、しかもミスがあった場合に毎回圧縮しなくてはならず非常に面倒です。
幸い、ConoHaWINGには、「ファイルマネージャー」が搭載されているので、これを利用します。
ファイルマネージャーは、ConoHaの管理画面から、「サイト管理」「ファイルマネージャー」とたどることで開くことができます。管理するドメインについては、気にしなくて大丈夫です（サーバー単位です）。
ファイルマネージャーが開いたら、左側のフォルダリストから、
- public_html
- 管理するドメイン名
- wp-content
- themes
とフォルダを開きましょう。もし、Wordpressをサブフォルダにインストールしている場合は、wp-contentの前にそのサブフォルダが入ります。PCと一緒ですね。
themesフォルダを開けたら、今度は上側のメインメニューから「新規フォルダ」を作成します（アイコンは下図参照）。フォルダ名は分かりやすく、先ほど作成したフォルダ名と同様のものにしましょう。
また、generatepress以外のテーマの子テーマを作成したいときには、ここにWordpressのテーマが格納されていますので、ここからTheme: に入力するフォルダ名を探して下さい。
フォルダが作成したら、その中に先ほど作成した style.css, functions.phpをドラッグ&ドロップでアップロードします。
アップロードできたら、Wordpressの管理画面にアクセスして、子テーマをアクティブにしましょう。もし、子テーマが見つからない場合、style.cssの記述間違いなどが考えられます。テーマ一覧の一番下に、「壊れているテーマ」として、何がおかしいのかのメッセージとともに表示されているはずなので、修正してやはり上書きアップロードしましょう。
子テーマを有効にした後エラーが出てしまう場合は、functions.phpに間違いがありますので、こちらもよく確認して修正しましょう。
プラグインでのWordpress の高速化
WordPress はプラグインでも高速化が可能です。ただし、ものによっては逆に速度が低下しますし、環境によっても異なります。GeneratePress + ConoHaWINGの環境であれば大体、このサイトと同様になると思いますが、他のプラグインを導入している場合はこのサイトでは「速度が逆に低下した」プラグインが高速化になることもありえます。最終的にはご自分の環境でテストしながら導入してください。
Jetpack
パフォーマンスだけではなく、セキュリティ・アンチスパム機能が搭載された総合パッケージ。セキュリティも関係しているので、早くもなり遅くもなり……ですが、速さよりもさらに安全さが最優先なので（乗っ取られたら閲覧者の皆さんも危険にさらします）、導入しています。
高速化の設定は、「画像の読み込みをスピードアップ」以外オンにしています。画像については、ConoHaのコンテンツキャッシュと相性が悪いようなので利用していません。
ConoHaWING コントロールパネルプラグイン
プラグインを導入しなくても管理画面からも管理できますが、有効にしています。キャッシュクリアのプラグインも同時に有効にしています。
WordPressのプラグインでもコンテンツキャッシュのプラグインはありますが、やはりサーバーで対応している方がキャッシュ生成の負荷なども小さいだろうし、脆弱性も少なかろうというもくろみでConoHaのものを利用しています。
ただ、自動アップデートはないのでその点だけは注意が必要です。
EWWW Image Optimizer
画像の自動リサイズやメタデータの削除・自動で幅・高さを指定するなど、高速化＋CWV対策もしてくれる画像に特化したプラグインです。
このサイトではこういった形で運用していますが、遅延読み込み(lazy loader)の設定がJetpack と重複して警告が出ていますね……。後でJetpackの方を無効にして試してみたいと思います。
Classic Editor
別に高速化のためのプラグインではないですが、ブロックエディターのCSSがCWVの上でよくないのであれば、代理のプラグインであるClassic Editorは十分、ユーザーエクスペリエンスの向上に役立つプラグインです。
内容としては、昔のWordpressと同様、一般的なWYSIWYGのエディタでWordpressの記事をかけるようにするものです。
当サイトでは効果がなかったプラグイン
Autoptimize
CSSやJavascript を結合・縮小して読み込みを高速化するプラグインです。しかし、結合したCSSファイルが巨大すぎたためか、PageSpeed Insight でブロックされているコンテンツとマークされてしまったため排除しました。
最適化されていないCSS, Javascriptの多い環境やプラグインが沢山ある環境では効果があるかもしれません。単純な読み込み完了までの時間と、PageSpeed Insightsの重視するレンダリングのブロックなどに悪影響を及ぼしたことも考えられます。
評判自体はいいプラグインだったので、設定や環境を見直すと効果がでる可能性があります。
おわりに
Google の Core Web Vital アップデートの適用完了から半年が経過し、いよいよ順位に影響が出始めたといった話も耳にします。
サイト運営者の視点からだとどうしても多くの人にサイトに来て欲しいことから、「順位」ばかり気にしがちですが、そもそも来てくれたユーザーに快適に閲覧してもらうということは、サイトにとってとても重要です。実際のお店に来てもらうために派手な広告を打って、入ってみたらサービスが全然な居酒屋とか、次は行きませんよね。CWVを気にするというのは、利己的なことではなく、改めてサイト運営を考える切っ掛けになると思います。
また、高速化系プラグインを改めて洗い出しましたが、結局のところ、使っている数は少なかったですね。セキュリティ系の方が多いくらいでした。それだけ、ConoHaWINGの高速性と、標準のキャッシュ機能が優れていて余計な手間が要らないといったところでしょうか（個人的には、EWWWみたく沢山いじれる設定があるほうがわくわくしますが）。
ConoHa WING については、昨年末にサーバーを乗り換えた際にレビューを書いていますので、新しくWebサーバーを契約してブログを始めようと言う方や、移転を検討している方はそちらも参考にしてください。
