Как ускорить загрузку «тяжелых сайтов»?

Question

[rodya]

Здравствуйте,

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

Имеется страница с большим количеством графики, то есть суммарно страница весит порядка 7Мб.
Графика не может грузится отдельно, то есть сайт выглядит так как надо, когда полностью загружена вся графика. Дизайн "этажный", логически делится на этажи.

Есть 2 варианта:
1. Грузить всю страницу целиком с программным прогессбаром, посетитель наблюдает за бегущей полоской загрузки и процентажем.
2. Грузить страницу с помощью ajax этаж за этажом, посетитель сразу видит шапку сайта, навигацию и дожидается загрузки остальных этажей.

Comments

[Виталий Желтяков]

Графика меняется или статичная?

[rodya]

@Radiocity Drupal 6

[rodya]

@VitaZheltyakov что вы имеете ввиду?

Я тут ниже описывал более подробно о странице:
Сайт "этажный", и к тому же тянется на всю допустимую ширину.
У меня 7 этажей. Каждый этаж, высотой чуть меньше экрана, шириной во весь экран. Из них 2 этажа это слайдеры, то есть в них еще по 3-4 таких же больших фотографий. (да, такой вот дизайн)
При максимально допустимом сжатии jpg без ощутимой потери в качестве, изображения весят от 300 до 600кб. Таким образом и набирается 7Мб графики, это примерная цифра и суть несколько не в ней.
Изображения встраиваются через тег img, потому никаких спрайтов с этими изображениями быть не может, все что можно было запихнуть в спрайты. я запихнул, и лишних запросов у меня практически нет.

Answer 1

[Юрий Ярош]

.

Comments

[rodya]

Хах) но джпг всеже абсолютно оправдан для фотографий

[Юрий Ярош]

Фотографии принято пережимать в превьюшки если они весят более 150-200Кб

[rodya]

Только если их не надо растянуть на весь экран, иначе диагноз выше)

Answer 2

[Юрий Ярош]

Не перегружайте страницы масштабированной графикой с большими расширениями.
Вам нужно использовать GZIP, спрайты, и всё что только можно переводить в CSS3.
Часть графики можно реализовать в виде SVG, иконки перепаковать в SVG спрайт или в иконочные шрифты. Использовать media-queries для подгрузки графики под нужные расширения.
Либо загружать вручную JS'ом по требованию.

Comments

[rodya]

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

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

[Юрий Ярош]

Собственно если эти методы используются - у вас должно быть максимум 3-5 запросов на загрузку графики. Я не представляю что у вас там за сайт такой на 7 Мб графики.

Я понимаю что у вас есть два варианта решения вопроса: ваш и сложный. Цель данного вопроса не в получении оптимального решения, а в получении решения которое вам доступно... стоит начать со сложного и не спрашивать "какой костыль лучше: этот, или вот этот".

[rodya]

Если вы не представляете, что такой сайт может быть, это же не значит, что это невозможно, верно? :-)

Как я говорил сайт "этажный", и к тому же резиновый на всю допустимую ширину.
У меня 7 этажей. Каждый этаж, высотой чуть меньше экрана, шириной во весь экран. Из них 2 этажа это слайдеры, то есть в них еще по 3-4 таких же больших фотографий. (да, такой вот дизайн)
При максимально допустимом сжатии jpg без ощутимой потери в качестве, изображения весят от 300 до 600кб. Таким образом и набирается 7Мб графики, это примерная цифра и суть несколько не в ней.
Изображения встраиваются через тег img, потому никаких спрайтов с этими изображениями быть не может, все что можно было запихнуть в спрайты. я запихнул, и лишних запросов у меня практически нет.

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

Так что вы видимо не так поняли.

[Юрий Ярош]

Да, это просто значит что тут полно дилетантов.

[Юрий Ярош]

Глянул ваш сайтик...
"Да, это все используется в той или иной степени. "
Что конкретно ?

1. У вас нет GZIP
2. Таки в вашем случае нужно пережимать и кэшировать изображения под конкретное расширение...
3. изображение"приемущество" можно пережать выдрав подложку и заливать ею body.
4. Все изображения на сайте должны быть в спрайте
5. Можно поиграться с размытием