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

Drupal 7サイトを構築しています。これらは、私が使用するモジュールの一部です：アダプティブテーマ（テーマ）、ビューとコンテンツペイン、パネル、ミニパネル、どこでもパネル、ページマネージャー、メニュー用のSuperfish、Addthis、Chosen（ドロップダウン）。

サイトのパフォーマンスを改善し、CSSファイルとJSファイルを処理するために、Advaggモジュールを使用しています。

GoogleのPagespeedテストを実行すると、「修正する必要がある」という次のエラーが表示されます。

スクロールせずに見える
コンテンツのレンダリングブロックJavaScriptとCSSを排除するページには、6つのブロックスクリプトリソースと8つのブロックCSSリソースがあります。これにより、ページのレンダリングが遅れます。
ページ上のスクロールせずに見えるコンテンツは、次のリソースの読み込みを待たずにレンダリングできませんでした。ブロッキングリソースを延期または非同期でロードするか、HTMLでこれらのリソースの重要な部分を直接インライン化してください。

これは、Googleが提供する情報です。

• レンダーブロッキングJavaScriptを削除する
• CSS配信を最適化する

AdvaggモジュールまたはDrupalコアの設定を変更して、この問題を解決する方法はありますか？

この目標を達成する別の方法はありますか？

更新-mikeytown2の回答に従って変更を実装した後、GoogleのPagespeedテストで次のメッセージを受け取りました。

スクロールせずに見えるコンテンツのレンダリングブロッキングJavaScriptとCSSを排除する
ページには、6つのブロッキングスクリプトリソースと4つのブロッキングCSSリソースがあります。これにより、ページのレンダリングが遅れます。
ページ上のスクロールせずに見えるコンテンツは、次のリソースの読み込みを待たずにレンダリングできませんでした。ブロッキングリソースを延期または非同期でロードするか、HTMLでこれらのリソースの重要な部分を直接インライン化してください。

READMEには、この使用して、現在の行う方法のガイドがあるAdvAggの7.xの-2.31 +バージョンを。また、高性能グループのこのWikiページも参照してください。ほとんどのサイトはhttps://developers.google.com/speed/pagespeed/insights/で完全な100/100スコアを達成できます。以下のAdvAggの新規インストールでそれを達成する方法に関する指示。

すべてのセクションの後にサイトをチェックして、変更がサイトを混乱させないことを確認してください。AdvAgg Modifierでの変更は、通常、最も問題の多いものですが、最大の改善を提供します。

に行く admin/config/development/performance/advagg

• 「推奨（最適化された）設定を使用する」を選択します

有効になっていない場合は、AdvAgg Compress Javascriptをインストールして、 admin/config/development/performance/advagg/js-compress

• 可能な場合はJSMinを選択します。それ以外の場合は、JSMin +を選択します
• すべて削除（最小ファイル）を選択します
• バッチ圧縮リンクをクリックして、これらのファイルを処理します

有効になっていない場合は、AdvAgg Async Font Loaderをインストールして、 admin/config/development/performance/advagg/font

• 集約に含まれるローカルファイル（バージョン：XXX）を選択します。このオプションが利用できない場合は、インストール方法に関するオプションのすぐ下の指示に従ってください。
• 「スタイルが設定されていないテキスト（FOUT）のフラッシュが1回だけ発生するようにlocalStorageを使用する」をチェックします。
• 「スタイル設定されていないテキスト（FOUT）のフラッシュが1回だけ発生するようにCookieを設定する」をチェックします。

有効になっていない場合はAdvAgg Bundlerをインストールし、 admin/config/development/performance/advagg/bundler

HTTP / 2.0設定

• [ページあたりのCSSバンドルのターゲット数]で25を選択します
• [ページあたりのJSバンドルのターゲット数]で25を選択します
• [グループ化ロジック]で[ファイルサイズ]を選択します

HTTP / 1.1設定（デフォルト）

• [ページあたりのCSSバンドルのターゲット数]で2を選択します
• [ページあたりのJSバンドルのターゲット数]で5を選択します
• [グループ化ロジック]で[ファイルサイズ]を選択します

25バンドル対2および5は、ブラウザのキャッシュに関係しています。ファイルが多いほど、ブラウザがキャッシュ内にそのコンボを持っている可能性が高くなりますが、ファイルが多いほど、HTTP 1.1で確立および開かれる接続が増えます。この番号は新しい接続を待機しないため、CSSには2を使用します。ほとんどのブラウザでは同時接続の制限が6であるため、JSは5です。バンドルのこの数は、多くのテストの後に選択されました。HTTP 2.0には1つのストリーミング接続があり、複数のCSSおよびJSファイルのペナルティはほとんど存在しません。したがって、ブラウザのキャッシュを最適化することが最良の選択です。したがって、HTTP / 2.0を提供する場合は、CSSとJSに25を使用する必要があります。

有効になっていない場合はAdvAgg Relocateをインストールし、 admin/config/development/performance/advagg/relocate

• 「推奨（最適化された）設定を使用する」を選択します

有効になっていない場合はAdvAgg Modifierをインストールして、 admin/config/development/performance/advagg/mod

• 「推奨（最適化された）設定を使用する」を選択します

移動しhttps://www.sitelocity.com/critical-path-css-generatorと重要なcssのために必要に応じて多くのランディングページとして入力。通常、トップ10は良いスタートです。Googleアナリティクスをお持ちの場合、トップランディングページhttps://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages またはPiwik httpsの検索方法が表示されます。 //piwik.org/faq/how-to/faq_160/。開始するページがわからない場合は、サイトのホームページを作成します。これを使用してcss https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=enを生成することもできます

以下のファイル名とパスの例は、「ブートストラップ」テーマ用です。それらはすべてで始まりsites/all/themes/bootstrap/critical-css/ます。テーマにcritical-css/ディレクトリを作成します。次のディレクトリはユーザーに基づいています。anonymous/、 all/またはauthenticated/使用することができます。

次のディレクトリはurls/またはtype/です。見てみるとurls/、frontは、フロントページの特殊なケースです。他のすべてのパスは、ディレクトリとファイル名としてcurrent_path（）を使用.cssし、末尾に追加します。https://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.xを参照してください

これを見るのtype/は、ノードタイプの特殊なケースです。マシン名を使用し.cssて、末尾に追加します。このタイプのノードには、この重要なcssファイルが適用され、インライン化されます。以下に、これがどのように機能するかを示す例をいくつか示します。

「フロント」ページの有効なサンプルファイルの場所： sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css

「node / 1」current_path（）ページの有効なサンプルファイルの場所： sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css

「ページ」のノードタイプの有効なサンプルファイルの場所： sites/all/themes/bootstrap/critical-css/anonymous/type/page.css

これらのcssファイルを生成する何らかの自動化された方法が必要な場合、fourkitchensにはその設定方法に関する優れた記事があります：https ://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline-critical-css -drupal-7-theme

事前に構築されたdrupalモジュールで真のハイスコアを獲得することは決してありません。これを達成する唯一の方法は、Google Speed Toolによって作成された提案に参加し、慎重に分析することです。

私は95を達成するためにやったいくつかのものは非常に活発なニュースサイト私がこれを書いた時点で、より良いよりも得点することを、NYTimesの（今はしません）：

• [ブロッキングスクリプト] sharethis、facebookウィジェット、google plusなどのサードパーティスクリプトの実行を遅らせて、ページが完全にレンダリングされた後にのみ実行します。このため、html.tpl.phpの出力でこれらのスクリプトをキャッチし、後で実行するためにキューに入れるために、いくつかの単純な文字列の置換が必要でした。
• [ブロッキングスクリプト] html.tpl.phpの$ scripts変数（json_encodeを使用）をjavascript変数に保存して、最初のページの読み込み後に実行するためにキューに入れます。これは不自然ですが、必要です。一部のブラウザ固有の問題を整理する必要がありました。
• [blocking css] Keith Clarkのテクニックに似たものを実装しましたが、rel = "prefetch"を使用しました。これにより、FOUCを解決する必要が生じます。
• [最小化と圧縮]圧縮と最小化を配信サーバーに外部化し、そこでdrupalインストールを管理不能な混乱に変えることなく、imagemagic、yui-compressor、pngoptimなどを使用してこれらのルールを克服できます。