【速い】 SSIでincludeに成功した！【安定】

普段からもっさりした動作のうちのサイトたち。
しかも、503エラーもなかなかゼロにならない。
（大量の503エラーが出る日とゼロの日がある）

そこで、アクセスして頂いたお客さんを逃がさないようを、サイトをできるだけ軽くして、500エラーをゼロかゼロ近くにすべく、再度、サイトの見直しをすることにしてみた。

ところが、色々と考えてみたが、もうすでに手直しできそうなところはやってしまっていたので、ここからさらに大きくサイトを軽くするのは難しいように思われた。

【軽量化】 503エラーゼロ大作戦【統合】

圧縮ができない！を改善する

確かに、Google の PageSpeed Insights で指摘されていた 『 CSSやHTMLファイルの圧縮』 はまだ残っていた。
（CSSの縮小など、他にも若干やることは残っていた）

でも、やろうとはしたのだが、どうしても上手くできなかった。
何故か圧縮が反応しなかったり、反応しても500サーバーエラーが出てしまい、ストップしてしまうのだ。

さくらのレンタルサーバは Apacheの圧縮機能（mod_deflate）には対応しているようだった。

なので、うちのサイトが圧縮ができないのはどう考えてもおかしい。
そこで、何が原因で圧縮ができないのか、実験して調べてみることにしてみた。

圧縮実験開始

とりあえず、未使用のドメインを使って、普通のHTMLファイルを使って圧縮が効くかどうか実験してみた。

すると、普通に圧縮することができた。
やはり、さくらレンタルサーバーで圧縮が効くのは確かなようだった。

次に、テンプレートファイルをPHPで読み込んで圧縮が効くかどうか実験してみた。

すると、前に失敗したのと同様、やはり圧縮に失敗した。
どうやら原因はテンプレートファイルをPHPで読み込んでいることにあるようだった。

SSIでIncludeする方法

今の方法（詳しくは【難問解決】 PHPでテンプレートをincludeした）では、ファイルの圧縮に失敗してしまうのだけは確かなようだった。
そこで、別の方法でテンプレートファイルの読み込みをしてみることにした。

そこで私が選んだのが、SSI によるテンプレートファイルの読み込み だ。
SSI によるテンプレートファイルの読み込みは初めてなのでよくわからなかったが、とりあえずネットで情報を調べつつ、手探りでIncludeしてみることにした。

CGI・PHP・SSI について

とりあえず、うちのサイトは拡張子が *.htm なので、SHTML ファイルでしか動かせないSSIに対処すべく、例のごとく、Apacheの機能を使って HTMLファイルを SHTMLファイルで動かせるように設定することにした。

まず最初に htaccess ファイル に記述したコードがこれ。

AddType text/x-server-parsed-html .html

でも、これではHTMLファイルを SHTMLファイルで動かすことはできなかった。
そこでさらに調べてみると、さくらのレンタルサーバーでは、↓のコードを使わないといけないようだった。

AddOutputFilter INCLUDES .html .htm

【参考】
さくらインターネットで SSI を .html で動かす方法(.htaccess)

さらに、さくらインターネットのヘルプを見て、インクルード用のコードを調べてみた。

テンプレート用のファイルは、色々な階層のHTMLファイルで使う予定だったので、相対パスではまずいので、絶対パスで読み込める 『 include virtual 』 を使うことにした。

【階層】絶対パスと相対パスについて詳しく解説

#htaccessファイルにコードを追加 AddOutputFilter INCLUDES .html .htm

 

SSIとは

SSIとは、サーバーサイドインクルードの略。

Server
サーバー

Side
～の側の

Include
含む、含める

ひとことで言うと、使用中のサーバーが『 SHTMLファイルに書かれたコメントのコード』 の通りに、あれやこれやと 『実行』 してくれると言う便利機能。

サーバーがSSIを使えるように設定していないとSSIは使えないので、サーバー契約する前に、契約したいレンタルサーバーでSSIが使えるかどうかをチェックする必要がある。
（格安レンタルサーバーの場合、SSIが使えない可能性もあるので要注意！）

SSIのコマンドとして書かれてあるのは 『コメント用のコード』。
なので、普通のHTMLタグとはちょっと違う。

コードやタグばっかりだと何のコードか何のタグだかわかりにくくなるので、HTMLファイルには、このような形でコメントを入れられるようになっている。

 <div id="sidebar">  <h5>プロフィール</h5> <p>名前はかつぶしおと言います。<br> 『勝つ』と前のニックネームの『塩』から名前をとりました。</p>  <script>hogehoge</script> </div>