优先考虑内容并在另一个之前加载特定元素答案

【问题标题】：Prioritizing contents and loading specific element before the other优先考虑内容并在另一个之前加载特定元素
【发布时间】：2013-11-26 13:35:36
【问题描述】：

我今天尝试使用 Google Speed 优化我的网页 https://developers.google.com/speed/docs/insights/

它说，here

如果您的网站使用带有导航侧边栏和文章的两栏设计，但您的 HTML 在文章之前加载侧边栏，请考虑先加载文章。

直到今天，我认为加载特定的 div 元素是不可能的。该文档也没有显示任何教程，所以我很困惑这是如何完成的。如果它是用 Javascript/CSS 完成的

任何帮助将不胜感激。

【问题讨论】：

我认为这只是意味着您将这两个元素放入 HTML 文档的顺序 ...

标签： php html css apache web-optimization

【解决方案1】：

有单独加载内容的方法，但为了优化页面速度，我认为您所追求的只是页面请求的顺序。除了 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

【讨论】：

我仍然无法理解的是，Google 怎么知道在我自己设计的网站上首先显示什么是/不重要的？我是决定标题是否可见的人。所以，我猜谷歌只是在做假设。