Thursday, March 28 2024 @ 06:08 PM JST

PageSpeed Insightsを活用してサイトの表示スピードを改善する

  • Wednesday, December 02 2015 @ 11:19 PM JST
  • 投稿者:
  • 表示回数 2,668
Geeklog

Google Developerが提供しているPageSpeed Insightsを活用してサイトの表示スピードを改善する方法を紹介します。
なお、このPageSpeed Insightsでは、改善したソースを圧縮ファイルでダウンロードするサービスまで提供しています。

PageSpeed Insights
https://developers.google.com/speed/p.../insights/

ターゲットのURLを入力して計測して改善しましょう。

主な対策を紹介します。

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


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

Javascriptの読み込みは、ヘッダーではなく、フッターで読み込みます。

Geeklogの場合、テンプレートfooter.thtmlに記述。あるいは、functions.phpでjsファイルは、footer = 'true' にして、footerで読み込むモードにします。


3.画像を最適化する

4.CSS、JavaScript、HTML を縮小する

HTML圧縮:
Geeklogの場合は、コンフィギュレーションでHTML圧縮をONにします。ただ圧縮にCPU負荷をかけることになりますが、Googleからは褒めらるようです。試してみてください。


計測したページ向けに最適化された画像、JavaScript、CSS リソースは、ダウンロードできます。

画像、JavaScript、CSS リソース をクリックして、圧縮ファイルをダウンロードして、サーバーのファイルと置き換えましょう。

なお、上記画像は、PageSpeed Insightsで表示された画像です。