Общая информация

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

Рекомендации

Включите для своего сервера кеширование в браузере. Продолжительность хранения статических ресурсов в кеше должна составлять не менее недели. Внешние ресурсы (объявления, виджеты и др.) должны храниться не менее 1 дня. Рекомендуется использовать следующие установки для всех кешируемых ресурсов:

• В заголовке Expires следует указать период от недели (минимум) до года (рекомендуется). Лучше использовать Expires, чем Cache-Control: max-age, так как он более широко поддерживается. Не устанавливайте срок больше одного года: это является нарушением правил RFC.
• Если вы точно знаете дату будущего изменения ресурса, можно установить более короткий период. Если же конкретная дата неизвестна, лучше использовать более продолжительный срок и цифровые отпечатки URL (см. ниже).

Заголовки Expires и Cache-Control: max-age

Эти заголовки указывают, в течение какого периода браузер может использовать кешированные ресурсы, не запрашивая на веб-сервере их возможные обновления. Эти "сильные" заголовки действуют в обязательном порядке. После их установки и загрузки ресурса браузер не будет отправлять запросы GET на веб-сервер до истечения срока действия или очистки кеша пользователем.

Заголовки Last-Modifed и ETag

Эти заголовки указывают, как браузер должен устанавливать тождественность файлов при кешировании. В заголовке Last-Modified для этого используется дата. Заголовок ETag использует любой уникальный идентификатор ресурса (чаще всего это версия файла или хеш контента). Last-Modified – "слабый" заголовок, так как браузер применяет эвристические алгоритмы, чтобы определить, запрашивать ли элемент из кеша.

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

Какие заголовки кеширования лучше использовать?

Для всех кешируемых ресурсов нужно обязательно указывать один заголовок из пары Expires и Cache-Control max-age, а также один заголовок из пары Last-Modified и ETag. Использовать и Expires, и Cache-Control: max-age излишне, как и указывать Last-Modified и ETag одновременно.

Как использовать цифровые отпечатки URL

Если ресурс время от времени изменяется, браузер может кешировать его до момента изменения, о чем сервер автоматически сообщит браузеру. Для этого каждой версии ресурса присваивается уникальный URL. Например, у вас есть ресурс под названием my_stylesheet.css. Мы можем переименовать этот файл, назвав его my_stylesheet_fingerprint.css. При изменении ресурса изменяется и его цифровой отпечаток, и, следовательно, его URL. Как только URL изменился, браузер повторно загружает ресурс. Цифровые отпечатки позволяют использовать длительные сроки действия, даже если ресурс часто изменяется.

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

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

Общая информация

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

В примере ниже показано, какая переадресация допустима, а какая – нет:

• Хорошо: на странице example.com используется адаптивный веб-дизайн, переадресация не выполняется.
• Удовлетворительно: выполняется переадресация example.com -> m.example.com/home
• Плохо: выполняется переадресация example.com -> www.example.com -> m.example.com -> m.example.com/home.

Рекомендации

В соответствии с рекомендациями Google по разработке адаптивного веб-дизайна, переадресации следует избегать.

Если же это необходимо, соблюдайте следующие требования:

• Используйте переадресацию HTTP, чтобы пользователи мобильных устройств переходили непосредственно на мобильный сайт без промежуточных страниц.
• Чтобы робот Googlebot мог обнаружить мобильные страницы на сайте для настольных ПК, добавьте в них тег &ltlink rel="alternate"&gt.

Общая информация

Многие веб-серверы могут перед отправкой сжимать файлы в формат GZIP, используя собственные процедуры или сторонние модули. Это позволяет ускорить загрузку ресурсов, необходимых для отображения веб-сайта.

Рекомендации

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

• Apache: используйте mod_deflate.
• Nginx: используйте HttpGzipModule.
• IIS: настройте сжатие HTTP.

Общая информация

Время ответа сервера определяет, сколько занимает загрузка кода HTML для отображения страницы. Задержка сети между нашим и вашим сервером не учитывается. Это время может варьироваться в незначительном диапазоне. Если время ответа сервера колеблется слишком сильно, возможно, это связано с проблемами производительности.

Рекомендации

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

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

Общая информация

Размер ресурса можно уменьшить, удалив ненужные байты, например лишние пробелы, переносы строки и отступы. Сократив код HTML, CSS и JavaScript, вы ускорите загрузку, синтаксический анализ и отображение страницы. Кроме того, размер CSS и JavaScript можно уменьшить, переименовав переменные (при условии корректного обновления HTML и работы селекторов).

Рекомендации

Уменьшите объем HTML, CSS и JavaScript.

Чтобы оптимизировать код HTML, можно использовать расширение PageSpeed Insights для браузера Chrome. Выполните анализ страницы и перейдите к правилу "Сократите HTML". Чтобы оптимизировать код HTML, нажмите "Просмотреть оптимизированное содержание".

Чтобы уменьшить объем CSS, используйте инструменты YUI Compressor и cssmin.js.

Для оптимизации JavaScript можно использовать Closure Compiler, JSMin или YUI Compressor. Вы можете разработать программу, которая будет использовать эти инструменты, переименовывать файлы и сохранять их в рабочий каталог.

Общая информация

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

Рекомендации

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

Встройте небольшие ресурсы JavaScript

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

<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

а ресурс small.js выглядит так:

  /* contents of a small JavaScript file */

то этот скрипт можно встроить, как показано ниже:

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

Это избавит от необходимости выполнять внешний запрос small.js, так как он располагается внутри документа HTML.

Отложите загрузку кода JavaScript

Чтобы код JavaScript не блокировал загрузку страницы, используйте атрибут async. Например:

<script async src="my.js">

Если в ресурсах JavaScript используется метод document.write, использовать асинхронную загрузку небезопасно. Рекомендуется переписать скрипты с использованием других средств.

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

Часто задаваемые вопросы

Что, если я использую библиотеку JavaScript, например jQuery?

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

Что, если я использую среду JavaScript для создания страницы?

Если содержание страницы создано кодом JavaScript на стороне клиента, попробуйте встроить соответствующие модули JavaScript, чтобы избежать лишних запросов к серверу. Кроме того, оптимизация обработки на стороне сервера может ускорить первую загрузку страницы. Обработайте шаблоны JavaScript на сервере, встройте результаты в HTML, а потом используйте шаблоны на стороне клиента после загрузки приложения. Чтобы получить более подробную информацию по обработке на стороне сервера, см. видео: http://youtu.be/VKTWdaupft0?t=14m28s.

Общая информация

Браузеры запрашивают внешние файлы CSS перед отображением контента на экране. Это приводит к задержке и замедляет обработку страницы.

Рекомендации

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

• Пример встраивания небольшого файла CSS
• Не встраивайте URI больших объемов данных
• Не встраивайте атрибуты CSS

Пример встраивания небольшого файла CSS

Если документ HTML выглядит следующим образом:

<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>

а ресурс small.css имеет вид

  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }

то вы можете встроить необходимый код CSS следующим образом:

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
<link rel="stylesheet" href="small.css">

Оригинальный файл small.css загружается после загрузки страницы. Порядок применения правил CSS определяется путем внедрения всех элементов <style> и <link> в документ с помощью JavaScript.

Не встраивайте URI больших объемов данных

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

Не встраивайте атрибуты CSS

Не следует встраивать атрибуты CSS в элементы HTML (например, &lt p style=...&gt), так как это приводит к излишнему дублированию кода. Кроме того, подобное встраивание по умолчанию блокируется правилами по безопасности контента.

Общая информация

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

Рекомендации

Следует проводить базовую и расширенную оптимизацию всех изображений. В рамках базовой оптимизации обрезаются ненужные поля, уменьшается глубина цвета (до минимально приемлемого значения), удаляются комментарии и изображение сохраняется в подходящем формате. Базовую оптимизацию можно выполнить с помощью любой программы для редактирования изображений, например GIMP. При расширенной оптимизации проводится сжатие файлов JPEG и PNG (без потерь).

Используйте инструменты сжатия изображений

Существуют инструменты, выполняющие дополнительное сжатие файлов JPEG и PNG без потерь и снижения качества. Для файлов JPEG рекомендуется использовать jpegtran или jpegoptim (доступно только для Linux, выполнять с параметром --strip-all). Для PNG лучше использовать OptiPNG или PNGOUT.

Выберите подходящий формат файла изображения

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

• PNG почти во всем превосходит GIF, хотя некоторые прежние версии браузеров могут поддерживать PNG лишь частично.
• Используйте GIF для очень маленьких или простых изображений (если размер меньше 10 x 10 пикселей или в палитре менее 3 цветов), а также для изображений, содержащих анимацию.
• Используйте JPG для фотографий.
• Не используйте BMP и TIFF.

Общая информация

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

Рекомендации

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

• Измените структуру HTML таким образом, чтобы сначала загружался важный контент, располагающийся в верхней части страницы.
• Уменьшите объем данных, которые используются вашими ресурсами.

Измените структуру HTML, чтобы сначала загружался важный контент, располагающийся в верхней части страницы

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

Изучите рекомендации по ускорению загрузки в примерах ниже:

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

Уменьшите объем данных, которые используются вашими ресурсами

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

• Уменьшите объем ресурсов. Объем HTML, CSS и JavaScript можно снизить, удалив ненужные пробелы и комментарии. Для дальнейшей оптимизации можно использовать инструменты, изменяющие названия переменных.
• При возможности используйте CSS вместо изображений.
• Включите сжатие.