0

今日、Google Speed https://developers.google.com/speed/docs/insights/でページを最適化しようとしました

そして、それは言う、ここに

サイトでナビゲーション サイドバーと記事を含む 2 列のデザインを使用しているが、HTML が記事の前にサイドバーを読み込む場合は、最初に記事を読み込むことを検討してください。

今日まで、特定の div 要素をロードできるとは思っていませんでした。ドキュメントにはチュートリアルも表示されないため、これがどのように行われるか混乱しています。Javascript/CSSで行う場合

どんな助けでも大歓迎です。

4

1 に答える 1

2

コンテンツを個別にロードする方法はありますが、ページの速度を最適化するには、ページからのリクエストの順序だけだと思います。JavaScript のトリックは別として、HTML ページはコンテンツとリソースを上から下にリストされた順序でロードします。多くの場合、HTML は視覚的な流れに一致する傾向がありますが、これは必須ではありません。最初にページ コンテンツを読み込むことでユーザー エクスペリエンスが向上する場合は、ページ コンテンツを HTML ページまたはテンプレートの上位に移動できます。次に、CSS を使用して、ページ上の期待される場所にコンテンツを視覚的に配置します。

または、JavaScript を使用してコンテンツまたはデータをロードし、ページの要素 (特定の div など) 内に挿入することもできます。HTML はこの方法で解析できますが、従来のサポートはこれには適していません。iFrame は機能しますが、すべてが表示されます。最善の策は、HTML ドキュメント内のコンテンツをロードする順序で並べ (CSS を一番上に配置して、レンダリングする必要がある場所に関する指示をブラウザーに表示する)、表示する必要がある場所に CSS を使用して配置することです。

<style>
#navigation{
position:absolute;
top:0px;
height:200px;
}
#content{
position:absolute;
top:200px;
}
</style>

<div id=content>
Stuff I want to load first...
</div>
<div id=navigation>
Navigation to load later...
</div>

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages https://developer.mozilla.org/en-US/docs/HTML_in_XMLHttpRequest

于 2013-11-26T14:56:44.983 に答える