webcode-labサイトロゴ

  • お問い合わせへのリンクバナー

Webcode Laboratory
for website coding & program & seo;

Topics

この Blog CMS について
ページ高速化SEO施策(2)「HTML・CSS・JavaScriptを縮小する」 eyecatch画像

ページ高速化SEO施策(2)「HTML・CSS・JavaScriptを縮小する」

rss

ページスピードアップ・高速化 SEO施策 (2)

※WEBコーディングの備忘録です。
gzipイメージ画像


前回に引き続き、WEBサイトの読み込みページスピードを上げてみようと試み中です。
Google提供のWEBサイトの読み込みスピード判定ツール、PageSpeed Insights での判定結果を元に施策を講じます。

判定結果



修正を考慮

1.画像を最適化する
2.ブラウザのキャッシュを活用する
3.HTML・CSS・JavaScriptを縮小する
4.スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

1~2の項目についての施策は前回のとおりです。
 ページ高速化SEO施策(1)「画像を最適化・ブラウザのキャッシュを活用」

今回は、次の3の項目を見ていきます。


 

【項目3】HTML・CSS・JavaScriptを縮小する

「HTML・CSS・JavaScript 」ファイルを縮小することで、
データ サイズを削減し、ダウンロード速度を向上・ページスピード高速化を図ることができます。

「縮小」という意味には2パターンあります。

 

リソースの圧縮(ミニファイ)

1つは「空白・インデント・タブ・改行・不要なセミコロン」などを省いた、
「リソースの圧縮(ミニファイ)」パターンです。
ファイル拡張子によくある、「〇〇.min.js」などの「min」はこの意味です。

cssやjsなどで頻繁に変更しないファイルは、ミニファイ圧縮しておいていいと思いますが、
頻繁に変更するファイルは、WEBサイト制作中・メンテナンス時も、圧縮前の元ファイルをバックアップとして持っておく必要があるのはもちろん、
変更があるたびに「ミニファイ圧縮」しなければならず、手間・効率性を考えると、
その効果のバランス上、実用にあまり適さない手段です。

 

gzip圧縮

もう一つは「gzip 圧縮」パターンで、
ファイルをまるごとgzip圧縮することで、ファイル拡張子は「.gz」となります。
「HTML・CSS・Javascript」などのファイル(画像以外)を、なんとサーバー側で自動で圧縮してくれます
.htaccessで「mod_deflate」モジュールの簡単な設定(下記の.htacess設定)をするだけで手間もかからず、また、
①の「ミニファイ圧縮」に比べデータサイズの縮小効果が大きいため、手間・効果どちらもを考えても活用の有用性大です。
※サーバーは「mod_deflate」モジュールが使えることが条件となります。

これらの理由から当Webcode-labでは、「gzip圧縮」を利用していますが、
ただし、
「gzip圧縮」は、ブラウザがアクセスする度にサーバーで圧縮処理をするため、サーバーにCPU負荷がかかります。
そこで、
頻繁に変更のある「HTML・CSS」ファイルはそのままサーバー側で「自動gzip圧縮」させ、
あまり変更のない「JS」等ファイルは、
ローカルで先に「gzip圧縮」をしておきサーバーにgzipファイル(拡張子は.gz)をアップして、
サーバー圧縮処理負荷を軽減しています。(圧縮ソフト等で「gzip」形式に圧縮)
 

.htaccessで「gzipローカル圧縮ファイル利用」&「gzip自動圧縮」の設定

ローカルでgzip圧縮した「gz」ファイルを、
サーバーで利用したり、サーバー側でgzip圧縮させるには、.htaccessで「mod_deflate」モジュールを有効にする編集をします。

※下記の例はエックスサーバー(php7利用)での.htaccess設定例です。
※レンタルサーバーでは、「mod_deflate」モジュールが使えることが条件となります。
※クリックでコードが開きます。

 
.htaccessで「ローカルgzip圧縮ファイル利用」・「gzip自動圧縮」設定

#ローカルgzip圧縮ファイル利用
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}?.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
<FilesMatch "\.css\.gz$">
    ForceType text/css
    AddEncoding x-gzip .gz
</FilesMatch>
<FilesMatch "\.js\.gz$">
    ForceType application/x-javascript
    AddEncoding x-gzip .gz
</FilesMatch>

#gzipサーバー自動圧縮設定
<IfModule mod_deflate.c>
    SetOutputFilter DEFLATE

    # Mozilla4系、IEの古いブラウザでは無効・限定に
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html

    # 圧縮済みの画像コンテンツは除外
    SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
    SetEnvIfNoCase Request_URI _\.utxt$ no-gzip

    # プロクシサーバが間違ったコンテンツを配布しないようにする
    Header append Vary Accept-Encoding env=!dont-vary

    # 圧縮コンテンツ設定
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/js
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-woff
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
</IfModule>




ページ高速化SEO施策(1) 「画像を最適化・ブラウザのキャッシュを活用」へ →

ページ高速化SEO施策(3) 「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除」 へ →

 
ページの先頭へ

rss
1件目 (1件中)