Webサイト高速化【実践編】

2018.7.12

前回に引き続き今回はどのようにサイトの高速化をしているのかを
復習も兼ねてまとめていきたいと思います。

1.現状の把握

まずは現状を知るために下記サイトで診断をします。
（ビフォーを残しておくと最後に達成感を味わえます！）
・Google PageSpeed Insights
・モバイル速度テスト
・GTmetrix

2.画像を最適化する

ホームページに表示する画像をそのまま使うと実は90％が無駄な容量だったりします。
その無駄な容量を以下のオンラインの画像圧縮ツールを使って画像を最適化することで改善できます。
ブログを書く人にもおすすめです。
・Optimizilla
・TinyPNG

3.JavaScript/CSS/HTML を縮小する

JavaScript/CSS/HTMLの縮小は、余分な改行やスペースなどの不要な部分を取り除いて、ファイル（プログラム箇所）の容量を小さくすることです。
縮小することで表示スピードは改善されますが、次回編集しようと思った時にものすごく読みにくくなります（作文のスペースや句読点を取り除いて詰める感じ）ので運用面を考慮して実施する必要があります。
▼縮小
・Online JavaScript/CSS/HTML Compressor

▼縮小したファイルを元に戻すサイトもあります
・Styleneat – CSS Organizer
・prettydiff（Javascript用）

4.リンク先ページのリダイレクトを使用しない

・無意味なリダイレクトが行われていないかチェック！

5.スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

ファーストビュー（最初に見える画面）の表示スピードについての項目です。
「CSS」や「JavaScript」を全部読み込んでから表示すると遅くなるので、ファーストビューの表示に影響しないものに関しては最後に読み込みましょう。
ということなので、影響の出ない「CSS」や「JavaScript」の読み込み記述をbody最下部に移動させます。

6.ブラウザのキャッシュを活用する

サイトの情報を見ているブラウザ（Microsoft Edge・Internet Explorer・Safari・Firefox・Google Chrome等）にある変わらない情報を残すことで毎回、0から読み込むのを防ぎ、見ている方が快適にしよう！
ということで、Googleはキャッシュ期間を一週間以上設定することを推奨しています。

方法としては下記のように.htaccessファイルにキャッシュの設定を入れます。（一例）

<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType text/html "access plus 1 seconds"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/css "access plus 1 days"
ExpiresByType text/javascript "access plus 7 days"
ExpiresByType application/javascript "access plus 7 days"
ExpiresByType application/x-javascript "access plus 7 days"
</ifModule>