web-dev-qa-db-ja.com

Google Pagespeedは、ページのレンダリングに必要な「スクロールせずに見える範囲」のファイルを削除するよう要求します

私は自分のウェブサイトをGoogle Pagespeedで実行しましたが、それが戻ってきました

「スクロールせずに見えるコンテンツのレンダリングブロックJavaScriptとCSSを排除する」

問題は、これらの「レンダリングブロック」アセットがレンダリングに必要なことです。次のように：

  • Google Fonts CSS（Google CDN）
  • BootStrap CSS（MaxCDN）
  • サイトCSS（ローカル）

私は混乱しています。 css.cssファイル、bootstrapファイル、およびgoogleフォントなしでページをレンダリングするにはどうすればよいですか？

performancepage-speedrender
5
Bar Akiva

時間の無駄...ほとんどの場合...洞察力...必要ありません。

マトリックスおよびGoogleのPagespeed Insightsは必須ではなく、秘密のリスレベル9のGoogleランキングで報われることはありません。

Google、Bing、およびユーザーは、なぜページスコアマトリックスを気にしませんか？最終的には、ページの読み込み速度に要約され、それがユーザーと検索エンジンがサイトに与える報酬です。

ウェブサイトの速度の最大の影響は、適切なホスティングです...

優れたホスティングは、根本的な問題がないと仮定してページ速度に最大の影響を及ぼします...レンダリングのブロック、有効期限など、よく報告されるものは根本的な問題ではなく、ほとんどはページ速度を許容できないレベルに下げません。

実際、世界のトップ100のサイトを見ると、それらは高速ですが、pageSpeedの洞察では非常に低いスコアです。

本当の意味でテストツールを使用してください...

適切なテストツールを使用し、 WebPagetest ターゲットリージョンの複数のサーバーで複数のパスを使用することをお勧めします。 2秒未満、理想的には1.5秒未満、1秒未満が非常に良いことを目指してください。

レンダーブロッキングとは？

レンダリングブロッキングは、実際のコンテンツの前にリソースが呼び出される場所です。リソースがダウンロードされるのを待つと、ページのテストが遅くなります。これは、リソースを「スクロールせずに」ロードし、 （コンテンツの後）。

この問題を回避するには、フォントを非同期に読み込む必要があります。つまり、<head> </head>内にないことを意味します。解決策については、次の章を参照してください。

Google Fonts Render Blockingの解決

Googleインサイトまたはその他のMatrixベースのWebサイト内で100/100に最も近いものを取得したい場合は、 Webfont Loader を使用して、Googleフォントのレンダリングブロックの問題を克服できます。

これは次のようになります。

<script type="text/javascript">
  WebFontConfig = {
    google: { families: [ 'Noto+Serif:400,400italic,700,700italic' ] }
  };
  (function() {
    var wf = document.createElement('script');
    wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
  })(); </script>

他のCSSファイル

内部または外部のいずれかでロードされるCSSまたはJSファイルなどの他のリソースがある場合、ページの下部にロードする必要があります。これには必須のJavaScriptは含まれません（例： modernizr またはmainサイトへのベースCSS（style.cssなど）ほとんどのベンダーは、スクロールせずにJavaScriptを介してCSSをロードするための何らかのAPIを提供します。

悲しいことに、すべてのCSSベンダーがAPIを持っているわけでも、エレガントなソリューションを提供しているわけでもないので、通常、ページの下部にCSSリソースをロードする独自のJavaScriptを開発およびデプロイする必要があります。

JavaScriptを使用してページの下部にCSSファイルをロードする例

以下は、必要なCSSファイルをほとんど内部にロードするスクリプトです。内部または外部のどちらでも問題ありません。 </body>の前に配置します

<script type='text/javascript'>
//<![CDATA[ 
function loadCSS(e, t, n) { "use strict"; var i = window.document.createElement("link"); var o = t || window.document.getElementsByTagName("script")[0]; i.rel = "stylesheet"; i.href = e; i.media = "only x"; o.parentNode.insertBefore(i, o); setTimeout(function () { i.media = n || "all" }) }loadCSS("path/to/font-awesome/css/font-awesome.min.css");
//]]> 
</ Script>
4
Simon Hayter