簡単な方法でWebサイトを高速化を試してみよう

gucci

7年前

システム担当のGucciです

StudioAKでは基本的にWebサイトやWebシステム開発をする時はLAMPで開発しています。

要件やプランに合わせて自社CMSやオープンソースなどを使って開発しているのですが、必ずオープン前にいくつかのサイトで表示速度やモバイルフレンドリーなどを計測して一定値以上の数値になってから公開しています。

満点っていうのはプランによってGoogleMapをAPIではなくiframeのまま活用していたり、Wordpress を使ったりする場合があるのでマスト条件にはなっていませんが、社内で決められた数値以下の場合は対策を施すようにしています。

その中で一番の問題になってくるのはサイトの表示速度かと思います。

ただHTML+CSSで書いた場合は画像さえ小さくすればそれほど極端な結果にならないのですが、最近はCMSなどでDBから情報を読み込んできたり、Wordpress などオープンソース型のCMSの一部で異常に重いものがあり、そのまま使うとGoogleの得点が50点以下最悪は10点未満という悲惨な結果になるサイトもよく見受けられます。

表示速度が遅いとそれだけで離脱率が上がり、アクセス数はもとよりコンバージョン率なども下がってしまう原因になります。

そこでStudioAKでは簡単にできるWebサイトの高速化として、.htaccessに下記のようなスクリプトを書いて速度アップをすることがあります。

あくまでもこれは一例のサンプルで実際はもう少し詳細に書いてありますが、まずは簡単にできるものを紹介します。

データをできるだけ圧縮して表示すること、そしてキャッシュを活用することでDBへの負荷を減らすことにより表示速度の高速化を狙っています。

# mod_deflateを利用して Gzip圧縮する設定
<IfModule mod_deflate.c>
  SetOutputFilter DEFLATE

  # Mozilla4系、IE7、8の古いブラウザでは無効にする
  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

  # GIF、JPEG、PNG、ICOなど圧縮済みの画像は再圧縮しない
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
  # プロクシサーバが間違ったコンテンツを配布しないようにする
  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>

# ブラウザへのキャッシュの設定
<IfModule mod_expires.c>
  ExpiresActive On

  # キャッシュの初期化（1秒に設定）
  ExpiresDefault "access plus 1 seconds"

  # MIME Type ごとのキャッシュ設定
  ExpiresByType text/css "access plus 1 weeks"
  ExpiresByType text/js "access plus 1 weeks"
  ExpiresByType text/javascript "access plus 1 weeks"
  ExpiresByType image/gif "access plus 1 weeks"
  ExpiresByType image/jpeg "access plus 1 weeks"
  ExpiresByType image/png "access plus 1 weeks"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType application/pdf "access plus 1 weeks"
  ExpiresByType application/javascript "access plus 1 weeks"
  ExpiresByType application/x-javascript "access plus 1 weeks"
  ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
  ExpiresByType application/x-font-ttf "access plus 1 year"
  ExpiresByType application/x-font-woff "access plus 1 year"
  ExpiresByType application/x-font-opentype "access plus 1 year"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 year"
</IfModule>

上記でも書きましたが、自社のCMSにはこれ以外にも表示を軽くする機能を独自開発し、実装していますが、Wordpress などで高速化するPluginはたくさんあるのですが、Pluginを入れる前段階としてこういうものを.htaccessに記述することで効果アップを狙います。

参考になれば幸いです。

関連記事: