HTML5ページで非クリティカルなCSSを延期する方法は？
ページの読み込みパフォーマンスを効果的に改善するには、最初に重要なCSSをインラインにし、非批判的なCSSを非同期にロードする必要があります。 1.ツールを使用するか、重要なCSSを手動で識別し、
にインラインします。 2。REL= "Preload"を使用して、onload、JavaScriptの動的荷重、またはRequestIdLecallbackを非同期に組み合わせます。 3.メディア属性を使用して、印刷やトピックなどの条件付きスタイルの読み込みを遅らせます。 4.リクエストを減らすために、非クリティカルなCSSをマージおよび圧縮します。 Media = "Print"手法を使用して、JavaScriptのない非同期負荷を実現し、それにより、最初の画面のレンダリング速度を大幅に最適化できます。
HTML5ページで非クリティカルなCSSを延期することで、最初に倍数以上のコンテンツに必要なCSSのみがロードされるようにすることで、ページの負荷パフォーマンスを改善することができます。残りは、非クリティカルなスタイル - をブロックすることなく、後でロードされます。
効果的に行う方法は次のとおりです。
1.重要なCSSと非批判的なCSSを特定します
重要なCSSは、ページの可視部分（フォルダーの上）をレンダリングするために必要なスタイルの最小セットです。それ以外はすべて批判的ではありません。
- ペントハウス、クリティカル、またはオンラインジェネレーターなどのツールを使用して、重要なCSSを自動的に抽出します。
- ページを手動で確認し、ヘッダー、ヒーローセクション、早期レンダリングコンポーネントのスタイルを分離します。
識別されたら、 に重要なCSSを直接インライン化します。
<head>
<style>
/ *インラインドクリティカルCSS */
h1 {font-size：2rem;色：＃333; }
.hero {マージン：0;パディング：20px; }
/ * ... */
</style>
</head>2.非批判的なCSSを非同期にロードします
標準<link rel="stylesheet">タグブロックレンダリング。非批判的なCSSを延期するには、JavaScriptまたはHTMLトリックを使用して非同期にロードします。
オプションA： onloadでrel="preload"を使用します
CSSファイルをプリロードし、ロードされたらrelをstylesheetに切り替えます。
<link rel = "preload" href = "noncritical.css" as = "style" onload = "this.onload = null; this.rel = 'styleSheet'"> <noscript> <link rel = "styleSheet" href = "noncritical.css"> </noscript>
JavaScriptが無効になっている場合、フォールバックを処理する小さなスクリプトを含めます。
<スクリプト>
//オプション：オンロードイベントトリガーを確認してください
関数loadcss（href）{
var link = document.createelement（ 'link'）;
link.rel = 'styleSheet';
link.href = href;
document.head.appendChild（link）;
}
//ページアイドル後にloadcss（ 'noncritical.css'）を呼び出します
</script>オプションB：JavaScriptを使用した動的読み込み
ページがレンダリングされた後、非クリティカルなCSSをロードします。
<スクリプト>
window.addeventlistener（ 'load'、function（）{
var link = document.createelement（ 'link'）;
link.rel = 'styleSheet';
link.href = 'noncritical.css';
document.head.appendChild（link）;
}）;
</script>または、さらに良いパフォーマンスを得るために、 requestIdleCallbackを使用してください。
<スクリプト>
if（window.requestidlecallback）{
requestidlecallback（function（）{
loadcss（ 'noncritical.css'）;
}）;
} それ以外 {
//フォールバックからロードイベント
window.addeventlistener（ 'load'、function（）{
loadcss（ 'noncritical.css'）;
}）;
}
関数loadcss（href）{
var link = document.createelement（ 'link'）;
link.rel = 'styleSheet';
link.href = href;
document.head.appendChild（link）;
}
</script>3.メディア属性を使用して、印刷または条件付きスタイルを延期する
media属性を使用して（印刷やテーマスタイルなど）すぐに必要ではないスタイルを移動します。
<link rel = "styleSheet" href = "print.css" media = "print"> <link rel = "styleSheet" href = "dark-theme.css" media = "precreter-color-scheme：dark">
これらはまだロードされていますが、優先度が低いため、レンダリングブロッキングの影響を減らすことができます。
4.非批判的なファイルをマイニーして結合します
すべての非クリティカルなCSSを単一のミニフォームファイルに組み合わせることにより、HTTP要求を削減してから延期します。 Webpack、小包、ビルドスクリプトなどのツール（たとえば、 cssnanoを使用）が役立ちます。
ボーナス： media="print"トリックを使用して、即座に延期します
JavaScriptなしでCSSを非同期にロードするための巧妙なトリック：
<link rel = "styleSheet" href = "noncritical.css" media = "print" onload = "this.media = 'all'">
ブラウザはファイルをすばやくダウンロードし（ print優先度が低いため）、ロードされたら、スタイルを適用してonloadをallに切り替えます。
基本的に、不可欠なものを挿入することにより、非批判的なCSSを延期し、残りをpreload 、JavaScript、またはスマートメディアのトリックで非同期にロードします。難しくありませんが、パフォーマンスの知覚に大きな違いが生じます。
以上がHTML5ページで非クリティカルなCSSを延期する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
ホットAIツール
Undress AI Tool
脱衣画像を無料で
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Clothoff.io
AI衣類リムーバー
Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
CSSを使用してガラスムルファズム効果を作成する方法
Aug 22, 2025 am 07:54 AM
CSSのガラス模倣効果を作成するには、背景のぼかしを実現するために背景フィルターを使用し、RGBA（255,255,255,0.1）などの半透明の背景を設定し、サブルの境界と影を追加して階層の感覚を高め、要素の背後に十分な視覚的コンテンツがあることを確認する必要があります。 1。背景：Blur（10px）を使用して、バックグラウンドコンテンツを曖昧にします。 2. RGBAまたはHSLAを使用して透明な背景を定義して、透明性の程度を制御します。 3. 3次元を強化するために、1pxsolidrgba（255,255,255,0.3）の境界線とボックスシェードを追加します。 4.容器に写真やテクスチャなどの豊富な背景があることを確認して、ぼやけた浸透効果を提示します。 5.古いブラウザと互換性があります
CSSでグリッドテンプレートエリアを使用する方法
Aug 22, 2025 am 07:56 AM
grid-template-areaspropertyallowsdeveloperSocreateive、readablelayoutsbydefiningnamedgridareas;それぞれwith-areanamesonchildelementsは、headerheaderer "for
CSSでダークモードテーマを実装する方法
Aug 22, 2025 am 09:55 AM
ダークモードを実装する主な方法は2つあります。1つは、システムの好みを適応させるために自動的に照会するためにカラーシェームメディアを好むことを使用することです。もう1つはJavaScriptを介して手動スイッチング機能を追加することです。 1.ユーザーシステムに応じて暗いテーマを自動的に適用するには、カラーシェームを好みます。 JavaScriptは必要ありません。メディアクエリのスタイルを定義するだけです。 2。手動の切り替えを実現するには、ライトテーマとダークテーマのクラスを定義し、トグルボタンを追加し、JavaScriptを使用してテーマステータスとローカルストレージを管理してユーザーの好みを保存する必要があります。 3.両方を組み合わせて、ページが読み込まれたときに最初にLocalstを読むことができます。
CSSにボックスシャドウを追加する方法
Aug 18, 2025 am 11:39 AM
Box Shadowsを追加するには、Box-Shadow属性を使用します。 1.基本的な構文はボックスシャドウです：水平オフセット垂直オフセットブルール半径拡張半径の色の影。 2。最初の3つの値が必要であり、残りはオプションです。 3。RGBA（）またはHSLA（）を使用して、透過効果を実現します。 4.正の膨張半径が影を拡張し、負の値が低下します。 5.コンマの分離によって複数の影を追加できます。 6.さまざまな背景で視界がテストされることを確認するために、過剰使用を避ける必要があります。この属性はブラウザによってよくサポートされており、合理的な使用によりデザインテクスチャが改善されます。
CSSを使用した順序付けされたリストと順序付けられていないリストをスタイリングする方法
Aug 22, 2025 am 07:59 AM
cslowsfullcustomization ofordereddundunoredStoenhanceReadabilityanddesignconsistency.youcanchangededededededeled-style-typeproperty、soctingtingundliststoussquare、circe、ornobullets、および順調に測定された方法を順調に進めます
HTML5の定義リストは何ですか？
Aug 20, 2025 pm 02:01 PM
adefinitionlistinhtml5iscreatedusingtheelementtogroupterms（）を使用して、itheirdefinitions（）を使用して、maultipleteReadedefinitionormtohavemultipledefinitionsを許可します
CSSでビデオプレーヤーをスタイリングする方法
Aug 21, 2025 am 10:09 AM
CSSを使用してビデオプレーヤーの外観をカスタマイズするには、最初にビデオとカスタムコントロールを含むコンテナを作成し、CSSを介してデフォルトのコントロールを非表示にし、独自の再生インターフェイスを設計する必要があります。レスポンシブデザインを組み合わせてモバイルデバイスに適応し、ネイティブコントロールのダウンロードとピクチャーオプションを削除し、フルスクリーン、ミュート、その他の関数ボタンを展開し、最終的にモダンな外観、統一スタイル、優れたユーザーエクスペリエンスを持つビデオプレーヤーを実装します。
CSSを使用してカスタムスクロールバーを作成する方法
Aug 18, 2025 am 06:08 AM
はい、主にChrome、Edge、およびSafariをサポートするWebKit Pseudo-Elementsを介してカスタムスクロールバーを作成できます。 Firefoxには、Scrollbar-WidthおよびScrollbar-Color属性が必要です。 IEなどの古いブラウザはそれらをサポートしておらず、デフォルトのスタイルに依存する必要があります。開発者は、:: -webkit-scrollbar、::- webkit-scrollbar-track、:: -webkit-scrollbar-thumbなどの擬似要素を通じて、スクロールバーの幅、追跡背景、スライダースタイルを定義でき、クラスセレクターとの作用範囲を定義します。同時に、FirefoxのScrollbar-Colを設定します。
