WordPressテーマSWELL導入方法を見てみる

エックスサーバーでの高速化設定の方法【スコア85から99にUP】

エックスサーバーでの高速化設定の方法【スコア85から99にUP】
フェニック

エックスサーバーは、プラグインなしで表示速度を上げれるらしいけど本当?

今回はこのような疑問にお答えします。

エックスサーバーには、表示速度の高速化機能が標準搭載されています。

LCP(Largest Contentful Paint)の結果

この機能を活用することで、ページ表示速度を大幅に改善することができました。

そこで、今回はエックスサーバーの高速化機能の設定方法を解説します。

表示速度が劇的に改善するので、ぜひお試しください。

追記です。

まだサーバー未契約の方にはエックスサーバーの評判とメリット・デメリットの記事もおすすめです。

この記事の著者

Shota @Shota_Lab_1

3年目の副業ブロガー。2年間のブログ経験を活かし、2022年にブログフェニックスを設立。
WordPress立ち上げのノウハウを配信中。

目次

エックスサーバーの高速化設定後の表示速度

中休み

この項目では、エックスサーバーの高速化機能で表示速度が改善した実例を紹介します。

また併せて、評価指標と測定条件も解説します。

表示速度の評価指標

エックスサーバーの高速化機能設定後の表示速度

表示速度は、PageSpeed Insightsで測定しました。

評価指標は以下の2つです。

  1. パフォーマンススコア:表示速度の総合点
  2. LCP(Largest Contentful Paint):メインコンテンツが表示されるまでの時間

表示速度の測定条件

ページ表示速度の測定条件

表示速度の測定は、私が運営している別サイト(スムージーピュアライフ)で測定しました。

サイト概要と測定条件は、以下になります。

条件条件詳細
WordPressバージョン6.1.1
WordPresssテーマCocoon
投稿記事数45記事
掲載画像数741個
測定日、時間休日の21時
測定値5回測定時の平均値を採用
測定対象デバイス①モバイル
②パソコン
キャッシュプラグイン不使用
画像圧縮プラグイン不使用

パフォーマンススコアの結果

パフォーマンススコアの結果
指標高速化設定前高速化設定後
パフォーマンススコア(モバイル)70.6点81.6点11.6点
パフォーマンススコア(PC)85.4点99..2点13.8点

上の表が高速化機能設定前と、設定後のパフォーマンススコアの測定結果です。

パフォーマンススコアは「モバイルで11.6点」「PCで13.8点」改善されました。

LCP(Largest Contentful Paint)の結果

LCP(Largest Contentful Paint)の結果
指標高速化設定前高速化設定後
LCP(モバイル)6.1秒3.7秒2.4秒
LCP(PC)1.2秒0.8秒0.4秒

上の表が、高速化機能設定前と、設定後のLCPの測定結果です。

LCPは「モバイルで2.4秒」「PCで0.4秒」改善されました。

フェニック

エックスサーバーの高速化機能凄いね!

エックスサーバーの高速化機能を利用するだけで、表示速度が大幅に改善します。

エックスサーバーでの高速化機能の設定方法

中休み

この項目では、表示速度を高速化させる手順を解説します。

エックスサーバーでは、以下の項目を設定することで表示速度が高速化します。

「Xアクセラレータ」「サーバーキャッシュ設定」「ブラウザキャッシュ設定」はデフォルトで高速化設定されています。

そのため、この3項目については概要だけ解説します。

PHPのバージョンアップによる高速化

PHPとは、サーバー側で動くプログラミング言語です。

PHPを最新バージョンに更新することで、WordPressの表示速度は向上します。

最新のPHPを使用することによって構築したサイトの表示速度が上がります。
速度が速いと検索エンジンにも高く評価され、検索結果の表示順位が上がる点も大きなメリットです。

引用:AROOM-そもそもPHPって何?

エックスサーバー導入時は、PHPは7.4に設定されています。

最新の8.1にバージョンアップしましょう。

STEP
Xserverアカウントから【サーバー管理】をクリック
Xserverアカウントから【サーバー管理】をクリック
STEP
PHPをバージョンアップさせるサーバーを選択
PHPのバージョンをアップさせるサーバーを選択
STEP
【PHP Ver.切替】をクリック
【PHP Ver.切替】をクリック
STEP
PHPのバージョンを8.1に設定
PHPのバージョンを8.1に設定

設定が完了したら【変更】をクリックしましょう。

これでPHPを、最新バージョンに変更できました。

JIT設定による高速化

JIT設定による高速化

JITとはPHP8.0より追加された「OPcache」の拡張機能です。

JIT設定することで。サーバー側のCPUがPHP処理をキャッシュします。

これにより同じPHPにアクセスがあった場合、PHPの処理速度が高速化します。

エックスサーバーでJIT設定する場合は、「php.iniファイル」を編集します。


JIT利用について

エックスサーバーでは提供中の全てのサーバーで「JIT」は標準で無効になっております。
有効化する場合は、「php.ini直接編集」メニューより編集してください。

引用:Xserver-JITについて

「php.iniファイル」の編集によるJITの設定方法

STEP
Xserverサーバーパネルから【php.ini設定】をクリック
Xserverサーバーパネルから【php.ini設定】をクリック
  • 編集するドメインを選択しましょう
STEP
【php.ini直接編集】をクリック
【php.ini直接編集】をクリック
STEP
PHP.iniの最下部にコードを挿入
PHP.iniの最下部にコードを入力
  • 入力するコードは以下になります
  • PHP.iniの最下部にコードを挿入してください
[JIT]
zend_extension = opcache
opcache.enable = 1
opcache.jit = on
opcache.jit_buffer_size = 128M
コードの挿入が完了したら【確認画面へ進む】をクリック

コードの挿入が完了したら【確認画面へ進む】をクリックします。

内容に問題がなければ【確定する】をクリックしましょう。

これでJITの設定は完了です。

XPageSpeed設定による高速化

XPageSpeed設定とは、エックスサーバーが開発したWebサイト最適化機能です。

XPageSpeedを有効化するメリット
  • CSSファイル、JavaScriptファイルの圧縮
  • 画像ファイルの圧縮、WebP化
  • サーバーとクライアント間の通信量の削減
  • CSSファイル、JavaScriptファイル、画像ファイルのキャッシュ有効期間の延長

エックスサーバーの高速化機能で、最も表示速度に影響を与えます。

WordPressを導入したら必ず設定しましょう。

XPageSpeedの設定方法

STEP
Xserverサーバーパネルから【XPageSpeed設定】をクリック
Xserverサーバーパネルから【XPageSpeed設定】をクリック
  • 編集するドメインを選択しましょう
STEP
設定項目を全てONにする
設定項目を全てONにする
ONにする設定項目
  • 画像最適化
  • 画像の遅延読み込み
  • CSS最適化
  • CSS遅延読み込み
  • JavaScript最適化
  • JavaScript遅延読み込み

設定が完了したら【確認画面へ進む】をクリックします。

内容に問題がなければ【変更する】をクリックしましょう。

これでXPageSpeedの設定は完了です。

WordPressのデザインを確認する

WordPressのデザインを確認する
スムージーピュアライフのデザイン

XPageSpeed設定を有効化することで、WordPressデザインが崩れることがあります。

設定後は、トップページと記事ページのデザイン崩れを確認しましょう。

フェニック

デザインが崩れたらどうするの?

Shota

項目を1つずつOFFにして「どの項目がデザイン崩れの原因なのか」を確認します。

ブラウザやサーバーコンテンツの内容によっては、本機能を有効とした際にWebサイトの表示が崩れるなど、 異なる動作となる場合が稀にあります。その場合は、本機能を無効に設定してください。

引用:Xserver-XPageSpeed設定について

全ての項目をONにする必要はありません。

デザインを見ながら問題がある項目については、設定をOFFにしましょう。

(参考)Xアクセラレータによる高速化

Xアクセラレータとは、エックスサーバーが開発したWebサイトの高速化機能です。

Xアクセラレータは、以下の方法で表示速度を高速化させます。

  1. 静的ファイルのキャッシュ
  2. PHPプログラムの高速化

「Xアクセラレータ」はWebサイトを高速・安定化させるための機能です。
設定は以下のいずれかからお選びいただけます。

  • Xアクセラレータ Ver.1 … 静的ファイルの高速化(キャッシュ)
  • Xアクセラレータ Ver.2 … 静的ファイルの高速化(キャッシュ)+PHPプログラムの高速化
引用:Xserver-Xアクセスレータ
フェニック

意味わからないんですけど。。。

Shota

意味が分かるように解説します。

静的ファイルのキャッシュ

静的ファイルのキャッシュ

静的ファイルのキャッシュとは、読み込んだ情報を一時的にサーバーに保存する機能です。

静的ファイルのキャッシュにより、読者が2回目以降ブログを閲覧する際に素早くページが表示されます。

静的ファイルとは、以下のものが対象です。

キャッシュ対象ファイル(拡張子)

.css/.js/.jpeg/.jpg/.gif/.png/.svg/.svgz/.wbmp/.webp/.ico/.jng/.bmp/.3gpp/.3gp/.ts/.mp4/.mpeg/.mpg/.mov /.webm/.flv/.m4v/.mng/.asx/.asf/.wmv/.avi/.mid/.midi/.kar/.mp3/.ogg/.m4a/.ra/.woff/.woff2/.ttf/.otf/.eot

「XアクセラレータVer.2」がデフォルト設定されている画像

エックスサーバーでは、サーバー契約と同時に「XアクセラレータVer.2」がデフォルト設定されています。

そのため、Xアクセラレータの設定作業は不要です。

PHPプログラムの高速化

PHPとは、サーバー側で動くプログラミング言語です。

「Xアクセラレータ Ver.2」を利用することで、PHPプログラムの処理速度は最大20倍まで向上します。 

「XアクセラレータVer.2」がデフォルト設定されている画像

エックスサーバーでは、サーバー契約と同時に「XアクセラレータVer.2」がデフォルト設定されています。

そのため、Xアクセラレータの設定作業は不要です。

(参考)サーバーキャッシュ設定による高速化

(参考)サーバーキャッシュ設定による高速化

サーバーキャッシュとは、読み込んだ情報を一時的にサーバーに保存する機能です。

Xアクセラレータによる高速化と機能は同じです。

エックスサーバーでは、サーバー契約と同時に「サーバーキャッシュ」がデフォルト設定されている

エックスサーバーでは、サーバー契約と同時に「サーバーキャッシュ」がデフォルト設定されています。

そのため、サーバーキャッシュ設定の作業は不要です。

(参考)ブラウザキャッシュ設定による高速化

(参考)ブラウザキャッシュ設定による高速化

ブラウザキャッシュとは、読み込んだ情報を一時的にブラウザに保存する機能です。

ブラウザキャッシュにより、読者が2回目以降ブログを閲覧する際に素早くページが表示されます。

エックスサーバーでは、サーバー契約と同時に「プラウザキャッシュ」がデフォルト設定されている

エックスサーバーでは、サーバー契約と同時に「ブラウザキャッシュ」がデフォルト設定されています。

そのため、ブラウザキャッシュ設定の作業は不要です。

エックスサーバーの高速化設定のまとめ

今回はエックスサーバーでの、高速化設定について解説しました。

さくっと内容を振り返ります。

エックスサーバーの高速化設定の効果
  • パフォーマンススコアが大幅に改善
  • LCPが大幅に改善
表示速度を高速化させるための設定
  • PHPのバージョンアップ
  • JIT設定
  • XPageSpeed設定
デフォルトで高速化されている設定
  • Xアクセラレータ
  • サーバーキャッシュ設定
  • ブラウザキャッシュ設定

エックスサーバーの高速化設定で、読者に優しいサイトを作りましょう。

今回は以上です!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

コメント

コメントする

コメントに日本語が含まれない場合は表示できません(スパム対策)

目次