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

индекс
163,90

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

Ниже перевод статьи "Optimizing Page Load Time", в которой автор математически рассчитывает оптимальный размер файлов для эффективной передачи при веб-запросах, рассматривает некоторые прикладные вопросы оптимизации загрузки страницы с учетом особенностей браузеров, а также дает несколько развернутых и ценных советов. Мои комментарии далее курсивом.

Существует распространенное мнение, что быстро загружающая страница положительно влияет на впечатление пользователя (improve the user experience). В последние годы многие сайты начали использовать для этой цели технологию AJAX, чтобы уменьшить время ожидания (при загрузке данных). Вместо того, что запрашивать с сервера новую страницу полностью при каждом клике, браузер часто можно либо поменять вид самой страницы (отобразив или скрыв какие-либо блоки), либо подгрузить небольшую порцию HTML-, XML- или JavaScript-кода и внести изменения на существующую страницу. В любом случае, это значительно уменьшает время, проходящее между кликом пользователя и окончанием визуализации браузером нового содержания.

Что влияет на загрузку страницы?

Однако, для большинства сайтов, загрузка страницы затрагивает десятки внешних объектов, основное время загрузки тратится на различные HTTP-запросы картинок, JavaScript-файлов и файлов стилей. AJAX, возможно, поможет в данной ситуации, но ускорение или удаление этих HTTP-запросов может принести гораздо больше пользы, хотя на данный момент нет единого мнения (a common body of knowledge), как именно это следует делать.

читать дальше на webo.in →

+54
15 февраля 2008, 02:32
125

комментарии (49)

0
joint #
Плодотворный труд. С этой информацией запросто сможете осуществлять медиа консалтинг.
0
sunnybear #
меня больше технический консалтинг интересует :) Если есть предложения — обращайтесь
0
joint #
можно я вас в друзья добавлю ))
0
Sunshine #
Статья очень интересная, многим будет полезна, спасибо за перевод .)

Btw: может быть, "оптимизируем загрузку веб-страницы"? Вроде как и по переводу подходит больше, и сама статья только анализом не ограничивается .)
0
sunnybear #
просто перевод будет размещен окончательно здесь
http://webo.in/articles/
а там уже есть "оптимизируем..." :) слова закончились
0
investor #
Отлично и как раз во время! тормаза сильные на одном проекте, работаю над оптимизацией кода, а тут такая великолепная статья! Можно применить много нового! Спасибо!
0
proxor #
Нехило, спасибо за перевод!
0
mishinoleg #
Глубоко выкопано, спасибо автору, и переводчику тоже. Но для многих проектов такая оптимизация пока преждевременна - есть ещё чем заняться и в более простых вещах.
0
ptenez #
Спасибо переводчику за такую интересную и не маленькую статью! За то что нашел и перевел :)
+Fav
0
kashey #
Замечательно, осталось придумать как именно прокачать свои проекты.
А так - животрепешуший вопрос - где можно взять построителя этих симпошных картинок чтобы свои проекты потестить?
0
sunnybear #
вот здесь
http://tools.pingdom.com/fpt/
есть неплохой анализатор, строящий графики загрузки наподобие YSlow (на англйиском), а на
http://webo.in/
есть просто анализатор скорости загрузки (на русском)
0
aivanoff #
Спасибо за перевод. Очень удачный.
0
golikov #
Автор творчески подошел к выбору тегов.
0
gernovich #
Огромное спасибо!
+1
pavelvk #
Ссылки по теме ведкт на 404 почему-то.
Исправьте, пожалуйста.
–5
bobrob #
При современных скоростях доступа в интернет, задумывается о скорости и времени загрузки страницы нет смысла. Это просто потеря времени.
0
MOVe #
Скорость доступа в интернет и скорость работы сервера — разные вещи.
Автомобиль, с максимально-возможной скоростью движения 40км/ч. не будет двигаться по автобану на скорости 150км/ч. Потому, что не умеет :)
0
bobrob #
при чем тут это? Надо правильный код писать и все будет грузится нормально
0
MOVe #
У меня такое чувство, что Вы немножко не понимаете, о чём идёт речь.

Допустим, у Вас на сервере лежат следующие файлы:
— index.html;
— javascript.js;
— styles.css;
— image1.gif;
— image2.gif;
— image3.gif;
— image4.gif;
— image5.gif;
— image6.gif.

В index.html все эти файлы инклудятся в страницу и загружаются браузером. Так вот в этой теме разговор ведётся о том, как серверу быстрее отдавать эти файлы, а браузеру их быстро загружать. Причём, чтобы браузер лишний раз не загружал с сервера НЕ ИЗМЕНИВШИЕСЯ файлы (styles.css; javascript.js; imagesN.gif), а брал их из кэша. То есть при хорошей настройке клиент будет загружать только HTML (изменившийся), а остальное будет брать из кэша. Какой смысл грузить то, что не менялось?

И неважно какая у Вас скорость доступа. Важно, как быстро сервер отдаст браузеру эти файлы, по какому пути эти файлы идут к Вам на компьютер, и как их много. Если Вы заметили, тут обсуждаются ещё и очерёдность загрузки этих файлов, да и ещё много чего.

Честно признаться, мне пока не удаётся победить кэш. Как я ни стараюсь.
0
MOVe #
И правильность кода тут абсолютно не при чём. Это уже вопрос из другой оперы. Забыл дописать в предыдущее сообщение.
0
bobrob #
По вопросам кэша читайте здесь http://www.nomagic.ru/all.php?aid=58 . Особенно в комментариях - последний длинный ... может вам поможет как-нибудь.
0
MOVe #
За ссылку спасибо!
0
vitovt #
в закладки, однозначно )))
–3
bobrob #
Очередной дурачок минус без аргументации поставил.

Пример www.nba.com очень тяжелая страница , грузится 3 - 5 секунд макс. Ну а если ваша страничка слишком медленно загружается , есть много вариантов, кривая верстка, кривые настройки сервера, полохой хостинг , кривой движок.
0
sunnybear #
коллега, боюсь ваша необоснованная критика приводит к плачевным результатам. Стоит либо ее подробно аргументировать, либо воздержаться от комментариев. На Хабре не принято "хаять за глаза"
–3
bobrob #
коллега, при современных скоростях доступа в интернет, задумывается о скорости и времени загрузки страницы нет смысла - все грузится в районе 1-3, максимум 5 секунд. И это совсем приемливо. Для некоторых проектов хорошо подхидит AJAX. А вот тратить кучу времени на анализы , статьий, оптимизацию ... ну и что вам это даст, будет грузится не за 3секунды а за 2 .... а стоит ли усилий, когда для пользователя все равно.
0
sunnybear #
если Вы давно не пробовали заходить на сайты по модему или откуда-нибудь из Новосибирска или Владивостока, то советую Вам попробовать. Получите массу удовольствия
0
bobrob #
Сайт который сверстан грамотно, будет даже при таких скоростях заргружатся в поносимое время и в оптимизации нуждатся не будет. А как обычно делают, пишут кучу лишнего кода, вставляют здоровые изображения и громоздкие флэш анимации... и потом оптимизирут (сжимают html код, используют CSS sprites - к стати очень опасная штука при масштабировании у нее проблемы и тд.). Грамонтно сверстаный сайт, будет грузится у всех пользователей за поносимое время.
0
sunnybear #
понятие "грамотно сверстанного сайта" уже включает половину тезисов, относимых к оптимизации, однако, в литературе об этом упоминают крайне мало.

CSS Sprites — как бритва Оккамы, если профессионализм разработчика позволяет их использовать (так, чтобы все выглядело хорошо), то они используются, иначе — это уже камни в огород разработчика.

Однако, вторая половина включает технологии кеширования и gzip'ования HTML, которые также способны ускорить загрузку на 30-50%
0
bobrob #
Вы предствляете пользовать CSS Sprites при резиновой верстки? как это будет выглядеть на 800х600 и на 1280х1024 ? а если шрифт увеличить или уменьшить?

А для HTML кода самое лутчшее уберать на стороне сервера все лишнее пробелы и переносы строк и отправлять браузеру такой код. К стати в Файерфоксе в некоторых ситуациях чтобы Javascritp работал правильно надо так обезательно делать.
0
sunnybear #
да, представляю, и все замечательно работает при уменьшении-увеличении шрифта (конечно, можно еще картинки растягивать, но это, имхо, уже лишнее).

Попробуйте поресайзить http://www.creative.su — там картинки никуда не уползают.
0
bobrob #
А у вас там фиксированая ширина, на мониторе 800х600 будет внизу полоса прокрутки. Шрифт у вас указан в px. в IE6 не масщтабирутеся и еще в IE6 не центрируется страничка :)
Ну а про CSS Sprites сделано удачно. Только такой не знаю на резине как будет себя вести. Но для вашей страничке то что надо.
+1
z_z #
не кормите тролля :)
0
akhasanov #
ниодна из "Ссылок по теме" не открывается.
0
alexbig #
опа, а что за тема: вчера открыл хабр, вся статья была тут, а теперь только линк на сайт автора перевода?
что-то мне не нравятся эти игры с пиаром и отводом трафика…
0
sunnybear #
Вам было бы комфортнее, если бы сразу постил ссылку, не выкладывая предварительно полное содержание?
0
alexbig #
лично мне, было бы комфортнее сразу увидеть ссылку на ваш сайт. так, по крайней мере, я бы знал, за что сам голосовал и остальные участники.
а тут получается, можно написать интересную статью, получить 100 балов и поменять на чёрного властелина :-)
я за апдейты без координального изменения контента, друг ;-)
0
Novikov #
А неплохой, кстати, ход. Хотя и неоднозначную реакцию вызывает у людей. Но я к таким ходам отношусь спокойно: вреда эта ссылка мне не принесет, а вот другие интересные статьи на том же сайте я рад прочитать, если они там есть.
0
alexbig #
ход, конечно, красивый, я — так среагировал. ничего против не имею против интересных статей посмотреть профиль sunnybear, но хотелось бы поменьше видеть хабр как маркетинговый инструмент.
0
Novikov #
На самом деле, ничего в маркетинговых инструментах плохого нет, как и в любых других инструментах.

Наоборот, плохо то, что IT-шники сторонятся их и не пользуются ими. В результате даже с их немудрящим маркетингом Microsoft с "виндой галимой" делает Linux как черепаху с точки зрения бизнеса.

Между прочим, даже создатели "Хабра" используют его именно как маркетинговый инструмент. Вы вот много слышали о Futurico раньше? ;-)
0
sunnybear #
Теперь модно говорить не "Futurico", а "Тематические медиа" :)
0
alexbig #
одно дело, говорить о маркетинге своих продуктов, другое дело — PR и скрытая реклама чужих.
вы абсолютно правы — it-шники не умеют ими пользоваться, ждут готовых решений от гугл, яндекса и подобных. но я отстаиваю не пиар в данной беседе, а изменение контента автором.
я был удивлён, что, проголосовав за полную статью, и, положив её в закладки, я обнаружил её отсутствие на хабре. стало просто неприятно. значит, я зря пометил звёздочкой её в гугл ридере? а ведь можно было сразу поставить ссылку и я бы положил её в избранное и не чувствовал бы себя «обманутым».
0
Novikov #
Согласен в той части, что после "подмены" ссылки человек будет чувствовать себя обманутым.
0
Rational_Yurij #
Тогда вопрос: как нам расценивать маркетинговые ходы, в результате которых человек будет чувствовать себя обманутым?..
0
Novikov #
Как неудачные ;)
0
sunnybear #
Тут, скорее, нужно брать в расчет число почувствовавших себя обманутыми к общему числа + само это общее число :)

Иначе все маркетинговые ходы можно признать неудачными
0
Novikov #
Естественно, судить нужно по конечному результату. Тут вот нашелся на "Хабре" гоблин, который посвятил несколько дней своей жизни попыткам меня оскорбить и спровоцировать.

Лишь потому, что под роликами мелким шрифтом стояли ссылки на мой блог и студию. Шума и вони он поднял очень много, возможно, даже у кого-то смог создать иллюзию "народного негодования" посредством виртуалов.

Но если судить не по возмущениям одного человека, а смотреть на картину в целом (посты в блогах, комментарии, письма) — то все наоборот. 99% одобряют сами ролики, а к ссылкам под ними относятся нейтрально.

Так что, конечно же, судить об удачности маркетингового хода с подменой ссылок нужно по динамике числа посещений и подписчиков того блога.
0
theDen #
жаль работаю на другой платформе (iis+asp.net) - все приёмы попробовать не получится.
в целом согласен, что корректные данные в хттп запросе могут значительно улучшить статистику.

только вот для сайтов с большой посещаемостью намного важнее поработать над кешированием, оптимизацией работы с базой.
0
sunnybear #
не скажите, распараллеливание статики тоже хорошо сказывается

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