重要なCSSとは何ですか？ （Webロードの手法は迅速に）

人生の本当の問題

このように感じたことはありますか？興味深いウェブサイトをクリックします。しかし、あなたが歓迎されているのは... 白い画面、あなたが待つ2番目の画面...最後まで、忍耐を失い、それからオフになります！この種のいらいらは、顧客が毎日遭遇しているものであり、変換率とSEOランクを静かに破壊したのは「キル」です。あなたが知らないかもしれません

「遅いダウンロードWebサイト」の症状、特に感情だけでなく、最初に見られた（折り目の上）。「レンダリングブロッキングリソース」と呼ばれる技術的な問題またはWebページの表示をブロックしたリソースです。重要な要素は、私たちの重いCSSファイルこの問題であるということです。この問題は、解決しなければならない緊急の問題です。レンダリングブロッキングリソースを修正して、PageSpeedを直接の詳細をご覧ください

イラストのプロンプト：ユーザーイメージは、まだ白いスマートフォン画面を見つめながら、イライラした表現を示しています。中央には負荷記号のみがあります。ウェブサイトが長すぎるのを待っているという感覚を伝えます

なぜその問題が発生したのですか？

画像を明確に見るために、ブラウザ（Google Chromeなど）が非常に勤勉な配達スタッフのように機能することを想像してください。誰かがあなたのウェブサイトに電話をかけると、以前にHTMLファイル（Web構造）を取得するために実行されます。 HTMLでコマンドを読んだ後、CSSファイルは、Color Webが必要なドレッシングマニュアルのようなものですが、ポイントは...ブラウザがCSSファイル全体が最初に終了するのを待つために「すべてを停止する」ことです。一部のスタイルは、ユーザーが見たことのないWebサイトのボトムコンテンツ用ですが。

「続行する前に終了するのを待たなければならない」プロセス。レンダリングブロッキングという単語の起源であり、CSSファイルが大きく複雑です。待機は長いです。最初に見られるべき重要なコンテンツにもかかわらず、ユーザーは不必要に白い画面をより長くじっと見つめますが、CSSのみが必要になる場合があります。

イラストのプロンプト：簡単な日記画像は、通常のブラウザのプロセスを示します。1。ブラウザリクエストhtml-> 2。

残っている場合、それはどのように影響しますか？

CSSは美しい店を開くのと変わらないため、Webサイトの負荷が遅いという問題を見落としています。しかし、顧客が結果を入力できるようにすることからドアをロックしたことは、予想よりもはるかに激しいものです。

• ユーザーエクスペリエンス（UX）が破壊されました：誰も待つのが好きではありません。この調査では、わずか1〜3秒がウェブサイトの遅くなり、範囲の可能性の32％以上が追加されていることが示されています。
• 変換率。スケール：イライラしている顧客は、物を買わない顧客です。あなたが販売を閉鎖したり、リードを獲得したり、人々に重要なボタンをクリックさせる機会。速度が遅いため、瞬く間に消えます
• SEOランク。ドロップ： Googleは、ランキング要因の1つとしてCore Web Vitalsを使用して、ユーザーエクスペリエンスを非常に重要視しています。遅いWebサイトは、LCP（最大のコンテンツフルペイント）値に直接マイナスの影響を与えます。重要なメトリックの1つは、コアWebバイタルを改善しますそしてついに落ちました
• 信頼性の喪失：遅いWebサイトは非専門家を反映しています。そして、顧客があなたとの取引を行う自信を欠いているため、彼は代わりにウェブ上の競合他社に逃げることができます。

イラストのプロンプト： 2グラフ画像と比較された最初のバーには、上部に眉をひそめたアイコンがあります。グラフは「変換率」メッセージで落ち、もう1つは笑顔のアイコンを持っています。グラフは、マイナスの効果を伝えるメッセージ「バウンスレート」とともに上昇します。

解決策はありますか？そして、それはどこから始めるべきですか？

良いニュースは、この問題を解決するための「高速道路」があることです。この手法は、 「クリティカルCSS」または「絶対に必要なCSS」と呼ばれます。

その原則は非常に簡単です。ディスプレイの前にブラウザにすべてのCSSをダウンロードするように強制する代わりに、次のように新しいゲームに変更します。

1. 検索と抽出（抽出）： 「折り畳みの上」コンテンツに必要なCSSスタイルのみが見つかります。
2. HTML（インライン）に埋葬：抽出されたCSS（非常に小さい）を持参し、タグに入れます ภายในส่วน ของไฟล์ HTML โดยตรง
3. 残りは後でロードされます（Async/Defer）：すべてのCSSファイルをダウンロードするように注文します。 「ディスプレイをブロックしないでください」（非同期に）は、Webページが表示された後、ページの後ろに徐々にダウンロードすることです。

結果は何ですか？ブラウザは、クリティカルCSSを備えたHTMLファイルを受信し、埋め込まれ、ユーザーが表示できる最初のWebページを「色」したり、表示したりできます。すぐに！ユーザーはあなたのウェブサイトが速いと感じ、他のCSSは後で徐々にロードされます。雑誌が雑誌がパフォーマンスの最適化の中心に与える重要なテクニックの1つです

イラストのプロンプト：理解しやすい重要なCSSの概念を説明する：1。 "倍以上の"テキストボックスのCSSを識別します。 2。CSSコードを配置して、HTMLファイル（インライン）に入れます。 3.残りのCSSファイルは後で読み込まれます（非同期負荷）。

かつて成功していた本物からの例

「シックな装飾」オンラインホーム装飾ショップを想像してください。とても美しいウェブサイトがあります。しかし、代わりに大きな問題が発生したため、携帯電話の売り上げは、Google PagesSpeed Insightsスコアが非常に悪いことを発見したターゲットよりもはるかに低く、LCP（最大のコンテンツ型塗料）が4.8秒まで非常に悪いことがわかりました。

ターンミッション：開発チームは、重要なCSS技術を使用することを決定しました。ヘッダー、ヒーローバナー、およびHTMLに表示される最初の4つのアイテムに必要なCSSを抽出し、メインCSSファイルを後で設定します。

有形の結果：わずか1週間後、Web LCP値は4.8秒からわずか1.6秒に減少しました！ユーザーは、Webが「別のストーリーのように速く」、携帯電話のBondceレートが25％減少していると感じており、最も重要なことは、 1バーツを撃たなければ変換率が12％増加したことですこれは、ユーザーが最初に見るものに焦点を合わせる力です。、それがまだ非常に重要であるという考えに沿っています

イラストのプロンプト：画面の比較画像/画面後の画像。 Google PagesSpeed Insights。写真は、赤の性能と高いLCPを示しています。 ATMT画像は、緑色のスコアとLCP値が大幅に低いことを示しています。

フォローしたい場合、何をすべきですか？ （すぐに使用できます）

重要なCSSはそれほど難しくありません。現在、多くのツールがあります。次の手順に従ってみてください。

ステップ1：重要なCSSの抽出。
最良の方法は、自動ツールを使用することです。自分でそれをすることは時間の無駄であり、とても簡単だからです。

• オンラインツール：無料の重要なCSSを提供するWebサイトがあります。 SiteLocityの重要なCSSジェネレーターなど、URLを入れてください。
• NPMパッケージ（開発者向け）：開発者の場合、非常に人気があり強力な「クリティカル」ビルドプロセスシステムで動作できます。
• CMSプラグイン（WordPress/Shopify用）：ほとんどのプラットフォームには、WP Rocket、Perfmatters（WordPress用）など、これを行う自動速度プラグがあります。これは一般の人々にとって最も簡単な方法です。

ステップ2：あなたのウェブサイトにそれを置きます。

1. 最初のステップから抽出されたCSSコードを持参してください。タグに入れます ที่ส่วน ของหน้าเว็บคุณ
2. 元のCSSダウンロードコマンドを次のように調整します。
   代わりにこのようになり、後でダウンロードする：
   

この新しいコードは、「緊急なくこのファイルを事前にダウンロードしてください。そして、ロードが終了したら、StyleSheetとして使用してください。」というタグが表示されます。ユーザーがJavaScriptをオフにした場合の保護です。専門家が必要な場合は、これらの構造を確認して改善してください。 eコマース最適化監査が役立ちます。

イラストのプロンプト： Infovic、3つのステップ、クリティカルCSS、アイコン：1。生成（コンピューターを使用）2。インライン（HTMLにコードを置く）

人々が不思議に思う傾向がある質問とクリアされた答え

Q：これで、HTMLファイルは大きくなりますか？悪影響はありますか？
回答：はい、HTMLファイルはわずかに大きくなります。しかし、これは「大きな価値」の交換です。ユーザーの利点は、すぐに表示するWebページをご覧ください。少しだけ増加したHTMLファイルサイズよりも価値が高くなります。ユーザーの全体的なエクスペリエンスは膨大です。これが私たちの主な目標です

質問：すべてのページに対して個別の重要なCSSを作成する必要がありますか？
回答：理論では、各テンプレート（最初のページ、製品ページ、ブログページ）がレイアウトと折りたたみスタイルの上にあるため、「はい」です。ただし、最初は、最初のページやメインランディングページなど、最初のトラフィックが最も高い重要なページに焦点を当てることができます。ほとんどの自動ツールは、CSSの作成に役立ちます。

質問：Webデザインの編集がある場合、どのように世話をするか？
回答：これが主な課題です。上記の折り目のデザインを変更するたびに、「常に」新しい重要なCSSを作成する必要があります。これが、自動化されたビルドプロセスが開発者向けである理由です。または、CMSユーザーの信頼性の高いプラグを最も推奨される方法として使用することは、変更が行われるたびに自分自身を再生するのに役立つため、ケアをより簡単にし、持続可能なWebデザインガイドラインを。

イラストのプロンプト：人の画像は、コンピューターの前で真剣に考えています。質問マーク（？）が明確な答えを必要とする質問をすることについてメディアの周りに浮かんでいます

理解しやすい +をやりたいと思うようにする

重要なCSSは、プログラマーにとって単なるテクニックではなく、ユーザーに最高のエクスペリエンスを提供するWebサイトを作成する「心」です。これは、「すべてを待つことを強制された」から、「最も重要なことを最初に提供する」ことから、考え方を変える方法です。ユーザーに1秒で必要なコンテンツを確認することは、「顧客の損失」と「通常の顧客の作成」の違いです。

ホワイトスクリーンと退屈な待機をして、もうあなたのビジネスを破壊するのを待ってはいけません。さまざまなツールを使用してみてください。あなたのウェブサイトをチェックすることをお勧めし、今日からの改善を開始することは今日効果的です。将来、変換とSEOの成長のための強力な基盤を構築することです

あなたのウェブサイト...より速くなる準備はできましたか？すぐにそれを行うと、あなたは間違いなく結果に驚かれるでしょう！

イラストのプロンプト：ロケットの画像はすぐに空に駆け込んでいます。ロケットには、読者が行動するためのインスピレーションと励ましとして、「ページ速度」と「変換」という言葉があります。

‍