12 способов как ускорить загрузку сайта на Битрикс

Узнай как можно ускорить загрузку сайта на Битрикс в браузере. А так же основные понятия, используемые при оптимизации скорости сайта — CDN, минимизация css, минимизация js и прочее полезное.

Это перевод статьи на тему ускорения загрузки сайта, от 12 декабря 2006 года. Может показаться, что это пыльное старьё, но рекомендаций актуальны и на сегодняшний день.

Оригинал статьи — «Best Practices for Speeding Up Your Web Site».

1. Свести к минимуму HTTP-запросы

80% времени отклика для конечного пользователя тратится на внешний интерфейс (front-end). Большая часть этого времени связана с загрузкой всех компонентов веб-страницы: изображений, таблиц стилей, скриптов, флэш-роликов и др. Чем меньше этих компонентов, тем меньше требуется HTTP-запросов для создания страницы. Это ключевой момент для создания быстрых страниц.

Один из вариантов сократить количество компонентов веб-страницы — это упростить ее дизайн. Но можно ли создавать страницы с разнообразным и богатым содержимым, и при этом с небольшим временем отклика? Вот несколько способов сократить количество HTTP-запросов, сохранив дизайн страницы.

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

CSS-спрайты предпочтительны для уменьшения числа изображений. Объедините фоновые изображения в одно и используйте такие свойства CSS, как background-image и background-position для отображения нужной области.

Карты изображений объединяют несколько изображений в одно. Суммарный размер остается почти прежним, но загрузка страницы ускоряется за счёт меньшего количества HTTP-запросов. Карты изображений применимы лишь в случае смежных картинок, к примеру, панель навигации. Определение координат для карты может потребовать довольно много времени и внимания. Для навигации карты изображений неудобны и поэтому не рекомендуются к использованию.

Встроенные изображения используют схему data: URL scheme для вставки данных изображения прямо на страницу. Это может увеличить размер файла HTML. Чтобы сократить количество HTTP-запросов и не увеличивать размер веб-страницы, встроенные изображения можно сохранять в CSS-файлах (кэширующихся). Встроенные изображения пока поддерживаются не всеми основными браузерами (в частности, не поддерживаются Internet Explorer 5–7, дата публикации — 12 дек. 2006 г. Современный Internet Explorer 11 поддерживает встроенные изображения. Прим. перев.)

Начните с сокращения количества HTTP-запросов на странице. Это важнейшая рекомендация для улучшения производительности страницы у новых посетителей. Как показано в блоге Tenni Theurer Browser Cache Usage — Exposed!, 40-60% ежедневных посетителей сайта приходят с пустым кэшем. Быстрая загрузка страницы при первом посещении улучшает впечатление пользователя от вашего сайта.

2. Использовать сеть доставки контента (CDN — Content Delivery Network)

Расстояние от пользователя до вашего веб-сервера влияет на время отклика. Размещение контента на множестве серверов с различным местоположением позволит пользователям быстрее загружать ваши страницы. Но с чего начать?

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

Помните, что 80-90% времени отклика для конечного пользователя определяется временем загрузки компонентов страницы: картинок, стилей, скриптов, Flash-роликов. Это — золотое правило производительности. Лучше заняться распределением статического контента, чем браться за сложную задачу модификации архитектуры приложения. Это не только существеннее сократит время отклика, но это и легче благодаря сетям доставки контента.

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

Некоторые крупные интернет-компании располагают собственной CDN, но экономичнее использовать CDN-службу провайдера, к примеру, Akamai Technologies, EdgeCast или level3. Стартапы и частные веб-сайты, возможно, не могут позволить себе CDN-службу, но с ростом вашей целевой аудитории и переходом на глобальный уровень CDN становится необходимой. В Yahoo! службы, перенесшие свой статический контент с веб-серверов приложений на CDN (как сторонние, так и внутренние CDN-службы Yahoo), улучшили время отклика для конечных пользователей на 20% и более. Переход на CDN — относительно легкое изменение программного кода, которое значительно улучшит время загрузки вашего сайта.

3. Добавить заголовок Expires или Cache-Control

Это правило включает в себя два аспекта:

• Статические компоненты: установите политику «Never expire» в заголовке Expires
• Динамические компоненты: используйте подходящий заголовок Cache-Control для условных запросов браузера.

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

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

Expires: Thu, 15 Apr 2010 20:00:00 GMT

Если ваш сервер работает на Apache, используйте директиву ExpiresDefault для срока кэширования по отношению к текущей дате. Этот пример директивы ExpiresDefault устанавливает срок хранения на 10 лет относительно текущей даты.

ExpiresDefault «access plus 10 years»

Имейте в виду, что, если вы используете заголовок Expires, вам придется изменить имя компонента при изменении его содержания. В Yahoo! это входит в процесс сборки: номер версии содержится в имени компонента, к примеру, yahoo_2.0.6.js.

Применение заголовка Expires влияет только на просмотр страницы при повторном посещении. Количество HTTP-запросов для новых посетителей с пустым кэшем остается прежним. Следовательно, влияние на производительность зависит от того, как часто пользователи загружают вашу страницу с «полным» кэшем. («Полный» кэш уже содержит все компоненты веб-страницы). В Yahoo! мы провели измерения и обнаружили, что процент посетителей с «полным» кэшем — 75-85%. С помощью заголовка Expires можно увеличить количество компонентов, которые кэшируются в браузере и используются при повторных посещениях страницы, не нагружая интернет-подключение пользователя.

4. Использовать сжатие GZip

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

Начиная с HTTP/1.1, веб-клиенты поддерживают сжатие с заголовком Accept Encoding в HTTP-запросе.

Accept-Encoding: gzip, deflate

Если веб-сервер обнаруживает в запросе этот заголовок, он может сжать компоненты HTTP-отклика с помощью одного из методов, перечисленных клиентом. Веб-сервер оповещает об этом клиента с помощью заголовка Content-Encoding в HTTP- отклике.

Content-Encoding: gzip

Gzip — самый распространённый и эффективный метод сжатия (на дату написания статьи — 12 дек. 2006 г. — Прим. перев.). Другой алгоритм сжатия, который может вам встретиться, — deflate, но он менее эффективен и популярен.

Gzip-сжатие сокращает размер отклика примерно на 70%. Приблизительно 90% интернет-трафика (на дату написания статьи) передается через браузеры, заявляющие о поддержке gzip. Если вы используете Apache, модуль, определяющий настройки сжатия, зависит от версии: Apache 1.3 использует mod_gzip, а Apache 2.x — mod_deflate.

Известны некоторые проблемы с браузерами и прокси-серверами, которые могут вызвать несоответствие между тем, что браузер ожидает получить, и получаемым сжатым контентом. К счастью, эти проблемы сокращаются по мере обновления браузеров. Модули Apache автоматически добавляют к отклику подходящие заголовки Vary.

Веб-серверы определяют, что сжимать, на основании типа файла, но обычно довольно ограничены в этом выборе. Большинство сайтов сжимают HTML-документы. Также стоит сжимать скрипты и стили, но многие сайты упускают эту возможность. В принципе, имеет смысл сжимать любой текстовый отклик, включая XML и JSON. Изображения и PDF- файлы сжимать не стоит, так как они уже сжаты. Применение к ним gzip не только напрасно увеличивает нагрузку на процессор, но также может увеличить размер файла.

Максимально широкое применение сжатия к различным типам файлов — простой способ уменьшить размер страницы и улучшить впечатление пользователя.

5. Располагать таблицы стилей в начале документа

Во время исследования производительности в Yahoo! мы обнаружили, что в результате переноса таблиц стилей в раздел страницы HEAD страница кажется более быстрой. Причина этого в том, что при расположении стилей в разделе HEAD страница визуализируется постепенно.

Разработчики фронт-энда, заинтересованные в высокой производительности, предпочитают постепенную загрузку страницы, то есть, мы хотим, чтобы браузер отображал имеющийся контент по мере его получения. Это особенно важно для высоконагруженных страниц и пользователей с медленным подключением. Существуют исследования и документы, доказывающие важность обратной связи для пользователей, например, индикаторов загрузки. В нашем случае HTML-страница и есть индикатор загрузки! При постепенной загрузке шапки, навигационной панели, логотипа в шапке все эти компоненты выполняют функцию обратной связи для пользователя, ожидающего загрузки страницы. Это улучшает общее впечатление пользователя.

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

Спецификация HTML явно подчеркивает, что таблицы стилей должны находиться в разделе HEAD: «В отличие от элемента A, элемент LINK может находиться только в разделе HEAD, но появляться может неограниченное число раз». Ни одна из альтернатив, пустой белый экран или поток нестилизованного контента, риска не стоит. Наилучшее решение — следовать спецификации HTML и загружать стили в разделе HEAD.

Для ещё большего ускорения загрузки сайта объединённый CSS-файл можно перенести вниз страницы, перед закрывающим тегом (до подключения JS). При таком подходе страница будет выглядеть «разваленной», до загрузки и обработки CSS. Чтобы пользователь сайта видел уже «готовую» страницу, можно использовать прелоадер, например такой — jpreloader.

Ещё вариант, использовать анимированный CSS-прелоадер. Пример такой реализации можно увидеть на сайте ТестСертификатов.

6. Располагать скрипты в конце документа

Проблема со скриптами состоит в том, что они блокируют параллельные загрузки. Спецификация HTTP/1.1 рекомендует браузерам загружать параллельно не более двух компонентов с одного хоста. Если вы храните изображения на разных хостах, можно получить более двух параллельных загрузок. Однако во время загрузки скрипта браузер не будет принимать другие загрузки, даже с других хостов.

В некоторых ситуациях непросто перенести скрипты вниз. Если, к примеру, скрипт использует метод document.write для создания контента страницы, его нельзя переносить вниз. Также могут быть проблемы с ограничением объектов. Во многих случаях эти ситуации можно обойти.

Альтернативный вариант — использовать отложенные скрипты с атрибутом DEFER, который указывает, что скрипт не использует метод document.write и браузер может продолжать визуализацию. К сожалению, Firefox не поддерживает атрибут DEFER. В Internet Explorer скрипты можно откладывать. Если скрипт можно отложить, его можно также перенести вниз страницы, что позволит быстрее загружать ее.

7. Избегать выражений в CSS

Выражения CSS — мощное (и опасное) средство динамического задания CSS-свойств. Они поддерживались в Internet Explorer с 5 версии, но объявлены устаревшими, начиная с IE8. К примеру, цвет фона можно менять каждый час с помощью выражений CSS:

background-color: expression( (new Date()).getHours()%2 ? «#B8D4FF» : «#F08A00» );

Как показано здесь, метод expression принимает выражения JavaScript. Свойство CSS определяется результатом выражения JavaScript. Метод expression игнорируется другими браузерами, так что его можно использовать при задании свойств в Internet Explorer для одинаковой визуализации в различных браузерах.

Проблема с выражениями в том, что они вычисляются чаще, чем ожидают многие разработчики. Они вычисляются не только в процессе отображения и изменения размеров страницы, но и во время скроллинга и движения мышкой. Если добавить счётчик в выражение CSS, можно увидеть, когда и как часто вычисляется выражение. Движение мышкой по странице может создать более 10 000 пересчётов.

Один из способов сократить число пересчётов выражения CSS — использовать одноразовые выражения, в которых при первом расчёте выражения устанавливается явное значение свойства, заменяющее собой выражение CSS. Если свойство должно динамически переопределяться в течение работы страницы, можно использовать обработчики событий вместо выражений CSS. Если же все-таки вам приходится использовать выражения CSS, помните, что они пересчитываются тысячи раз и это может повлиять на производительность страницы.

8. Выносить JavaScript и CSS из тела страницы

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

Использование отдельных файлов на самом деле ускоряет загрузку страниц, потому что файлы JavaScript и CSS кэшируются браузером. JavaScript и CSS, встроенные в HTML, загружаются каждый раз при запросе HTML-документа. Это сокращает число HTTP-запросов, но увеличивает размер HTML-документа. С другой стороны, если JavaScript и CSS находятся во внешних файлах, кэшируемых браузером, размер HTML-документа сокращается с сохранением числа HTTP-запросов.

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

Многие сайты находятся где-то посередине этих метрик. Для них, возможно, лучшее решение состоит в вынесении JavaScript и CSS во внешние файлы. Встраивание предпочтительно только для стартовых страниц, таких, как стартовая страница Yahoo! и My Yahoo!. Стартовые страницы, которые получают мало просмотров за сессию (возможно, всего один), могут получить меньшее время отклика за счёт встраивания скриптов и стилей в тело страницы.

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

9. Минимизировать JavaScript и CSS

Минимизация — удаление лишних символов из кода, чтобы сократить его размер и уменьшить время загрузки. При минимизации кода удаляются комментарии и ненужные разделители (пробел, абзац и табуляция). В случае JavaScript это уменьшает время отклика вследствие уменьшения размера загружаемого файла. Два популярных инструмента для минимизации JavaScript — JSMin и YUI Compressor. Последний также может минимизировать CSS. Обфускация — альтернативный способ оптимизации исходников кода. Это более сложный процесс, чем минимизация, и поэтому более склонный к созданию багов в результате самого процесса обфускации. В исследовании 10 популярных веб-сайтов в США минимизация показала 21% сокращения, а обфускация — 25%. Хотя у обфускации более высокий коэффициент сокращения размера, минимизация JavaScript безопаснее.

10. Избегать редиректов

Редиректы выполняются с помощью кодов 301 и 302. Ниже пример HTTP-заголовков в отклике 301:

HTTP/1.1 301 Moved Permanently Location: http://example.com/newuri Content-Type: text/html

Браузер автоматически перенаправляет пользователя по ссылке, указанной в поле Location. Вся необходимая для перенаправления информация содержится в заголовках. Тело отклика обычно пустое. Несмотря на названия, практически ни 301, ни 302 отклик не кэшируются, если только нет дополнительных заголовков Expires или Cache-Control, которые указывают на необходимость кэширования. Мета-тег refresh и JavaScript также используются для перенаправления пользователей по другому адресу, но, если вам необходимо сделать редирект, предпочтительнее использовать стандартные HTTP-коды 3хх, в частности, чтобы обеспечить правильную работу кнопки «Назад».

Главное, нужно запомнить, что редиректы замедляют работу сайта для пользователя. Редирект между пользователем и HTML-документом откладывает визуализацию страницы, поскольку страница не может отобразиться и не начинается загрузка компонентов, пока не получен HTML-документ.

Один из наиболее бесполезных редиректов происходит довольно часто, и разработчики обычно не знают о нем. Он случается, когда закрывающая косая черта (/) отсутствует в URL, хотя она должна там быть. К примеру, клик по http://astrology.yahoo.com/astrology приводит к отклику с кодом 301, содержащему редирект по адресу http://astrology.yahoo.com/astrology/. Это можно исправить в Apache с помощью Alias или mod_rewrite, или директивы DirectorySlash, если вы используете обработчики Apache.

Связывание старого веб-сайта с новым — другой распространенный повод использования редиректов. Остальные включают соединение частей сайта и перенаправление пользователя на основании определенных условий (тип браузера, тип аккаунта и др.). Редирект для связывания сайтов довольно прост и не требует много кода. Хотя в этих ситуация перенаправление упрощает ситуацию для разработчиков, оно ухудшает впечатление пользователя. Альтернативой редиректу является использование Alias и mod_rewrite, если оба адреса находятся на одном сервере. Если причина редиректа — разные доменные имена, можно использовать CNAME (DNS запись, которая создает псевдоним, указывающий с одного доменного имени на другое) в сочетании с Alias и mod_rewrite.

11. Удалять дублирующие скрипты

Повторное включение файлов JavaScript ухудшает производительность страницы, и это не так уж редко встречается. Обзор десяти популярных сайтов США показывает, что два из них содержат дублирующие скрипты. Два главных фактора увеличивают вероятность дублирования скрипта на странице: размер команды разработчиков и число скриптов. Когда это случается, дублирующие скрипты ухудшают производительность вследствие ненужных HTTP-запросов и выполнения JavaScript.

Ненужные HTTP-запросы случаются в Internet Explorer, но не в Firefox. В Internet Explorer, в случае если внешний скрипт включается дважды и не кэшируется, создается два HTTP-запроса во время загрузки страницы. Даже если скрипт кэшируется, лишние HTTP-запросы происходят при перезагрузке страницы.

Кроме создания лишних HTTP-запросов, время теряется на повторную оценку скрипта. Это избыточная обработка JavaScript происходит и в Internet Explorer, и в Firefox, независимо от кэширования скрипта.

Один из способов избежать дублирования скриптов — внедрить управление скриптами в системе управления шаблонами. Типичный способ включить скрипт — использовать тег SCRIPT на HTML-странице:

<script type="text/javascript" src="menu_1.0.17.js">

Вместо этого в PHP можно добавить функцию insertScript.

<?php insertScript("menu.js") ? >

Помимо запрета на дублирование скрипта, эта функция может обрабатывать и другие проблемы со скриптами, к примеру, проверка зависимостей и добавление номера версии в имя файла скрипта для поддержки будущих заголовков Expires.

12. Настроить ETag

Теги сущностей (ETag) — механизм, используемый веб-серверами и браузерами, чтобы определить, соответствует ли компонент в кэше браузера компоненту на исходном сервере. («Сущность» — другой термин для компонента: изображений, скриптов, стилей и др.) ETag были добавлены для более гибкой проверки сущностей, чем по дате последнего изменения. ETag — это строка, определяющая версию компонента. Единственное ограничение по формату — заключение строки в кавычки. Исходный сервер определяет ETag компонента с помощью ETag в заголовке отклика.

HTTP/1.1 200 OK Last-Modified: Tue, 12 Dec 2006 03:03:59 GMT ETag: «10c24bc-4ab-457e1c1f» Content-Length: 12195

Позднее, если браузеру нужно сверить компонент, используется заголовок If-None-Match для передачи ETag обратно на исходный сервер. Если ETag совпадают, возвращается код 304, что в данном примере сокращает отклик на 12195 байтов.

GET /i/yahoo.gif HTTP/1.1 Host: us.yimg.com If-Modified-Since: Tue, 12 Dec 2006 03:03:59 GMT If-None-Match: «10c24bc-4ab-457e1c1f» HTTP/1.1 304 Not Modified

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

Формат ETag для Apache 1.3 и 2.х — inode-size-timestamp. Хотя файл может находиться в той же директории между несколькими серверами, иметь тот же размер, разрешения, временной штамп и др., его атрибут inode будет отличаться в зависимости от конкретного сервера.

IIS 5.0 и 6.0 имеют ту же проблему с ETag. Формат ETag на IIS — Filetimestamp:ChangeNumber. Атрибут ChangeNumber — счётчик, отслеживающий изменения конфигурации IIS. Маловероятно, что ChangeNumber будет одинаковым на всех веб-серверах сайта.

В результате ETag, созданный Apache или IIS для одного и того же компонента, не будут совпадать на разных серверах. Если ETag не совпадают, пользователь получит вместо маленького и быстрого 304 отклика, для которого ETag и были созданы, обычный 200 отклик вместе со всеми данными компонента. Если ваш сайт содержится всего на одном сервере, это не проблема. Но если на нескольких, и вы используете Apache или IIS с дефолтными настройками ETag, пользователи медленнее загружают ваши страницы, а прокси-сервера неэффективно кэшируют ваш контент. Даже если ваши компоненты помечены заголовком Expires, все равно создается условный запрос GET, когда пользователь нажимает «Перезагрузить» или «Обновить».

Если вы не пользуетесь гибкой моделью сверки, предоставляемой ETag, лучше просто удалить их. Сверка заголовка Last-Modified основана на временном штампе компонента. Удаление ETag сократит размер HTTP-заголовков как в отклике, так и в последующих запросах. Следующая статья Microsoft Support описывает удаление тегов для IIS. Если вы используете Apache, это можно сделать, просто добавив следующую строку в файл конфигурации Apache:

FileETag none