4

現在、Web サイトのパフォーマンスを改善するためのヒントや推奨事項をいくつか調査しています。それで、私は Steve Souders の優れた本 (ハイ パフォーマンス Web サイトとさらに高速な Web サイト) から始めましたが、提示されているルールのいくつかに関していくつか質問があります。たとえば、High performance web sites の第 5 章では、CSS スタイルシートをページの上部に配置する必要があると述べています。CSS スタイルシートをページの下部に配置すると、ブラウザーによって実行されるプログレッシブ レンダリングが停止するからです。Steve によると、いくつかのブラウザー (特に IE) は、それでスタックし、項目を段階的に表示する代わりに空白のページを表示します。そのテスト ページの URL は次のとおりです: http://stevesouders.com/hpws/css-bottom.php

さて、これは 2 年ほど前の本の話であり、ブラウザー (IE を含む) が更新され、改善されていることは理解しています。私がこれを尋ねている理由は、現在のバージョンの FF、Chrome、または IE で彼が言及した動作を再現できないためです。

問題は、Yahoo ( http://developer.yahoo.com/performance/rules.html#css_top ) と google ( https://developers.google.com/speed/docs/best-practices/rendering#PutCSSInHead ) です。 ) それでも言います。

それで、私が知りたいのは、ブラウザがこの分野で進化しており、これがIE 8などでのみ問題になるかどうかです。そうだとすれば、なぜ yahoo と google は推奨事項を更新しなかったのでしょうか? （ちなみに、IE11内からIE7をシミュレートしようとしましたが、本に記載されている期待される結果はまだ表示されていません...）

* UDPATE*最後にもう 1 つ: 私は、Steve の cgi スクリプトを asp.net で再現することに決め、sleep.cgi スクリプトと同じことを行う単純な汎用ハンドラーを作成しました。ここで私が見ているのは、ヘッド内にスタイルシート参照 (ロードに時間がかかる - 私は 10 秒かかりました) を配置すると、本で報告されている空白ページの問題が発生することです。最後に置くと、ブラウザーはすべてをレンダリングし、スタイルが読み込まれた後にスタイルを適用するための 2 番目のパスを作成します。私の意見では、ヘッダー要素にスタイルを配置すると、ブラウザはレンダリング前にスタイルを取得するまで待機するため、これは理にかなっています (参照されている他のコンポーネントはバックグラウンドでダウンロードされていますが、ダウンロードされていないことに注意してください)。画面に表示されます）。一方で、それらが一番​​下にある場合、ブラウザはスタイルシートでスタックするまで現在のスタイルを適用します。その場合、スタイルシートまで読み込まれた html のみが表示されます (その下に画像がある場合、ブラウザはそれらをダウンロードしますが、スタイルが読み込まれた後にのみレンダリングします)。

したがって、これらのテストの後、1.) ここに何かが欠けているか、2.) yahoo と google の推奨事項は今日では無効になっていると考え始めています。

考え？

みんなありがとう！

4

1 に答える 1

2

フッターにタグを挿入するだけ<link>では、スタイルシートを延期することはできません。現在受け入れられている方法は、javascript を使用して添付することです。

<script>
function loadStyleSheet(e){if(document.createStyleSheet)try{document.createStyleSheet(e)}catch(t){}else{var l;l=document.createElement("link"),l.rel="stylesheet",l.type="text/css",l.media="all",l.href=e,document.getElementsByTagName("head")[0].appendChild(l)}}loadStyleSheet("/your/stylesheet.css");
</script>

ページの速度を最適化するには、スクロールせずに見える範囲の CSS を特定し、その部分をヘッダーにインライン化し、後で上記の方法を使用してメインのスタイルシートを読み込む必要があります。

「スクロールせずに見える CSS」を検索して、Google Pagespeed Insights をチェックすることをお勧めします。

https://developers.google.com/speed/pagespeed/insights/

于 2014-10-14T16:46:54.300 に答える