GoogleのPageSpeedを修正する折り畳まれた部分のコンテンツでレンダリングをブロックするJavaScriptとCSSを削除する



レンダリングをブロックするJavaScriptとCSSを解決する

Google PageSpeed [1]のテストでは、「折り畳まれた部分のコンテンツでレンダリングを妨げるJavaScriptとCSSを排除する」とは、HTMLが完全に読み込まれた後にサイトのJSファイルとCSSファイルを配信することを提案します。それらをダウンロードする。

[1] -PageSpeed Insights –developers.google.com
レンダリングブロックスクリプト定義:完全なHTMLDOMが解析される前にロードされるスクリプト。たとえば、ヘッダーまたはコンテンツ内に含まれるスクリプトで、HTMLペイントが完了するまでスクリプトの読み込みを遅らせるようにブラウザに特別な指示はありません。

スクロールせずに見える範囲のコンテンツでレンダリングをブロックするJavaScriptとCSSを排除する:修正方法を示す

  1. 外部システムにあなたのためにあなたのウェブサイトを最適化させてください
  2. レンダリングブロッキングリソースの排除を修正するために必要な次の3つの最適化を含め、すべての可能な最適化を実行するCDNを使用します。
  3. Javascriptファイルのロードを延期する
  4. HTMLのロード後にCSSをロードする
  5. 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はそれらが同じシーケンス内にロードされていることを保証しません - したがって、複数のスクリプトを順番に実行する必要がある場合は、シーケンスを保証するために遅延が望ましい:

<script defer type="text/javascript" src="./js/mootools-more-1.4.0.1.js"></script>
[2]-レンダリングブロックJavaScriptを削除する| PageSpeedインサイト|優れた開発者–developers.google.com

HTMLの読み込み後にCSSを読み込む

完全なHTMLが送信された後にCSSを読み込むために、Googleはフッターの終了タグの後やボディの終了タグの前など、HTMLの最後にこのコードを追加することを提案しています:

</footer>
 <script>
 var cb = function() {
 var l = document.createElement('link'); l.rel = 'stylesheet';
 l.href = './style.css';
 var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
 };
 var raf = requestAnimationFrame || mozRequestAnimationFrame ||
 webkitRequestAnimationFrame || msRequestAnimationFrame;
 if (raf) raf(cb);
 else window.addEventListener('load', cb);
 </script>
</body>
[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.com

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

WordPressのレンダリングブロックリソースを排除するには、JetPackなどのプラグインをインストールする必要があります。

次に、管理者になる必要があるオプションに移動し、JetPackのオプション>書き込み>パフォーマンスと速度>サイトアクセラレータを有効にする、イメージの読み込み時間を短縮する、静的ファイルの読み込み時間を短縮する、画像

これはWordPressのレンダリングブロッキングリソースを排除し、JetPackがあなたの画像を最適化し、あなたの画像と静的ファイル(CSSやJavaScriptのような)を彼らのグローバルなネットワークのネットワークから提供することを可能にします。

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

また、遅延ロード機能を使用して、画像をオフスクリーンで延期することを忘れないでください。困難で、画像のロード画像をオフスクリーンに延期するための外部ライブラリが必要である必要がありますが、HTML5ではネイティブに可能です。

画像の遅延ロード:ウェブサイトの画像は、ユーザーがWebページをスクロールして表示される可能性がある場合にのみサーバーに要求されます。

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サイトと訪問者の間の仲介者になります。彼らはあなたの訪問者にそれを表示する前にあなたのためにウェブページを最適化します。

2021年4月に、Ezoic Payed Speed Acceleratorが無料のEzoic Leapになるでしょう、そして無料のウェブのヴォイトの緑色のスコアに到達するのに役立ちます!

Ezoicプラットフォームで無料トライアルに登録して自分で試してみてください。数日以内にWebサイトがページ速度の最適化の最高基準に達するようになります。次世代のWebP画像をレンダリングし、未使用のCSSを削除してCSSとJavaScriptを最適化しますJS、画像の遅延読み込み、画像のサイズ変更、サイトページのキャッシュ、フォントの最適化、含まれているすべてのサイトへの事前接続など。

クレジットカードは必要ありません。無料で登録して試してみるだけです。さらに、ウェブサイトがディスプレイ広告から収益を得ている場合は、ウェブサイトをはるかに高速化するだけでなく、機械学習と高度な人工知能を使用して広告を最適化することで、Google AdSenseの数倍の収益を上げることができます。

完璧なクロム灯台スコア:どうなりますか?





類似の記事

Windows 10上のDLNAサーバー:SmartShare TVへのメディアストリーミング

Windows 10上のDLNAサーバー:SmartShare TVへのメディアストリーミング

Windows 10でChromeブラウザーを使用すると、コンピューターのメディアにアクセスし、特定のソフトウェアを無料でダウンロードする必要なく、LG TVなどのSmartShare機能を使用してテレビでYouTubeをストリーミングできます。


コメント (8)

 2018-08-19  quranapk
あなたのコンテンツを読み続けるのが大好きです-それは私がCSSをブロックするレンダリングの修正を修正するのに役立ちました
 2018-09-23  Monica
これが私たちのやり方です。レンダリングをブロックするリソースを排除する方法を知っているのは素晴らしいことです。
素晴らしい、それはまさに私が探していたものです、今私はモバイル上のレンダリングブロックリソースを排除する準備ができています
 2018-11-03  utumikaji0
すばらしいです。今度はそれを試して、レンダリングをブロックするリソースを削除するように修正します。
ありがとうの方法がわかりませんが、それは純粋な天才です、ありがとう–WordPressでレンダリングブロッキングリソースを削除しました
 2019-04-21  Ludanulema
こんにちは、私はあなたの記事を見ました、そしてそれは私が問題を解決するのを助けましたPHPのレンダリングブロッキングリソースを排除します、ありがとう
 2019-06-12  animeg2Q
私は今それを試してみます、これを共有してくれてありがとうレンダリングブロッキングリソースの修正を排除します
 2019-07-02  Gasfackele
それは私にとってはうまくいきました、HTMLウェブサイトのレンダリングブロックリソースを排除するためにこれ以上探す必要はありません

コメントを残す