Как стать автором
Обновить
  • по релевантности
  • по времени
  • по рейтингу

Оптимизация параллельных загрузок для минимизации издержек

Клиентская оптимизация
Перевод
Примечание: ниже находится перевод статьи «Optimize Parallel Downloads to Minimize Object Overhead», в которой авторы рассматривают параллельную загрузку объектов, и как она влияет на производительность веб-страницы. Мои комментарии далее курсивом.

Средняя веб-страница содержит более, чем 50 объектов (Krishnamurthy и Wills 2006), при этом издержки на число объектов доминируют над всеми остальными задержками при загрузке большинства веб-страниц (Yuan 2005). Браузеры, следуя рекомендациям спецификации HTTP 1.1, обычно устанавливают не более 2 одновременных соединений (это справедливо только для IE6/7, для Firefox и Opera этот параметр настраиваемый, составляет не меньше 4, по умолчанию. Для IE8, по словам Алекса Могилевского, скорее всего, будет 6) с одним хостом. При увеличении числа HTTP запросов, требуемых для отображения страницы, с 3 до 23 время, затрачиваемое именно на «чистую» загрузку объектов, от общего времени загрузки падает с 50% до всего 14% (см. Рисунок 1).

читать дальше на webo.in →
Всего голосов 25: ↑23 и ↓2 +21
Просмотры597
Комментарии 12

Изучаем потоки, чанки и ищем конец

Клиентская оптимизация
Перевод
Примечание: ниже перевод статьи «On Streaming, Chunking, and Finding the End», в которой авторы рассматривают процесс передачи информации по HTTP-соединению и возможности для ускорения этого процесса. Мои комментарии далее курсивом.

Два способа передачи



Как и в большинстве механизмов передачи данных, в HTTP существует два основных способа отправить сообщение: «все и сразу» или «по частям». Другими словами, в HTTP есть возможность отправлять данные до тех пор, пока еще есть хотя бы что-то, что можно отправить, либо отправить все данные как одну логическую единицу, указав предварительно ее размер.

Если вы занимаетесь веб-разработками достаточно продолжительное время, скорее всего, вы уже знаете, как работает сброс буфера (flush) на стороне сервера. Этот метод позволяет начать отправку части данных пользователю, в то время как скрипт может продолжать выполнять некоторые, достаточно медленные, действия (скажем, ресурсоемкий запрос к базе данных). Если вы уже применяли эту возможность, тогда вы, вероятно, использовали преимущества потокового (streaming) механизма, хотя могли и не знать всех деталей работы HTTP-протокола.

читать дальше на webo.in →
Всего голосов 36: ↑33 и ↓3 +30
Просмотры7.6K
Комментарии 24

Исследование производительности, часть 5: кеширование в iPhone — невозможное возможно

Клиентская оптимизация
Перевод
Примечание: ниже находится перевод статьи «Performance Research, Part 5: iPhone Cacheability — Making it Stick» из блога производительности YUI. Авторы исследовали поведение iPhone при загрузке страницы и сделали некоторые интересные выводы по производительности веб-страниц для этого мобильного устройства. Мои комментарии далее курсивом.

Эта статья, написанная в соавторстве с Wayne Shea, пятая в серии, посвященной описанию экспериментов, которые направлены на исследование производительности веб-страниц (часть 1, часть 2, часть 3 и часть 4). Вы, наверное, удивлены, почему статьи по производительности находятся в блоге YUI (Yahoo! User Interface, пользовательских интерфейсов Yahoo!). Так получается, что программирование клиентской части, что, по сути, равносильно разработке и созданию пользовательских интерфейсов, оказывает наибольшее воздействие на производительность веб-страниц (в свете ведущей роли инженеров Yahoo! в изучении производительности клиентской части, наверное, более удивителен тот факт, что такие статьи все еще находятся в этом блоге, а не выделены в отдельное направление).

читать дальше на webo.in →
Всего голосов 7: ↑5 и ↓2 +3
Просмотры775
Комментарии 1

Встраивание и кодирование в JavaScript

Клиентская оптимизация
Перевод
Примечание: ниже находится перевод статьи «Embedding and Encoding in JavaScript», в которой автор (JavaScript-евангелист в Mozilla и автор библиотеки jQuery по совместительству) рассматривает способы сжатия информации и ее объединения при помощи JavaScript и некоторых других методов. Мои комментарии далее курсивом.

Грубая реализация на JavaScript (заметка на Хабре, ссылка blog.nihilogic.dk/2008/04/super-mario-in-14kb-javascript.html) первого уровня Super Mario Brothers буквально на днях обошла весь Интернет. В нее, в общем, можно играть, хотя упущены многие ключевые аспекты (нет грибов, нет флага, нет повышающих очков и т.д.). Однако, это, на самом деле, не самый интересный аспект в этой игре.

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

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

читать дальше на webo.in →.
Всего голосов 33: ↑29 и ↓4 +25
Просмотры1.6K
Комментарии 16

Обходим ограничения браузера на число соединений

Клиентская оптимизация
Перевод
Несколько дней назад эта видео-запись размещенная на metacafe высветилась на digg. В ней объяснялось, как увеличить скорость открытия сайтов путем тонкого тюнинга браузера и изменения его настроек, отвечающих за число параллельных соединений. Чтобы объяснить, почему это работает, давайте немного углубимся в то, как браузеры обслуживают серверные соединения.

Утилитарный выбор



При разработке любых приложений всем разработчикам приходится делать то, что называется «утилитарным» выбором (utilitarian choice). Если несколько вычурно перефразировать Jeremy Bentham, то «утилитарным» можно назвать тот подход, «в результате которого мы получаем наибольшее количество добра для наибольшего числа [людей]». Много раз производительностью жертвовали для небольшого числа пользователей, чтобы, в результате, средняя производительность для всех пользователей в совокупности была бы лучше.

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

читать дальше на webo.in →
Всего голосов 36: ↑34 и ↓2 +32
Просмотры5.1K
Комментарии 23

Средний размер веб-страницы увеличился втрое с 2003 года

Клиентская оптимизация
Перевод
Примечание: ниже находится перевод статьи «Average Web Page Size Triples Since 2003», в которой автор рассуждает о тенденциях, происшедших за последние 5 лет, касающихся размера веб-страницы и числа объектов на ней. Очень интересно сравнить полученные данные с ростом пропускной способности интернета, по моему мнению, последняя увеличилась примерно так же. Отсюда можно сделать вывод, что клиентская оптимизация ни разу не потеряла своей актуальности за последние 10—15 лет. Мои комментарии далее курсивом.

Размер средней веб-страницы увеличился более чем втрое с 2003 года. С 2003 по 2008 годы она увеличилась в размере с 93,7Кб до более 312Кб (см. рисунок 1), почти на 233% (Domenech и др. 2007, Flinn & Betcher 2008). За тот же пятилетний период число объектов на такой странице примерно удвоилось: с 25,7 до 49,9 объектов на страницу. Если взять статистику за более длительный период, то окажется, что с 1995 года размер средней веб-страницы увеличился в 22 раза, а число объектов на страницу в 21,7 раза.

Рост размера средней веб-страницы

Рисунок 1. Рост размера средней веб-страницы

читать дальше на webo.in →
Всего голосов 53: ↑52 и ↓1 +51
Просмотры1.8K
Комментарии 11

Как работают таймеры в JavaScript

Клиентская оптимизация
Перевод
Примечание: ниже перевод заметки John Resig «How JavaScript Timers Work», в которой автор jQuery ясно и подробно излагает тонкости работы различных методов отложенного исполнения функций. Мои комментарии по клиентской производительности далее курсивом.

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

  • var id = setTimeout(fn, delay); — создает единичный таймер, срабатывание которого выливается в вызов определенной функции после указанной задержки. Данный метод возвращает уникальный ID, с помощью которого можно в дальнейшем отменить таймер.
  • var id = setInterval(fn, delay); — похож на предыдущий метод setTimeout, но совершает вызовы заданной функции постоянно (каждый раз с заданной задержкой), пока не будет отменен.
  • clearInterval(id);, clearTimeout(id); — принимают в качестве параметр ID таймера (возвращаемый двумя предыдущими методами) и предотвращают дальнейшие вызовы таймера.


Для того чтобы уяснить внутренние аспекты работы таймеров, стоит учесть одну важную деталь, которую стоит осветить: задержка при выполнении таймера не гарантируется. Так как весь JavaScript исполняется в браузере в один поток, то асинхронные события (например, клики мышкой или таймеры) запускаются только по возникновению «окна» в этом основном потоке (обработчики событий и вызываемые функции, фактически, «встраиваются» в основной поток выполнения, подробнее об организации тяжелых вычислений). Лучше всего это можно продемонстрировать с помощью следующей диаграммы:

Схема работы таймеров в JavaScript

Рисунок 1. Схема работы таймеров в JavaScript

читать дальше на webo.in →
Всего голосов 63: ↑59 и ↓4 +55
Просмотры17.3K
Комментарии 55

Сжатие при помощи canvas и PNG-картинок

Клиентская оптимизация
Перевод
Примечание: ниже находится перевод статьи «Compression using Canvas and PNG-embedded data». Автор предлагает на суд читателей еще один способ загрузить в клиентском браузере JavaScript-библиотеку, передав при этом минимум данных. Для этого используется PNG-картинка и объект canvas. Мои комментарии далее курсивом.

Сжатая JavaScript-библиотека в виде PNG-файла

Недавно у меня появилась идея, что можно хранить исходный Javascript-код в PNG-картинке, а затем получать его через метод getImageData() элемента canvas. К несчастью, сейчас это означает, что только такой подход будет работать только в Firefox, Opera Beta и последних ночных сборках WebKit. Пока еще никто не указал мне, насколько gzip опережает данный метод по степени сжатия, я хочу сразу сказать что рассматриваемый метод никак не может быть практической альтернативой физическому сжатию. Чуть раньше сегодня я уже писал о сжатой версии в 8Кб скрипта Super Mario, для которого использовалась эта техника (подробнее можно прочитать в заметке про кодирование). Здесь я приведу лишь некоторые детали о действительном положении вещей.

читать дальше на webo.in →
Всего голосов 50: ↑45 и ↓5 +40
Просмотры1.3K
Комментарии 26

Быстрый-быстрый JavaScript

Клиентская оптимизация
Перевод
Примечание: ниже расположен перевод статьи «Serving JavaScript Fast», написанной года два назад, но нисколько не потерявшей своей актуальности. Автор предлагает достаточно большой комплекс мер для ускорения загрузки и работы CSS/JS-файлов. Ссылки и частичные переводы данной статьи достаточно широко цитируются в Рунете, однако, полностью она еще нигде не появлялась, а полезных советов в ней довольно много. Мои комментарии далее курсивом.

Следующее поколение веб-приложений будет использовать весьма «тяжелые» JavaScript- и CSS-framework'и. Мы собираемся продемонстрировать, как увеличить скорость взаимодействия таких приложений и ускорить их работу.

Все эти так называемые «Веб 2.0» приложения, их глубокое взаимодействие с содержанием страницы и самим пользователем сильно увеличили сложность использования CSS и JavaScript. Для того чтобы быть уверенными в небольшом размере приложений, нам нужно оптимизировать как размер, так и саму природу всех файлов, которые нужны для нормальной работы нашей страницы. Мы должны быть уверены, что добились оптимума удобства использования сайта для пользователей. На практике это означает, что нам нужно добиться максимального уменьшения размера страницы и ускорения ее работы, при этом предотвращая загрузку ненужных ресурсов, которые не изменились с момента последнего обращения.

читать дальше на webo.in →
Всего голосов 57: ↑54 и ↓3 +51
Просмотры1.8K
Комментарии 31

Психология веб-производительности, или когда время равно деньги

Клиентская оптимизация
Перевод
Примечание: ниже находится перевод статьи «The Psychology of Web Performance», в которой автор поднимает психологические аспекты производительности веб-страниц: чем она обусловлена, как ее измерить — и описывает некоторые сопутствующие (коммерческие) эффекты. Мои комментарии далее курсивом.

Предыдущем исследование продемонстрировало, что пользовательское раздражение сильно возрастает, если скорость загрузки страницы превышает 8–10 секунд безо всякого уведомления пользователя о процессе загрузки (Bouch, Kuchinsky и Bhatti, 2000, King, 2003). Последние работы в этой области показали, что пользователи с широкополосным доступом еще менее терпимы к задержкам при загрузке веб-страниц по сравнению с пользователями с более узким каналом. В опросе, проведенном JupiterResearch, было установлено, что 33% пользователя скоростного соединения не хотят ждать более 4 секунд при загрузке страницы, при этом 43% пользователей не ждут более 6 секунд (Akamai, 2006).

читать дальше на webo.in →
Всего голосов 30: ↑25 и ↓5 +20
Просмотры656
Комментарии 27

Неблокирующая загрузка JavaScript

Клиентская оптимизация
Перевод
Примечание: ниже перевод статьи «Non-blocking JavaScript Downloads», в которой автор рассказывает о проблемах, связанных с подключением JavaScript-файлов, и возможной параллелизации их загрузок. Мои комментарии далее курсивом.

Stoyan StefanovОб авторе: Stoyan Stefanov является веб-разработчиком Yahoo! в группе Exceptional Performance и курирует разработку YSlow — инструмента по измерению производительности. Он также внес значительный вклад в разработку продуктов с открытым кодом, выступал на конференциях и автор технических текстов. Его последняя книга Object-Oriented JavaScript.

Внешние JavaScript-файлы блокируют загрузку страницы и сильно влияют на ее производительность, но существует достаточно простой выход из этой ситуации: использовать динамические теги script и загружать скрипты параллельно, увеличивая тем самым скорость загрузки страницы и улучшая пользовательское восприятие.

читать дальше на webo.in →
Всего голосов 1: ↑1 и ↓0 +1
Просмотры1.4K
Комментарии 40

Клиентская оптимизация и этапы разработки

Клиентская оптимизация
Обычно пользователю нет дела до того, какие подходы мы применяем при разработке, как настроен сервер, какие клиентские и серверные фреймвёрки мы используем. Его может волновать на сколько сайт полезный, удобный и быстрый. Наша же задача заключается в том, чтобы не доставлять пользователю неудобства, радовать его, и тем самым заставлять его покупать наш мега-продукт или смотреть на наши замечательные баннеры. Эта статья о том, как создавать быстрые сайты.
Читать дальше →
Всего голосов 72: ↑65.5 и ↓6.5 +59
Просмотры3.6K
Комментарии 33

Разогнать главную Яндекса? Реально!

Клиентская оптимизация
Еще год назад у меня вызвало некоторое сомнение, что использование HTML 4.0 Transitional для разметки страницы будет экономичнее, чем XHTML 1.0 Strict с его жесткими стандартами оформления кода. Но тогда у меня не было особого желания проверять свою гипотезу, да я и плохо представлял, как это лучше сделать.

XHTML, являясь подмножеством XML, имеет более строгие требования к синтаксису, HTML допускает более свободную запись, этим можно воспользоваться.

Полная версия доклада про оптимизацию главной Яндекса
Читать дальше на webo.in→
Всего голосов 75: ↑50 и ↓25 +25
Просмотры523
Комментарии 44

Разгоняем счетчики: от мифов к реальности

Клиентская оптимизация
Разгоняем счетчики: от мифов к реальности

Не только начинающие, но и продвинутые оптимизаторы встают в тупик, когда речь заходит о счетчиках посещаемости — ведь обычно это JS-код, который нужно вставить на страницу (и хорошо еще, если не требуют максимально близко к открывающему тегу body) и который нельзя никак менять. Иначе статистика просто не будет работать.

На самом деле, все не так плохо. Скорее, все очень хорошо, но мало кто об этом знает :)

Заглянем внутрь



Что из себя представляет код JS-счетчика? Обычно (в 99% случаев) он «вытаскивает» из клиентского окружения набор параметров (URL текущей страницы, URL страницы, с который перешли на текущую, браузер, ОС и т.д.), которые передаются на сервер статистики. Все навороты счетчиков связаны с обеспечением максимальной точности передаваемой информации (кроссбраузерность, фактически). Наиболее мощные (Omniture, Google Analytics) используют еще и собственные переменные и события, чтобы усилить маркетинговую составляющую.

Но сейчас речь не об этом. Как собранные на клиенте данные попадают на сервер статистики? Все очень просто: в документе создается уникальный элемент, в URL которого «зашиваются» все необходимые значения (обычно в качестве GET-параметров). URL этот ведет, как можно догадаться, на сервер статистики, где данные кладутся в базу и каким-то образом показываются в администраторском интерфейсе.

Читать дальше на webo.in→
Всего голосов 49: ↑41.5 и ↓7.5 +34
Просмотры2.6K
Комментарии 15

Разгони свой сайт. Оглавление

Чулан
После обсуждения рентабельности выпуска бумажной книги я решил все же сконцентрироваться на электронной версии. Если она окажется достаточно популярна, там можно будет и о hard-copy подумать.

В эпоху Web2.0 технологий и взглядов было бы глупо писать книгу в отрыве от ее читателей, поэтому в данном топике выложено предварительное оглавление (чтобы скорректировать дальнейшую работу). Оно преследует две цели: во-первых, дать общее понятие о необходимости клиентской оптимизации. Во-вторых, рассказать о существующих подходах и наиболее современных решениях. Книга не стремится научить оптимизировать сложные JavaScript-приложения или настраивать nginx + FastCGI. Только общий подход и основные методики.

Любые комментарии приветствуются.
Читать дальше →
Всего голосов 62: ↑53 и ↓9 +44
Просмотры390
Комментарии 60

Выносим CSS в пост-загрузку

Клиентская оптимизация
После сравнительной заметки о CSS Sprites и data:URL все мои мысли были направлены на решение основной проблемы:

В общем случае [при использовании data:URL], загрузка страницы не ускорится, а даже может замедлиться, потому что фоновые картинки (включенные через data:URL) будут грузиться в один поток, а не в несколько при обычном использовании спрайтов. Если фоновых картинок достаточно много (несколько десятков Кб), то это окажется существенным.

Данная статья как раз посвящена тому, как можно достаточно успешно справиться с указанной проблемой. Интересно? Тогда, поехали.

Читать дальше на webo.in→
Всего голосов 54: ↑49 и ↓5 +44
Просмотры1.4K
Комментарии 45

Счетчик времени загрузки

Клиентская оптимизация
Коллеги, други и просто хабралюди. С неделю назад на Web Optimizator был выложен код для счетчика загрузки (немного более подробно об измерении времени загрузки страницы можно прочитать в статьях про анализ скорости загрузки и разгон интернет-магазина).

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

Время загрузки Web Optimizator
График распределения пользователей webo.in по времени загрузки у них этого сайта

Читать дальше →
Всего голосов 41: ↑39 и ↓2 +37
Просмотры1.9K
Комментарии 31

Динамические стили: быстро и просто

Клиентская оптимизация
Заметка Выносим CSS в пост-загрузку была посвящена исследованию наиболее быстрого способа добавить стилевые правила в исходный документ динамически, не затрагивая при этом стадию предзагрузки (когда у нас еще белый экран в браузере). В ней, однако, не был рассмотрен следующий вопрос: какой метод использовать для добавления массива CSS-правил в сам HTML.

Естественно, что таких вариантов существует несколько, и дальше они все будут рассмотрены с точки зрения производительности в клиентском браузере.

Тестовое окружение


Поскольку скорость загрузки отдельного CSS-файла достаточна велика, а требуется рассмотреть, как его содержимое может повлиять на скорость его динамического применения к документу, то нам нужны сотни или даже тысячи правил. В качестве отправной точки была опять взята главная страница Яндекса, стили которой были вынесены в отдельный файл и скопированы 10 раз. Это дало необходимую задержку (которая существенно больше погрешности, вносимой браузерами) и не сильно увеличило сжатый с помощью gzip файл.

Все варианты представлены на тестовой странице, вкратце опишу основные подходы.

Читать дальше yа webo.in →.
Всего голосов 28: ↑26 и ↓2 +24
Просмотры3.8K
Комментарии 13

Оптимизация изображений, часть 3: 4 шага для уменьшения размера файлов

Клиентская оптимизация
Перевод
Примечание: ниже расположен перевод заметки Image Optimization, Part 3: Four Steps to File Size Reduction от Stoyan Stefanov. В ней рассматриваются наиболее популярные консольные утилиты для минимизации изображений. Мои комментарии далее курсивом.
Stoyan StefanovОб авторе: Stoyan Stefanov работает веб-разработчиком в команде Yahoo! по исключительной производительности и руководит разработкой инструмента для анализа производительности — YSlow. Он также внес значительный вклад в программы, разрабатываемые с открытым исходным кодом, выступает на конференциях и является техническим писателем: его последняя книга озаглавлена Объектно-ориентированный JavaScript.

Эта третья часть серии статей, посвященных оптимизации изображений (в первых двух была сплошная вода, но на досуге почитать интересно). С предыдущими частями можно ознакомиться по ссылкам:

Текущая заметка посвящена некоторым наиболее часто используемым инструментам, которые можно применить для уменьшения размера изображений. Идея заключается в следующем: мы можем получать все изображения от дизайнера, но не оставлять их в исходном виде, а немного уменьшать в размере, используя указанные ниже инструменты. Это позволит автоматизировать процесс без необходимости глубокого анализа структуры изображения.
Читать дальше на webo.in →
Всего голосов 108: ↑90 и ↓18 +72
Просмотры4.3K
Комментарии 19