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

ALAKI株式会社

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

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

2017年12月1日

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

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

今日から12月となり、2017年も残すところあと僅かとなりましたね。

先月には、新しい自社サービス「KUKUL(ククル)」を無事リリースしましたが、12月もALAKIとして更に攻めていけるよう頑張っていきます!

今回は、SEOやWebサイトの表示速度にも影響する「gzip圧縮(mod_deflate)」について、設定方法などをまとめていきます。

この記事の目次

  • 1 「gzip圧縮」とは何ぞ?
  • 2 「gzip圧縮」に適さないファイル
  • 3 サーバーで「gzip圧縮」を有効化しなければ意味がない
  • 4 「gzip圧縮」有効化設定は「.htaccess」で行う
  • 5 「mod_deflate」で「gzip圧縮」を設定する
  • 6 「mod_deflate」の注意点
  • 7 まとめ

「gzip圧縮」とは何ぞ?

「圧縮」と名前に付いていることからイメージできるように「gzip」という圧縮形式の1つを表します。

ですが、普段よく耳にする「zip圧縮」や「rar圧縮」などとは異なり、アーカイブ機能(複数のファイルをまとめて圧縮する)を持たない圧縮形式です。

アーカイブ機能を持ちませんが、Webページで利用している「HTMLファイル」や「CSSファイル」などをファイルごとで圧縮してブラウザに読み込ませることができるので、通常の読み込み(未圧縮)よりも高速にデータを送ることができるようになります。

間違っても、「gzip圧縮してメール添付で送ってね」というような依頼を友人や同僚にしないようにしてくださいね。

「gzip圧縮」に適さないファイル

「gzip圧縮」は、テキストファイル全般に対して効果が期待できます。

Webページで使われるテキストファイルというと「HTML」「CSS」「JavaScript」などが該当します。

逆に「gzip圧縮」に適さないファイルもあります。

それが「画像」や「PDF」といった最初から圧縮されているファイル群です。

「画像」や「PDF」などの圧縮済みファイルを更に「gzip圧縮」を行うとファイルサイズが増大して本来の意味を失ってしまう場合があります。

そのため「gzip圧縮」を利用する場合は予め、どのようなファイルを「gzip圧縮」して送信するかを細かく指示を出す必要があります。

サーバーで「gzip圧縮」を有効化しなければ意味がない

サーバー側で「gzip圧縮」を有効化する必要があります。

何もしないと、せっかくブラウザが「gzip圧縮」対応であっても、サーバーは「gzip圧縮」されていないファイルをブラウザに送りつけてしまいます。

これでは、ブラウザのパフォーマンスを引き出すことができず、ユーザーにストレスを与える可能性があります。

「gzip圧縮」有効化設定は「.htaccess」で行う

サーバー側で「gzip圧縮」を有効化する内容は、「.htaccess」に記述します。

「.htaccess」であれば、多くのレンタルサーバーでも利用が可能な手法となります。

今回は随時「gzip圧縮」を行う「mod_deflate」での設定方法をまとめていきます。

「mod_deflate」で「gzip圧縮」を設定する

「mod_deflate」を使った「.htaccess」の設定は下記になります。

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
<IfModule mod_deflate.c>
# mod_deflateを有効にする記述
SetOutputFilter DEFLATE
 
# 古いMozillaなどの古いブラウザでは無効にする。例外としてIEは有効にする
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
    
# 画像は2重圧縮になるので圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
 
# 圧縮するファイル形式を列挙
AddOutputFilterByType DEFLATE text/plain #テキストファイル
AddOutputFilterByType DEFLATE text/html  #HTMLファイル
AddOutputFilterByType DEFLATE text/xml   #XMLファイル(1)
AddOutputFilterByType DEFLATE text/css   #CSSファイル
AddOutputFilterByType DEFLATE application/xhtml+xml #XHTMLファイル
AddOutputFilterByType DEFLATE application/xml           #XMLファイル(2)
AddOutputFilterByType DEFLATE application/rss+xml    #XMLファイル(3:rss形式)
AddOutputFilterByType DEFLATE application/atom_xml #XMLファイル(4:atom形式)
AddOutputFilterByType DEFLATE application/x-javascript #JavaScriptファイル
AddOutputFilterByType DEFLATE application/x-httpd-php #PHPファイル
</IfModule>

記述内容に関して解説していきます。

古いMozillaブラウザは「gzip圧縮」しない

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

この3つは、ユーザーエージェントで「Mozilla4」と判断されたブラウザに対する処理になります。

「Mozilla4.06」〜「Mozilla4.08」のバージョンにはエラーがあり「gzip圧縮」が利用できないので「no-gzip」で圧縮を行わないとします。

それ以外の「Mozilla4系」ブラウザは「text/html」のみを「gzip圧縮」します。

ただし、「Mozilla4系」の例外として「IE」は「gzip圧縮」に対応したブラウザなので「gzip圧縮」を行うために、既に設定された「no-gzip」と「gzip-only-text/html」を打ち消します。

画像は「gzip圧縮」しない

1
2
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

画像は既に圧縮されているので、2重で圧縮しないため「gzip圧縮」を行わない設定にします。

対象としている画像の拡張子は「gif」「jpeg」「jpg」「png」「ico(アイコンファイル)」としています。

「gzip圧縮」するファイルを列挙する

最後に、圧縮対象とするファイルを1つ1つ列挙していきます。

書き方は「AddOutputFilterByType DEFLATE 【MIMEタイプ】」となります。

ポイントは、拡張子ではなく「MIMEタイプ」形式を記述することです。

「mod_deflate」の注意点

「mod_deflate」を利用する場合、レンタルサーバーによっては、サーバーに負荷がかかることを理由に利用できない場合があります。

その場合は、「mod_rewrite」を利用した方法で「gzip圧縮」を行うことができます。
※「mod_rewrite」を利用した「gzip圧縮」は次回ご紹介したいと思います。

まとめ

「gzip圧縮」を利用しているかどうかというのは、いくつかのサイトチェックサービスでは必須のチェック項目となっています。

また、「mod_deflate」は手軽に実装しやすい反面、サーバー負荷が発生する分、利用できるサーバーに制約がある場合があります。

このあたりも踏まえて、次回は負荷を軽減しつつ「gzip圧縮」の恩恵を受けることができる「mod_rewrite」を使った設定方法についてご紹介したいとおもいます。

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

You may also like...

  • WEBデザインの基本セオリー 0

    知っておきたいWEBデザインの3つの基本セオリー

    4 9月, 2014

  • 名称未設定 1 0

    要注意!検索順位を下げる可能性のある7つのコンテンツとその対策方法

    18 7月, 2014

  • SEOの観点から考える、サブドメインとサブディレクトリ

    SEOの観点から考える、サブドメインとサブディレクトリ

    25 9月, 2015

  • Next story イラストレーターがDTPの入稿前に確認しておくべきチェック項目一覧
  • Previous story WordPressをlocal環境で高速構築!Local by Flywheelの使い方徹底解説!

弊社サービス

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.