サイトの表示速度がサイトのコンバージョンに大きく影響します。特にモバイル端末はPCよりも表示速度が遅く、GoogleがAMPプロジェクトを展開する大きな要因にもなっています。
サイトの速度を高める為、Googleアナリティクスを活用して、サイトの改善をしてみましたのでどの程度の向上が見られたのかをお伝えしようと思います。
サイト改善を試みたのは、私のサイトの中に平均読み込み時間が9.52秒という、劣等生ページがありましたので、倒産パターン別対処方法このページの改善をやってみます。
「PageSpeed Insights」の結果は、PC：68ポイント、モバイル：54ポイントでした。
ページの修正点を確認する
修正点については重要度によって二つに区分されます。
- 修正が必要
- 修正を考慮
「修正が必要」だと指摘されているのは「レンダリングをブロックする JavaScript を除去」と「CSS 配信を最適化」それに「ブラウザのキャッシュを活用する」です。
このサイトはhtmlサイトなので「CSS 配信を最適化」することは可能ですが、個別のページごとに対応しなければならないので、まず「レンダリングをブロックする JavaScript を除去」をやって、改善具合を確認してみます。
除去しなさいと指摘されている JavaScriptは次の４つです。
../../js/utility.js
http：//s7.addthis.com/js/250/addthis_widget.js
../../images/copyright-year.js
［jquery.js］と［utility.js］の読み込みタグの位置を変える
<head>内に記述されている
../../js/utility.js
は、除去するわけにはいきませんので、位置を変えます。
<head>から</body>手前に移動します。
このサイトはテンプレートに「賢威」を使っていますので、ディフォルトでは<head>内に記述されています。
［addthis_widget.js］と［copyright-year.js］を削除する
［addthis_widget.js］はソーシャルボタンの表示についてのコードです。
［copyright-year.js］はコピーライト部分の西暦年表示に関するコードです。
どちらも削除してしまいます。
次に「ブラウザのキャッシュを活用する」設定をしてみます。
「ブラウザのキャッシュを活用する」の設定
キャッシュの設定はルートディレクトリ―にある［.htaccess］ファイルに次のコードを追記しました。
Header set Cache-Control “max-age=2592000, public”
</Files>
キャッシュの有効期限を1ヶ月として、対象とするファイルの拡張子を次のように設定しました。
- 画像：gif、jpg、png、ico
- CSSファイル：css
こうすると、サイトの速度は、PC：78ポイント（+10）、モバイル：58ポイント（+4）と改善されました。
後は、9.52秒という情けない記録がどう変化するか、1週間後に確認しようと思います。
コメント