レンダリングブロックリソースを排除する方法| WPバフ

公開: 2021-12-10

Webサイトの読み込み速度に関する苦情を聞いた場合、またはWebページの読み込みを高速化してユーザーエクスペリエンスを向上させたい場合は、レンダリングをブロックするリソースを排除する方法を検討することをお勧めします。

理由に関係なく、訪問者の顔の前にWebサイトが表示される速度は、ユーザーエクスペリエンスに影響を与え、ビジネスがクライアント接続を逃す原因となる可能性があります。ユーザーのWebサイトのエクスペリエンスは、主に重要なレンダリング経路と、レンダリングプロセス中にWebサイトがロードするスクリプトの管理に依存します。

レンダリングとは何ですか？

すべてのWebサイトは、ユーザーがそのコンテンツを表示して操作するための経路をたどります。 Webサイトをロードする経路は、クリティカルレンダリング経路と呼ばれます。この経路では、訪問者とそのブラウザのデータを収集および構築するための各サイトの手順について説明します。

レンダリング前にブラウザが行うこと

Firefoxデスクトップブラウザの画像 — FireFoxデスクトップブラウザ

WebサイトのURLを入力すると、次のプロセスがトリガーされます。

ユーザーが特定のURLを要求すると、ナビゲーションが完了します。
1. サーバーがIPアドレスを提供するDNSルックアップが発生します
2. ブラウザとWebサイトサーバーはTCPハンドシェイクを実行して接続を確立します
3. 安全な接続要求は、TLSネゴシエーションまたは2番目のハンドシェイク交換を取得します
ブラウザは応答を受け取り、Webサイトのコードを取得します
1. データの最初のパケットは、ネットワークトラフィックを調整するためにTCPスロースタートで受信されます
2. ユーザーは確認応答（ACK）をサーバーに送信して、接続制限と送信速度を確立します。
ブラウザは情報を解析し、データをCSSオブジェクトモデル（CSSOM）とドキュメントオブジェクトモデル（DOM）に変換します。
1. DOMツリーが構築されます（サイトとページの構造）
2. プリロードスキャナーは、スクリプトや画像などの外部リソースを収集します。
3. CSSOMが構築されます（スタイルツリー）
4. CSSOMのビルド中にJavaScriptがコンパイルされます
5. アクセシビリティオブジェクトモデル（AOM）は、コンテンツを解釈するための支援デバイス用に構築されています。
レンダリングは、以前に作成されたCSSOMおよびDOMツリーを使用して行われます。

ページをレンダリングするとどうなりますか？

Webサイトは、レイアウト、スタイル、ペイント、場合によってはWebサイトでの合成を完了するために、コードデザインによってレンダリングされます。 CSSオブジェクトモデル（CSSOM）とドキュメントオブジェクトモデル（DOM）

スタイル

DOMとCSSOMが組み合わされてレンダリングツリーになり、構築が開始されます。レンダリングツリーは、サイトと各一意のノードの表示ノード、コンテンツ、および計算されたスタイルを整理します。

レイアウト

レイアウトは、アーキテクチャと構築が出会うステップであり、レンダリングツリー内のすべてのノードの幅、高さ、および位置を表示するための構造がページに作成されます。すべてのオブジェクトのサイズと位置が決定されます。

ウェブサイトはボックス構造でレイアウトされます。これらのボックスは、無制限の数の異なるビューポートサイズに調整できます。ボックス構造がサイジングのために変更される場合、これはリフローと呼ばれます。

ペイント：ファーストペイントとファーストコンテンツフルペイント（FCP）

Webサイトのブラウザがページのレンダリングを実行する瞬間は、「ファーストペイント」と呼ばれます。 First Paintは、ページのコードによってのみ、無地の背景色になる可能性があります。

First Contentful Paint（FCP）は、Webサイトの訪問者がページのコンテンツ（テキスト、画像、ビデオなど）を表示できる測定可能な瞬間を指します。 FCPは、ページの読み込みの開始からコンテンツがレンダリングされるまでの時間を測定します。

First PaintとFCPは、高速読み込みページや高速パフォーマンスと同じではありませんが、サイトの訪問者が高速読み込みページを認識すると、ユーザーエクスペリエンスはかなりポジティブになります。 First Paints、ロード時間、およびサイトパフォーマンスを微調整すると、ユーザーのロード時間の認識が向上します。

GTmetrixのWPバフスピードパフォーマンスレポートの画像 — GTmetrixのWPバフスピードパフォーマンスレポート

合成

Webページは、オブジェクトが重なるレイヤーを使用して構造を整理します。合成は、ページが物事の順序を計算して正しくレンダリングする場所です。

リフローではオブジェクトの位置が変わることが多いため、リフローはリコンポジットをトリガーします。

レンダリングブロックリソースとは

ブラウザがWebサイトのコンテンツをレンダリングするのを遅くしたり、遅らせたり、ブロックしたりするスクリプト、スタイルシート、およびHTMLインポートは、レンダリングをブロックするリソースです。人々がレンダリングブロックリソースを参照するとき、彼らは通常以下を参照しています：

CSS
<head>セクションのJavaScript
サーバーまたはコンテンツ配信ネットワークからロードされたフォント
HTMLインポート（レガシーページ）

レンダリングをブロックせず、上部近くにロードすることが重要なCSSとJavaScriptがたくさんあります。スタイルシートに優先順位を付けて、サイト訪問者がスタイルなしのコンテンツや何も表示されないのではなく、目的のコンテンツが表示されるようにします。

レンダリングをブロックするJavaScriptとCSSとは何ですか？

レンダリングプロセス中に、ブラウザは最初にすべてのスクリプトを含む<head>の情報を実行することにより、Webサイト情報をロードします。ページがブラウザに表示される前に、すべてのスクリプトを順番に実行し、完全に処理する必要があります。

スクリプトはキューに組み込まれるため、開発中は<head>でのスクリプトの順序が不可欠です。コードによっては、ウェブサイトの読み込みが遅くなったり、完全に読み込まれなくなったりする場合があります。これらは、レンダリングをブロックするCSSおよびJavaScriptと呼ばれます。

WordPress Webサイトのスクリプトは、さまざまな機能のために追加されたテーマ、カスタム作業、またはプラグインからのものである可能性があります。

画像はレンダリングブロックリソースですか？

画像がレンダリングをブロックするリソースであるかどうか疑問に思っている場合は、そうではありません。画像のサイズによってページの読み込みの問題が発生する可能性はありますが、レンダリングが妨げられることはありません。

なぜレンダリングブロックリソースを排除するのですか？

レンダリングをブロックするリソースを排除する例を示すGTMetrixのWPバフウォーターフォールレポートの画像 — WPバフウォーターフォールレポート

レンダリングブロックスクリプトは、ページの読み込み時間を遅くし、訪問者のWebサイトエクスペリエンスを台無しにする可能性があります。あなたのウェブサイトの経験が悪い場合、遅いウェブサイトの認識は訪問者の損失につながる可能性があります。訪問者の定着率が低いと、検索エンジンの結果に影響を与え、結果リストを下げる可能性があります。

検索エンジン最適化（SEO）ランキングが低いということは、訪問者が減り、潜在的なビジネスが失われることを意味します。ランキングを失うと訪問者数が減り、サイトが貧弱な場合は訪問者の定着率が低下します。レンダリングブロッキングリソースは大きな問題になる可能性があります。

ウェブサイトに高いGooglePageSpeedスコアの目標がある場合、レンダリングをブロックするリソースを理解することがその目標を達成するための鍵となります。

レンダリングをブロックするリソースを排除する方法

サイトのSEOランキングとユーザーエクスペリエンスに真剣に取り組むことは、サイトでレンダリングをブロックするリソースを処理または削除する必要があることを意味します。サイトを最初から構築していない場合は、レンダリングをブロックするリソースについてWebサイトのテストを開始してください。

これらのレンダリングブロックリソースを特定したら、問題に対処してサイトの機能を向上させる方法を選択します。

Webサイトにレンダリングブロックリソースがあるかどうかをテストします

Google PageSpeed Insightsレポートの画像は、レンダリングをブロックするリソースをテストしています。 — WPバフのためのGooglePageSpeedレポート

ウェブサイトで評価を実行して、レンダリングをブロックするリソースを見つけることは決して害にはなりません（Google PageSpeed Insightsを試してください）。最大限に最適化した場合、ベストプラクティスに従っていて、まだ問題が発生している場合、またはどこから始めればよいかわからない場合は、ページ評価者が役立つガイドになります。

レンダリングを排除する方法-JavaScriptとCSSのブロック

WordPressを使用すると、サイトのレンダリングの邪魔になるリソースをいくつかの異なる方法で管理できます。 WordPressを使用すると、レンダリングをブロックするスクリプトとリンクを、コード、タグ、ファイルの整理と最適化、およびプラグインで整理できます。

プロの開発者は、これらのプロセスをコードに組み込むカスタムプラグインまたはテーマを作成することもできます。

コードでレンダリングをブロックするJavascriptを削除する

コードを介してレンダリングブロッキングリソースに対処する3つの方法は次のとおりです。

<script>と<link>のタグをHTMLコードの下部に移動します
重要でないスクリプトのタグに非同期または延期属性を追加します。
未使用のJavaScriptコードを削除します。

WordPressはjQueryMigrateファイルをロードして、プラグインやテーマで使用されている古いバージョンのjQueryとの互換性を提供します。コードの一部またはプラグインを使用して、サイトで機能する必要のあるものがない場合に、WordPressがこのjQueryMigrateファイルをロードしないようにすることができます。

レンダリングをブロックするスタイルシートを排除する

スタイルシートの性質上、スタイルシートは本質的にレンダリングをブロックするリソースになります。次の方法でサイトでこれに対処できます。

CSSをメディアタイプ（モバイル、タブレット、デスクトップなど）ごとに分割します
重要なレンダリングパスを最適化する
CSSファイルを組み合わせる

WordPressとビジュアルビルダーを使用すると、ページの直接作成方法を制御できない場合がありますが、問題を回避する方法はいくつかあります。

WordPressプラグインまたは拡張機能を使用したアドレスレンダリングのブロック

WordPressプラグインと拡張機能は、ページ上のスクリプトを整理するために使用されます。プラグインは、ページの<script>タグと<link>タグを調べ、特定のガイドラインに基づいてdeferまたはasync属性を適用します。

私たちはWordPressのさまざまなプラグインを調べてテストし、ブログで速度を最適化するためのお気に入りのプラグインなどの便利なものを共有し続けています。

WordPressプロフェッショナルにレンダリングブロックリソースを排除してもらいましょう

一部のプラグインはカスタマイズが必要であり、簡単に見えますが、正しく設定されていないと機能しなくなる可能性があります。 WordPressの専門家に助けを求めるのは恥ずべきことではなく、WPBuffsにはサイトを最適化できるスペシャリストが何人かいます。

レンダリングを最適化するためのベストプラクティス

レンダリングをブロックするリソースをバンドルして、ページの読み込みへの影響を減らします。
リソースのサイズを減らして、ロードするバイト数を減らします。
非レンダリングブロッキングリソースのダウンロードを延期します。
@importルールは外部ロードであるため、CSSを追加しないでください。
スクリプトをキャッシュし、JavaScriptとCSSを最適化するように設計されたWordPressプラグインを使用します。
カスタムフォントをローカルにロードします。
重要および非重要のCSSとJavaScriptを特定します。
重要でないレンダリングブロックコードを非同期または延期属性でマークします。
使用されていないコードは削除する必要があります。

頭痛の種を取り除き、WordPressの専門家に助けてもらいましょう

WPバフによるレンダリングブロッキングリソースを排除するための速度最適化サービスページの画像 — WPバフによるレンダリングブロッキングリソースを排除するための速度最適化サービス

WPバフは、WordPressサイトの最適化とページパフォーマンスの向上に熟練しています。パフォーマンスがビジネスにとって重要である理由と、最も重要な影響を与えるために焦点を当てるべき領域を理解しています。

Webサイトのパフォーマンスと訪問者のエクスペリエンスを改善することは、単なるレンダリングブロックリソース以上のものになる可能性があります。 WPバフはあなたのサイトとアドレスを見ることができます：

画像サイズ
画質と配信フォーマット
ページの長さと動的コンテンツの割合
不十分に構築されたテーマ
遅延の原因となる不要なスクリプト
構築が不十分なプラグイン
未使用の外部スクリプト
古いソフトウェア
サイトのニーズを十分にサポートできない限られたウェブホスティングプラン

WordPressは、Webサイトを構築するためのかなり簡単なプラットフォームですが、ユーザーエクスペリエンスを最大化するには、訓練を受けた専門家または多くの場合、優れたサービスプロバイダーが必要です。

よくある質問

「レンダリングをブロックするリソースを排除する」とは何ですか？

Webサイトは、スクリプトとリンクを使用してファイルとコードにアクセスし、ブラウザーでWebサイトを構築します。スクリプトとリンクの読み込みに時間がかかり、Webサイトの他の部分がサイト訪問者に表示されない場合があります。レンダリングをブロックするリソースを排除するということは、Webサイトの読み込みを遅くしたり停止させたりするスクリプト、リンク、フォント、およびファイルに対処することを意味します。

レンダリングブロックリソースを修正するにはどうすればよいですか？

レンダリングブロックリソースを修正するにはさまざまな方法があり、選択する武器は、対処する必要のあるものによって異なります。ページを読み込むために重要なスクリプトとリンクを特定し、必要になるまで他のスクリプトとリンクを延期します。コードの優先順位付けは、コードまたはプラグインを使用して実行できます。

Webサイトのレンダリングブロックリソースを削除するにはどうすればよいですか？

WordPressを使用している場合、最も簡単な方法は、重要なものとレンダリングプロセスの後半で延期できるものを評価することにより、スクリプトと外部負荷を管理する高品質のプラグインを使用することです。コードを手動で評価し、手動で編成するために各スクリプトにタグを割り当てる代わりに（これは引き続き可能であり、推奨されます）、プラグインはこれを自動的に処理します。

プラグインなしでレンダリングブロックリソースをどのように修正/排除しますか？

Webサイトに別のプラグインを追加する予定がない場合、またはプラグインを選択できない場合は、レンダリングをブロックするリソースを修正する他の方法があります。コード内のスクリプトとリンクを手動で最適化して、効率的な順序でロードされるようにするか、必要な機能が完了するまでそのスクリプトのロードを延期することができます。