【難問解決】 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="http://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に成功した!【安定】


スポンサーリンク