web-dev-qa-db-ja.com

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

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

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

Googleの Pagespeedテストを実行すると、 「Should Fix」として次のエラーが発生します。

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

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

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

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

更新-mikeytown2回答に従って変更を実装した後、GoogleのPagespeedテストで次のメッセージが表示されました：

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

7themingjavascriptperformance
30
EB84

[〜＃〜] readme [〜＃〜] には、現在の 7.x-2.31 +バージョンのAdvAgg を使用してこれを行う方法に関するガイドがあります。 High Performanceグループのこの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に移動します

  • 集約に含まれるローカルファイル（バージョン：X.X.X）を選択します。このオプションが利用できない場合は、インストール方法に関するオプションのすぐ下の指示に従ってください。
  • 「スタイル設定されていないテキストのフラッシュ（FOUT）が一度だけ発生するようにlocalStorageを使用する」をチェックします。
  • 「スタイルが設定されていないテキストのフラッシュ（FOUT）が一度だけ発生するように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 Analyticsを使用している場合、これにより、トップランディングページを見つける方法が表示されます 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/を見るフロントはフロントページの特殊なケースです。他のすべてのパスは、末尾に.cssが追加されたディレクトリおよびファイル名としてcurrent_path（）を使用します。 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

43
mikeytown2

ビルド済みのdrupalモジュールを使用して、本当に高いスコアを取得することはありません。これを達成する唯一の方法は、 google speed tool によって提案されたそれぞれに参加して注意深く分析することです、それぞれに個別に対処します。

非常にアクティブなニュースサイト で95を達成するために行ったいくつかのことは、私がこれを書いた時点では nytimes より優れていました（今はそうではありません）。

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