• ブログTOP
  • AI・ディープラーニング
  • AR
  • VR
  • WEBサイト
  • WEBマーケティング
  • SEO
  • SNS
  • その他
  • お問い合わせ

ALAKI株式会社

COZIKEEいつまでも使えるTech情報発信ブログ

「gzip圧縮」でWebサイトを高速化しよう!【mod_rewrite編】

2017年12月15日

  • このエントリーをはてなブックマークに追加

こんにちは、Webプログラマの篠田です。

大阪では寒い日が続いています。

個人的に、夏の暑さも堪えますが、冬の寒さも苦手な典型的もやしっ子は、こたつに入りながら春の来るのを待ちたい気持ちです。

前回「『gzip圧縮』でWebサイトを高速化しよう!【mod_deflate編】
」では、「mod_deflate」を利用した「gzip圧縮」方法をご紹介しました。

今回は、サーバー負荷を軽減して「gzip圧縮」を行う方法「mod_rewrite」をご紹介します。

この記事の目次

  • 1 「mod_rewrite」を使って「gzip圧縮」を実現する理由
  • 2 「mod_rewrite」を使っての「gzip圧縮」の注意点
  • 3 サーバーで「gzip圧縮」を行う
  • 4 .htaccessで「gzip圧縮」を有効化
  • 5 まとめ

「mod_rewrite」を使って「gzip圧縮」を実現する理由

「mod_deflate」を利用した「gzip圧縮」方法は、記述内容も少なくサイトへの実装が非常に簡単です。

ですが、レンタルサーバー(特に、低価格な共用サーバー)によっては、サーバー負荷を懸念され「mod_deflate」の利用ができないものもあります。

その代案の1つとして「mod_rewrite」による「gzip圧縮」方法を選択するという場合もあります。

その他にも、サーバー負荷の軽減を目的として、あえて「mod_rewrite」を利用する場合もあります。

「mod_rewrite」を使っての「gzip圧縮」の注意点

「mod_rewrite」を利用した「gzip圧縮」方法は、事前に「gzip圧縮」を行ったファイルが必要となります。

そのため、「gzip圧縮」ファイルが無い状態で.htaccessを書き換えても、「gzip圧縮」転送は利用できません。

また、別途定期的な「gzip圧縮」処理の必要になりますので、注意しましょう。

事前に「gzip圧縮」されたファイルを用意するので、「mod_deflate」よりもサーバーに負荷が少ないという所以です。

サーバーで「gzip圧縮」を行う

「gzip圧縮」を行う場合、最も簡単なのはサーバーのコンソール画面で行う方法です。

下記のコマンドを、「gzip圧縮」を行いたいファイルがあるディレクトリで行います。

1
# gzip -c style.css > style.css.gz

「gzip」コマンドを実行して対象のファイルを、「gzip圧縮」することができます。

注意が必要なのは、「gzip」コマンドをオプション無しで実行すると、元のファイルが消えてしまう点です。
※ブラウザのリクエストに必要なのは「gzip圧縮」されたファイルのみなので、実体がなくてもページは表示されます。
ただし、すべてのブラウザが「gzip圧縮」に対応している訳ではないので、保険で実体はおいておくのが良いです。

「-c」オプションを付けることで、圧縮元のファイルを残して、圧縮ファイルを作成することができます。

これで、「gzip圧縮」ファイルの準備はできました。

.htaccessで「gzip圧縮」を有効化

最後に、.htaccessに「gzip圧縮」ファイルをブラウザに対して送信する設定になります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<IfModule mod_rewrite.c>
#mod_rewriteを有効化
RewriteEngine on
 
#ブラウザからの「gzip圧縮」リクエストがあるかを確認
RewriteCond %{HTTP:Accept-Encoding} gzip
 
#要求されているファイルの拡張子を取得(今回はjsとcssのみ)
RewriteCond %{REQUEST_URI} (\.js|\.css)$
 
#要求されたファイル名に「.gz」の拡張子をつけたファイルがあるかを確認
RewriteCond %{REQUEST_FILENAME}\.gz -s
 
#最後にリクエストされたファイルから「gzip圧縮」済みファイルに置換します。
RewriteRule .* %{REQUEST_URI}.gz [L]
</IfModule>
 
#gzip版cssファイルタイプの変更
<FilesMatch "\.css\.gz$">
ForceType text/css
AddEncoding x-gzip .gz
</FilesMatch>
 
#gzip版jsファイルタイプの変更
<FilesMatch "\.js\.gz$">
ForceType application/x-javascript
AddEncoding x-gzip .gz
</FilesMatch>

これで、.htaccessの設定は完了です。

最後の「FilesMatch」設定は、通常「gzip圧縮」されたファイルは「application/gzip」または「application/x-gzip」として認識されます。

それでは、本来のCSSやJavaScriptとしてブラウザが読み込めないので、それぞれの「gzip圧縮」ファイルをCSSのファイルタイプ、JavaScriptのファイルタイプに変換するという処理が必要となります。

まとめ

「gzip圧縮」の情報は多くありますが、「mod_deflate版」か「mod_rewrite版」で、.htaccessの書き方も変わりますが、大きく異なる点は「gzip圧縮」ファイルを用意する必要があるかどうかです。

この点を間違えると、せっかくの設定が意味をなさなくなりますので、ご注意ください。

  • ツイート
  • このエントリーをはてなブックマークに追加

You may also like...

  • アイデアブレストイメージ画像

    BtoB向け受発注システムを作りました!

    14 7月, 2017

  • 14800708_xl

    Macにおける、簡単ローカル環境のすすめ-Virtual Host編-

    30 6月, 2017

  • 14800708_xl

    Macにおける、簡単ローカル環境構築のすすめ -hosts編-

    19 6月, 2017

  • Next story SNS運用でお悩みの方へ!<勤務時間短縮>と<業績アップ>を同時に実現する、クラウド型SNSマーケティングツール【KUKUL】をリリースしました。
  • Previous story イラストレーターがDTPの入稿前に確認しておくべきチェック項目一覧

弊社サービス

MONJI+ MUGHEN ALAKI クラウド型受発注システム さよなら過去のAR。WebARがイベント集客に革命を起こします。

運営会社

ALAKI株式会社 ALAKI株式会社採用サイト

人気の記事

  • alaki1462_A_businessman_who_works_logically_1da80a2e-c297-4911-bdd6-feba0ebf1357

    仕事術

    【書籍要約】数学的な仕事術大全

    4 11月, 2024

  • fv-main-img-min

    空間コンピューティング

    世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました

    22 6月, 2023

  • Virtual reality players isometric vector illustration. VR UI and navigation. Futuristic digital technology. Virtual screen. Mixed reality 3d concept. Person in VR headset. Web banner idea

    AR

    Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ

    6 6月, 2023

  • AWE

    未分類

    ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!

    26 5月, 2023

  • python-logo-master-v3-TM

    pyhotn / 業務効率化

    「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

    2 2月, 2023

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

アーカイブ

  • 2024年11月
  • 2023年6月
  • 2023年5月
  • 2023年2月
  • 2023年1月
  • 2022年12月
  • 2022年11月
  • 2022年10月
  • 2022年9月
  • 2022年2月
  • 2021年12月
  • 2021年9月
  • 2021年7月
  • 2021年6月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年6月
  • 2019年6月
  • 2019年5月
  • 2019年4月
  • 2019年3月
  • 2019年2月
  • 2019年1月
  • 2018年12月
  • 2018年11月
  • 2018年9月
  • 2018年8月
  • 2018年7月
  • 2018年6月
  • 2018年5月
  • 2018年4月
  • 2018年3月
  • 2018年2月
  • 2018年1月
  • 2017年12月
  • 2017年11月
  • 2017年10月
  • 2017年9月
  • 2017年8月
  • 2017年7月
  • 2017年6月
  • 2017年4月
  • 2017年3月
  • 2017年2月
  • 2017年1月
  • 2016年12月
  • 2016年11月
  • 2016年10月
  • 2016年9月
  • 2016年8月
  • 2016年7月
  • 2016年6月
  • 2016年5月
  • 2016年4月
  • 2016年3月
  • 2016年2月
  • 2016年1月
  • 2015年12月
  • 2015年11月
  • 2015年10月
  • 2015年9月
  • 2015年7月
  • 2015年3月
  • 2015年2月
  • 2015年1月
  • 2014年12月
  • 2014年11月
  • 2014年10月
  • 2014年9月
  • 2014年8月
  • 2014年7月
  • 2014年6月
  • 2013年10月
  • 2013年9月

Facebook

お問い合わせ

お問い合わせ

人気の記事

  • 【書籍要約】数学的な仕事術大全
  • 世界初!「空間コンピューティング」を専用端末不要、スマホのWebブラウザのみで実現する『Web XR Site』を公開しました
  • Appleから新世代MRグラス「Vision Pro」の登場 – デジタルと現実世界が融合する新時代へ
  • ARアプリ『MUGHEN』が世界最大のAR/VRアワード「AWE」のファイナリストに選出されました!
  • 「SwinIR」で高画質化した画像を pythonを使用して一括で元のサイズに戻す方法

カテゴリー

  • AI・ディープラーニング
  • AR
  • BtoB
  • CMS
  • Git
  • Google AdWords
  • gulp
  • Javascript
  • Laravel
  • Photoshop
  • Pug
  • pyhotn
  • Sass
  • SEO
  • SNS
  • Twitter広告
  • VR
  • Web3.0
  • WEBサイト
  • WEBマーケティング
  • YouTube
  • コーディング
  • システム開発
  • スマートフォンサイト
  • セキュリティ
  • セミナー
  • その他
  • ツール
  • デザイン
  • ベトナムレポート
  • 仕事術
  • 未分類
  • 業務効率化
  • 空間コンピューティング
  • 色

検索

ALAKI株式会社 © 2025. All Rights Reserved.