О сервисе

Как это работает?

Что такое 2seconds.Ru? Это сервис, который помогает автоматизировать операции, необходимые для ускорения загрузки сайта: склейку файлов CSS и JavaScript в один файл, их минификацию, встраивание небольших файлов с помощью url:data.
Особенностями сервиса является возможность быстро получить список файлов для обработки из HTML-кода указанной страницы, а также возможность извлечь список исходных файлов из сжатой версии, что позволяет быстро оптимизировать сайт повторно после внесения каких-либо изменений в исходные файлы (подробнее см. «Настройки сервиса»).

Зачем вообще нужна оптимизация? Долгое ожидание загрузки страниц вызывает у посетителя спад интереса и желание закончить работу с таким сайтом. На сайтах, которые грузятся быстро, пользователи просмотрят большее количество статей и товаров, напишут больше комментариев, с большей вероятностью перейдут по контекстной рекламе. На сайте Habrahabr.Ru есть подборка материалов о том, как изменение времени загрузки сайта повлияло на поведение пользователей. Кроме этого, скорость загрузки оказывает влияние и на позиции в выдаче поисковых систем как прямо (учитывается как один из факторов ранжирования), так и косвенно, через поведенческие факторы.

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

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

Рассмотрим пример. Пусть какая-нибудь небольшая Web-страница содержит небольших 24 картинки, каждая из которых загружается всего за 1 мс (при скорости в 30 Мбит/с это около 4 Кб), а на запрос к серверу и ожидание ответа от него уходит 150 мс (это вполне типичный показатель). Общее время загрузки страницы будет складываться так: 151 мс на загрузку HTML, 151 мс на загрузку первых 8 изображений, 151 мс на загрузку вторых 8 изображений, 151 мс на загрузку последних 8 изображений — итого 604 мс. То есть даже если сайт занимает всего 100 Кб, он будет грузиться более чем полсекунды из-за большого количества HTTP-запросов.

Как измерить время загрузки сайта? Самый простой способ — очистить кеш и после этого засечь время до отображения сайта с помощью секундомера. Однако такое измерение не будет точным, поэтому лучше воспользоваться специальными сервисами — GTMetrix и WebPageTest (см. раздел «Другие инструменты»).

Важными для сайта являются три параметра:

• Время ожидания первого байта (TTFB) — момент, когда от сервера приходит начало HTML-кода. Он во многом зависит от сетевой инфраструктуры хостера и того, насколько оптимизирована серверная часть сайта.
• Время готовности DOM-модели страницы (DOM load time) — время момента, когда на стороне клиента будет разобран полученный HTML-код и загружены найденные в нем таблицы стилей CSS и JavaScript (кроме асинхронных и отложенных). Это самый важный для оптимизации показатель, так как именно он определяет момент, когда пользователь начинает видеть что-то на экране.
• Время полной загрузки страницы — момент, когда страница будет загружена полностью со всеми вспомогательными элементами: графическими изображениями и отложенными скриптами.

При оптимизации сайтов нередко бывают ситуации, когда улучшение второго показателя (DOM load time) ведет к ухудшению третьего — полного времени загрузки. Такое происходит из-за того, что загрузка вспомогательных элементов начинается позже.

Как ускорить загрузку? Оптимизацию загрузки в общем случае можно разделить на четыре этапа:

1. Уменьшаем объем отдельных файлов. Часто файлы CSS и JavaScript содержат много ненужной информации, которую верстальщики и программисты вставляют для того, чтобы эти файлы удобно читать и редактировать, например, комментарии или отступы пробелами. Для того, чтобы компьютер отобразил сайт, эта информация совершенно не нужна, и ее можно удалить. Такое удаление называется минификацией или сжатием файла. На этом же этапе можно выполнить оптимизацию графических файлов с целью уменьшения их размера (например, пересохранение JPEG с более низким качеством и без EXIF-информации, и преобразование True Color PNG в 8-битные изображения).
2. Уменьшаем количество HTTP-запросов. Для этого подключаемые файлы с CSS склеиваются в один большой файл, а небольшие графические файлы (например, заполнители фона или значки) встраиваются непосредственно в CSS с помощью методики data in url. То же самое делается и для JavaScript. Таким образом вместо нескольких десятков запросов к серверу для скачивания каждого файла по отдельности делается всего два запроса: для скачивания файлов all.min.css и all.min.js.
3. Делаем отложенную загрузку второстепенных элементов. Часто на сайте есть элементы, которые требуют загрузки JavaScript, но могут быть отрисованы с некоторой задержкой, уже после того, как пользователю будет показан основной контент. Примером таковых являются виджеты социальных сетей или онлайн-консультанты. Задача третьего этапа оптимизации — сделать так, чтобы загрузка скриптов, необходимые для их работы, не блокировала первую отрисовку страницы, а шла либо параллельно с ней, либо происходила уже после первой отрисовки. Во многих случаях оказывается достаточным прописать атрибут async для тега скрипта, или же удалить тег скрипта из HTML и сделать его добавление в обработчике события DOMready.
4. Оптимизируем серверную часть. На этом этапе происходит настройка разных видов кеширования на сервере и изменение ряда других параметров в его настройках, например, включение опции Keep Alive, позволяющей делать несколько последовательных запросов за одно соединение.

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

Настройки сервиса

• Получить список исходных несжатых CSS и JavaScript, если это возможно

  Если на сайте обнаружены файлы all.min.css или all.min.js, сгенерированные нашим сервисом, в них будет выполнена проверка на наличие списка исходных файлов. Если такой список будет найден, то в списке файлов для шагов 2 и 3 будут выведены исходные файлы. Это дает возможность быстро переоптимизировать сайт, если в исходные файлы были внесены какие-то изменения без необходимости прописывать эти исходные файлы в HTML-код сайта или указывать пути к ним вручную.

• Добавить в сжатый файл список исходных файлов

  Если опция включена, то в последнюю строку добавляется список несжатых файлов в виде комментария. Нужно для корректной работы опции «Получить список несжатых файлов» на шаге 1.

• Минифицировать CSS

  Снятие этой галочки позволяет отключить минификацию CSS в отладочных целях.

• Обработать директиву @import

  Когда данная опция включена, сервис заменяет директивы @import в CSS-файлах на содержимое этих файлов. Отключайте только в целях отладки.

• Коррекция путей к графическим файлам в CSS

  Если пути, указанные к файлам с помощью url() — относительные, то они станут некорректными в том случае, если all.min.css оказывается не в том другом каталоге, в котором размещался исходный файл. Чтобы этого избежать, сервис позволяет при склеивании CSS произвести их коррекцию: либо заменить относительный путь на абсолютный от корня сайта (рекомендуется, если все CSS находятся на одном сервере), либо на полный URL с указанием домена (следует использовать, когда есть CSS, подгружаемые с других серверов).

• Минифицировать JavaScript

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

Условия и ограничения использования сервиса. Сервис доступен для использования бесплатно и предоставляется на условиях «КАК ЕСТЬ» без каких-либо гарантий. Владелец сервиса не несет какой-либо ответственности за возможные потери данных или упущенную выгоду, возникшие вследствие использования сервиса. Не забывайте делать резервные копии перед внесением изменений в свой сайт!

Технические ограничения:

• Максимальное количество обрабатываемых URL за запрос: 40
• Максимальный размер HTML-файла на первом шаге: 256 Кб
• Максимальный размер каждого CSS-файла на втором шаге: 380 Кб
• Максимальный размер каждого JavaScript-файла на третьем шаге: 512 Кб
• Максимальный размер встраиваемых в CSS файлов: 64 Кб
• Ограничение по запросам: 1 запрос в секунду с одного IP-адреса

FAQ

Что делать, если после оптимизации сайт стал некорректно работать?

Сначала провести валидацию CSS-файлов и убедиться, что в них нет ошибок. Если проблема не исчезнет, попробовать следующее:

1. Выставить опцию «Полный URL с указанием домена» для CSS-файлов
2. Убрать из списка файлов для оптимизации те файлы, которые расположены на внешних доменах. Многие скрипты для корректной работы должны загружаться непосредственно со своих серверов (например, виджеты социальных сетей). Хотя в нашем сервисе существует стоп-лист для наиболее популярных скриптов, он является далеко не полным.
3. Отключить минификацию, ограничившись просто склейкой в один файл.

Почему сервис на первом шаге находит не все файлы CSS и JavaScript?

Сервис находит только те файлы, которые подключаются с помощью тегов link с атрибутом rel=stylesheet и srcipt с атрибутом src, прописанных непосредственно в коде HTML. Файлы, подключаемые через JavaScript, не определяются, но вы можете добавить их в список вручную. Кроме этого, для JavaScript существует стоп-лист, в котором перечислены скрипты, склейка которых в локальный файл ведет к нарушению их корректной работы. На первом шаге такие скрипты просто не включаются в список обнаруженных на сайте.

Google Page Speed Insights сообщает о блокирующем CSS после оптимизации. Что с этим делать?

Воспользоваться утилитой Critical CSS Bookmarklet (см. раздел «Другие инструменты»): извлечь с помощью нее ту часть CSS, которая нужна для отображения верхней части страницы, и вставить непосредственно в тег style внутри HTML в секции head. Однако это имеет смысл делать только в том случае, если файл all.min.css имеет достаточно большой размер (около 100 Кб и выше). В противном случае экономия времени оказывается слишком незначительной, а объем траффика при просмотре нескольких страниц пользователем увеличивается. Исключением являются сайты-одностраничники: в их случае имеет смысл переносить весь CSS в тег style целиком.

Можно ли подключать скрипт all.min.js с аттрибутом async?

Зависит от того, есть ли у вас inline-скрипты (т.е. размещенные прямо в HTML-коде страницы), которые зависят от вынесенных в all.min.js библиотек. Если таковых не имеется, то аттрибут async использовать можно и даже желательно. Если есть, то имеет смысл подумать об их переносе в JavaScript-файлы.

Имеет ли смысл включать в all.min.js файлы, расположенные на CDN Яндекса или Google?

Зависит от общего объема JavaScript на сайте. Если он мал (файл all.min.js получается менее 300 Кб), то имеет смысл включать его в общий файл. Если больше, то имеет смысл оставить его на CDN, чтобы загрузка шла параллельно с другими данными. Однако в этом случае вам, скорее всего, придется сделать его загрузку блокирующей, что нежелательно.

Всегда ли имеет смысл склеивать все стилевые файлы и скрипты в один?

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

Что лучше: объединять несколько графических файлов в спрайт или использовать url:data?

Объединять графические файлы в спрайты (CSS sprites) имеет смысл в том случае, когда они имеют одинаковые размеры и цветовую гамму (скажем, набор иконок 32x32 для различных действий), чтобы весь файл спрайта можно было преобразовать в 8-битный PNG без существенных цветовых искажений. В остальных случаях, как правило, преобразовать каждое изображение в 8-битный PNG и вставить его прямо в CSS с помощью url:data оказывается более выгодно.

Имеет ли смысл использовать скрипты, позволяющие делать минификацию непосредственно на моем сервере?

Хотя такие скрипты могут быть удобнее в плане использования, они создают дополнительную нагрузку на сервер. Время выдачи CSS или JavaScript, если файл с ними генерируется скриптом, всегда будет чуть больше (обычно порядка 100 мс), чем для выдачи того же файла из статического файла из-за необходимости запускать этот скрипт. Кроме этого, не все подобные скрипты содержат необходимые проверки безопасности и поддерживают выдачу заголовков для корректного кеширования.

Какие еще действия можно сделать для улучшения работы сайта?

• Настроить корректное кеширование статических файлов и сжатие данных GZIP.
• Оптимизировать изображения с помощью jpegoptim и TinyPNG (см. раздел «Другие инструменты»).
• Преобразовать изображения JPEG в WebP и настроить их выдачу.
• Для сайтов на PHP — попробовать перейти на PHP 7 или установить opcode-кеш (например, XCache).

Другие инструменты

• GTMetrix — сервис измерения времени загрузки сайта и его оптимизированности по множеству параметров
• WebPageTest — еще один сервис измерения времени загрузки с возможностью определения времени первой отрисовки
• Google Page Speed Insights — инструмент от Google для оценки оптимизированности загрузки сайта
• RedBot — сервис проверки HTTP-заголовков и корректности выдачи статуса 304.

• Critical CSS Bookmarklet — небольшой скрипт для developer console в Chrome, позволяющий извлечь из CSS ту часть, которая необходима для неблокирующего отображения верхней части страницы.

• TinyPNG — преобразование 24-битных PNG в 8-битные с минимальными потерями качества.
• CSS Sprite generator — сервис для объединения графических изображений в один файл (спрайт).
• mozjpeg — онлайн-сервис оптимизации JPEG-изображений.
• jpegoptim — утилита командной строки для оптимизации изображений JPEG и удаления из них лишней информации.

• Блог о Web-разработке, который ведет создатель данного сайта.

• Валидатор HTML
• Валидатор CSS