Приоритизация содержимого и загрузка определенного элемента перед другим

Question

Сегодня я пытался оптимизировать свои страницы с помощью Google Speed https://developers.google.com/speed/docs/insights/

И это говорит, здесь

Если ваш сайт использует двухстолбцовый дизайн с боковой панелью навигации и статьей, но ваш HTML загружает боковую панель перед статьей, сначала загрузите статью.

До сегодняшнего дня я не думал, что загрузка определенного элемента div когда-либо возможна. Документация также не содержит учебников, поэтому я не совсем понимаю, как это сделать. Если это сделано с помощью Javascript/CSS

Любая помощь приветствуется.

Answer 1

Существуют способы загрузки контента по отдельности, но для оптимизации скорости страницы я думаю, что вам нужно только порядок запросов со страницы. Помимо хитростей JavaScript, HTML-страница загружает контент и ресурсы в порядке сверху вниз. Часто HTML имеет тенденцию соответствовать визуальному потоку, но это не обязательно. Если пользовательский интерфейс улучшается при первой загрузке содержимого страницы, содержимое страницы можно переместить выше на странице HTML или в шаблоне. Затем CSS используется для визуального позиционирования контента на странице, где он ожидается.

В качестве альтернативы, контент или данные могут быть загружены с помощью JavaScript и вставлены в элемент страницы (например, определенный div). HTML может быть проанализирован с помощью этого метода, но устаревшая поддержка не подходит для этого. iFrames работают, но они показывают все. Лучше всего упорядочить содержимое в документе 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