Производительность сайта

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

Настроить кеш браузера

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

Для того, чтобы включить кеширование нужно прописать в конце .htaccess файла следующий код:

Для того, чтобы включить кеширование нужно прописать в конце .htaccess файла следующий код:

Этот код будет говорить вашему веб-серверу, что картинки нужно кэшировать в течении 1-го года, а CSS, HTML, PDF, JS и SWF — в течении 1-го месяца с момента первой загрузки.

Внимание! Этот код будет работать только на вебсервере Apache. nGinx этот код не воспримет.


Рекомендации по настройке:

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

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

    Исключением являются инструменты аналитики, пример правильной настройки:

    http://www.googletagmanager.com/gtm.js?id=GTM-MFCVJQ (15 минут)

    https://mc.yandex.ru/metrika/watch.js (60 минут)

    http://www.google-analytics.com/analytics.js (2 часа)

Ответ сервера

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


Рекомендации по уменьшению времени ответа сервера:


  • Соберите и тщательно изучите имеющиеся данные о производительности. Если они недоступны, подумайте об использовании автоматического решения для наблюдения за веб-приложениями.
  • Найдите и исправьте проблемные места. Если используется популярная веб-платформа или система управления контентом, советы по оптимизации вы найдете в документации.
  • Отслеживайте и исправляйте любые проблемы производительности.
  • Использование CSS-спрайтов. CSS-спрайт – это комбинированное изображение, которое содержит в себе несколько маленьких изображений, которые в нужный момент для нужного элемента страницы вырезаются используя свойства: background-image и background-position.
  • Использование Inline-картинок. Inline-картинки используют URL-схему data: для встраивания картинки в саму страницу. Это, однако, увеличит размер HTML-документа. Встраивая inline-картинки в ваши таблицы стилей вы добьетесь уменьшения запросов к серверу, а размер HTML останется прежним.
  • Объединение нескольких файлов в один. Если у Вас на страничке подключается больше одного css- или js-файла, то Вы можете объединить их в один. Это очень простой, но действенный способ уменьшения количества http-запросов на сервер.


Оптимизация изображений

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


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

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

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

Несколько онлайн сервисов для оптимизации изображений:

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

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

  • GIF – идеально подходят для изображений с несколькими цветами, например логотип.
  • JPEG – отлично подходят для детализированых изображений с большим количеством цветов, такие как фотографии.
  • PNG – ваш выбор, когда вам нужно высококачественное изображение с прозрачностью.
  • Не используйте BMP и TIFF.


Используйте Gzip- сжатие

Как показали проведенные исследования, gzip-сжатие текстового файла «на лету» в 95–98% случаев позволяет сократить время на передачу файла браузеру. Если хранить архивированные копии файлов на сервере (в памяти proxy-сервера или просто на диске), то соединение в общем случае удается освободить в 3-4 раза быстрее.

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

Accept-Encoding: gzip, deflate

Если веб-сервер видит такой заголовок в запросе, он может применить сжатие ответа одним из методов, перечисленных клиентом. При выдаче ответа посредством заголовка Content-Encoding сервер уведомляет клиента о том, каким методом сжимался ответ.

Content-Encoding: gzip

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


Проверка внедрений будет осуществляться через онлайн сервисы:

  • удовлетворительным показателями для Pingdom будет оценка выше 80 баллов или B
  • удовлетворительным показателями для PageSpeed Insights будет оценка выше 80 баллов или зеленая отметка для Desktop-версии сайта.
  • ответ сервера до 150 мс.

Проверяться будут основные типы страниц сайта:

  • Главная 

  • Категория 

  • Страницы листинга 

  • Карточки товара
Подписаться Подписаться Подписаться