3行入力するだけ!誰でもできる圧縮によるサイト高速化

3行入力するだけ!誰でもできる圧縮によるサイト高速化

空き缶を両手でつぶしている画像

 

「ぎゅっ」と小さくします・・

 

ファイルの圧縮による高速化は、せっかちな人にも簡単にできるサイトの高速化です。たった3行入力するだけて簡単に高速化できてしまいます。よく考えてもう少し頑張れば、努力の分だけもっとファイルの圧縮ができます。キャッシュの利用と同様に、作業だけなら1分もあれば完了しますのでぜひお試しください。

 

 

 

圧縮作業 速攻で完了!

 

 

具体的作業内容

 

 

 

冒頭でお伝えしたとおり、
たった3行入力するだけです

 

たった3行入力するのはせっかちな方
向けのプログラムです。
(公式のガイドにも、せっかちな人のため
にと記載がありました)

 

Apache モジュール mod_deflate

 

あなたのサイトの「.htaccess」に、
下のプログラムをコピーして、そのまま
貼り付けてください。

 

 

※注) お使いのサーバーがApache mod_deflate を使えることが前提です。

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml
</IfModule>

 

 

私が使っているソフト「SIRIUS」の
「.htaccess」に貼り付けをした画像
です↓↓

 

 

siriusの.htaccessにプログラムを貼り付けした画像

 

 

※貼り付けをした際の問題点が
 あります。後で記載してますので
 ご確認ください

 

 

 

プログラム貼り付けの結果

 

 

 

貼り付けをして、アップロードしたところ
ページスピードグレードが、88%→89%に
改善しました。

 

 

※スコアリングはこちらのサイトで確認しましたGTmetrix

 

 

before
ページスピード測定結果の画像圧縮前
after
ページスピード測定結果の画像圧縮後

 

 

 

もう一歩踏み込んで

 

 

 

このページスピードアップの方法は
別記事の「ブラウザのキャッシュ」を
利用した速度改善提案でも指摘された
「google analytics」の「速度の提案」
に記載のある方法です。

 

ブラウザのキャッシュを利用した速度の改善の記事

 

  →たった1分で劇的に改善!ページスピード高速化の方法

 

 

ファイルの圧縮を指摘されている画面

 

 

改善の提案についての原文です

 

  →圧縮を有効にする

 

3パターンの方法が提案してありますが
ここではApacheの 「mod_deflate」を
利用して「gzip」形式でのファイル圧縮を
する方法を説明します。

 

先ほど、とにかく3行入力して圧縮する
と説明した方法も、当たり障りのない形で
入力した 「mod_deflate」の命令文です。

 

 

サンプル入力例
※クリックすると拡大画像が表示されます

 

 

複雑な記載については「内容を理解しない
まま使用しないでください」と書いてあります。

 

命令文の解釈については、このサイトを
参考にしました

 

  →Apacheのmod_deflateでコンテンツを圧縮してサイトを高速化する方法

 

結局、画像以外圧縮するサンプルの
コードを入力するのが正解のようです。

 

 

↓そのままコピーして「.htaccess」に貼り付けてください

<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
</IfModule>

 

 

 

内容の説明

 

 

 

<1行目と8行目>

<ifModule mod_expires.c>
   
</ifModule>

 

〜の部分に「mod_expires」のプログラムが入りますよという命令です

 

 

<2行目>

SetOutputFilter DEFLATE

 

「SetOutputFilter」でモジュール「DEFLATE」を指定。

 

 

<3行目から5行目>

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

 

Mozilla4系などの古いバージョンのものは text/html 以外のタイプの圧縮を扱うことができないので、「gzip-only-text/html」でhtmlだけ圧縮します。

 

4.06, 4.07, 4.08 は html ファイルの伸張にも問題を抱えているので、完全に deflate フィルタをオフにするため「no-gzip」で全て無効にします。

 

Internet Explorer もMozilla/4であるが、圧縮を扱うことができるので、「MSIE」で検査して制限を再び解除します。

 

 

<6行目>

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary

 

「gif」「jpg」「png」など、すでに圧縮済みの画像ファイルは圧縮対象外とする。

 

「mod_expires」はCPUを消費するため、無駄な圧縮を避けるために対象外とするものです。

 

※ここで注意。サイトの高速化を妨げているのが「回線」の問題なら圧縮が有効に働きますが、CPUの能力がサイトの高速化を妨げている場合には、圧縮が逆にCPUを消費してしまいスピードダウンしてしまうことがあります。ただ最近の高性能のCPUの能力であれば、たいてい問題になることはないです。

 

 

<7行目>

Header append Vary User-Agent env=!dont-vary

 

圧縮を扱うことのできないクライアントに 圧縮された内容が送られることのないように、間違ったコンテンツを配布しないようにするための設定

 

 

 

7行の入力の効果

 

 

 

ページスピードグレードは最終的に、
88%→91%に改善しました。

 

before
ページスピード測定結果の画像圧縮前
after
ページスピード測定結果の画像7行入力圧縮後

 

やっぱりせっかちにいくより、じっくり
7行入れたほうがよさそうですね。

 

最後に「mod_expires」が機能して
いるかチェックしておしまいです。

 

 

サンプル入力例
※クリックすると拡大画像が表示されます

 

HTTP Compression Test

 

 

あなたのサイトのURLを入力して
「TEST」ボタンを押すだけです。

 

OKならこの表示が出ます。

 

 

テストOKの結果表示

 

 

 

 

 

※もし「よかった」と思う記事がありましたら、あなたが使っておられる
 SNSで当サイトをご紹介ください。どうぞよろしくお願いします。

 

 

よく読まれる関連ページ

たった1分で劇的に改善!ページスピード高速化の方法へのリンク画像

たった1分で劇的に改善!ページスピード高速化の方法

正しいrel=”nofollow”の使用方法へのリンク画像

正しいrel=”nofollow”の使用方法

SEOに効果あり!404エラーページのカスタマイズへのリンク画像

SEOに効果あり!404エラーページのカスタマイズ

超簡単!重複コンテンツ整理のための.htaccess設定方法へのリンク画像

超簡単!重複コンテンツ整理のための.htaccess設定方法


Top相互リンクをいただいているサイトです。

簡単無料ホームページ

簡単に無料でホームページ作成。掲示板、ブログ、アルバム、携帯サイト、メールマガジン、お問合せフォーム、リンク集等の便利機能付き。商用利用もOKです



3行入力するだけ!誰でもできる圧縮によるサイト高速化関連ページ

絶対に間違いのないSEO最新マニュアル
全13工程でサイト改善!「検索エンジン最適化スターターガイド」
3秒でチェック!!形式的SEO対策をあなたにこっそり教えます
アクセスアップのためにやっちゃった失敗をお教えします
被リンクについて最低限知っておくべき10のポイント
5分でわかる!具体的相互リンクの手順
サイト公開するなら、最低限canonicalタグを使いこなせ!
超簡単!重複コンテンツ整理のための.htaccess設定方法
Googleが伝える、適切な「alt属性の入力」のススメ
あなたは外部Javascriptを利用する目的を知っていますか?
よく考えられた「descriptionメタタグ」は訪問者を誘(いざな)う
301リダイレクトで個別ページのURLを整理できる
みんなに伝えたい!正しいサイトマップの「作り方」「送り方」
クリック率アップ!リッチスニペット導入でライバルサイトに差をつけろ
パンくずリストをリッチスニペットで表現してみた!
お手軽にリッチスニペット!構造化マークアップ支援ツール
進化しているデータハイライターを、あなたにもぜひ体験してほしい
とにかく目立つ!リッチスニペット著者情報の作り方
レシピを出すなら試したい!リッチスニペットを使った目立つ検索表示
rel=”nofollow”使いこなし術を解説!正しい使い方をご存知?
これで安心!URLエラーの大半は簡単に処理できる。修正方法を解説
エラーページを処理する5つの方法
SEOに効果あり!404エラーページのカスタマイズ
クロールの効率性を追求!robots.txt
よくわかる!noindexメタタグの正しい使い方
たった1分で劇的に改善!ページスピード高速化の方法
もっと早く導入すればよかった。画像圧縮ソフトによるサイト高速化
正しい対処の仕方をご存知ですか?放置できないソフト404エラー
鳥肌が立つほどカンタン!1クリックで終わる表示速度高速化
「誘導ページ」でペナルティを受けないための5つのチェックポイント
あなたのサイトは「モバイルフレンドリー」ですか?
rel="canonical"をもっともっと知りたい!
ホームページ、ブログの削除のしかた

 
ブログパーツ
トップページ 目次 サイト公開までのプロセス プロフィール お問い合わせ