Ссылки Поиск Написать В избранное NO

Блоггер / Блог 2019 год

RSS лента новостей, Подписка по Email

Что делать, если сайт «прыгает» при загрузке?

Начну с того, что это нормально. Раньше браузеры четко выполняли спецификацию и некоторые элементы не показывали до полной загрузки. Например, таблицы. Потом ради «показной» быстроты загрузки браузеры стали грузить и показывать страницу одновременно.

Так почему страница может дергаться при загрузке?

1) Загрузилась таблица
Вариант подойдет только для довольно старых сайтов. Сейчас в верстке таблицы стараются не использовать. Но есть вариант, что таблица есть где-то на странице и «растягивает» контент при загрузке. Правится адаптивной версткой таблиц, переносами или прокруткой.

2) Загрузилось изображение
В принципе, все как и с таблицей. Задержка в загружке в долю секунды может немного дергать сайт. Достаточно указать ширину и высоту.

3) Файл стилей в футере страницы
Да, этого требует Гугл для ускорения загрузки. Но при этом сайт без стилей будет выглядеть ужасно. Чтобы исправить, нужно часть CSS перенести в хедер страницы. Можно даже вставить туда все стили целиком.
По идее, существуют сервисы вроде Critical Path CSS Generator, которые позволяют не делать это вручную.

4) Страница прыгает из-за... полосы прокрутки!
Странно, да? Загружается хедер, полосы нет. Но как дело доходит до контента, она появляется. И в браузере Хром, например, это смещает весь контент примерно на 21 пиксель влево. В принципе, это не очень заметно, но иногда - бесит. И это можно исправить!
Если принудительно показывать правую полосу прокрутки всегда стилями body {overflow-y: scroll;} ничего прыгать не будет.

5) Срабатывание скриптов
Большинство скриптов Жиквери привязано к полной загрузке страницы - через $(document).ready(function(){ и иногда это происходит слишком поздно. По идее, обычно скрипт можно просто вставить в нужную часть страницы - после всех нужных для него элементов и блоков. И не ждать 100% загрузку.