mixhostでXWRITEを最大限高速化する方法

けーちゃん

こんにちは。管理人のけーちゃんです。

XServerが開発したWordPressテーマXWRITE。軽量で高速と評判ですね。

XWRITEはXServerだけでなくmixhostでも使用できるのです。しかもLiteSpeed Cacheを適切に設定することでXServer以上の高速化が可能です。

そこで今回は、WordPressテーマXWRITEで、LiteSpeed Cacheプラグインの性能を最大限に発揮する設定についてお伝えします。

XWRITEまだの人は
＼ここで確認してね／

＼目次も見てね！／

どれだけ高速化できる？

まずはmixhostでXWRITEを使用することでどれだけ高速化できるかを確認してみます。

次の表は同じ内容のページをXServerとmixhostで作成して、PageSpeed Insightsで測定した結果です。

	XServer	mixhost
条件	サーバーキャッシュ Xアクセラレータ Ver.2 XPageSpeed全設定 有効化済み	今回紹介する設定を適用済み
PC
スマホ

mixhostの方が良い結果を出していますね。特にPCでのパフォーマンスが100%です。

PCは差があまりありませんが、スマホは大きな差が出ています。XServerのパフォーマンスは黄色信号が出ているところ、mixhostは安全圏に入っているのがとても大きいです。

管理人はLiteSpeedサーバー＋LiteSpeed Cacheの高速化機能とmixhostの高速サーバマシンの組み合わせが最強だと思ってます。

競合プラグインを停止する

では、XWRITEの高速化設定を始めましょう。

LiteSpeed Cacheと機能が重複するプラグインはレイアウトが崩れるなどの不具合が出る可能性があるので停止させておきます。

重複するのは、次の機能です。

• 画像最適化/画像遅延読み込み機能
  EWWW Image Optimizer
  TinyPNG
  Smush
  ShortPixel Image Optimizer
  Imagify
  等
  
• HTML/CCS/JavaScript最適化（圧縮）機能
  Autoptimize
  Fast Velocity Minify
  Better WordPress Minify
  等
  
• キャッシュ機能
  WP Super Cache
  W3 Total Cache
  WP Rocket
  Cache Enabler
  Hyper Cache
  Swift Performance
  Breeze
  WP-Optimize
  等

けーちゃん

特にキャッシュ系プラグインは不具合の原因なので確実に停止させましょう

LiteSpeed Cacheの初期設定

次にLiteSpeed Cacheの設定を行いますが、まずはテーマの種類に関係なくレイアウト崩れが起こりにくい設定を適用します。

ここでは簡単に手順のみを紹介します。詳しくは次の記事で詳しく紹介しているので、疑問等あったら次のリンク先を確認してください。

けーちゃん

上記のリンク先でCDN化の紹介をしていますが、CDN化は全ての設定が完了してから行います。ここでは画像最適化まで行いましょう。

XWRITE向けCSS最適化設定

次にXWRITE向けのCSS最適化設定を行います。次の表に従って設定してください。

『CSSを非同期読み込み』をオンにすると、ファーストビュー（最初にブラウザ表示される範囲）で使用されているCSS定義がWebページ内に埋め込まれます。そしてファーストビュー表示後に、残りのCSS定義が読み込まれます。これにより、これにより閲覧者の体感でのページ表示速度が高速化されます。

『UCSS を生成する』をオンにすると、Webページ内で使用していないCSS定義が削除されます。一般的にはテーマが用意したCSS定義のうち、使用するのは数パーセントのみです。そのため、UCSSを生成することで読み込み速度を大幅に高速化できます。

今回の設定では『UCSS インライン』のみオフですがオンでも問題ありません。オフの場合は、CCSSによるファーストビュー表示後にUCSSが読み込まれます。ページ表示速度が高速化とムダなCSS読み込みを回避できます。

オンの場合、CCSSの代わりにUCSSがWebページ内に埋め込まれます。UCSSはCCSSと同じ内容を含んでいるため、ムダな読み込みと捉えることができます。ファーストビュー表示が遅くなりますが、ムダな読み込みを回避できます。

けーちゃん

オンとオフのどちらが正しい、という話ではないので好みで選択してください

[6] 除外するメディア設定は、画像の遅延読み込み対象外とするクラスを指定します。『custom-logo』クラスはヘッダーロゴを指すクラスです。『^post-thumbnail$』は記事上のアイキャッチ画像の親タグのクラスです。

なお『UCSS を生成する』がオンのとき、XWRITEはページ表示に不具合が発生します。

専門的な話になりますが、UCSSはJavaScriptで動的に追加したIDやクラスを抜き出すことができません。

XWRITEはスライド画像や追従型ナビゲーションなどを動的に操作しています。そのため表示されなかったり、レイアウトが崩れるなどの不具合がおこります。

この問題は、ページ最適化の[9] チューニングタブにある『UCSS セレクターの許可リスト』に下記の内容を記述することで解消できます。

data-scroll
.slick*
.scroll-hint*

各行の対象となるXWRITEの機能は次の表のようになっています。

けーちゃん

これ以外にもあるかもしれません

一通り確認していますが、漏れがあるかもしれません。漏れがあるときは問い合わせからご連絡いただければ、確認します。

また、他のプラグインで画面表示に関係するものを利用している場合は、『UCSS セレクターの許可リスト』に項目を追加が必要な可能性があります。

function.phpへの記述

次にXWRITEの子テーマのfunction.phpに次のコードを記述します。

add_filter('wp_get_attachment_image_attributes',function($attr){
	unset( $attr['loading'] );
	return $attr;
});

前項の[6] 除外するメディア設定で、アイキャッチ画像を遅延読み込みから除外しましたが、WordPressが挿入した遅延読み込み属性『loading=”lazy”』が残ってしまいます。この属性があると、画像を遅延読み込みするため、この属性を削除します。

CCSSとUCSSの生成

CCSSとUCSSは、非ログイン状態でWebページを表示後に自動で生成されます。つまり初回表示時は、CCSSとUCSSが使用されません。

そのため記事作成後はWordPressからログアウトするか、異なる種類のブラウザでページを表示した後、[1] CSS設定タグ内に現れる『手動で実行』ボタンを押して、CCSSとUCSSを生成してください。

けーちゃん

自動で生成されますが、手動の方が速いです。

CCSSとUCSS生成後にブラウザでWebページを再表示します。ただし、ブラウザキャッシュが有効になっているため、強制リロード（スーパーリロード）でキャッシュを無効にして表示する必要があります。

強制リロードについては、次の外部記事を参考にしてください。

ブラウザのキャッシュを無効にしてWebページを表示する方法 ｜ けーちゃんの個人サイト

ブラウザはWebサーバーから取得したWebページのデータを一時的にパソコン内に保存しています。 そしてある一定期間内に同じページの呼び出しがあったら、そちらを使用します。 つまり、その時間内はWebページの内容に変更があ …

affi-sapo.com

まとめ

ここではXWRITEでLiteSpeed Cacheプラグインを最大限活用する設定方法についてお伝えしました。

XWRITEはXServerが制作したWordPressテーマです。個人的にはユーザーフォーラムが活発で、質問等に運営だけでなく他ユーザーが回答してくれる点と、ユーザーからの要望を積極的に取り入れているためアップデートするたびに機能が充実していく点です。

もしXWRITEを使用していない方は、ぜひ使ってみてください。