レンダリングを妨げる CSS を削減する自動化方法の詳細な説明-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

レンダリングを妨げる CSS を削減する自動化方法の詳細な説明

青灯夜游

Dec 15, 2020 am 09:39 AM

css

レンダリングを妨げる CSS を削減する自動化方法の詳細な説明

「レンダリングをブロックする JavaScript と CSS を削除する」。これは私が常にこだわっている Google Page Speed Insights の推奨事項です。 Google では、最初に必要な CSS をインライン化（インライン）し、ページを読み込む準備ができたら残りの CSS を読み込み、アイドル時間を他のコンテンツの読み込みに使用することを推奨しています。こうすることで、ユーザーはできるだけ早くそのページを見ることができます。

レンダリングを妨げる CSS を削減する自動化方法の詳細な説明コード分割、ツリーシェイキング、キャッシュなど、JavaScript のデリゲートブロックを最小限に抑えるために、さまざまなことができます。

CSS についてはどうでしょうか? これを行うには、上記のコンテンツに使用される CSS (つまり、重要な CSS) を分離し、最初にロードすることで、デリゲートのブロックを最小限に抑えることができます。次に、重要ではない CSS を読み込むことができます。

重要な CSS をプログラム的に分離することは可能です。この記事では、それを Webpack パイプラインに委任する方法を説明します。

#レンダリングのブロックとは何を意味しますか?

リソースが「レンダリングブロック」である場合、リソースがダウンロードまたは処理されるまでブラウザーはページを表示できないことを意味します。

通常、次のようにドキュメントの先頭にあるスタイルシートにリンクすることで、CSS をブロックする方法で読み込みます。

<head>
  <link rel="stylesheet" href="/style.css">
  ...
</head>
<body>
  <p>I can&#39;t be seen until style.css has been loaded!</p>
</body>

ログイン後にコピー

Web ブラウザーがこのページを読み込むと、それが読み取られます。初めから最後まで。ブラウザがリンクタグに到達すると、すぐにスタイルシートのダウンロードが開始され、完了するまでページは表示されません。

大規模なサイト、特に Bootstrap のような大規模なフレームワークを備えたサイトの場合、スタイルシートは数百 kb になる場合があり、ユーザーは完全にダウンロードされるまで辛抱強く待つ必要があります。

それでは、レンダリングがブロックされない本文内のスタイルシートにリンクする必要がありますか? それは可能ですが、実際のところ、テナントをブロックすることは完全に悪いことではなく、実際にはそうしたいのです。それの利点。 CSS をロードせずにページをレンダリングすると、醜い「スタイルのないフラッシュコンテンツ」が表示されます。

必要なスイートスポットは、キーを使用してレンダリングする場所です。CSS は、ページ。メインビューのスタイルを設定するために必要ですが、重要でない CSS はすべて最初のレンダリング後に読み込まれます。レンダリングを妨げる CSS を削減する自動化方法の詳細な説明

Key CSS

Bootstrap と Webpack を使用して作成したこの単純なページを見てください。最初にレンダリングされた後の外観は次のとおりです。

このページには、[今すぐ登録] ボタンから開くことができるモーダルもあります。開くと、次のようになります: レンダリングを妨げる CSS を削減する自動化方法の詳細な説明

ページの最初のレンダリングでは、ナビゲーションバー、ジャンボトロン、ボタン、およびレイアウトに関するその他の一般的なルールとフォント CSS ルールが必要です。。ただし、モーダルルールはすぐには表示されないため、必要ありません。これを念頭に置いて、重要な CSS を非クリティカル CSS から分離できます。レンダリングを妨げる CSS を削減する自動化方法の詳細な説明

critical.css

.nav {
  ...
}

.jumbtron {
  ...
}

.btn {
  ...
}

ログイン後にコピー

non_critical.css

.modal {
  ...
}

ログイン後にコピー

この概念に同意する場合は、おそらく次の 2 つの質問に興味があるでしょう:

プログラム的に重要な CSS と非重要な CSS をどのように区別しますか?

方法最初のレンダリングの前に重要な CSS を読み込み、最初のレンダリングの後に重要でない CSS をページに読み込みますか?

サンプルプロジェクト

解決策が見つかったときにすぐに理解できるように、このプロジェクトの基本的なセットアップについて簡単に説明します。

まず、ブートストラップ SASS を入力ファイルにロードします。

main.js

require("bootstrap-sass/assets/stylesheets/_bootstrap.scss");

ログイン後にコピー

私は sass-loader を使用してこれを処理し、それを Extract Text Plugin と組み合わせて、コンパイルされた CSS を独自のファイルに入れています。

また、HTML Webpack プラグインを使用して、ビルド内で HTML ファイルを作成します。すぐにわかるように、この解決策は不可欠です。

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: ExtractTextPlugin.extract({
          fallback: &#39;style-loader&#39;,
          use: [&#39;css-loader&#39;, &#39;sass-loader&#39;]
        })
      },
      ...
    ]
  },
  ...
  plugins: [
    new ExtractTextPlugin({ filename: &#39;style.css&#39; }),
    new HtmlWebpackPlugin({
      filename: &#39;index.html&#39;,
      template: &#39;index.html&#39;,
      inject: true
    })
  ] 
};

ログイン後にコピー

ビルドを実行すると、HTML ファイルは次のようになります。 CSS はヘッドに読み込まれるため、レンダリングがブロックされることに注意してください。

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vuestrap-code-split</title>
    <link href="/style.css" rel="stylesheet">
</head>
<body>
  <!--App content goes here, omitted for brevity.-->
  <script type="text/javascript" ></script>
</body>
</html>

ログイン後にコピー

重要な CSS をプログラムで特定する

重要な CSS を手動で特定するのは面倒な場合があります。これをプログラムで行うには、Addy Osmani による Critical

という適切な名前のツールを使用できます。これは、HTML ドキュメントを読み取り、重要な CSS を識別する Node.js モジュールです。すぐに説明するように、それだけではありません。

Critical が重要な CSS を特定する方法は、指定された画面サイズを使用して PhantomJS を使用してページを読み込み、ページのレンダリングに使用される CSS ルールを抽出することです。

このプロジェクトの設定方法は次のとおりです:

const critical = require("critical");

critical.generate({
  
  /* The path of the Webpack bundle */
  base: path.join(path.resolve(__dirname), &#39;dist/&#39;),
  src: &#39;index.html&#39;,
  dest: &#39;index.html&#39;,
  inline: true,
  extract: true,

  /* iPhone 6 dimensions, use whatever you like*/
  width: 375,
  height: 565,
  
  /* Ensure that bundled JS file is called */
  penthouse: {
    blockJSRequests: false,
  }
});

ログイン後にコピー

执行时，这将把Webpack包输出中的HTML文件更新为:

index.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <title>Bootstrap Critical</title>
  <style type="text/css">
    /* Critical CSS is inlined into the document head, abbreviated here. */
    body {
      font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
      font-size: 14px;
      line-height: 1.42857;
      color: #333;
      background-color: #fff;
    }
    ...
  </style>
  <link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel=&#39;stylesheet&#39;">
  <noscript>
      <link href="/style.96106fab.css" rel="stylesheet">
  </noscript>
  <script>
    /*A script for loading the non-critical CSS goes here, omitted for brevity.*/
  </script>
</head>
<body>
  <!--App content goes here, omitted for brevity.-->
  <script type="text/javascript" src="/build_main.js"></script>
</body>
</html>

ログイン後にコピー

它还将输出一个新的css文件，例如style.96106fab.css（文件名会自动添加一个散列）。这个css文件与原始样式表相同，只是去掉了关键的css。

内联关键css

您将注意到关键的CSS已内联到文档的头部。这是最优的，因为页面不必从服务器加载它。

预加载非关键CSS

您还将注意到，非关键CSS加载了外观精美的链接。 preload值告诉浏览器开始获取非关键CSS供挂起使用。但至关重要的是，预加载不是渲染阻止，因此无论预加载资源是否完成，浏览器都将继续绘制页面。

链接中的onload属性允许我们在非关键的CSS最终加载后运行脚本。关键模块自动将脚本内联到文档中，从而提供跨浏览器兼容的方式将非关键样式表加载到页面中。

<link href="/style.96106fab.css" rel="preload" as="style" onload="this.rel=&#39;stylesheet&#39;">

ログイン後にコピー

将critical放入webpack管道

我制作了一个名为html关键webpack plugin的webpack插件，它仅仅是关键模块的包装器。它将在您的文件从HTML网页包插件发出后运行。

以下是如何将它包含在Webpack项目中:

const HtmlCriticalPlugin = require("html-critical-webpack-plugin");

module.export = {
  ...
  plugins: [
    new HtmlWebpackPlugin({ ... }),
    new ExtractTextPlugin({ ... }),
    new HtmlCriticalPlugin({
      base: path.join(path.resolve(__dirname), &#39;dist/&#39;),
      src: &#39;index.html&#39;,
      dest: &#39;index.html&#39;,
      inline: true,
      minify: true,
      extract: true,
      width: 375,
      height: 565,
      penthouse: {
        blockJSRequests: false,
      }
    })
  ] 
};

ログイン後にコピー

注意:您可能只应该在生产构建中使用它，而不是在开发中，因为它会使您的构建非常慢!

性能结果

现在我已经隔离了关键的CSS，并在空闲时间加载了非关键的CSS，那么如何改进性能呢?

我使用Chrome的灯塔扩展来寻找答案。请记住，我们试图优化的度量标准是第一次有意义的绘制的时间，它基本上告诉我们用户看到某些东西需要多长时间。

在实施关键的CSS:

レンダリングを妨げる CSS を削減する自動化方法の詳細な説明

关键的CSS实现后:

レンダリングを妨げる CSS を削減する自動化方法の詳細な説明

如您所见，我的应用程序在整整一秒钟前就获得了一幅有意义的画作，并且在半秒钟前就实现了交互。

实际上，你可能不会在你的应用程序中得到如此显著的改进，因为我的css已经完全膨胀了（我包括了整个引导库），在这样一个简单的应用程序中，我没有很多关键的css规则。

英文原文地址：https://vuejsdevelopers.com/2017/07/24/critical-css-webpack/

更多编程相关知识，请访问：编程课程！！

以上がレンダリングを妨げる CSS を削減する自動化方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

ホットトピック

Gmailメールのログイン入り口はどこですか？

7345

Java チュートリアル

1627

CakePHP チュートリアル

1352

Laravel チュートリアル

1265

PHP チュートリアル

1214

Related knowledge

Vue におけるプレースホルダーの意味 May 07, 2024 am 09:57 AM

Vue.js では、placeholder 属性は、input 要素のプレースホルダーテキストを指定します。これは、ユーザーがコンテンツを入力していないときに表示され、入力のヒントや例を提供し、フォームのアクセシビリティを向上させます。その使用方法は、input 要素にプレースホルダー属性を設定し、CSS を使用して外観をカスタマイズすることです。ベストプラクティスには、入力に関連すること、短く明確にすること、デフォルトのテキストを避けること、アクセシビリティを考慮することが含まれます。

jsでのスパンの意味は何ですか May 06, 2024 am 11:42 AM

スパンタグは、テキストにスタイル、属性、または動作を追加できます。色やフォントサイズなどのスタイルを追加するために使用されます。 idやclassなどの属性を設定します。クリック、ホバーなどの関連する動作。さらに処理または引用するためにテキストにマークを付けます。

jsでレムは何を意味しますか May 06, 2024 am 11:30 AM

CSS の REM は、ルート要素 (html) のフォントサイズに対する相対単位です。次の特性があります: ルート要素のフォントサイズに相対し、親要素の影響を受けません。ルート要素のフォントサイズが変更されると、REM を使用する要素もそれに応じて調整されます。任意の CSS プロパティとともに使用できます。 REM を使用する利点は次のとおりです。応答性: さまざまなデバイスや画面サイズでもテキストを読みやすい状態に保ちます。一貫性: Web サイト全体でフォントサイズが一貫していることを確認します。スケーラビリティ: ルート要素のフォントサイズを調整することで、グローバルフォントサイズを簡単に変更できます。

vueに画像を導入する方法 May 02, 2024 pm 10:48 PM

Vue に画像を導入するには、URL、require 関数、静的ファイル、v-bind ディレクティブ、CSS 背景画像の 5 つの方法があります。動的画像は Vue の計算プロパティまたはリスナーで処理でき、バンドルされたツールを使用して画像の読み込みを最適化できます。パスが正しいことを確認してください。そうでないと、読み込みエラーが表示されます。

jsのノードとは何ですか May 07, 2024 pm 09:06 PM

ノードは、HTML 要素を表す JavaScript DOM 内のエンティティです。これらはページ内の特定の要素を表し、その要素にアクセスして操作するために使用できます。一般的なノードタイプには、要素ノード、テキストノード、コメントノード、ドキュメントノードなどがあります。 getElementById() などの DOM メソッドを通じて、ノードにアクセスし、プロパティの変更、子ノードの追加/削除、ノードの挿入/置換、ノードのクローン作成などの操作を行うことができます。ノードトラバーサルは、DOM 構造内を移動するのに役立ちます。ノードは、ページコンテンツ、イベント処理、アニメーション、およびデータバインディングを動的に作成するのに役立ちます。

ブラウザのプラグインは何語で書かれていますか? May 08, 2024 pm 09:36 PM

ブラウザプラグインは通常、次の言語で作成されます。フロントエンド言語: JavaScript、HTML、CSS バックエンド言語: C++、Rust、WebAssembly その他の言語: Python、Java

Vueのrefとidは何をするのでしょうか? May 02, 2024 pm 08:42 PM

Vue.js では、JavaScript で ref を使用して DOM 要素 (サブコンポーネントおよび DOM 要素自体にアクセス可能) を参照し、id を使用して HTML id 属性を設定します (CSS スタイル、HTML マークアップ、および JavaScript ルックアップに使用できます) ）。