こんにちは。Takitaです。
PageSpeed Insightsで100点を目指すにあたり、今回は「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という指摘を改善しました。nginxのgzipを有効にすることで圧縮されていないファイルを圧縮して91点から85点までスコアを上げることができました。
Google PageSpeed Insightsの以下の点についてはGoogle PageSpeed Insightsとはで解説しています。
- Google PageSpeed Insights とはなにか
- SEO上、効果があるのか
(jsも指摘されていたのですが、キャプチャを取ったのがjsの修正後だったのでcssしか引っかかっていません・・・)
ブラウザではページをユーザーに表示する前に解析する必要があります。解析中に外部スクリプトがある場合は、解析を停止して、その JavaScript をダウンロードしなければなりません。そのたびにネットワークの往復が追加されるため、ページが最初に表示されるまでの時間が遅くなります。
https://developers.google.com/speed/docs/insights/BlockingJS
javascriptincludetagの async
オプションを使用して非同期でJavaScriptを読み込むようにします。
- = javascript_include_tag('application')
+ = javascript_include_tag('application', async: Rails.env.production?)
ブラウザでは外部CSSファイルのダウンロードと処理が完了するまでコンテンツを画面に描画するのをブロックします。これによって、外部CSSファイルが多いと、コンテンツを画面に表示するのにかかる時間が増えます。
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
TODO