こんにちは。Kajitz inc.の瀧田です。

PageSpeed Insightsで100点を目指すにあたり、今回は「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という指摘を改善しました。nginxのgzipを有効にすることで圧縮されていないファイルを圧縮して91点から85点までスコアを上げることができました。

Google PageSpeed Insightsの以下の点についてはGoogle PageSpeed Insightsとはで解説しています。
- Google PageSpeed Insights とはなにか
- SEO上、効果があるのか

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

（jsも指摘されていたのですが、キャプチャを取ったのがjsの修正後だったのでcssしか引っかかっていません・・・）

レンダリングを妨げる JavaScript を削除する

ブラウザではページをユーザーに表示する前に解析する必要があります。解析中に外部スクリプトがある場合は、解析を停止して、その JavaScript をダウンロードしなければなりません。そのたびにネットワークの往復が追加されるため、ページが最初に表示されるまでの時間が遅くなります。
https://developers.google.com/speed/docs/insights/BlockingJS

非同期で JavaScript を読み込む

javascriptincludetagの async オプションを使用して非同期でJavaScriptを読み込むようにします。

-    = javascript_include_tag('application')
+    = javascript_include_tag('application', async: Rails.env.production?)

CSS 配信を最適化する

ブラウザでは外部CSSファイルのダウンロードと処理が完了するまでコンテンツを画面に描画するのをブロックします。これによって、外部CSSファイルが多いと、コンテンツを画面に表示するのにかかる時間が増えます。
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

TODO