診断と編集レンダリングリソースリソースは、ページスピードポイントを追加します。

美しいウェブサイト...でも遅い！顧客は完全に消えます！この問題に頭痛がしたことがありますか？ウェブサイトへの投資。しかし、Google PagesSpeed Insightsでポイントをチェックすると、Red Lettersは「レンダリングブロッキングリソースを排除する」とかわいいスコアで警告しました。では、なぜあなたのウェブサイトを夢見ないようにすることが重要なのは「キャラクター」なのでしょうか？この記事には、手を握る答えがあります。ゆっくりとしたウェブサイトをすばやく変更するには、ロケットに固執してください！

人生の本当の問題

美しく装飾されたレストランを開こうとしていると想像してみてください。 （あなたのウェブサイト）。顧客は並んで待っています（入った交通）が、店には入り口で作業している画家と電気技師がいます。 （レンダリングブロッキングリソース）と「待って！最初に壁を仕上げて配線するのを待っています。誰もが店に入ることができます。」顧客は何をしますか？もちろん、それらのほとんどは別れを告げて別の店に行きます！これが正確に起こったことです。あなたのウェブサイト、ユーザー、特にモバイルでは、私は待ちたくありません。ウェブサイトが読み込み終了していないのはわずか3〜4秒です。彼らは押し出して競合他社にすぐに行く準備ができています。そして、それに続くのは、直帰率が高く、変換が下がること、そして最悪なことは、Googleがあなたのウェブサイトが良くないと考えていることです。ランキングは再び落ちました。これは明らかにオンラインビジネスマンの悪夢です。

イラストのプロンプト：問題を解決した後、Google PagesSpeed Insightsの画像を最初に比較します。レンダリングブロッキングリソース。最初の側は、「レンダリングブロッキングリソースを排除する」とアフターグリーン）のハイライトを備えた低スコア（赤）を持っています。

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

より明確にするためには、ブラウザ（Chrome、Safariなど）がどのようになっているかを理解する必要があります。 Webページを「作成」します。誰かがあなたのウェブサイトに来ると、ブラウザはHTMLコードを読むことから始めます。これは家全体の「グリーンプリント」のようなものです。一度に1行ずつ読み取られます。しかし、 CSSファイル（Webサイトのように見えるスタイルシートスタイルファイル）またはJavaScript（Webを作成するスクリプトファイルにはさまざまな機能を備えている）途中でダウンロードするように命じられると、すぐに家を建てるために「停止」します。それはすべてを残し、そのファイルをダウンロードするために実行されます。最初に終了してから、家を建てるために戻ってきてください。 「待つのをやめなさい」。これは、ディスプレイを妨害している「レンダリングブロッキング」技術的な情報については、 GTMetrix、これを非常によく説明できます。

イラストのプロンプト：ブラウザの操作を示す簡単なインフォグラフィック画像。これは、HTMLを読み取り、シンボル「停止」を備えた直線です。ラインが続く前にCSSとJSファイルがファイルされると、赤が表示されます。

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

問題を無視することは、リソースをブロックすることは、家の水を漏らすことと変わりません。最初は少しかもしれません。しかし、長期的な影響は予想よりも深刻です。

• ユーザーエクスペリエンス（UX）は貧弱です。ゆっくりとロードされるWebが好きな人はいません。特に、焦っている携帯電話のユーザーは、彼らがイライラし、あなたのブランドがプロフェッショナルではないことを見ることができる元の資本です。、顧客が消えるまでクリニックのウェブサイトまたはサービスビジネスが遅いという主な理由です
• ボンディスレートは上昇しています： Webの負荷が遅い。より多くの人がオフになるほど、Googleからの情報が多く、ウェブサイトのみが1秒から3秒で搭載されていると述べています。人々が最大32％を押し出す可能性！
• Core Web Vitals Drops：この問題は、コアWebバイタルの重要なメトリックマットの1つである最大のコンテンツフルペイント（LCP）に直接影響します。 LCPの値が悪い場合、Googleはあなたのウェブサイトが低いことを確認します。
• SEOランキング： 2021年以来、Googleはランキングの要因としてページエクスペリエンスをもたらしました。遅くて悪いUXであるWebは、大幅に削減される可能性があります。
• 収入とビジネスチャンスの損失：このすべての効果は同じものにつながり、ウェブサイトで競合他社の顧客と収入をより速く失います。

イラストのプロンプト：グラフは、増加したWeb読み込み時間とより高い帰り率の関係を示しています。顧客の眉をひそめるアイコンとともに

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

良いニュースは、この問題を解決できることです！主な原則は、ブラウザに新しい「優先順位を付ける」必要があることです。

JavaScript（JS）の場合：

• 属性defer：これは最も簡単で最も効果的な方法です。タグに延期を追加するだけです เบราว์เซอร์จะโหลดไฟล์ JS นั้นไปพร้อมๆ กับการสร้างหน้าเว็บ (ไม่หยุดรอ) และจะเริ่มทำงานก็ต่อเมื่อสร้างหน้าเว็บเสร็จแล้ว เหมาะกับสคริปต์ส่วนใหญ่ที่ไม่จำเป็นต้องทำงานทันที
• 属性async： Deferと同様に、ブラウザはロードを停止しません。ただし、いくつかの追跡スクリプトなど、他の部品に関連しないスクリプトに適したWebページが完了する前に機能する可能性のある負荷が完了するとすぐに機能します

CSSファイルの場合：

• インラインクリティカルCSS：これがCSSの問題を解決するための鍵です。表示に必要なCSSコードのみを「引く」ことです。 「画面の最初の部分」（倍以上）タグに入れます ในไฟล์ HTML โดยตรง
• ブロッキングせずに残りのCSSをロードします。残りのCSS（下にスクロールする必要がある部品の場合）は、最初のディスプレイに介入しないように特別な負荷方法を使用します。
• メディアクエリの使用：一部のデバイスのみを使用するCSS（たとえば、印刷や特別な画面など）には、必要な場合にのみダウンロードするブラウザのメディア

そして、それはどこから始めるべきですか？最も簡単なのは、Google PagesSpeed Insightsにアクセスして、URLを最初に配置することから始めることです。最初に結果を参照してください。ファイルリストとして訴えます。どちらが「被告人」

イラストのプロンプト：インフォグラフィックは、通常の負荷（通常）、非同期を比較し、各タイプの時間がWebページ（タイムライン）でどのように機能するかを示します。

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

画像をより明確に見るために、この問題に激しく遭遇したeコマースWebサイトのケースを持ち上げたいと思います。彼らのウェブサイトは、特に約38（赤）のShopify PagesSpeedスコアで非常にゆっくりとダウンロードし、レンダリングブロッキングリソースがあります。製品画像が完成する前に、多くの顧客がウェブサイトから押し出されます。

ミッション：チームは検査に行き、主な問題は多数のサードパーティアプリがインストールされていることから発生していることがわかりました。それぞれが独自のJavaScriptおよびCSSファイルを使用しているため、長い間「待機キュー」になります。

解決：

1. 不要なアプリを確認して削除します。まず、まったく使用されないアプリをアンインストールしたり、機能したりすることはありません。
2. JavaScriptでDeferを使用します残りのアプリのスクリプトとテーマスクリプトは、すべてのdeferがデフォルトのパフォーマンスを妨害しないために
3. クリティカルCSSの作成とインライン：チームは、クリティカルCSSツールを使用して、ヘッダー、メニュー、ヒーローバナーに必要なスタイルをHTMLに直接プルします。
4. 残りのCSSレイジーロードをロードします：メインCSSファイルは、Webページが表示された後にダウンロードするように調整されます。

結果： PageSpeed Insightsスコアを調整してからわずか1週間で、38から89（黄色、ほぼ緑）に急いでいます。 LCP値は2.5秒よりも優れています。最も重要なことは、限界率が18％減少し、変換率が1.2％増加したことです。 eコマース最適化監査サービスの主な目標の1つであるWebサイトに「速度を復元する」という具体的な結果です

イラストのプロンプト：eコマースのウェブサイトの前に、左側はゆっくりとロードされるウェブサイトです。要素は良くありません。右側は、迅速にロードされたものと同じウェブサイトで、変換率の増加とともに美しい結果を表示しました。

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

この問題を管理する準備ができましたよね？このステップに従うことができます：

ステップ1：文字を見つけます。

• Google PagesSpeed Insightsにアクセスしてください
• ウェブサイトのURLを入れて、「分析」を押します。
• 下にスクロールして「機会」セクションを見て、トピックを探します。 「レンダリングブロッキングリソースを排除する」
• クリックして、問題である.jsおよび.cssファイルのリストを表示します。

ステップ2：JavaScriptファイルを管理する（作成しやすい）

• 各.js WebサイトのHTMLにそのファイルを使用するコードを見つけてください。
• 次のようになります：
• タグに延期を追加しましょう。
• PagesSpeedのすべてのスクリプトでこれを行います（緊急に動作するために本当に必要なスクリプトを除く。

ステップ3：CSSファイルを管理する（少し複雑）

原則は、CSSを2つの部分に分割することです：「批判的」と「非批判的」 "

1. クリティカルCSSの作成：などのオンラインツールを使用します。 URLを追加します。 CSSコードが作成されます。
2. 重要なCSSを頭に入れます：前のステップから取得したコードをコピーします。セクションに入れてくださいあなたのウェブサイトのタグに入れて
3. 元のCSSファイルをブロックしないようにする：タグを見つける元のCSSファイルのファイルとこのタイプに調整して、後でダウンロードするブラウザを欺く
   
   この手法は、ブラウザに「これは印刷のスタイルである（ダウンロードする必要はない）」を伝えますが、負荷が完了したら（オンロード）、以前のようにすべてのデバイス（すべて）に戻ります。 Google Web.devから詳細なアドバイスをお読みください。

注意：実際に使用する前に、すべての変更を実験バージョン（ステージング）でテストする必要があります。 Webを保護するため

イラストのプロンプト：Google PageSpeed Insightsを使用するプロセスを示す画面は、「Elminate Renderlブロッキングリソース」と問題である円形の円を指し示しています。

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

DeferとAsyncの使用方法は異なりますか？どちらを選ぶべきですか？ A：どちらも、スクリプトをダウンロードするためにブラウザを停止しないようにします。しかし、「作業指示」では異なります。 Deferは、Webページが最初に終了し、次に機能するのを待ちます。 （そして、それぞれコードに記述された、それぞれ実行されます）。これは安全で、ほとんどのスクリプトに適しています。 Asyncは、負荷が終了するとすぐに機能します。順番に興味がなく、Google Analyticsなど、誰にも忙しくない独立したスクリプトに適したものを待っていません。わからない場合は、Defer。 Q2：壊れますか？ウェブサイトは壊れますか？ A：チャンスがあります！特に、 DeferまたはAsync 、および一緒に動作しなければならないスクリプト（スクリプトaがスクリプトbの前に実行する必要があるなど）を使用すると、いくつかのWeb関数が歪んでいる可能性があります。 Webサイト開発の専門家向けの自信や複雑なコードの場合、 の世話をする方が良いです。なぜ一部のファイルを修正できないのですか？特に外からのスクリプト？ A：正しい。 Facebook Pixel、Google Tag Manager、Live Chatなどのサードパーティのスクリプトは、彼のOriginファイルを編集することはできません。最良の方法は、そのスクリプトを使用する必要があるかどうかを検討するか、最も影響力のないものをダウンロードすることです。

Q4 A：必要ではありません。本当の目標は100番ではありませんが、「ユーザーはWebサイトが速いと感じている」とコアWebバイタルが「良い」基準（グリーン）にあることです。 100のスコアの追跡は、不必要にいくつかの機能と交換する必要がある場合があります。ユーザーを改善して最高の体験を得ることに集中することで十分です。 SEOは、Googleの最初のページに添付されています。速度だけではありません

イラストのプロンプト：Defer、Async、Broken Code、100ポイントを表す小さなアイコンに囲まれた大きな疑問符のアイコン。

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

心臓の要約再び。 「レンダリングブロッキングリソース」の問題は、方法で不必要なCSSCIPTファイルがブラウザがWebページをゆっくりと表示できるようにすることです。ユーザーエクスペリエンス、SEOランキング、および販売の両方に影響を与える最終的には、 Deferをであり、ユーザーができるだけ早くWebの最初の部分を見るための「インラインクリティカルCSS」手法を使用します。

ウェブサイトの速度の改善は、技術的な問題だけでなく、ユーザーの貴重な時間に「敬意を示す」ことです。あなたがウェブをより速くするとき、あなたは良い第一印象を作ります。ドアを開けて、顧客を歓迎して、ビジネスに簡単に参入します。

今！待ってはいけません。 Google PagesSpeed InsightsでテストするためにURLを使用して、1つのステップを推奨する手順を修正し始めてください。今日のちょっとした調整が明日あなたのビジネスの結果が信じられないほど変化するかもしれないと確信していません！

複雑すぎると感じたり、専門家にウェブサイトを「診断と手術」に支援してもらいたい場合は、すぐに戻ってきて、再びスピードを上げてください。 Vision X Brain Teamを無料で相談してください！私たちはあなたのためにお金のツールになるのが遅いウェブサイトを変更する準備ができています。

イラストのプロンプト：強力なグラフィックスロケッツがコンピューター画面から急上昇しており、緑色のページスピードスコアが「今すぐ速度を上げてください！」

‍