Наверняка ведь бывало такое, что сайт сам по себе красивый, но там недожали картинки, тут слишком много Javascript, там ещё какая-то беда, и сайт загружается медленно, при этом качество верстки страдает (до тех пор, пока не прогрузиться последняя строчка кода и последний бит картинок).

Есть достаточно нелепое решение. Возьмем картинку-скриншот полностью прогруженного сайта, сделаем размер по ширине приблизительно 1000 пикселей, и сохраним в формате PNG. Принципиально, чтобы картинка была именно скриншотом, с соответствующим наполнением. А дальше все просто. Облачаем всё содержимое страницы в какой-нибудь скрывающий тег, например:

Перед этим тегом ставим картинку-скриншот, с шириной 100%:


И все, естественно, что первым делом будет загружаться картинка, поэтому самое главное теперь сделать картинку-скриншот наименее тяжелой, но в остальном сработает следующее. В то время, как страница загружается, загружаються картинки, шрифты, файлы css и js, на экране у пользователя растянутый скриншот уже ранее загруженного сайта, но как только страница загрузилась полностью:

$(function(){
  $('img').hide();
  $('div:hidden').show();
});

И не очень четкая растянутая картинка-скриншот будет заменена на качественную верстку. Зачем это нужно? Не забывайте, что при высоких скоростях интернета в мегаполисах, в глубинке еще актуален даже ДиалАп, так что загрузка «тяжелых» страниц может занять до 30-60 секунд, а что в это время делать пользователю, естественно разглядывать страницу-картинку.