.htaccessにコードを付け加えただけで表示速度がアップ!

その他

自分が運営しているサイトの表示速度を上げる為の、施策はされてますか?

私は最近、自分のサイトの表示速度が気になってしょうがないです。表示速度が異常に遅いように感じます。

WEBサイトで表示速度が遅いのは致命的です。私ならサイトの表示速度が遅い瞬間、ページを閉じます。いつまでも開くのを待ってられないですから。

自分の趣味のサイトですら、サイトに訪れた方が何も閲覧せずに離脱されるのが嫌なのに、これがビジネスサイトとなったら、最悪としか言いようがありません。一体、どれだけの損失になるか。そんな形で離脱したユーザーは、もはや二度と訪問してくれないでしょう。

そんな状況を避けたいので、少しずつ表示速度の改善をしていこうと思います。

現在、サイトが遅い詳しい原因は、まだ分からないですが、

「使用しているサーバーの問題なのか?」

それとも

「WEBページの容量、コーディングの仕方に問題があるのか?」

ちょっとずつ修正を加えながら検証していきたいと思います。

今回は「.htaccess」にコードを付け加えただけで効果があったので、その手順をご紹介します。

表示速度アップの手順

「.htaccess」ファイルにコードを追加

↓FTPでサーバーにつないで「.htaccess」ファイルをダウンロードして下さい。

↓ダウンロードした「.htaccess」ファイルに以下のコードを追加して下さい。必ず「.htaccess」ファイルのバックアップは取っておくことをオススメします。

<Files ~ ".(gif|jpe?g|png|ico|js|css|gz)$">
Header set Cache-Control "max-age=2592000"
</Files>

上記のコードですが、

1行目はファイルの種類で「gif」「jpg」「png」「ico」「js」「css」「gz」を指定しています。
2行目は「max-age」でキャッシュの期間を指定しています。
例で指定している「2592000」は30日間(60*60*24*30)という事になります。

次に以下のgzip圧縮を指定するコードを追加してください。

# Gzip圧縮の設定

SetOutputFilter DEFLATE

# 画像は再圧縮しない
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary

Header append Vary Accept-Encoding env=!dont-vary

# 各MIME Typeを圧縮対象にする
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
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

gzip圧縮とは、ファイルサイズを小さくする圧縮方法の1つで、転送速度の向上が期待できます。

最後にコードを追加した「.htaccess」ファイルをFTPで、アップロードすれば作業は完了です。

↓実際にサイトの速さを調査できる「GTmetrix」で確認してみます。

【サイトの速さを調査できるサービス!】
GTmetrix

↓コードを追加する前は「Page Speed Grade」が「91%」です。

↓コードを追加後に「Page Speed Grade」が「94%」に上がっています。

「.htaccess」ファイルに3行追加すれば良いだけなので、ぜひお試し下さい。

最後に

こんなちょっとの作業が改善につながるとは驚きです。この調子で表示速度の改善に繋げていきます。

以上「.htaccessにコードを付け加えただけで表示速度がアップ!」でした!

それではまた。

コメント