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

http://www.die.net/musings/page_load_time/
  • Перевод
Ниже перевод статьи «Optimizing Page Load Time», в которой автор математически рассчитывает оптимальный размер файлов для эффективной передачи при веб-запросах, рассматривает некоторые прикладные вопросы оптимизации загрузки страницы с учетом особенностей браузеров, а также дает несколько развернутых и ценных советов. Мои комментарии далее курсивом.

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

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



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

читать дальше на webo.in →
Поделиться публикацией
Ой, у вас баннер убежал!

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

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

                                  Допустим, у Вас на сервере лежат следующие файлы:
                                  — 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
                                    И правильность кода тут абсолютно не при чём. Это уже вопрос из другой оперы. Забыл дописать в предыдущее сообщение.
                                      0
                                      По вопросам кэша читайте здесь http://www.nomagic.ru/all.php?aid=58 . Особенно в комментариях - последний длинный ... может вам поможет как-нибудь.
                                        0
                                        За ссылку спасибо!
                                0
                                в закладки, однозначно )))
                                  –3
                                  Очередной дурачок минус без аргументации поставил.

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

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

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

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

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

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

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

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

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

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

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

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

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

                                              Самое читаемое