ホーム　＞　ネット　＞　.htaccess 使い方　圧縮を有効にする
目次　｜　元のページ 前のページ　｜　次のページ サイトマップ　｜　ページEND

.htaccess 使い方　圧縮を有効にする

モバイル ユーザビリティ　確認方法


ウェブサイトのモバイル フレンドリー 度について、下枠左側の 「 モバイル フレンドリー テスト 」 にて、URLを指定して、ページ毎に確認することができます

検出された問題の詳細については、同様に、下枠右側の 「 PageSpeed Insights 」 で確認します

モバイル フレンドリー 度確認 検出された問題の詳細確認
モバイル フレンドリー テスト PageSpeed Insights




モバイル ユーザビリティの問題　対処法　圧縮を有効にする　 （.htaccess）



モバイル ユーザビリティを考慮する場合、サーバー上のページファイルがブラウザから閲覧される際、サーバー上のファイルを圧縮して転送（ダウンロード）することが求められます

ファイルを圧縮転送することにより、ファイル転送時間が短縮され、ブラウザの表示速度もその分速くなります


例えば、さくらレンタルサーバーを利用している場合、さくらレンタルサーバーでは、「 Apache Ver.2.2.29 」（2015年12月20日現在）が使用されていますので、「 .htaccess 」に 「 mod_deflate 」を設定することにより、ブラウザが圧縮形式に対応している場合、サーバーからコンテンツをダウンロードする際、自動的に deflate 出力フィルタを通して、gzip 圧縮形式で転送されます

どのような圧縮設定を行えるかは、サーバーによりますので、各利用サーバーサイトで確認する必要があります


クライアント側のブラウザでは、対応圧縮形式をブラウザがサーバーに自動送信、対応状況に応じてサーバーが自動的に対応してくれますので、ブラウザの種類、バージョン等を意識する必要はありません



「 mod_deflate 」　設定方法



ルートディレクトリに、ファイル名 「 .htaccess 」（ パーミッション（属性値） ： 644 ： 通常のhtmlファイルと同じ）を作成し、以下「実際に使用する際の設定」を記述します

「 mod_deflate 」の設定内容は、配置したディレクトリ配下にも継承されます


実際に使用する際の設定


<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE

    # Mozilla4系などの古いブラウザで無効、しかしMSIEは除外
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html

    # gifやjpgなど圧縮済みのコンテンツは再圧縮しない
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|pdf)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

    # htmlやcssなどは圧縮
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
</IfModule>

5～7行目、ユーザーエージェントでMozilla4系などの古いブラウザは「gzip-only-text/html」でhtmlだけ圧縮。4.06～8はエラーがあるので「no-gzip」で全て無効
同じMozilla4系でもInternet Explorerは対応しているため「MSIE」は上記の指定を適応しない

10～11行目、gifやjpgなど圧縮済みのコンテンツは、CPU資源を消費するだけで圧縮効果はないので無効

14～23行目、htmlやcssなどは圧縮

「 Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法 OXY NOTES 」 より　「 |pdf 」は、PDFファイルを圧縮させない為、当サイトにて追加




モバイル ユーザビリティの問題　圧縮を有効にする　設定前後の比較　設定の効果



「 PageSpeed Insights 」 による、圧縮設定前後の当サイトのトップページでの効果比較表です


設定前 https://static.xx.fbcdn.net/rsrc.php/v2/yD/r/mcz9rb3bX8o.js を圧縮すると 231.8 KB（72%）削減できます。
https://omt.shinobi.jp/css/ninja_onetag.css?201512180515 を圧縮すると 20.7 KB（79%）削減できます。
https://abhp.net/index.html を圧縮すると 11.7 KB（77%）削減できます。
https://abhp.net/mng/MNG_GGNavi_100000.html を圧縮すると 4.9 KB（74%）削減できます。
https://analyzer51.fc2.com/ana/processor.php?uid=2440098 を圧縮すると 2.8 KB（62%）削減できます。
https://abhp.net/cm/CM_Gen_Bottom_110000.html を圧縮すると 2 KB（67%）削減できます。
https://rcm-fe.amazon-adsystem.com/…9&p=12&l=ur1&category=amazonrotate&f=ifr を圧縮すると 1.7 KB（55%）削減できます。
https://rcm-fe.amazon-adsystem.com/…0e-22&o=9&p=12&l=ur1&category=toys&f=ifr を圧縮すると 1.6 KB（55%）削減できます。
https://ssp.advg.jp/…&_flash=0&_nocache=145068386812344506398 を圧縮すると 1.2 KB（63%）削減できます。
https://abhp.net/cm/CM_Gen_Top_110000.html を圧縮すると 931 バイト（49%）削減できます。
設定後 https://static.xx.fbcdn.net/rsrc.php/v2/yD/r/mcz9rb3bX8o.js を圧縮すると 231.8 KB（72%）削減できます。
https://img.mixi.net/…ss/basic/mixi_check_entry.css?1427195691 を圧縮すると 23.3 KB（81%）削減できます。
https://omt.shinobi.jp/css/ninja_onetag.css?201512180515 を圧縮すると 20.7 KB（79%）削減できます。
https://analyzer51.fc2.com/ana/processor.php?uid=2440098 を圧縮すると 2.8 KB（62%）削減できます。
https://rcm-fe.amazon-adsystem.com/…0e-22&o=9&p=12&l=ur1&category=toys&f=ifr を圧縮すると 1.6 KB（55%）削減できます。
https://rcm-fe.amazon-adsystem.com/…9&p=12&l=ur1&category=amazonrotate&f=ifr を圧縮すると 1.6 KB（54%）削減できます。
https://ssp.advg.jp/…&_flash=0&_nocache=145068967593882479261 を圧縮すると 1.2 KB（63%）削減できます。
効果 当サイトのファイルである下記が消えていますので、圧縮されたことが確認できます
https://abhp.net/index.html を圧縮すると 11.7 KB（77%）削減できます。
https://abhp.net/mng/MNG_GGNavi_100000.html を圧縮すると 4.9 KB（74%）削減できます。
https://abhp.net/cm/CM_Gen_Bottom_110000.html を圧縮すると 2 KB（67%）削減できます。
https://abhp.net/cm/CM_Gen_Top_110000.html を圧縮すると 931 バイト（49%）削減できます。
他のファイルは、当サイトページに貼り付けてある広告で、当サイトの設定では手出しできません




モバイル ユーザビリティの問題　対処法　圧縮を有効にする　参考情報



転送と有効範囲


.htaccess をWebサーバへ転送する際はアスキーモードで転送します。転送後は .htaccess のパーミッションを "644(rw-r--r--)" に設定します。ただし、共有サーバでは、"604(rw----r--)" の場合もあります。

.htaccess の設定は、配置したディレクトリ以下に対して有効になります。そのため、Webサイト全体に対して設定を有効にしたい場合は、ルートディレクトリに配置しましょう。階層別に分けて配置した場合、より深い階層に配置した .htaccess の設定が優先されます。

「 .htaccessの書き方 murashun.jp 」 より


gzip 圧縮の利用可否を通知する


クライアント側のブラウザが gzip 圧縮を利用可能である場合、HTTP リクエスト内の Accept-Encoding ヘッダでサーバ側に通知します。サーバ側では、どのような方法で応答を返すか HTTP レスポンス内の Content-Encoding ヘッダでクライアント側に通知します。

gzip 圧縮を有効にする方法


gzip 圧縮を有効にするには、".htaccess" で設定します。設定方法には大きく分けて 2 種類あり、"mod_deflate" モジュール、または "mod_rewrite" モジュールのどちらかを利用します。

「 gzip 圧縮によるサイトパフォーマンスを向上させる方法 murashun.jp 」 より


圧縮を有効にする


このルールは、ページ上の圧縮可能なリソースが HTTP 圧縮を使って配信されていないことを PageSpeed Insights が検出した場合にトリガーされます。

概要

多くのウェブ サーバーでは、サードパーティ モジュールを呼び出すか、組み込みのルーチンを使用するかして、ファイルをダウンロード用に送信する前にgzip 形式で圧縮できます。圧縮すると、ウェブサイトを表示するのに必要なリソースのダウンロードにかかる時間を削減できます。


推奨される解決方法

ウェブ サーバーで圧縮を有効にしてください。一般的なウェブ サーバーで圧縮を有効にする方法については、次のリンクをご覧ください:
•Apache: mod_deflate を使用する
•Nginx: HttpGzipModule を使用する
•IIS: HTTP 圧縮を設定する

よくある質問

PageSpeed Insights で、静的なコンテンツ ファイルの多くが gzip 形式で圧縮する必要があるとレポートされますが、gzip 圧縮を使ってこれらのファイルを配信するようにウェブ サーバーを設定済みです。PageSpeed Insights で圧縮が認識されないのはなぜですか？ ファイルがクライアント マシンにダウンロードされるときに、プロキシ サーバーやウイルス対策ソフトウェアが圧縮を無効にしている可能性があります。PageSpeed Insights の結果はクライアントに実際に返されたヘッダーに基づいています。ウイルス対策ソフトウェアを使用しているクライアント マシン上で分析を行っている場合や、中間的なプロキシ サーバーの背後にクライアント マシンが配置されている場合は、この問題が起きる可能性があります（多くのプロキシは透過的であるため、クライアントとウェブ サーバー間に介在するプロキシに気づかない場合もあります）。
プロキシが原因かどうかを判断するため、PageSpeed Insights の Chrome 拡張機能を使ってヘッダーを調べることができます。

1　.問題のページ上で PageSpeed を実行します。
2　.[Show Resources] タブをクリックします。
3　.未圧縮としてマークされているリソースの URL を展開します。そのリソースに関連するヘッダーが表示されます。Via、Forwarded、または Proxy-Connection というヘッダーが表示される場合は、プロキシがそのリソースを配信したことを示しています。

「 圧縮を有効にする    PageSpeed Insights    Google Developers 」 より




PageSpeed Insights について ｜ PageSpeed Insights ｜ Google Developers


Page Speed Insights では、携帯端末やデスクトップ端末向けのページのパフォーマンスを測定します
URL を 2 回（モバイル ユーザー エージェントと PC ユーザー エージェントで 1 回ずつ）取得します

PageSpeed のスコアの範囲は 0～100 ポイントです
スコアが大きいほど良好で、85 以上のスコアはそのページのパフォーマンスが高いことを示します
なお、PageSpeed Insights は継続的に改良されているため、新しいルールの追加や分析の改良に伴ってスコアが変わることがあります

PageSpeed Insights では、次の項目について、ページのパフォーマンスをどの程度改善できるか測定します

スクロールせずに見える範囲のコンテンツの読み込み時間: ユーザーが新しいページをリクエストした瞬間から、スクロールせずに見える範囲のコンテンツがブラウザで表示されるまでの経過時間
ページ全体の読み込み時間: ユーザーが新しいページをリクエストした瞬間から、ブラウザでページが完全に表示されるまでの経過時間
ただし、ネットワーク接続のパフォーマンスは大きく変動するため、PageSpeed Insights では、ページのパフォーマンスのうちネットワークに依存しない部分（サーバー設定、ページの HTML 構成、画像やJavaScript、CSS などの外部リソースの使用方法）のみを考慮します
提案された解決策を実装すれば、ページの相対的なパフォーマンスは改善されるはずです
ただし、それでも、ページの絶対的なパフォーマンスはユーザーのネットワーク接続に左右されます

各提案には、重要性を表す優先度インジケータが表示されます

アイコン 名前 説明
赤色の感嘆符 赤色の感嘆符 この問題を修正すると、ページのパフォーマンスが大幅に改善されます
黄色の感嘆符 黄色の感嘆符 それほど忙しくない場合はこの問題の修正を検討してください
緑色のチェックマーク 緑色のチェックマーク 大きな問題は見つかりません。パフォーマンスは良好です

PageSpeed Insights の最近の更新では、モバイルのパフォーマンス向上に力を入れています
詳細については、PageSpeed Insights のモバイル分析についての記事や、Google I/O 2013 で行われた素早いモバイル ウェブサイトに関するプレゼンテーションをご覧ください
PageSpeed Insights で実行された分析の詳細なリストもご覧いただけます

フィードバックのお願い
Google では PageSpeed Insights に関する皆様からのフィードバックをお待ちしています
テスト ツールや推奨されたベスト プラクティスについてご意見やご提案がある場合は、ディスカッション グループ（page-speed-discuss）に投稿してください

お問い合わせ
PageSpeed Insights についてご質問がある場合は、よくある質問をご覧いただくか、ディスカッション グループにメッセージを投稿してください

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. For details, see our Site Policies. Java is a registered trademark of Oracle and/or its affiliates.

最終更新日: 4月 11, 2014

「 PageSpeed Insights について  |  PageSpeed Insights  |  Google Developers 」 より

目次　｜　元のページ 前のページ　｜　次のページ サイトマップ　｜　ページTOP
ホーム　＞　ネット　＞　.htaccess 使い方　圧縮を有効にする
　 　

© 2014 abhp.net All Rights Reserved.

関連情報サイト


はじめる - ウェブマスター向けモバイルガイド
Apache モジュール mod_deflate
Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法 OXY NOTES
gzip 圧縮によるサイトパフォーマンスを向上させる方法 murashun.jp
.htaccessの書き方 murashun.jp

ページTOP
ページTOP
ページTOP
ページTOP