WEBサイトの表示速度を改善する方法の備忘録。
誰でも簡単にできるので、サイトやブログ運営中で高速化してない人はぜひ。
企業はもちろん、個人でもサイトやブログの表示高速化は検索順位を上げるためだけでなく、ユーザビリティを追求する意味でも重要度は高い。
個人のアフィリエイトサイトやブログ、ランディングページ等でもやっておくと良い。
簡単だしライバルに差がつけられるし、検索順位が上がる可能性がある。
難しいことは抜きにして、５分でできる表示速度改善方法を書いていく。
GTmetrixでhtmlサイトの現状を把握
URLを入力するだけで表示速度や最適化の方法がわかる「GTmetrix」でまずは現状を診察。
↑所有している適当なhtml＋cssのWebサイトトップページを改善前に計測したもの
ＣやＤだからダメというわけでもないんだけど、とりあえずどちらもＡにしてみる。
.htaccessにキャッシュ、ETag、キャラセット、gzipの記述を加える
エックスサーバーを例に話を進める。
まずは「.htaccess」というWebサーバの動作をディレクトリ単位で制御するためのファイルに記述を加える。
/ドメイン名/public_html/の階層にある「.htaccess」をローカルへ落とす。
「.htaccess」ファイルをテキストエディタ（テラパッドなど）で開く。
表示速度高速化に必要な項目を記述していく。
.htaccessに追加記述するコード
AddDefaultCharset UTF-8
FileETag None
<Files ~ "\.(jpg|png|gif|ico|js|css|html|gz)$">
Header set Cache-Control "max-age=2592000, public"
</Files>
RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}\.gz -s
RewriteRule .+ %{REQUEST_URI}.gz
<FilesMatch "\.css\.gz$">
ForceType text/css
AddEncoding x-gzip .gz
</FilesMatch>
<FilesMatch "\.js\.gz$">
ForceType application/x-javascript
AddEncoding x-gzip .gz
</FilesMatch>
<FilesMatch "\.html?\.gz$">
ForceType text/html
AddEncoding x-gzip .gz
</FilesMatch>
※サーバーによっては微調整が必要
各記述の簡易説明
難しい話は専門家にお任せして、ここでは簡潔な説明だけしておく。
AddDefaultCharset UTF-8
Page Speed Gradeのスコア改善策。
GTmetrixが『HTTPヘッダでキャラセット指定してよぉ…』と言っていたら記述。
出てなかったら省いてよし。※charsetがutf-8じゃない人はそこだけ変える
FileETag None
YSlow Gradeの『Configure entity tags (ETags)』のスコア改善対策。
GTmetrixが『ETagがなんかおかしいよぉ…？』と言ってるから書く。
ETagってのは超簡単に言うと、キャッシュの有効性を確認するタグみたいなもの。
<Files ~ “\.(jpg|png|gif|ico|js|css|html|gz)$”> ～
Page Speed Grade、YSlow Grade両方のキャッシュスコア改善策。
今回改善したのがhtml＋cssのサイトだから書いた。
拡張子までわかる人は足りないもの、いらないものを選別して記述変えること。
max-age=○○はキャッシュ期限。秒数を記入。上記だと30日。
RewriteEngine on
RewriteCond %{HTTP:Accept-Encoding} gzip ～
html、css、JavaScriptの圧縮ファイル(gzip)をサーバー上に置きそこから読み込ませることで表示速度を早くするための記述。
これを書いた上でgzip圧縮ファイルと通常ファイルをサーバー上に置いておくと、
ユーザーのブラウザがgzip圧縮ファイルに対応していればそこから読み込む
⇒表示速度すごくはやい
残念なことにユーザーのブラウザが対応してない
⇒通常ファイルを読み込む⇒表示速度改善してるからはやい
という流れで表示速度高速化ができる。
html、css、JavaScript等のファイルを全て圧縮
.htaccessにこれらを記述したら、GTmetrixで
・Minify CSS
・Minify HTML
・Minify JavaScript
これらの項目を見る。
Minifyとは縮小のこと。
ムダな記述や改行、スペースを根こそぎカットしファイル軽量化⇒はやい
という結果に繋がる。
各Minifyのやりかた
Minify ○○○をクリックすると、なにやら英文が何か出てくる。
英文は読まなくてもいいから『optimized version』をクリック。
すると、ムダな記述を排除した見づらいコードがページいっぱいに出現する。
このコードを各ファイルにコピペして上書きしアップロード。
各ファイルをgzipに圧縮
「html」「css」「JavaScript」各ファイルを圧縮してgzipにする。ソフトはなんでもいい。
各gzipファイルができたら、圧縮前のファイルと一緒にサーバーへアップロードする。
既にサイトやブログがある場合は各ファイルは上書きになる。
gzipファイルは上書きした各ファイルと同じ階層にアップロードすればOK。
画像の圧縮
最後はパパっと画像の圧縮をして了。
『Page Spees』タブの『Optimize images』をクリック。
『optimized version』をクリックし、片っ端からダウンロード。
各画像ファイルを全て上書きアップロードして終わり。
※後で画像の粗さをチェックしたほうがいいかも
改善した結果
ページ読み込みは２秒切り。1.59秒でフィニッシュ。
今回はcss+htmlの基本的なサイトの高速化を解説したけれど、ワードプレスの高速化はhtmlサイトとは違うので注意。
ちなみに当ブログ、サボライフはワードプレス。立ち上げ時に色々やったけど、テンプレ変えてから高速化してない。（手抜き運営）
