Оптимизируем загрузку веб-страницы

[@Victor_R]

Это что за домашняя страница весом в 320 Кб, которая стоит 8000 $ в месяц?
У него там трафик такой бешеный или требования какие специальные?

p.s. Спасибо за переводы, Ваши материалы интересно читать.

[@sunnybear]

спасибо. Думается мне, там бешеный трафик и распределенная система веб-серверов довольно сложная. Т.е. представьте, сколько бы стоила аренда на датацентрах гугла вашей странички? (именно аренда :)

[@Lucky]

Спасибо за перевод. Домашняя страница а $8000 в месяц, действительно, ставит в тупик. Средние расценки на CDN - $0.20 за гигабайт. Можно посчитать количество хитов в месяц... Трафик за месяц: 8000 / 0.20 = 40000 гигабайт. Хитов в месяц: 40_000_000_000 Кб / 320 Кб = 125_000_000 обращений в месяц ~ 4 миллиона запросов в сутки. Похоже, страничка активно продвигается на digg :)

[@alexbig]

мда... $8000 - долбануться можно. видимо, вообще пох на деньги. можно программеров собрать чтоб они ещё и оптимизировали код, за хостинг платить :-)
я хотел поделиться своим решением для сжатия JS (Apache, mod_deflate, mod_rewrite):

AddType text/javascript .js

<FilesMatch \\.js.gz$>
ForceType text/javascript
Header set Content-Encoding: gzip
</FilesMatch>

<FilesMatch .*\.js$>
RewriteEngine On
RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.*)\.js$ $1\.js.gz [L]

ForceType text/javascript
AddOutputFilterByType DEFLATE text/javascript
</FilesMatch>

смылс такой: я использую Prototype у себя и ещё несколько написанных библиотек, которые меняются (мной или выпуском) раз, скажем, в пол года. их я сразу сжимаю gzip'ом и когда в коде есть
<script type="text/javascript" src="/js/prototype.js"></script>
апач, сервирует уже сжатую версию - "/js/prototype.js.gz". другие файлы я меняю намного чаще и апач их сжимает налету. это всё лежит в DocumentRoot. можно тоже самое сделать и с CSS, у меня пока не было необходимости в этом.

[@denuka]

Действительно пользительное решение, только одно реально интересно: насколько mod_rewrite будет грузить процессор при реальной загрузке?

[@alexbig]

в реале, я бы разделил на саб-домены картинки, стили и скрипты. и поставил бы туда не апач, а полегче чего-нить. только для отдачи контента.

[@dolotov]

Статья хорошая, конструктивная, хоть и много очепяток.
Порадовали упоминание JSON (не каждый знает и ценит) и описание "CSS-спрайтов". Пропагандирую идею не использовать JavaScript там, где нет в этом крайней необходимости.

[@sunnybear]

спасибо, что-то поправил

[@Devgru]

да, про js это точно — я сам, к сожалению осознал это только недавно, поэтому на моём старом сайте без js навигация не отображается :-(
мне кажется делать надо как например у Лебедева в «бизнес-линче»: есть js — пожалуйста, пользуйтесь Ctrl+(Enter|стрелки|home); нет js — пофиг, обойдёмся и так, и вся инфа так и так до вас дойдёт

[@dolotov]

Это-то как раз очевидно, что без JS пользователь все-равно должен преспокойно пользоваться сайтом. Я же акцентирую внимание на случаях, когда люди анимируют картинку по наведению курсора, делают выпадающие менюшки и много других "забавностей" силами JS, когда это можно сделать через стили.

[@Devgru]

ну это да) кстати недавно видел сайт чела одного там всё меню было сделано одной картинкой, но состояло из нескольких ссылок каждое высотой (высота_картинки/кол-во_менюшек), и в каждой a картинка сдвигается на высоту одной менюшки. вот вам и уменьшение кол-ва файлов

[@dolotov]

Конечно же, не стоит доходить до абсурда.

[@antonlyapunov]

Это и называется unobtrusive (ненавязчивый) JavaScript.
Т.е. js должен давать только дополнительную функциональность, ни в коем случае не забирая контроль над основной.

[@Devgru]

кстати на alistapart.com есть пример спрайта-ролловера: сверху слева на главной кружочек с номером последней статьи (сейчас - 243)

[@dolotov]

Кстати, к вопросу об оптимизации html-кода. Прямо здесь у каждого комментария под ссылкой "(ответить)" скрыто полкилобайта html кода с формочкой и т.д., тогда как достаточно было 1 раз его упомянуть и написать 1 JavaScript-скрипт, который подставлял бы по данным ссылки эту формочку в нужное место с нужным параметром сообщения. Экономия для больших страниц почти в 2 раза!

[@silverwind]

Хм.. и действительно :)

[@def]

Материал поверхостный. От себя добавлю, да, на загруженных процессорах gzip/deflate использовать нельзя, легче отдавать больше трафика(если есть деньги). И еще, посмотрите на современные движки форумов, они меньше 100K на главной странице уже редко встречаются. Причем картинки там могут занимать меньше, чем js и сам html.

[@AirWorker]

В стремлении оптимизировать все на свете авторы явно перегибают палку. Это все хаки, причем довольно грязные. Как-то э... неиндустриально, что-ли...

В общем статья могла бы называться "Чем занять девелоперов, осваивая бюджет"

За перевод респект.

[@consolamentor]

Поясните, пожалуйста, в чем их «грязность». Ну так, в двух словах…

[@leg_letniy]

Cжатия ресурсных файkов

раздел "Сжатие" 2й абзац.

[@sunnybear]

спасибо :)

[@leg_letniy]

Спасибо Вам за перевод :)

[@leg_letniy]

Уже дня нее затраты на разработку окупятся с лихвой!

раздел "Сети доставки содержания (CDN)" 2й абзац, последнее предложение.