GoogleのPageSpeedを修正する折り畳まれた部分のコンテンツでレンダリングをブロックするJavaScriptとCSSを削除する
レンダリングをブロックするJavaScriptとCSSを解決する
Google PageSpeed [1]のテストでは、「折り畳まれた部分のコンテンツでレンダリングを妨げるJavaScriptとCSSを排除する」とは、HTMLが完全に読み込まれた後にサイトのJSファイルとCSSファイルを配信することを提案します。それらをダウンロードする。
[1] -PageSpeed Insights –developers.google.comレンダリングブロックスクリプト定義:完全なHTMLDOMが解析される前にロードされるスクリプト。たとえば、ヘッダーまたはコンテンツ内に含まれるスクリプトで、HTMLペイントが完了するまでスクリプトの読み込みを遅らせるようにブラウザに特別な指示はありません。
スクロールせずに見える範囲のコンテンツでレンダリングをブロックするJavaScriptとCSSを排除する:修正方法を示す
- 外部システムにあなたのためにあなたのウェブサイトを最適化させてください
- レンダリングブロッキングリソースの排除を修正するために必要な次の3つの最適化を含め、すべての可能な最適化を実行するCDNを使用します。
- Javascriptファイルのロードを延期する
- HTMLのロード後にCSSをロードする
- WordPressプラグインを使用する
レンダリングをブロックするリソースを排除するために修正する必要のある最適化はたくさんあり、自分で実装するのは面倒かもしれません。さらに、他のページ速度テストの中でも、ChromeLightHouseとGooglePageSpeedに含まれる新しいテストを常に探す必要があります。
問題はDOM、つまりWebサイトのコンテンツ、およびJavascriptやCSSなどの含まれるリソースがロードされる順序に関連しているため、htaccessコードのレンダリングブロックリソースを排除する既存のソリューションはありませんが、それだけではありません。これらはHtaccessでトリガーできませんが、HTMLDOMコンテンツでのみトリガーできます。
デスクトップでこれらの問題を解決すると、両方がまったく同じであるため、同時にモバイルのレンダリングブロックリソースが排除されます。
Did you know that you can even have all these steps executed automatically for you by using an external サイトスピードアクセラレータ technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!
JavaScriptファイルの読み込みを延期する
JSファイルのロードを遅らせるためには、スクリプトリンクにasyncまたはdefer命令を追加することができます。 Asyncはそれらが同じシーケンス内にロードされていることを保証しません - したがって、複数のスクリプトを順番に実行する必要がある場合は、シーケンスを保証するために遅延が望ましい:
[2]-レンダリングブロックJavaScriptを削除する| PageSpeedインサイト|優れた開発者–developers.google.comHTMLの読み込み後にCSSを読み込む
完全なHTMLが送信された後にCSSを読み込むために、Googleはフッターの終了タグの後やボディの終了タグの前など、HTMLの最後にこのコードを追加することを提案しています:
[3] -CSS配信を最適化する| PageSpeedインサイト|優れた開発者–developers.google.comあなたのウェブサイトを最適化するために、未使用のCSSコードを削除することは、Webデザインで知識を持っていない場合には退屈な操作を削除することをお勧めします。 Webサイトのテーマを自分で作成していない場合は、Ezoic Leapなどのページ上のページ上の未使用のCSSコードを削除するために外部システムを使用することが賢明です。スピードアクセラレータ。
Googleサイトの速度テストに合格しました。
これは私がGoogle PageSpeed [1]テストを通過させることを可能にしました。折り畳まれたコンテンツのレンダリングJavaScriptとCSSを削除しました(Webブラウザでのレバレッジブラウザキャッシング[4])。図1)〜72(図2)、デスクトップ(図4)では59(図3)から79
[4] -htaccessでのGooglePageSpeedレバレッジブラウザキャッシュの修正-YoannBierling、国際SAP / Webコンサルタント-www.ybierling.comWordPressでレンダリングブロックリソースを排除する方法
WordPressのレンダリングブロックリソースを排除するには、JetPackなどのプラグインをインストールする必要があります。
次に、管理者になる必要があるオプションに移動し、JetPackのオプション>書き込み>パフォーマンスと速度>サイトアクセラレータを有効にする、イメージの読み込み時間を短縮する、静的ファイルの読み込み時間を短縮する、画像
これはWordPressのレンダリングブロッキングリソースを排除し、JetPackがあなたの画像を最適化し、あなたの画像と静的ファイル(CSSやJavaScriptのような)を彼らのグローバルなネットワークのネットワークから提供することを可能にします。
WordPressでレンダリングブロックのJavaScriptとCSSを排除する方法また、遅延ロード機能を使用して、画像をオフスクリーンで延期することを忘れないでください。困難で、画像のロード画像をオフスクリーンに延期するための外部ライブラリが必要である必要がありますが、HTML5ではネイティブに可能です。
Webサイトに遅延ロードを実装するには、Webサイトのイメージの属性のロードに値を遅らせるだけで、最近のブラウザは、これらのイメージが表示されている場合にのみ要求されロードされるべきであることを理解します。画像のプレースホルダ
<img src=”SRC” alt=”ALT” loading=”lazy”></img>
遅延ローディング - Web Performance - Mozilla Developer Networkその上には、遅延ロードもIFRAMESと連携し、Webページからレンダリングブロッキングリソースを排除するための重要な実装です。
レンダリングブロッキングリソースがメインコンテンツの後にロードする指示を持つようになると、HTML DOMはすでにGoogle Lighthouse Test、ページスピード洞察テスト、またはGoogle Core Web Vitalsのポイントを獲得できます。
外部システムにウェブサイトを最適化させる
無料トライアルへの登録とDNSの変更を除いて、サイトからの多大な労力なしに、実際にすべてのGoogle PageSpeedの問題を解決できることをご存知ですか?
EzoicプラットフォームのSite Speed Acceleratorテクノロジーを使用すると、通常のすべてのGoogle PageSpeedの問題がシステムによって解決されます。これは、Webサイトと訪問者の間の仲介者になります。彼らはあなたの訪問者にそれを表示する前にあなたのためにウェブページを最適化します。
Ezoicプラットフォームで無料トライアルに登録して自分で試してみてください。数日以内にWebサイトがページ速度の最適化の最高基準に達するようになります。次世代のWebP画像をレンダリングし、未使用のCSSを削除してCSSとJavaScriptを最適化しますJS、画像の遅延読み込み、画像のサイズ変更、サイトページのキャッシュ、フォントの最適化、含まれているすべてのサイトへの事前接続など。
クレジットカードは必要ありません。無料で登録して試してみるだけです。さらに、ウェブサイトがディスプレイ広告から収益を得ている場合は、ウェブサイトをはるかに高速化するだけでなく、機械学習と高度な人工知能を使用して広告を最適化することで、Google AdSenseの数倍の収益を上げることができます。
よくある質問
- 倍以上のコンテンツでレンダリングブロッキングJavaScriptとCSSを排除するにはどうすればよいですか?
- レンダリングブロッキングJavaScriptとCSSを倍以上のコンテンツに排除するには、HTMLが完全にロードされた後にサイトのJSファイルとCSSファイルがロードされるようにする必要があります。これは、これらのファイルをダウンロードするためにHTMLロードプロセスを一時停止しないことを意味します。 JavaScriptファイルをASYNCまたはDefer属性を延期することができます。CSSの場合、特定のコードを使用してHTML後にロードできます。 Ezoicのような外部最適化システムもこれを自動的に処理できます。
- Web開発者は、レンダリングブロッキングJavaScriptとCSSを排除するために、Google PageSpeedの推奨事項にどのように対処できますか?
- Web開発者は、JavaScriptおよびCSSファイルをjavaScriptの非同期負荷を使用して、重要なCSSをHTMLに直接導入し、非クリティカルなCSSおよびJavaScriptファイルの負荷を延期することにより、サイトを最適化できます。これらの戦略を実装すると、読み込み時間とページスピードスコアを大幅に改善できます。
完璧なクロム灯台スコア:どうなりますか?
Yoann BierlingはWeb Publishing&Digital Consulting Professionalであり、技術の専門知識と革新を通じて世界的な影響を与えています。彼は、個人や組織がデジタル時代に成功するように力を与えることに情熱を傾けており、教育コンテンツの作成を通じて、例外的な結果をもたらし、成長を促進するように駆り立てられています。