ホーム
WEB制作
WEBサイトをテンプレート化する方法

【難問解決】 SSIのインクルードで圧縮できるか実験してみた

前のページでも書いたように、 さくらのレンタルサーバ で、SSIでテンプレートを読み込む実験には成功した。

そこで、次にSSIでテンプレートを読み込んだ後、Apacheの自動圧縮機能（DEFLATE）が使えるかどうか実験してみた。

すると、↓のような 『 通常の圧縮用のコード 』 では圧縮できなかった。

# ファイル圧縮
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/php
AddOutputFilterByType DEFLATE text/htm
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/jpg
AddOutputFilterByType DEFLATE image/jpeg
AddOutputFilterByType DEFLATE application/pdf
AddOutputFilterByType DEFLATE image/x-icon

ちなみに、『 DEFLATE 』 とは 『 空気を抜いたり 萎ませる 』 と言う意味。
この他、『 意気消沈させる 』 などのあまり良くない意味でも使われる。

deflateの意味・解説

経済ニュースなどでよく耳にする 『 デフレ 』（通貨収縮）やデフレーションは、ここから来ている。

deflationの意味・解説

空気を抜くこと、収縮、デフレ(ーション)、通貨収縮

テンプレートをSSIでインクルードしない場合は↑のコードでも圧縮できたが、SSIでインクルードした途端、普通の圧縮では圧縮できなくなってしまった。

なので、別の圧縮用のコードを試してみることにした。

【参考】
gzip 圧縮によるサイトパフォーマンスを向上させる方法

↓のコードで圧縮することができた。

# 圧縮
SetOutputFilter DEFLATE
SetEnv force-gzip

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary

この後さらに実験してみてわかったのだが、どうやら PHP の get_contents のコード（ <?php $openfile = file_get_contents(""); echo $openfile; ?> ）で、テンプレート用のファイルを読み込む場合は、htaccessファイルの↓のコードで圧縮が阻害されているようだった。

Action myphp-script /my_php.cgi

これは 『 このサイトにお客が訪れたら、サーバーは必ず最初にトップの階層にある my_php.cgi を読み込みなさい 』 と言う命令なのだが、これをやってしまうことで、圧縮の命令ができなくなってしまうようだった。

ヘテムルを使用していた時は、Action myphp-script /my_php.cgi が無くても PHP の Include コードが使えたためこの問題が起きなかったが、さくらのレンタルサーバではそのままではPHP のInclude コードが使えないため、この問題が起きてしまったのかもしれない。

念のため、Action myphp-script /my_php.cgi と SetOutputFilter DEFLATE のコードの順序を変更してみたが、結果は同じだった。

別のドメインのテンプレートファイルをIncludeできない

今までは、URLで指定することで別のドメインのテンプレート用のファイルを読み込んでいたのだが、SSIのテンプレートファイルの読み込みではそれはできないようだった。

と言うのも、URLでのファイルの指定ができないからだ。
（実験してみた所、URLからはインクルードできなかった）

このため、URLで指定してあった読み込みファイルの指定は全て 『 絶対パス 』 に変更した。

CGI・PHP・SSI について

○　Includeできる
<!--#include virtual="/www/hogehoge.htm"-->

×　Includeできない
<!--#include virtual="https://www/hogehoge.htm"-->

なので、CSSはテンプレートファイルにCSSのURLをそのまま書けばよいだけなので複数のサイトで共通化できるが、HTMLファイルのテンプレートは複数のサイトで共通化できなくなってしまった。
（たまに、全サイトのテンプレートを書き換えるだけだったりするのだが、これが意外とめんどくさい。(；・∀・)）

外部サイトのCSS
共通化できる

外部サイトのHTMLテンプレート
共通化できない

外部サイトの画像
共通化できない
（CSSで表示する場合は共通化できる）

そのようなわけで、今までは共通化して一括で変更できていた箇所は、一々、全サイト手作業で変更せざるを得なくなった。

最初は、Scriptで表示しようかとも考えたが、Scriptを動かすための jQuery のファイルまで読み込ませないといけなくなるので（そのぶんサイトが重くなる）、そこまでして読み込むべきではないと思ったので、Scriptで表示することはやめた。

SSIで圧縮してみた結果

そのようなわけで、実験的にSSIでサイトのテンプレートを読み込み、さらに圧縮をかけてみたところ、何の問題もなくテキストファイルやHTMLファイルを読み込むことが出来た。

さらに、ページの表示スピードも早くなったように思った。
実際に、Google の PageSpeed Insights で調べてみたところ、かなり早くなっているようだった。
（15点ほど点数が良くなった）

読み込みに失敗した場所の表示

SSIでパスの指定が間違えていたり、サーバーにファイルをアップロードし忘れていたりすると、サーバーが命令を指示通りに実行できず、エラーメッセージが出る。

[an error occurred while processing this directive]
（訳：この命令を処理している間にエラーが起きた）

SSIの場合、このエラーメッセージが表示されるので、何らかのエラーが起きていることがわかりやすい。

このエラーはたいていの場合、パスの指定間違いや、ファイルのアップロードし忘れや、ファイル名間違いのような単純なものなので、普通はパスやファイル名やアップロードしたかどうかを見直すことで解決できる。

共用CSSの圧縮方法

SSIで別のドメインから共用のテンプレートを読み込むことはできないが、共用の外部CSSは表示することができる。
（CSSファイルは <head></head> 内から読み込むため）

この際、別のドメインから読み込む外部CSSを圧縮していないと、ページの表示スピードが落ち、PageSpeed Insights の数値も悪くなる。

この場合は、外部CSSのあるフォルダに上記の圧縮コードの書かれたhtaccessファイルを設置すると良い。

# 圧縮
SetOutputFilter DEFLATE
SetEnv force-gzip

BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary

【嬉しい誤算】 503エラーがゼロになった！

SSIを使うと、ページが早くなったような気がした。
でも、気のせいかなと言う気がしていた。

Google Pagespeed insights では、若干スピードが向上していた。
（成績はさほど向上しなかった）

それが、圧縮に成功した後は、Google Pagespeed insights での成績はスマホ用で73〜76までUPし、PC用では90近くまでUPし、ページの表示スピードも結構早くなったような気がした。

そんなわけで、503エラーはどうだろうと思い確認してみると、何と、503エラーが激減していた。
理由は不明。

多分、無理をしてPHPでファイルを読み込んでいた（擬似インクルード）をやめ、SSIでインクルードすることで、かなりサーバーの負荷が減ったのではないかと思う。

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

また、SSI自体の動作もPHPより早いのではないかと思う。
事実、さくらのレンタルサーバーのかなり安いコース（さくらのレンタルサーバ スタンダード）で、なおかつ、忍者ツールなども入れているのにこのスピードが出ているし、503エラーも無くなった。

と言うわけで、かなりの時間がかかってしまったが、今回のSSIへの変更は、私的には大満足の結果に終わった。

次ページ

jQuery で外部ファイルを読み込んだ時に文字化けするのを解消する方法

前ページ

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

広告

このカテゴリの記事
その他のカテゴリを見る