今回はWordPressの人気無料テーマのLuxeritas（ルクセリタス）を使用したブログサイトでPageSpeed Insightsのサイトスピードの得点が100点に到達したので、その時の設定項目と施策を全て紹介します。
サイトスピードが遅くて悩んでいる人や100点を目指したい方はぜひ参考にして下さい。
ルクセリタスは「るな」さんという方が制作しているWordPressの無料テーマです。SEO対策関連が非常に強く、PWAに対応、AMP対応。カスタムのし易さ、完全レスポンシブ対応。そしてスピードが超速い。とにかく扱いやすく高機能で個人的に最もおすすめなテーマです。しかも「GPL v2 or later」ライセンス、カスタマイズ自由自在で商用利用が可能です。
Luxeritas は SEO 最適化済み、多機能なのに高速な無料の WordPress テーマです。
詳しくはルクセリタス公式ページより。
下記が実際に100点をとったときのスクショです。（モバイルでも何回か100点に到達してます。）
環境紹介
私のサイトの環境はエックスサーバーのX20プランです。
エックスサーバーの高速化システムの「Xアクセラレータ Ver.2」「サーバーキャッシュ」「ブラウザキャッシュ（全ての静的ファイル）」をONにしています。
テーマは「Luxeritas（ルクセリタス）」を使用。WordPressのバージョンは5.4.1。PHPバージョンは7.3.14。データベースはMySQLI 5.7.27です。
この辺がサイトスピードに関係する環境状況かと思います。
まとめ表
| WordPressのバージョン | 5.4.1 |
| PHPバージョン | 7.3.14 |
| データベース | MySQLI 5.7.27 |
| テーマ | Luxeritas（ルクセリタス）3.8.1.2 |
| サーバー | エックスサーバー |
| サーバー（設定） | Xアクセラレータ Ver.2 ON |
| サーバー（設定） | サーバーキャッシュ ON |
| サーバー（設定） | ブラウザキャッシュ（全ての静的ファイル） ON |
高速化の設定
次にテーマ内で可能な高速化の設定について、私のサイトがONにしている設定項目を理由と共に紹介します。
Luxeritas（ルクセリタス）のバージョンは3.8.1.2を使用しています。
高速化設定は下記のLuxeritas→高速化一括設定の部分で設定できます。
※下の方に設定項目の画像も添付しています。
| 設定項目名 | 設定内容 |
|---|---|
| HTML の圧縮率 | 圧縮率・高 |
| 子テーマの CSS 圧縮 | 子テーマの CSS を圧縮する |
| 子テーマの Javascript 圧縮 | 必要ない (読み込まない) |
HTMLとCSSの圧縮は気持ち程度なスピード改善策だが100点を目指すなら圧縮するのが良いかと思います。
子テーマの Javascriptに関しては子テーマに何も記述していないので読み込んでいません。このような無駄な読み込みは極力減らすのが良いです。
| 設定項目名 | 設定内容 |
|---|---|
| テーマの CSS を HTML に埋め込む | チェック無し |
| WordPress のブロックライブラリ用 CSS | CSS を HTML に埋め込む |
CSSの埋め込みは、なるべくした方が良いがやり過ぎも良く無い難しい部分です。厳密には全てのページで共通するスタイルはインライン（埋め込み）で読み込んでしまった方が効率的かと思います。
この考え方から、テーマのCSSは様々なスタイルを一括管理してるスタイルシートなので無駄な読み込みも多い部分です。なのでインライン化はせずしっかりと切り分けています。
反対にWordPress のブロックライブラリ用 CSSに関しては、ほぼ全ての投稿に関わっているスタイルなのでインラインで読み込んでいます。
| 設定項目名 | 設定内容 |
|---|---|
| jQuery の読み込み方法 | Google CDN – jQuery v3 ( おすすめ / 高速 / IE8以下未対応 ) |
| jQuery を非同期にする ( 高速化するが注意が必要 ) | チェック無し |
jQueryの読み込み方はGoogle CDNがとりあえず信頼性も高く一番良いかなと思ったので、その最新版を使用。
非同期で読み込むと一部プラグイン（主にJetpack）が暴れるのでチェックは無しに。
| 設定項目名 | 設定内容 |
|---|---|
| CSS の読み込み方法 | 非同期 (レンダリング高速) |
Font Awesomeのアイコンはヘッダーのナビゲーションメニュー等のファーストビューに使っているので非同期で読み込まないとアイコン以下の要素の読み込みが遅れるかな？と感じたので非同期で読み込み。
| 設定項目名 | 設定内容 |
|---|---|
| 各種サムネイル画像の Lazy Load 有効化 | チェック有り |
| 投稿コンテンツの Lazy Load 有効化 | チェック有り |
| サイドバーの Lazy Load 有効化 | チェック有り |
| フッターの Lazy Load 有効化 | チェック有り |
| Gravatar の Lazy Load 有効化 | チェック有り |
| Jetpack の Lazy Load を無効化する | チェック有り |
迷わず全てON。サイトスピードの得点でめちゃくちゃ重要な設定です。
LuxeritasのLazy Load Google が推奨するIntersection Observer技術を採用してるようです。
| 設定項目名 | 設定内容 |
|---|---|
| バッファリングの逐次出力を有効にする | チェック無し |
バグるんでチェック無し。
| 設定項目名 | 設定内容 |
|---|---|
| SNS カウントをキャッシュする | チェック無し |
| キャッシュ再構築までのインターバル | チェック無しなので関係無し |
原因はわからないが、SNS カウントキャッシュをONにすると急にスピードが遅くなる？のでチェック無しにしています。
| 設定項目名 | 設定内容 |
|---|---|
| AMP | 未導入 |
| PWA | 導入 |
AMPはいずれ対応する予定だが、現段階での必要性を感じないのと、あまりAMPに向いたサイトでは無いので現状は未対応。
PWAに関してはどっちでも良いです。
画像で見る
文字が小さいですが、先述の設定項目の画像です。
高速化のために使用してるプラグイン
次に高速化のために使用しているプラグインをいくつか紹介します。
EWWW Image Optimizer
画像の圧縮とリサイズを自動で行ってくれる優秀なプラグインです。webPのオプションをONにする事で爆速になるのでおすすめです。
詳しい設定は細かい事になるので下記の別記事を参照して下さい。
WP YouTube Lyte
YouTube動画の埋め込みを一度画像として読み込み、ユーザーがクリックしたら動画が読み込めれるようにしてくれるプラグインです。
YouTube動画の読み込みは480msくらいかかって一気にサイトスピードテストで50点台くらいまで落ち込むので、動画を入れている投稿が多いサイトは必須かなと思ったのでインストール。
WP YouTube Lyteはこちらからインストール。
Jetpack
Jetpackに関しては高速化のために入れている訳ではなく、アクセス解析やSNS連動、人気ウィジェットのために入れています。
Jetpackは入れるだけでサイト全体が重くなるのでいろんな対策が必要になります。その件に関してまとめた記事も別で用意してますので、そちらを参照して下さい。
高速化のための施策
先述で紹介した設定とプラグインを使えば恐らく95~98点くらいまではいくのでは無いかな？と思います。そのくらいルクセリタスは優秀なテーマです。
でも、まだ100点はいかないかな？ってイメージです。ここからは少し細かな部分の最終調整をおないます。これをしっかりと行えば100点に達するかと思われます？
- 古いバックアップファイルの削除。
- 古いキャッシュの削除。
- いらないテーマの削除。
- 有効化していないプラグインの削除。
- 不必要な要素の読み込みをOFFに。
- ヘッダーになるべく画像を置かない（置くならインライン化）。
- ヘッダーに広告を置かない。
- ボリュームの大きいCSSは個別ページに記述する。
- htaccessの高速化記述に重複する記述がないかを確認。
- オールレスポンシブ化。
などです。他にも色々とありそうですがキリがないです。このような細かな施策が重要って事が理解出来れば良いでしょう。
上記の施策の具体例を次で紹介します。
要らないものは削除
古いバックアップファイルとは、バックアッププラグインなどを使用していると溜まってくるファイルです。あまりにも多すぎるとサーバーに負荷がかかりサイト全体のパフォーマンスに影響します。なので削除しましょう。
キャッシュとは、当サイトでも導入してるプラグインの「Rinker」は自動でキャッシュを取得して読み込むようになっています。これも溜まってくるとサイト全体に負荷がかかります。このようなプラグインは他にもあると思うのでしっかり確認してみましょう。
同じ理由で、要らないテーマや有効化していないプラグイン、不要なウィジェットなども削除、もしくは読み込まない様にしましょう。
ヘッダーは軽く
ヘッダー部分（ファーストビュー）はサイトスピードテストで最も重要視される部分です。そのためヘッダー部分はより軽くスムーズに読み込まれるような施策をしましょう。
その一つの例が、ヘッダーに画像や広告を置かない事です。どうしても画像を置きたい場合はインライン化しましょう。広告を起きたい場合は非同期にしましょう。他にもヘッダー部分に複雑なJava ScriptやjQueryなどが動作する要素がある場合は必ず非同期で読み込みましょう。
重複した記述は無くす
htaccessで重複した記述があるとエラーになります。何らかの原因で読み込めてもめちゃくちゃ読み込みスピードが遅くなったり、無限ロードになったりと致命的な問題を抱えることとなります。
今回紹介した方法で十分早くなるので、追加でhtaccessなどに何かしらの記述をする際は気を付けて下さい。
特に「Luxeritas（ルクセリタス）」の高速化htaccessとサーバーの高速化設定が干渉しあう場合があるので要注意です。
レスポンシブ化
全ての要素をレスポンシブ化する事で読み込みのスピードが速くなると言われています。
幅や高さなどの指定も固定では無くなるべく「auto」や「100%」などのレスポンシブな調整を心がけましょう。
サイトに設置している広告に関しても同じくです。
以上が「サイトスピードが100点に到達した時の設定と施策（ルクセリタス）」でした。
今回はLuxeritas（ルクセリタス）を利用しての設定と施策ですが、どのテーマでも同じような施策である程度のサイトスピードを維持できると思います。
ただ間違いなく言えるのは、この程度の設定と施策で100点を出せるLuxeritas（ルクセリタス）は本当に優秀なテーマだと思いました。
