sunnybear 21 авг 2007 в 20:14

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

1 мин

743

Клиентская оптимизация*

Перевод

+16

Комментарии 23

Victor_R 22 авг 2007 в 01:52

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

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

sunnybear 22 авг 2007 в 01:58

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

Lucky 22 авг 2007 в 07:33

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

alexbig 22 авг 2007 в 11:06

мда... $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 22 авг 2007 в 12:51

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

alexbig 22 авг 2007 в 14:17

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

dolotov 22 авг 2007 в 11:13

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

sunnybear 22 авг 2007 в 11:49

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

Devgru 22 авг 2007 в 11:56

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

dolotov 22 авг 2007 в 13:06

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

Devgru 22 авг 2007 в 15:13

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

dolotov 22 авг 2007 в 15:19

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

antonlyapunov 23 авг 2007 в 08:35

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

Devgru 22 авг 2007 в 11:17

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

dolotov 22 авг 2007 в 11:45

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

silverwind 22 авг 2007 в 14:38

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

def 22 авг 2007 в 14:46

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

AirWorker 23 авг 2007 в 11:58

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

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

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