PHPでgzip圧縮する方法 極限までの圧縮をかけて表示最速への道のりまとめ
久しぶりに新しいwebサービス作ろうと立ち上げた「Judge」またもやメディア形式のサービスとして出発しますが、このサービスはSharetubeでダメだったポイントを徹底的に潰してやろうとひとまず圧縮関連をやりましたので忘備録としてここに置いておきます。
圧縮の全体図
基本はgzipを使用して圧縮を行いますが、css、htmlも圧縮する前に無駄な改行などを省いて圧縮をしています。・css圧縮
・html圧縮
・gzip圧縮(html、gzファイル生成)
・キャッシュ
・画像圧縮
この5点で表示最速を目指します。
css圧縮
読み込みたいcssを変数化して合体させつつ圧縮していきます。
// 読み込みたいcssを変数化$core_css = file_get_contents(PATH."assets/css/core.css");
$common_css = file_get_contents(PATH."assets/css/common/common.css");
$matome_css = file_get_contents(PATH."assets/css/matome/common.css");
$css = $core_css.$common_css.$matome_css;
// css圧縮
$css = preg_replace;
// コロンの後の空白を削除する
$css = str_replace;
// タブ、スペース、改行などを削除する
$css = str_replace( array("
", "", "
", " ", " ", " ", " "), "", $css);
これでひとまず圧縮したcssが完成しました。
html圧縮
上記で圧縮したcssを差し込みつつ圧縮したいhtmlを変数に入れて圧縮します。
$gzip_article_html = 上記で圧縮したcssを差し込み圧縮したいhtmlを入れる;
// HTML圧縮
$search = array(
"/>[^S ]+/s", // strip whitespaces after tags, except space
"/[^S ]+
"/(s)+/s" // shorten multiple whitespace sequences
);
$replace = array(
">",
"<",
"\1"
);
$gzip_article_html = preg_replace;
これでひとまず圧縮したhtmlが完成しました。
gzip圧縮
圧縮をかけたhtmlを更にgzipにて圧縮して最速を狙いましょう。
// articleファイル生成file_put_contents;
$file_org = 生成したい場所/index.html";
$file_gzip = $file_org.".gz";
// 元ファイルの内容を読み込む
$code = file_get_contents($file_org);
// gzip圧縮処理して同一フォルダにファイルを作成
$gzip = gzopen($file_gzip ,"w9");
gzwrite($gzip ,$code);
gzclose($gzip);
関数：gzopen($file_gzip ,"w9");のw9という箇所を1〜9にすると圧縮率が変わりますので最適な圧縮率にしましょう。これでindex.htmlとindex.html.gzが生成されます
これだけでは動きませんので下記に書いた内容を忘れないでくださいね。
.htaccessでgzipを利用可能にする
RewriteEngineをOnにする
Options +FollowSymLinks
内部ディレクトリ非表示
Options -Indexes
RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
ForceType text/css
AddEncoding x-gzip .gz
ForceType application/x-javascript
AddEncoding x-gzip .gz
ForceType text/html
AddEncoding x-gzip .gz
(.php) ForceType text/html
AddEncoding x-gzip .gz
.htaccessを作成して上記の内容をペースとして保存すればgzipは動くようになります。
.htaccessでキャッシュ利用可能にする
Expires を指定する方法
ExpiresActive On
Off
全てをキャッシュする
ExpiresDefault "access plus 1 days"
HTML
ExpiresByType text/html "access plus 7 days"
Favicon
ExpiresByType image/vnd.microsoft.icon "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
CSS
ExpiresByType text/css "access plus 1 year"
JavaScript
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript "access plus 1 year"
ExpiresByType text/javascript "access plus 1 year"
画像や動画
ExpiresByType audio/ogg "access plus 3 month"
ExpiresByType image/bmp "access plus 3 month"
ExpiresByType image/gif "access plus 3 month"
ExpiresByType image/jpeg "access plus 3 month"
ExpiresByType image/png "access plus 3 month"
ExpiresByType image/svg+xml "access plus 3 month"
ExpiresByType image/webp "access plus 3 month"
ExpiresByType video/mp4 "access plus 3 month"
ExpiresByType video/ogg "access plus 3 month"
ExpiresByType video/webm "access plus 3 month"
データはキャッシュさせない
ExpiresByType application/json "access plus 0 seconds"
キャッシュに関しては色んな方法がありますが、今回は.htaccessでExpiresActiveのonにして様々なコンテンツ毎にキャッシュを指定してキャッシュを有効化しました。
画像圧縮
画像圧縮に関しましては既に記事を書いていますのでこちらを参考にしてください。
画像圧縮ツールjpegoptimとpngquant インストールと使い方
http://sharetube.jp/article/7175/
Sharetubeは毎日記事が量産され、その中で多くの画像を使用されています。ページが遅い多くの要因は画像系・動画系のコンテンツですので、この部分を軽量化をする事ができればサ...
ページスピードを調べる事ができる「PageSpeed Insights」
今回施策を施したサイト「Judge」
最後に
全ての施策を行うと・・・「PageSpeed Insights」での評価はモバイル・PC共に65から100になりました爆速サービスになりましたのでSEOの観点からも期待のできる結果となりました。
