Ivy SOHO.net

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

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

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

主な対策を紹介します。

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


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

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

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


３．画像を最適化する

４．CSS、JavaScript、HTML を縮小する

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


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

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

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