Что делать, если сайт «прыгает» при загрузке?
Начну с того, что это нормально. Раньше браузеры четко выполняли спецификацию и некоторые элементы не показывали до полной загрузки. Например, таблицы. Потом ради «показной» быстроты загрузки браузеры стали грузить и показывать страницу одновременно.
Так почему страница может дергаться при загрузке?
1) Загрузилась таблица
Вариант подойдет только для довольно старых сайтов. Сейчас в верстке таблицы стараются не использовать. Но есть вариант, что таблица есть где-то на странице и «растягивает» контент при загрузке. Правится адаптивной версткой таблиц, переносами или прокруткой.
2) Загрузилось изображение
В принципе, все как и с таблицей. Задержка в загружке в долю секунды может немного дергать сайт. Достаточно указать ширину и высоту.
3) Файл стилей в футере страницы
Да, этого требует Гугл для ускорения загрузки. Но при этом сайт без стилей будет выглядеть ужасно. Чтобы исправить, нужно часть CSS перенести в хедер страницы. Можно даже вставить туда все стили целиком.
По идее, существуют сервисы вроде Critical Path CSS Generator, которые позволяют не делать это вручную.
4) Страница прыгает из-за... полосы прокрутки!
Странно, да? Загружается хедер, полосы нет. Но как дело доходит до контента, она появляется. И в браузере Хром, например, это смещает весь контент примерно на 21 пиксель влево. В принципе, это не очень заметно, но иногда - бесит. И это можно исправить!
Если принудительно показывать правую полосу прокрутки всегда стилями body {overflow-y: scroll;} ничего прыгать не будет.
5) Срабатывание скриптов
Большинство скриптов Жиквери привязано к полной загрузке страницы - через $(document).
