.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>

上記のコードですが、

次に以下の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

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

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

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

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

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

最後に

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

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

それではまた。