SpeedUpYourWebsite.v1.2_img_64

Клиентская оптимизация популярных проектов Рунета 2

rbc.ru Давайте от рассмотрения крупных развлекательных порталов переместимся к конкретно новостным. Первым в этой среде можно рассмотреть сайт РИА «РосБизнесКонсалтинг». Рис. 64. Результаты анализа загрузки главной страницы www.rbc.ru Сразу бросается в глаза, что на странице используется 3 CSS-файла и 3 JavaScript-файла, которые можно объединить в один и сэкономить приличное время, не утомляя пользователя белым экраном. […]

SpeedUpYourWebsite.v1.2_img_55

Клиентская оптимизация популярных проектов Рунета 1

В этом разделе некоторые наиболее посещаемые проекты Рунета будут рассмотрены с точки зрения клиентской оптимизации. Основной целью каждого проводимого ниже анализа является показать на рабочих примерах, каким именно образом можно ускорить загрузку сайта. И показать это на достаточно нагруженных и популярных ресурсах, для которых каждая мелочь имеет значение. vkontakte.ru В Контакте ( http://vkontakte.ru/ ) является […]

Оптимизированные конфигурации

Конфигурация Apache 1.3 <IfModule mod_gzip.c> # включаем gzip mod_gzip_on Yes # если рядом с запрашиваемым файлом есть сжатая версия с расширением .gz, то # будет отдана именно она, ресурсы CPU расходоваться не будут mod_gzip_can_negotiate Yes # используем при статическом архивировании расширение .gz mod_gzip_static_suffix .gz # выставляем заголовок Content-Encoding: gzip AddEncoding gzip .gz # выставляем минимальный […]

Несколько советов для браузеров

Ускоряем загрузку страниц в Firefox 3 В Firefox можно увеличить скорость загрузки и отображения страниц, значительно повысив комфортность работы в интернете. Что для этого нужно сделать: 1. Открыть страничку настроек, набрав в адресной строке about:config. 2. Отредактировать следующие опции: network.http.pipelining — true network.http.proxy.pipelining — true network.http.pipelining.maxrequests — 8 nglayout.initialpaint.delay — 0 (в последнем случае необходимо […]

SpeedUpYourWebsite.v1.2_img_42

Обзор аналитических инструментов 2

Web Inspector для Safari Аналогично уже рассмотренной Firebug Net Panel, Web Inspector представляет диаграмму загрузки, основываясь на фактических данных. Однако есть и ряд недостатков: в частности, время отображения (выполнения) элемента не отделено от времени его загрузки, что хорошо видно для встроенных изображений. Рис. 42. Результаты анализа загрузки сайта в Web Inspector   HttpWatch HttpWatch ( […]

SpeedUpYourWebsite.v1.2_img_38

Обзор аналитических инструментов 1

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

Быстрые итераторы, регулярные выражения и другие вкусности

В этом разделе собраны некоторые практические советы по производительности отдельных конструкций в JavaScript-движках в браузере. Итераторы Давайте рассмотрим, какой способ перебора элементов будет максимально быстрым в JavaScript. У нас есть несколько возможностей, ниже приведен полный вариант кода для тестирования. <!— набор элементов для результатов тестирования —> <p id=»test1″></p> <p id=»test2″></p> <p id=»test3″></p> <p id=»test4″></p> <p […]

Кэширование в JavaScript

Очень часто в JavaScript используют глобальные объекты и переменные для чтения каких-либо параметров (или вызова определенных методов). Почти всегда этого можно избежать, если кэшировать объект из глобальной области видимости в локальную — все обращения к закэшированному объекту буду выполняться намного быстрее. Итерации и локальное кэширование При DOM-операциях перебор массива объектов является довольно типичной задачей. Давайте […]

Быстрый DOM

Работа с DOM-деревом в JavaScript является самым проблематичным местом. Его можно сравнить только разве что с базой данных для серверных приложений. Если JavaScript выполняется очень долго, скорее всего, дело именно в DOM-методах. Ниже рассмотрено несколько прикладных моментов, то есть способов максимально ускорить этот «затор». DOM DocumentFragment: быстрее быстрого DocumentFragment является облегченным контейнером для DOM-узлов. Он […]

Оптимизируем «тяжелые» JavaScript-вычисления

Наиболее существенным препятствием для выполнения в веб-браузере «тяжелых» вычислений является тот факт, что весь интерфейс пользователя в браузере останавливается и ждет окончания исполнения JavaScript-кода. Это означает, что ни при каких условиях нельзя допускать того, чтобы для завершения работы скрипта требовалось более 300 мс (а лучше, если гораздо меньше). Нарушение этого правила неминуемо ведет к плохому […]

SpeedUpYourWebsite.v1.2_img_36

Замыкания

Замыкания очень часто являются причиной утечек из-за того, что они создают циклические ссылки практически без ведома программиста. Ведь не так очевидно, что параметры родительской функции могут быть «заморожены» во времени, на них может быть создана ссылка, которая будет удерживаться до полного освобождения замыкания. Это стало уже широко распространенной практикой программирования, и пользователи достаточно часто сталкиваются […]

SpeedUpYourWebsite.v1.2_img_35

Замыкания и утечки памяти

В этом разделе речь идет, преимущественно, об Internet Explorer и его скриптовом движке — JScript. Однако, во-первых, многие из приведенных методик и советов имеют большое значение для других браузеров и их виртуальных JavaScript-машин. Во-вторых, IE на данный момент занимает порядка 60% пользовательской аудитории, поэтому при рассмотрении эффективного программирования на JavaScript выбрасывать его из поля зрения […]

Применение «ненавязчивого» JavaScript

В предыдущих разделах были представлены некоторые теоретические аспекты построения клиентской логики, ориентированной на максимальное быстродействие и адекватную ему замену в проблемных случаях. Ниже приведены практические решения по облегчению наиболее характерных сторон клиентского взаимодействия любого сайта: это счетчики посещений и размещение рекламы. Ведь они встречаются сейчас практически на любом веб-проекте. Принципы «ненавязчивой» рекламы Итак, как лучше […]

Основы «ненавязчивого» JavaScript

Веб-разработка в последнее время существенно изменилась: мы прекратили смешивать содержание, оформление и функциональность, и, таким образом, менять дизайн и верстку по всему сайту стало легче — для этого нужно просто изменить таблицу стилей. А дополнительная функциональность может быть легко добавлена в уже существующий файл скриптов или за счет подключения нового. Давайте рассмотрим, как научиться использовать […]

SpeedUpYourWebsite.v1.2_img_33

Кроссбраузерный window.onload

Отложенная загрузка скриптов волнует общественность уже давно, почти 10 лет, — атрибут defer, призванный ее обеспечить, был добавлен в спецификацию еще в прошлом столетии. Однако проблема так и остается актуальной. Событие window.onload используется программистами для старта их веб-приложения. Это может быть что-то довольно простое, например, выпадающее меню, а может быть и совсем сложное — скажем, […]

Ни в коем случае не reflow!

В CSS-движке браузеров существует несколько операций, затрагивающих изменение картинки на экране браузера. В предыдущих тестах было рассмотрено начальное создание документа и способы ускорения это процесса. Однако все вышеприведенные советы в равной степени относятся и к изменению уже отрисованной картинки при каких-либо операциях с документом. HTML-элемент в документе может быть скрыт с помощью JavaScript или CSS-свойства […]

SpeedUpYourWebsite.v1.2_img_30

Влияние семантики и DOM-дерева

Давайте рассмотрим сейчас другой вопрос, а именно: как быстро браузер создает DOM- дерево в зависимости от наличия в нем элементов с id или class? Для этого мы подготовим 3 набора HTML-файлов. Первый будет содержать 10000 элементов, у которых только часть будет иметь id (количество именованных элементов варьируется от 50 до 10000, нужно для оценки влияния […]

Что лучше, id или class?

Далее давайте рассмотрим, как использование id или class влияет на скорость отображения страницы в браузере (сейчас речь не идет о множественном использовании одинаковых id — это и так запрещено спецификацией). Если элемент на странице встречается единственный раз (например, шапка или подвал), то мы можем с равным успехом использовать id и class для его стилизации. Методика. […]

Оптимизируем CSS expressions

CSS-производительность не находится сейчас в фокусе внимания при разработке клиентских приложений для браузера. Очень часто о некоторых ключевых моментах просто не знают (или забывают), и это может привести к появлению множества «узких» мест при работе веб-приложения, которые не зависят непосредственно от сервера или канала. Они все находятся на стороне браузера. После того, как доставка всех […]

SpeedUpYourWebsite.v1.2_img_29

Уплотняем поток загрузки

Рассмотрев методы сжатия, объединения, кэширования и создания параллельных соединений, разумно было бы заняться следующим вопросом: Какая часть страницы должна загружаться вместе с основным HTML-файлом, а какая — только с внешними файлами? Было собрано тестовое окружение в виде одной страницы, для которой применены различные оптимизационные техники (заодно было получено реальное ускорение для загрузки произвольной страницы и […]

SpeedUpYourWebsite.v1.2_img_26

Асинхронные HTTP-запросы

Для большинства сайтов загрузка страницы затрагивает десятки внешних объектов, основное время загрузки тратится на различные HTTP-запросы картинок, JavaScript- файлов и файлов стилей. При работе над оптимизацией времени загрузки страницы в сложном AJAX-приложении было исследовано, насколько можно уменьшить задержку за счет внешних объектов. Особый интерес при этом был вызван конкретной реализацией HTTP-клиента в известных браузерах и […]

Редиректы, 404-ошибки и повторяющиеся файлы

От вопросов распределения запросов и их балансировки давайте перейдем к оптимизации самой структуры веб-страницы и посмотрим, как в ряде случаев ее улучшение позволяет избежать существенных задержек и снизить издержки на доставку компонентов страницы конечному пользователю. Редиректы Редиректы осуществляются посредством отправки клиенту статус-кодов HTTP 301, 302 и 307. В качестве примера можно рассмотреть такой HTTP-заголовок со […]

SpeedUpYourWebsite.v1.2_img_25

Балансировка на стороне клиента

Балансировка нагрузки повышает надежность веб-сайта путем распределения запросов между несколькими (кластером) серверами, если один из них перегружен или отказал. Существует много методов по обеспечению такого поведения, но все они должны удовлетворять следующим требованиям: распределять нагрузку внутри кластера рабочих серверов; корректно обрабатывать отказ одного из рабочих серверов; весь кластер должен существовать для конечного пользователя как одна- […]

Content Delivery Network и Domain Name System

Сети доставки содержания (англ. CDN) часто используются для уменьшения нагрузки на хостинг для веб-приложений и его каналов. В этом случае увеличение производительности достигается за счет распространения всех требуемых ресурсов по сети серверов. Близость к таким веб-серверам незамедлительно оборачивается увеличение скорости загрузки компонентов. Основной упор в таких сетях делают на максимальное уменьшение времени ping до сервера, […]

SpeedUpYourWebsite.v1.2_img_23

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

Активное (англ. keep-alive) соединение стало настоящим прорывом в спецификации HTTP 1.1: оно позволяло использовать уже установленный канал для повторной передачи информации от клиента к серверу и обратно (в HTTP 1.0 соединение закрывалось сразу же после передачи информации от сервера, что добавляло задержки, связанные с трехступенчатой передачей пакетов). В том случае, если проблема свободных ресурсов стоит […]

Методы экстремальной оптимизации

Чем больше число внешних ресурсов, к которым браузер обращается при загрузке, тем больше время требуется для отображения страницы. Как правило, веб-страницы обращаются ко многим внешним CSS и файлам JavaScript. Все файлы стилей и скриптов можно объединить, чтобы уменьшить число внешних ресурсов этих типов до двух. Это, естественно, поможет серьезно сократить время загрузки страницы. Объединение JavaScript […]

SpeedUpYourWebsite.v1.2_img_22

CSS Sprites и data:URI

Давайте проведем сравнение двух освещенных выше методов для кардинального уменьшения числа запрашиваемых файлов с сервера: CSS Sprites и data:URI. Проблемы при верстке С какими проблемами сталкивается верстальщик, когда использует CSS Sprites? Это, в первую очередь, проблемы изменения каждой конкретной картинки в общем массиве. Для этого нужно открыть ресурсную картинку, найти в ней область, соответствующую данному […]

Включение музыки (base64)

Летом 2008 года весь мир облетела страница, содержащая реализацию первого уровня Super Mario Brothers. В нее, в общем, можно играть, хотя упущены многие ключевые аспекты (нет грибов, нет флага, нет повышающих очков и т.д.). Однако, это, на самом деле, не самый интересный аспект этой разработки. Наверное, больше всего интереса в этом веб-приложении представляет не сама […]

Преимущества и недостатки data:URI

Вместе с техникой CSS Sprites (или как ее альтернатива) data:URI может существенно уменьшить число HTTP-запросов. Краткий список плюсов данного метода: Экономят HTTP-запросы, предотвращают издержки, связанные с большим числом объектов. Экономят число параллельных потоков: у браузеров есть ограничение (по спецификации HTTP/1.1, однако, Firefox, Opera и Safari несколько вольно его расценивают, в частности, позволяя настраивать этот параметр […]

SpeedUpYourWebsite.v1.2_img_21

Картинки в теле страницы с помощью data:URI

Встроенные изображения используют схему data:URI для внедрения прямо в тело веб-страницы. Как было определено в RFC 2397, такие URI предназначены для вставки небольших объектов как «непосредственных данных» (которые можно использовать без дополнительных запросов внешних ресурсов). Такие объекты должны рассматриваться так же, как и любые другие внешние файлы. Использование встроенных изображений позволяет сэкономить HTTP-запросы к внешним […]

SpeedUpYourWebsite.v1.2_img_16

Техника CSS Sprites

Рассмотрев все аспекты объединения текстовх файлов, перейдем к графической и мультимедийной информации. Сейчас уже много где написано и упомянуто про технику CSS Sprites (или CSS Image Maps). Ниже приведены несколько примеров и полезных ссылок. И пара советов, где и как этот метод может быть применим наиболее оптимальным образом. Сама техника заключается в том, что мы […]

Реализация на PHP

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

Объединение JavaScript-файлов

Все внешние JavaScript-файлы с сайта можно слить в один большой, загружаемый только один раз и навсегда. Это очень даже хорошо: браузер не делает тысячу запросов на сервер для отображения одной страницы, скорость загрузки резко повышается. А пользователи так же счастливы, как и разработчики. Как всегда, в бочке меда есть ложка дегтя: в объединенный файл попадает […]

Объединение HTML- и CSS-файлов

Число запросов является наиболее узким местом при загрузке страницы. По последним исследованиям порядка 40% времени загрузки уходит только на установление новых соединений с сервером. В этом свете любые методы, позволяющие уменьшить число запросов, выглядят весьма перспективно. Однако каждый такой метод, начиная с простого объединения стилей или скриптов и заканчивая data:URI, достаточно сложен в технологическом плане, […]

Кэширование в iPhone

На MacWorld’2008 Steve Jobs анонсировал, что Apple уже продала на текущий момент 4 миллиона iPhone, что составляет по 20 тысяч iPhone каждый день. В докладе Net Applications говорится, что общая доля пользователей Интернета с iPhone поднялась до 0,12% в декабре 2007, обогнав, в совокупности, все браузеры для мобильных устройств, работающие под управлением Windows. iPhone от […]

Last-Modified и ETag

Давайте рассмотрим, какие существуют альтернативы прямому ограничению повторных загрузок ресурсов со стороны сервера и сохранению их в пользовательском кэше. Last-Modified Дополнительно к заголовку Cache-Control, который предупреждает браузер, что последний может не запрашивать исходный документ с сервера некоторое время, будет полезно проверять версию ресурса каждый раз при запросе. Например, нам нужно, чтобы браузер пользователя проверял файлы […]

SpeedUpYourWebsite.v1.2_img_15

Кэширование в IE: pre-check, post-check

При разработке веб-сайта частота изменения страниц сильно колеблется. Некоторые страницы будут меняться ежедневно, некоторые останутся одними и тем же с самого момента своего создания. Для того, чтобы позволить сайту регулировать частоту, с которой браузер должен запрашивать HTTP-сервер об изменениях в ресурсе, в Internet Explorer 5 было введено 2 расширения HTTP-заголовка Cache-Control: pre-check и post-check. К […]

Expires, Cache-Control и сброс кэша

Кэширование играет одну из основных ролей в быстродействии сайтов и сравнительно просто настраивается на стороне сервера. Веб-разработчики часто сталкиваются с кэшированием, ибо браузеры и проксирующие серверы, пытаясь ускорить работу сайтов для пользователя, очень часто стараются сохранить у себя максимально большое количество документов в локальном кэше. При открытии страницы сайта в браузере (если эта страница была […]

Режем cookie

В качестве заключительного аккорда при рассмотрении уменьшения количества передаваемых данных между сервером и клиентом нужно обязательно упомянуть cookie. Cookie являются одним из HTTP-заголовков, которые браузер посылает на сервер, а сервер вправе им ответить (если копнуть глубже, то существует пара заголовков: Cookie и Set-Cookie — но в данном случае это не так существенно). Общий размер HTTP-заголовков […]

Разгоняем favicon.ico — это как?

В очередной презентации Yahoo! на тему клиентской производительности (часть 2) был поднят вопрос о favicon.ico. Они проводили несколько интересных фактов о данном явлении и давали пару советов. Процитируем их рекомендации. www.mysite.ru/favicon.ico Необходимое зло: Браузер в любом случае ее запросит Лучше не отвечать 404-ошибкой Будут отправлены cookie Не может быть в CDN Мешается в последовательности загрузки […]

PNG против GIF

Переносимый сетевой графический формат (англ. Portable Network Graphics, PNG) разрабатывается как более эффективная, гибкая и свободная от патентов замена GIF- формату. PNG был задуман для хранения отдельных растровых изображений и дальнейшего их распространения по компьютерным сетям. PNG был создан в 1995 в ответ на давление со стороны Unisys и их патента на алгоритм LZW-сжатия, используемый […]

SpeedUpYourWebsite.v1.2_img_12

JavaScript: жать или не жать?

Давайте рассмотрим далее сжатие JavaScript-файлов и проведем анализ всех наиболее известных средств статической минимизации JavaScript-кода. Нам нужно, по сути, ответить на три основных вопроса: Имеет ли смысл пользоваться каким-либо минимизатором JavaScript-кода? Есть ли среди них универсальное средство, показывающее лучшие результаты в подавляющем большинстве случаев? Если такого средства нет, то каковы критерии использования набора инструментов? Итак, […]

SpeedUpYourWebsite.v1.2_img_9

Все о сжатии CSS

Проблема уменьшения CSS-файлов в размере действительно актуальна, и хотелось бы иметь результаты исследования конкретно для такой оптимизации. Оно, собственно, и приведено ниже. В интернете было найдено 5 различных инструментов для минимизации CSS-кода, далее ими обрабатывались несколько примеров, которые затем подвергались еще и архивированию. Результаты представлены в виде графиков. Инструменты CSSMin ( http://code.google.com/p/cssmin/ ). Библиотека проводит […]

CSS и JavaScript в виде архивов

Теперь давайте рассмотрим, каким образом лучше всего будет отдавать CSS- и JavaScript- файлы в архивированном виде. Для обеспечения корректного архивирования, по- видимому, наиболее общий подход будет заключаться в выполнении по порядку следующих пунктов. Проверить, умеет ли клиент принимать файлы в формате gzip-encoded. Обеспечить соответствующий вывод на стороне сервера через gzip-функции либо организовать это непосредственно через […]

SpeedUpYourWebsite.v1.2_img_6

О файловой системе

Вопрос: зачем нужны дополнительные тесты на производительность файловой системы, ведь уже есть характерное время, уходящее на gzip-сжатие определенных размеров файлов? Ответ: во-первых, любой веб-сервер и так берет файл из файловой системы и архивирует уже в памяти, а потом пишет в сокет. Это время уже учтено при установлении соединения с сервером до получения первого байта. Нам лишь […]

SpeedUpYourWebsite.v1.2_img_3

Насколько ресурсоемко архивирование HTML

Архивирование (gzip- , deflate-сжатие) уже давно является наиболее известной техникой оптимизации. Однако применяют ее по-прежнему так же редко, как и 10 лет назад. Я постараюсь максимально подробно осветить проблемные аспекты при использовании сжатия на сервере и указать на возможные методы их решения. Сжатие веб-содержимого посредством gzip (GZU zip) — это довольно старая технология. Суть ее […]

Применение в разработке приложений

Пользователи обычно не знают, какие подходы применяются при разработке, как настроен сервер, какие клиентские и серверные средства разработки используются. Для них лишь важно, насколько сайт полезный, удобный и быстрый. Задача же веб-разработчиков заключается в том, чтобы не доставлять пользователю лишние неудобства, радовать его и, тем самым, стимулировать продажи, идущие через сайт, или число рекламных показов […]

Клиентская и серверная оптимизация: сходство и различия

Клиентская оптимизация оперирует двумя основными принципами: меньше данных и меньше соединений. Но именно эти принципы помогают уменьшить нагрузку на сам сервер. Давайте посмотрим, как это происходит и как перенести часть серверной нагрузки на клиентский браузер. Кэширование во главу угла Сервер может управлять состоянием кэша клиентского браузера, во-первых, через заголовок Cache-Control (и его атрибуты max-age, pre-check, […]

SpeedUpYourWebsite.v1.2_img_2

Стадии загрузки страницы

Рис.2. Стадии загрузки страницы В качестве основных проблемных мест при загрузке страницы любого веб-ресурса можно выделить четыре ключевых момента. Предзагрузка — появление страницы в браузере пользователя. После некоторого времени ожидания загрузки при заходе на веб-ресурс у пользователя в браузере отображается нарисованная страница. В этот момент, вероятно, на странице отсутствуют рисунки и, скорее всего, не полностью […]

Психологические аспекты производительности

Согласно многочисленным исследованиям пользовательское раздражение сильно возрастает, если скорость загрузки страницы превышает 8-10 секунд безо всякого уведомления пользователя о процессе загрузки. Последние работы в этой области показали, что пользователи с широкополосным доступом еще менее терпимы к задержкам при загрузке веб-страниц по сравнению с пользователями с более узким каналом. В проведенном в 2007 году опросе было […]

SpeedUpYourWebsite.v1.2_img_1

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

Цели и задачи оптимизации Каждая веб-страница состоит из основного HTML-файла и набора внешних ресурсов. Говоря о размере страницы (или сайта), очень часто имеют в виду размер именно первого файла, что, естественно, неверно. Рис.1.Тенденция изменения размера страницы и числа объектов для сайтов, проверяемых через Web Optimizator в 2008 году В настоящее время на каждой странице вызывается […]