システム担当の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に記述することで効果アップを狙います。
参考になれば幸いです。
