2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

PageSpeed Insightsで「ブラウザのキャッシュを活用する」「圧縮を有効にする」を最適化推奨されたときの対処法

Posted at

使ってみて大丈夫そうだったのでメモ。

ブラウザのキャッシュを活用する

  • ファイルタイプごとにキャッシュの有効期限を設定し、以前表示されたデータがキャッシュに残ってる場合はそちらを活用するように。
  • 更新が少ないファイルはサーバーにリクエストしなくなる→読み込むファイル数が少なくなるので、ページ表示までの時間が短くなる。
  • 設定前よりキャッシュが強くなるので、画像やjavascriptの更新が反映されにくくなることがある。
  1. サーバーがApacheのモジュール「mod_expires」に対応しているか確認する
  2. FTPを使って.htaccessをダウンロード
  3. .htaccessの上の方に下記記述を追加
.htaccess
<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access plus 15 days"
ExpiresByType image/gif "access plus 10 days"
ExpiresByType image/jpg "access plus 10 days"
ExpiresByType image/jpeg "access plus 10 days"
ExpiresByType image/png "access plus 10 days"
ExpiresByType application/x-javascript "access plus 10 days"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-javascript "access plus 1 month"
ExpiresByType text/js "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
</ifModule>
  1. 修正した.htaccessを元の場所に上書きアップロード

圧縮を有効にする

  • この設定をすると、サーバーはリクエストされたファイルをクライアント(ユーザー側)に送る前に圧縮するようになる。クライアント側では、ブラウザが自動で受け取った圧縮データを展開し表示する。
  • データを圧縮して送るので通信の負担が激減→ページ表示までの時間が短くなる。
  1. サーバーがApacheのモジュール「mod_deflate」に対応しているか確認する
  2. FTPを使って.htaccessをダウンロード
  3. .htaccessの上の方に下記記述を追加
.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|ico)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI _\.utxt$ no-gzip
#DeflateCompressionLevel 4
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>
  1. 修正した.htaccessを元の場所に上書きアップロード

.htaccessの書き換えを行うので、【ミスするとサイトが閲覧できなくなる】。
必ず作業前にバックアップを取り、問題が発生したら古いファイルに戻すこと。

2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?