【ホームページ高速化】たったこれだけで、ホームページは驚くほど早くなる！
Googleが、スピードアップデート（Speed Update）を導入！
2018年7月からページ表示速度を、ランキング要因にすると発表したのは今年の1月のことでした。
そして今後は、パソコンサイトではなくてスマホサイトを、ページ評価の基準とすると発表しました。これがモバイルファーストインデックス（Mobile First Index、MFI）です。
7月と言えば、前記事で書いた
HTTPSではなく HTTPで配信されているすべてのページに対して、通信が安全ではないことを通知するラベルをChromeブラウザで、常に表示することをアナウンスしました。
2018年7月にリリースされる、 Chrome 68から実装される予定です。
これによりサイトのHTTPS化に伴って、スマホサイトの高速化も図らなければならなくなりました。
abberoad.hatenablog.jp
■サイトのスピードを測る！
サイトの速度を調べるには、PageSpeed Insights を利用します。
自分のサイトURLを入力して、分析ボタンを押せば100点満点中何点か教えてくれます。さらに、最適化についての提案までしてくれる優れものです。
ちなみにこのブログは、82/100で Good と採点されました。
ブログなので、.htaccessまでは設定できないので、この点数で取りあえずは満足です。
Test My Siteでは、モバイルサイトの速度を計測することが出来ます。
でも、レンタルサーバーを借りてサイトを運営していれば、
たったこれだけのことで、もっと早くすることが出来ます。
■ホームページ高速化
100点満点を目指したら、JavaScriptとかCSSの縮小などキリがないので、Good と採点されるようになれば、僕的にはヨシとしています。
■圧縮を有効にする
リソースを圧縮するには、.htaccessを編集する方法が一般的のようです。
「DEFLATE」というアルゴリズムを使って、サーバーから出力時にフィルターをかける設定をします。
その設定をするには、.htaccessファイルに次のように記述します。
■ブラウザのキャッシュを活用する
「ブラウザのキャッシュを活用する」には、.htaccessにディレクティブを追加すればOKです。
例えば、画像ファイル（pngファイル）をブラウザにキャシュしたい場合には、以下のディレクティブを.htaccessに記述します。「ExpiresActive On」で有効期限の設定をONにし、pngファイルをキャッシュする有効期限を設定します。
こうすることで、ホームページを閲覧した際、画像などをいちいちサーバーまで読みに行きません。キャッシュが表示されるので、ページが開く時間をグッ！と短縮することが出来ます。
ディレクティブは必要に応じて変更してください。ここではスタイルシートは、1日しかキャッシュしないように設定しています（サイトデザインを変更する可能性があるので）。
■画像を最適化する
画像を圧縮することで、サイトが軽くなり表示速度が改善します。
画像圧縮サイトもいろいろありますが、Compressor.io をおすすめします。このサイトを使うと、画像を驚くほど、圧縮して容量を小さくしてくれます。
以前は、容量は圧縮されて軽くなるのですが、それに伴い画像の劣化が激しくとても使えませんでしたが、最近になり圧縮技術が向上！圧縮されて容量が軽くなっても、画像の劣化がなくなりました！
使い方は簡単で、TRY IT! ボタンを押して、画像をドラック＆ドロップするだけ！
■まとめ
たったこれだけのことで、僕の運営するサイトでは、
モバイル 84/100 → 97/100
パソコン 69/100 → 81/100
まで改善しました。
ホームページが重たいとお悩みの方は、一度お試しあれ！
