タグ別アーカイブ: html

各リソースをgz圧縮して転送量を抑える

この記事は2011/2に掲載されたものです。
記事の内容が古くなっている為、現状と異なる可能性があります。

ライブラリに関してはCDNのキャッシュを使う事も出来ますが、自作のライブラリやCSS等のリソースはCDNには登録されていないので
ファイルの転送サイズが膨れがちです。

そこで対応ブラウザの場合はリソースファイルをgz圧縮して転送するように設定する方法を備考録として書いておきます。

参考サイト

前提

転送数を減らす為にCSSとかJavaScriptとかで1ファイルにまとめられるものはまとめておく。

それに加えて圧縮をかける事により転送するデータ量を減らします。

また、gz圧縮できるアーカイバが必要。

ファイルの圧縮

まずは対象のファイルをgz圧縮します。

gz圧縮は1ファイルしか圧縮できない形式なので、まず、CSSやJavaScriptファイルを1つにまとめておきます。

別にまとめなくともこの手法は有効ですが、転送数が多いままになってしまうことと、読み込み方法によってはシリアルで読み込んでしまうのでまとめておく方が早いです。

まとめたファイルをgz圧縮します。自分の場合、windowsではExplzh、mac/linuxの場合はgzip -c [ファイル名] > [ファイル名].gzを使用しています。

.htaccessの作成

gzファイルが存在する場合はgzファイルを読み込むように設定をします。

最近は使えるサーバが多くなっていますが、mod_rewriteがサーバに入っていないと使えません。

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{HTTP:Accept-Encoding} gzip
    RewriteCond %{REQUEST_FILENAME} !.gz$
    RewriteCond %{REQUEST_FILENAME}.gz -s
    RewriteRule .+ %{REQUEST_URI}.gz

    <FilesMatch ".html.gz$">
        ForceType text/html
        AddEncoding x-gzip .gz
    </FilesMatch>

    <FilesMatch ".txt.gz$">
        ForceType text/plain
        AddEncoding x-gzip .gz
    </FilesMatch>

    <FilesMatch ".js.gz$">
        ForceType application/x-javascript
        AddEncoding x-gzip .gz
    </FilesMatch>

    <FilesMatch ".css.gz$">
        ForceType text/css
        AddEncoding x-gzip .gz
    </FilesMatch>
</IfModule>

まず、mod_rewriteでgzファイルが存在する場合にはアクセスされたファイル名.gzを読み込むように切り替えています。

そして、FileMatchでファイル毎にMIME-TYPEとgzエンコードを指定しています。

これによってgz圧縮ファイルに対応しているブラウザの場合はgzファイルを読み込めるようになります。

更に高速化

これだけでファイルのサイズが下がりますが、キャッシュで持たせるようにしておきます。

これも.htaccessに記述する事によって利用可能です。

ExpiresActive on
ExpiresDefault "access plus 1 month"
FileETag None

HTMLテンプレート作成ページ

この記事は2010/5に掲載されたものです。
記事の内容が古くなっている為、現状と異なる可能性があります。

主に自分が仕事などで使うようにHTML5、HTML4.01(Strict、Transitional)のHTMLテンプレート作成ページを適当に作りました。

利用とか特に制限していないのでご自由にどうぞ
気が向いたら更新とかかけますので何か不都合でもあったらコメントしてください。

オレオレHTMLテンプレート作成機