Плавная загрузка без скачков и грациозная деградация — две стороны одной медали. Медали технологу за качественную, а не халтурную вёрстку.

Научите сайт загружаться слоями: сначала разметка и стили, потом картинки и скрипты. В процессе загрузки ничего не должно прыгать. Сайт будет прилично выглядеть, даже если какие-то его части не загрузятся.

Для начала перенесите ваш сайт на сервер в интернете. Так вы сразу окажетесь в реальных условиях.

Отключите в браузере картинки и проверьте, что все элементы присутствуют на местах, а тексты читаются. Фоновые картинки должны быть продублированы цветными подложками с нужными отступами.

Нет фона у строки поиска, подсказка повисла в воздухе

Случайный отступ из-за не указанных заранее размеров портрета автора

Полностью пропала кнопка «Найти»

Нижняя часть плашки с тенью и закруглениями сделана картинкой на белом фоне. Из-за этого текст остался без полей

Правая плашка противно слилась с фоном страницы

Из-за фона кнопки и рамки у текстобласти тексты повисли в воздухе

• Картинки не загрузились
• Загрузились

Если иллюстрация нужна для информации, а не декорации, загрузите её уменьшенную версию и растяните на фоне контейнера:

Проставьте картинкам ширину и высоту. Это предотвратит беспорядочные скачки содержания страницы — «эффект Упячки»:

С указанной шириной и высотой картинок страница не прыгает:

Проставьте всем банерам, дивам и колонкам таблиц ширину и, если нужно, высоту. Отключите кэш, по возможности замедллите скорость загрузки страницы. После этого перезагрузите её и убедитесь, что при загрузке никакие блоки никуда не прыгают, как здесь:

Если используете нестандартные шрифты, то загружайте их через data/url, если это разрешено лицензией. Шрифты загружаемые из файлов, могут привести к такому эффекту:

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

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

На Вебораме я допустил ошибку. Кнопка «Следующая песня» в верхнем плеере нажимается, но не ничего не делает две секунды после нажатия. Создаётся ощущение, что она не работает:

А теперь продвинутый уровень. При загрузке больших изображений может пригодиться прелоадер и эффект плавного проявления. Обратите внимание, как загружаются промостраницы на сайте Эпла. Уделяется внимание даже появлению отдельных элементов.

Ультраотполированная загрузка (если смотреть в Сафари) — на сайте Айклауда.

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