Введение
Быстрое веб-приложение — это успешное веб-приложение. Ваша работа как разработчика не будет завершена до тех пор, пока вы не оптимизируете как реальную, так и воспринимаемую производительность вашего приложения. Это не только правильно, чтобы обеспечить удобство работы пользователей, но и есть очень практические и важные бизнес-причины для оптимизации. Amazon зафиксировал падение продаж на 1% на каждые 100 мс задержки сайта, а Google зафиксировал падение трафика на 20% на каждые 0,5 секунды задержки ( цитата) . Это реальные цифры, имеющие реальные последствия для вашего бизнеса и веб-приложения.
Скорость Интернета настолько важна, что Google даже прилагает все усилия, чтобы сделать Интернет быстрее . Если вам нужна еще одна причина оптимизировать производительность вашего приложения, Google объявил, что скорость страницы была добавлена в их алгоритм ранжирования .
Существует множество опубликованных рекомендаций по оптимизации производительности вашего веб-приложения, в том числе две замечательные книги (« Высокопроизводительные веб-сайты» и «Еще более быстрые веб-сайты» ). Методы на сервере (реализуют правильные заголовки управления кэшем) и на клиенте (предоставляют атрибуты ширины и высоты изображения) объединены в комплексную стратегию оптимизации производительности. С таким количеством советов и подсказок иногда трудно оценить, как все они соотносятся с реальной жизнью и вашим реальным веб-приложением.
К счастью, Chrome DevTools (включенный в каждый экземпляр Chrome) представляет собой отличный инструмент, который проверяет ваше веб-приложение и предлагает индивидуальные рекомендации для повышения производительности и уменьшения задержек. В этой статье будет рассмотрена панель аудита, которая по объему аналогична очень популярному инструменту YSlow , а также то, как вы можете использовать ее для ускорения вашего веб-сайта, уменьшения задержек и повышения удовлетворенности пользователей.
Обратите внимание, что инструмент «Панель аудита» в настоящее время доступен только в Chrome, но мы ожидаем, что со временем его интегрируют и другие браузеры WebKit.
Начиная
Чтобы проиллюстрировать, как группа аудита может рекомендовать улучшение производительности веб-приложений, мы воспользуемся этим инструментом для нашего собственного сайта www.html5rocks.com . Мы будем использовать панель аудита, чтобы сделать наш сайт еще быстрее.
Запустить DevTools так же просто, как использовать значок Chrome (в правом верхнем углу окна Chrome) и выбрать «Инструменты» > «Инструменты разработчика».
Для получения дополнительной информации о том, как начать работу с DevTools, прочтите официальную документацию .
Панель аудитов расположена на панели кнопок основных инструментов. Вы заметите, что после выбора панель аудита еще не провела анализ вашего веб-приложения. Выполнение всех эвристик может быть медленным, особенно для большого веб-приложения, такого как GMail, поэтому по умолчанию этот инструмент отключен.
Давайте углубимся, нажав кнопку «Выполнить», которая перезагружает веб-приложение с включенной эвристикой производительности. После перезагрузки страницы вы увидите список рекомендаций, аналогичный показанному на скриншоте ниже.
Вы заметите, что панель аудита классифицирует предложения по серьезности: наиболее серьезные предложения отмечены красной точкой, а предложения средней серьезности отмечены желтой точкой. Это цветовое кодирование поможет вам расставить приоритеты в предложениях, сосредоточив внимание в первую очередь на наиболее важных (и самых больших выгодах).
Число в скобках, следующее за предложением, обозначает количество экземпляров, обнаруженных инструментом аудита. Например, было 12 случаев «Использовать кеширование браузера». Это дает вам представление о том, как часто можно применять это предложение.
Стратегии скорости
Как упоминалось ранее, существует множество хорошо известных и тщательно проверенных стратегий оптимизации производительности веб-приложений. В этой статье мы не будем подробно описывать их все, но дополнительную информацию и подробности можно найти легко. Полезные ресурсы для получения дополнительной информации об особенностях оптимизации веб-приложений включают руководства «Сделаем Интернет быстрее» и «Задержка высокой масштабируемости повсюду, и это стоит вам продаж» .
Группа аудита группирует свои предложения в две категории: «Использование сети» и «Производительность веб-страниц».
По мнению Аудиторской комиссии, для улучшения использования сети нам следует:
- использовать кеширование браузера
- использовать кэширование прокси
- минимизировать размер файлов cookie
- предоставлять статический контент из домена без файлов cookie
- укажите размеры изображения
Чтобы улучшить производительность веб-страницы, нам следует:
- оптимизировать порядок стилей и скриптов
- удалить неиспользуемые правила CSS
Давайте рассмотрим одну из стратегий, на которой мы можем сосредоточиться, чтобы улучшить производительность htmlrocks.com.
Используйте кэширование браузера
Например, давайте сначала углубимся в рекомендацию использовать кеширование браузера. Что это означает конкретно? Открыв эту опцию в пользовательском интерфейсе, мы видим следующие детали:
- Для следующих ресурсов не указан срок действия кэша. Ресурсы, для которых не указан срок действия, могут не кэшироваться браузерами.
- Следующие кэшируемые ресурсы имеют короткий срок актуальности.
- Следующие ресурсы явно не кэшируются. Подумайте о том, чтобы сделать их кэшируемыми, если это возможно.
Кэширование ресурсов — отличный способ улучшить использование сети, что приводит к снижению расходов на полосу пропускания для разработчика и сокращению времени отклика для пользователя. К сожалению, этот инструмент не говорит вам точно, что вам нужно делать, поэтому нам нужно немного углубиться в рекомендации и использовать наши знания об оптимизации производительности веб-приложений, чтобы применить эти предложения.
Кэширование
Не углубляясь в HTTP-кеширование, мы, безусловно, сможем охватить некоторые основы. Протокол HTTP включает в себя инструкции по кэшированию , позволяющие серверу и клиенту уменьшить объем данных, которые необходимо передать по сети. Например, сервер может сказать клиенту сохранить ресурс локально в течение определенного периода времени, тем самым устраняя необходимость повторного запроса ресурса. Клиент также может спросить, является ли ресурс сервера новее того, который хранится локально. В идеале, если ресурс является статическим, сервер должен указать клиенту хранить ресурс локально и не запрашивать ресурс у сервера в будущем. Как вы понимаете, существует невероятное количество деталей, касающихся HTTP-кэширования, но общая тема — «уменьшить объем данных, передаваемых по сети, путем хранения ресурсов локально на клиенте».
Исправление некэшируемых ресурсов
Давайте подробно рассмотрим одну рекомендацию и узнаем, как связать рекомендацию аудита с другими инструментами DevTools. В частности, давайте посмотрим, как исправить «следующие ресурсы явно не кэшируются».
Поскольку кеширование осуществляется через протокол HTTP, нам необходимо просмотреть HTTP-запрос и ответ для ресурса http://www.html5rocks.com/. Просто нажмите на ресурс, чтобы просмотреть исходные заголовки запроса и ответа, а также подробную информацию.
Затем вы попадете на панель «Сеть», «Ресурсы» или «Источники» (в зависимости от типа выбранного ресурса) с дополнительной информацией. В этом случае мы попадем на панель «Сеть».
Мы пытаемся подтвердить, что сервер сказал клиенту «не кэшировать домашнюю страницу html5rocks.com». Для этого мы нажимаем на ресурс, чтобы просмотреть заголовки ответов, поскольку это заголовки и инструкции, отправленные сервером.
Cache-Control .И действительно, сервер отправил клиенту заголовок «Cache-Control: no-cache». Это, как вы понимаете, говорит клиенту всегда запрашивать ресурс и не кэшировать его локально. В частности, спецификация HTTP для «без кэша» гласит:
«Если в директиве no-cache не указано имя поля, то кэш НЕ ДОЛЖЕН использовать ответ для удовлетворения последующего запроса без успешной повторной проверки на исходном сервере. Это позволяет исходному серверу предотвращать кэширование даже кэшами, которые были настроен на возврат устаревших ответов на запросы клиентов».
Именно поэтому Audits Panel рекомендует включить кэширование, поскольку в противном случае сервер и клиент отправляют потенциально избыточную информацию.
Теперь, когда мы подтвердили основную причину предложения по аудиту, как нам ее исправить? В этом случае решение включает в себя настройку или код на стороне сервера. В зависимости от вашей настройки вы можете включить кеширование через конфигурацию вашего веб-сервера или через конфигурации в платформе вашего веб-приложения. В частности, вам следует включить заголовок Expires и Cache-Control: Private с параметром max-age для любого ресурса, который вы хотите кэшировать.
Предложения – это всего лишь предложения
Помните, что Аудиторская комиссия рекомендует улучшения, основанные на общей эвристике. Он применяет лучшие практики, накопленные за многие годы, к вашему конкретному веб-приложению. В большинстве случаев эти рекомендации точны и их следует принять близко к сердцу.
Однако есть несколько случаев, когда рекомендация может быть правильной, но на самом деле не приведет к какому-либо улучшению. Например, если на вашей странице есть только одно большое изображение, панель аудита рекомендует добавить атрибуты ширины и высоты в тег <img> (чтобы механизм рендеринга знал размеры изображения без необходимости загружать и проверять изображение). Хотя в целом это отличный совет, он не поможет, если изображение будет единственным элементом на странице.
Не забудьте применить эти предложения после того, как вы их поймете. И не забудьте измерить производительность до и после изменений, чтобы убедиться, что улучшение действительно произошло.
Краткое содержание
Панель аудита — отличный и простой в использовании инструмент, который быстро покажет вам, как оптимизировать производительность вашего веб-приложения. Скорость — важнейший атрибут веб-приложения, поскольку многие компании обнаружили прямую корреляцию между производительностью и доходом или активностью. Оптимизация производительности вашего приложения — это не только то, что нужно сделать для ваших пользователей, но и то, что нужно сделать для прибыли вашего бизнеса.