サイト公開からもうすぐ2か月。
しばらく夢中になってはまっていたWordPressのカスタマイズも少し落ち着いてきたので、気になっていたサイトの高速化にチャレンジしてみた。
まずは、PageSpeed Insightsによる評点と提示された修正事項を整理し、点数の改善経過とと合わせて、私が試した方法をまとめていこうと思う。
PageSpeed Insightsとは
PageSpeed Insightsとは、googleがオンラインで提供しているウェブ パフォーマンス ツールである。簡単な操作で、携帯端末とデスクトップ端末サイトの表示スピードを測定し、問題があれば最適な解決策を提案してくれるという便利なプログラムだ。
公式サイト:「PageSpeed Insights について」
測定方法は簡単で、ウェブにアクセスすると次のような画面が出るので、空欄に確認したいサイトURLを入力して「分析」をクリックするだけでいい。20秒ほどで、PC用とスマホ用の表示パフォーマンスが100点満点で数値化される。
サイトURL : https://developers.google.com/speed/pagespeed/insights/?hl=ja
点数に応じて数字背景が赤・黄・緑と色分けされるのだが、私のサイトを試してみると、以下のように、修正事項と改善提案がたくさん出てきた。
表示が遅いとサイトを見る人のストレスか高くなり、ページから離れて読んでもらえないとのことなので、何とかしなければ、とは思っていた・・。
改善の提案では「修正が必要」とか「修正を考慮」とか指摘されて、修正方法も詳しく表示されるのでそのとおりにやろうと思っても、実際に作業の段になると、もう一つわからない。
そんな状況だったので、しばらく対応を後回しにしていたのだった。
ようやく着手して、書かれている修正事項に1つずつ対応してみたので、できたところから記事に残しておこうと思う。私のような初心者の方のご参考までに・・。
高速化への対応作業(目次)
以下が、私のメインサイトに対するスピードアップへの改善提案と修正事項である。
最初は書かれていることの意味が理解できずにいたが、ようやく少しだけわかるようになった気がする(笑。
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScriptとCSS の排除
1.レンダリングをブロックする JavaScript の除去
2.サーバーの応答時間を短くする
<修正考慮項目>
3.CSS 配信の最適化
4.ブラウザのキャッシュを活用する
5.画像を最適化する
6.CSS とJavaScript を縮小する