副業にも趣味にも、大規模商用サイトから中小規模の商用サイトまで大人気の 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には、「ファイルマネージャー」が搭載されているので、これを利用します。
