WEB制作(html・css(スタイルシート))に関する各種メモ書き

Google PageSpeed Insights の速度アップ修正に対応する

■ Google PageSpeed Insights

https://developers.google.com/speed/pagespeed/insights/?hl=ja
URLを入力するとサイトがどれくらい早いか計測してくれます。 ここにサイトのURLを入れて計測し、結果を表示させます。

● 結果の「圧縮を有効にする」に対応する

圧縮を有効にするにはWEBサーバによって方法が異なります、

Apache: mod_deflate
Nginx: HttpGzipModule
IIS: HTTP 圧縮

専用サーバやクラウド等のバーチャルマシンの場合は適宜設定しましょう。

レンタルサーバの場合は Apache が多いので、 レンタルサーバのmod_deflate が有効かどうかを調べます。

エックスサーバ : ○
ロリポップ : ○
さくら : ○
ヘテムル : ○

圧縮を有効にするには サイトのトップに .htaccess を設置し以下のように記述します。

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

SetOutputFilter DEFLATE ですべての出力を圧縮する設定にして、
・Mozilla や IE の古いバージョンでは圧縮をオフ
・画像ファイルは圧縮をオフ
としています。

● 結果の「ブラウザのキャッシュを活用する」に対応する

.htaccess に以下のように記述します。

<IfModule mod_expires.c>
    ExpiresActive on
    ExpiresDefault          "access plus 1 week"
    ExpiresByType image/png "access plus 1 week"
    ExpiresByType image/jpeg "access plus 1 week"
    ExpiresByType image/gif "access plus 1 week"
    ExpiresByType text/css "access plus 1 week"
    ExpiresByType text/javascript "access plus 1 week"
</IfModule>

関連エントリー

No.1027
04/28 17:36

edit

高速化