Что такое Above-the-fold?

Игорь Грегорченко

02.01.2021 21:33

Above the fold — это верхняя половина видимой части сайта на первом экране. Т.е. первые полэкрана сайта. Pagespeed уделяет особое внимание оптимизации этого участка, т.к. это позволяет показать посетителю сайт максимально быстро.

С точки зрения оптимизации, важно, чтобы HTML код, который отвечает за Above the fold часть находился вверху файла:

<html>
<body>
<div id="above-the-fold">
    Верхняя часть сайта
</div>

<div id="below-the-fold">
    Остальное
</div>
</body>
</html>

Все, что находится в элементе с ID “above-the-fold” должно быть на верхней части экрана

Плохо, когда элементы, показываемые в верхней части, находятся снизу HTML кода:

<html>
<body>
<div id="above-the-fold">
    Верхняя часть сайта
</div>

<div id="below-the-fold">
    Остальное
</div>

<div id="above-the-fold-bad" style="position:fixed; top: 0; right: 0;">
    Наши контакты: Киев, Москва и Минск
</div>
</body>
</html>

Элемент с ID “above-the-fold-bad” нужно перенести в верхнюю часть HTML кода.

Этот текст был написан несколько лет назад. С тех пор упомянутые здесь инструменты и софт могли получить обновления. Пожалуйста, проверяйте их актуальность.