XSERVERでのお手軽ページ表示高速化設定

このページではXSERVER(エックスサーバー)でWebサーバをレンタルしている方向けに、サーバーパネルからWebページの表示を簡単に高速化する方法について説明します。

こんな方にオススメのページです

・Webページ表示を高速化したい

・できれば簡単に高速化したい

・XSERVERを使っている/興味がある

XSERVERサーバパネルで設定可能な高速化

まずWebページ表示の一般的な高速化の考え方について説明します。

下のページでも解説していますが、Webページの表示はクライアントがDNSサーバ・Webサーバと要求やデータ等を通信することで実現されています。

Webページ表示の仕組みと表示までの流れ

Webサーバとのやり取りの中で考えられる高速化は下記の通りです。

  • Webサーバの処理性能を上げる
  • Webサーバの処理負荷を減らす
    • 処理自体の負荷を減らす
    • 処理の実行回数を減らす
  • クライアント – Webサーバ間の回線通信速度を上げる
  • クライアント – Webサーバ間の通信負荷を減らす 
    • クライアント – Webサーバ間の通信データ量を減らす
    • クライアント – Web間の通信回数を減らす

「Webサーバの性能を上げる」と「回線通信速度を上げる」はWebサーバのハードの能力依存なのでレンタルサーバだと改善するのは難しいです。ただし、XSERVERだと元々レンタルサーバの中ではWebサーバの性能はかなり高いです。これ以上性能を上げたいのであれば、お金をかけて自分専用のWebサーバを構築するなどする必要があります。

しかし、他の項目についてはソフト的に高速化することが可能であり、エックスサーバーではこれらの高速化をサーバーパネルからお手軽に行うことができます。

サーバーパネルの設定により高速化できるのはWebサーバ側の処理となります。

サーバーパネルの設定で4つの高速化が可能です。

ブラウザキャッシュによる高速化

一つ目に説明するのはWebサーバとの通信回数を減らすブラウザキャッシュです。

ブラウザキャッシュはサーバーパネルの青枠で囲ったところから設定可能です。

ブラウザキャッシュの効果

ブラウザキャッシュとは、直近で表示したWebページのデータをクライアントのWebブラウザに一時的に保存しておき、次回同じページを表示する際にそのWebブラウザに保存されているデータを使用する機能です。

最初にWebページを表示するときは通常通りWebサーバにデータを要求し、必要なデータを受信してそれをWebブラウザに表示します。

ブラウザキャッシュを有効化しておくと、Webブラウザは受信したデータをキャッシュに保存します。そして、次回同じページを表示する際には、Webサーバからではなくキャッシュに保存されているデータを使用してWebページを表示します。もし、ページ表示するのに必要なデータが全てキャッシュに残っているのであれば、Webサーバからのデータを受信することなくWebページが表示できます。

ブラウザキャッシュ機能では、どのファイルをWebブラウザにキャッシュさせるかを指定することが可能です。上の例だと画像とHTMLをキャッシュさせています。

メリット

通信データ量が減る

キャッシュされているデータはWebサーバに要求しなくなるので、クライアント – Webサーバ間の通信回数・通信データ量をを減らすことが可能です。Webサーバとのやりとり自体をなくすことができるので、一番効果は高いです。特に画像や動画などはサイズが大きく表示するのにデータ通信量が大きいので、ブラウザキャッシュの効果は大きいです。

Webサーバの負荷が減る

またWebサーバ側でコンテンツ生成する必要もありませんのでWebサーバの負荷が減ります。

ただしこの機能が効果あるのはキャッシュが残っているWebブラウザからWebページを表示したときだけです。

例えば同じWebページに別のクライアントからアクセスしても効果はありません。

デメリット

Webページがすぐに更新されない

ブラウザキャッシュのデメリットはWebページ更新の反映が遅れることです。Webサーバのコンテンツを変更したとしても、Webブラウザのキャッシュが消えないとキャッシュのデータを用いられるので古いデータのままWebページが表示されてしまいます。

のちに説明するXアクセラレータであればサーバ側のキャッシュを利用しているのでサーバーパネルから削除してすぐ新しいデータが反映されるようにできますが、ブラウザキャッシュはクライアント側のキャッシュでありサーバ側から削除することができず、時間が経ってキャッシュが消えるまで待つしかありません。

スポンサーリンク

mod_pagespeedによる高速化

二つ目に説明するのがWebページ表示時にWebサーバから送信するデータ量を減らすmod_pagespeedです。

mod_pagespeedはサーバーパネルの緑枠で囲ったところから設定可能です。

mod_pagespeedの効果

mod_pagespeedはGoogle社により開発された拡張モジュールです。mod_pagespeedはWebサーバで動作し、コンテンツをクライアントに送信する前に、データを圧縮・最適化・結合してから送信します。そのため、Webサーバからクライアントに送信するデータ量を削減することができます。

ちょっと簡単な例を実際に見てみましょう。下記のHTMLとCSSを用いてmod_pagespeedをONにするとファイルがどう変化するかを確認します。

mod_pagespeed_test.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css">
        <title>HTML</title>
    </head>
    <body>
        <p>画像1つ</p>
        <p><img src="skytree.jpg" alt="握手" width="100" height="100"/></p>
    </body>
</html>
style.css
p {
  color:blue;
  line-height:1.5;
}

mod_pagespeed適用後、まずHTMLは下記のように変化しました。

mod_pagespeed_test.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" type="text/css" href="style.css.pagespeed.ce.ig3JpTqtDP.css">
        <title>HTML</title>
    </head>
    <body>
        <p>画像1つ</p>
        <p><img src="skytree.jpg.pagespeed.ce.eZulGq9YGm.jpg" alt="握手" width="100" height="100"/></p>
    </body>
</html>

CSSと画像のファイル名が変化していることが確認できると思います。これは、このHTMLが最適化後のCSSファイルと画像ファイルを参照するようになったために変化しています。

では実際にスタイルシートどう最適化されたのかをみてみます。

style.css.pagespeed.ce.ig3JpTqtDP.css
p {color:blue; line-height:1.5;}

非常に単純で改行が全て削除されています。CSSは改行がなくてもファイルが実行可能なので、処理するのに不要と考えて削除し、それによりデータ量を削減しているのです。

ここからは上級者向けですが、このmod_pagespeedはどのような最適化を行うかを.htaccessファイルを編集することで設定することが可能です。.htaccessファイルはサーバパネルの赤枠で囲った部分から変更することが可能です。

注意

.htaccessファイルは変更の仕方を誤るとうまくWebページが表示されなくなる場合があります

バックアップをとったり、変更前の内容をメモ帳等にコピペしておくことをオススメします

例えば2048Byte以下のCSSファイルをHTMLにインライン展開する(HTMLに直接埋め込む)ようにしたいのであれば、.htaccess下記を追加します(「ModPagespeed On」はmod_pagespeed設定をONにすれば勝手に記載されているはずです)。

ModPagespeed On
ModPagespeedEnableFilters inline_css
ModPagespeedCssInlineMaxBytes 2048

これにより、HTMLファイルが下記のように変わります。

mod_pagespeed_test.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>p {
  color:blue;
  line-height:1.5;
}
</style>
        <title>HTML</title>
    </head>
    <body>
        <p>画像1つ</p>
        <p><img src="skytree.jpg" alt="握手" width="100" height="100"/></p>
    </body>
</html>

今度は別ファイルとして存在していたCSSファイルを参照するのではなく、CSSファイルの中身がそのままHTML内に記載されていることが確認できます。これが簡単な結合の例です。別ファイルを参照する場合、クライアントはそのファイルをWebサーバに要求し、そのファイルを受信する必要がありますが、結合されていれば要求から受信の流れが1度で済むため通信負荷が下がります。

ここではCSSを用いて例を示しましたが、他にも画像やJavaScriptに対しても圧縮が行われ、ページ表示の高速化が行われます。

メリット

通信データ量が減る

データ送信のサイズが減るのでその分ページ表示の速度がアップします。さらに通信量も減るのでスマホなどを使用していてデータ通信量制限があるユーザにもありがたい機能になります。

デメリット

サーバの負荷が上がる

圧縮や最適化・結合の処理はWebサーバで行われますので、Webサーバへの負荷は高くなります。Webサーバの性能が低いと圧縮や最適化の処理に時間がかかってむしろページ表示が遅くなる可能性もありますので注意が必要です。こういう観点でもWebサーバの性能は高い方が良いのです。

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

三つ目はWebサーバで動くPHPプログラムの処理の高速化を行うPHPのバージョンアップについて説明します。

PHPのバージョンアップはサーバーパネルのオレンジ枠で囲ったところから実行可能です。

PHPバージョンアップの効果

PHP7.xでは旧バージョンのPHP5.xから処理が高速になっています。CPUにもキャッシュ機能があり、PHP7ではそのキャッシュを上手く作用して高速化できるようにデータの扱い方が改善されたようです。

ですので、Webサーバで動的にPHPからHTMLを生成しているようなWebサイトであれば、バージョンをPHP7以上に上げてやるだけで、ページの表示を高速化することができます。

メリット

WordPressの処理が速くなる

特にメリットが大きいのがWordPressを使用しているWebサイトです。WordPressは多くのPHPから構成されていますので、PHPのバージョンアップをするだけでWordPress全体の速度も向上し、Webページ表示に必要なHTMLファイルを生成する時間が短縮されます。

デメリット

Webページがうまく表示されなくなる可能性がある

PHPのバージョンが変わるので、あなたが使用しているPHPプログラムが古いバージョンでしかサポートされていない機能を使用していると上手く動がなくなってしまいます。

WordPressの場合はあなたが使用しているテーマがPHP7に対応しているかどうかで変わりますので、有名どころのテーマを使用しているのであればバージョンアップ前にPHP7にしても問題ないか検索してみると良いと思います。

今後古いバージョンのPHPをWordPressがサポートしなくなる可能性もありますので、できるだけ早めにバージョンアップしておく方が良いと思います。

Xアクセラレータによる高速化

四つ目に説明するのはWebサーバでの処理回数を減らすXアクセラレータです。

Xアクセラレータはサーバーパネルの紫枠で囲ったところで設定可能です。

Xアクセラレータの効果

Xアクセラレータは一つ目に説明したブラウザキャッシュと同様にキャッシュを利用した高速化のようです(公式に明確に発表されていない)。

ただし、キャッシュする場所が異なります。ブラウザキャッシュがクライアント側のWebブラウザにキャッシュさせるのに対し、XアクセラレータはWebサーバ上でキャッシュさせます。ですのでブラウザキャッシュとは異なる効果となります。

Xアクセラレータでも、ブラウザキャッシュ同様にキャッシュが存在していない状態ではクライアントから要求されたページを表示するためのデータを用意して、そのデータをクライアントに送ります。WordPressを使用しているのであれば、データを用意するためにWordPressが動作してHTMLファイルを生成します。

このとき、用意したデータをWebサーバ側でキャッシュします。これにより次回からのそのページ表示要求時には、キャッシュにあるデータをそのままクライアントに送信します。HTMLもキャッシュ対象にしておくとWordPressの処理をそのまますっぽりカットすることができます。

メリット

サーバの負荷が減る

WebサーバでWordPress等の動的にHTMLを生成する仕組みを利用している方は、Xアクセラレータの設定を「ON(全ファイル)」にしておけばキャッシュが効いたときにHTMLを生成する処理を行わずにページ表示できるようになるので特に高速化の効果が高いです。ただし、ブラウザキャッシュと違って、キャッシュが効いたとしてもデータ送信は必要ですので高速化の効果はブラウザキャッシュよりも低いです。

しかし、Xアクセラレータによるキャッシュはサーバー側でのキャッシュですので、キャッシュによる高速化の効果は違うクライアントのWebブラウザからページ表示した時に効果があります。ですので、一度にたくさんのユーザからWebページ表示を要求された時に特にメリットの大きい機能となります。

デメリット

Webページがすぐに反映されない

ブラウザキャッシュ同様にWebページの変更がページ表示に反映されるのが遅くなります。

ただし、XアクセラレーターはWebサーバ側でのキャッシュであり、サーバーパネルからキャッシュを削除することが可能ですので、ページ表示の変更の反映は自分でコントロールすることが可能です。キャッシュさえ削除してしまえば、次のWebページ表示要求時には変更後の情報に基づいてコンテンツデータを用意して送信が行われるようになります。

Webページがうまく表示されなくなる可能性がある

また同じURLのページでも、訪問者別に異なるコンテンツを表示するようなWebサイトの場合は注意が必要です。例えばキャッシュが効いてしまうと、他のユーザ向けに生成したコンテンツをそのまま別のユーザにも送信してしまうことになってしまいます。なので、普通そういうサイトではキャッシュが残らないように設定すると思いますが、キャッシュが無ければこのXアクセラレーターの効果は得られません。

さらにキャッシュに他のユーザのデータが残ることになるので、もしそこに公開したくない情報が残ってしまうとそれを悪意ある人間に盗まれてしまう可能性もありますので注意が必要です。機密な情報を扱うWebサイトやショッピングサイト等では、この機能はOFFにしておいた方が良いと思います。

スポンサーリンク

まとめ

エックスサーバーではサーバーパネルからお手軽にWebページ表示を高速化することができます。高速化できる設定は下記の4つです。

  • ブラウザキャッシュ
  • mod_pagespeed
  • PHPバージョンアップ
  • Xアクセラレーター

それぞれデメリットもありますのでそこを踏まえた上で、自分のWebサイトに適用するかどうかを決めましょう!

もしこのページを見てエックスサーバーのWebサーバを使ってみたいという方は下記からレンタルの申し込みが可能です。申し込み後の最初の10日間は無料お試し期間になっています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です