Рекомендации по увеличению производительности сайта

В этой инструкции идет речь о технических исправлениях и доработках в 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-запросов на сервер.

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

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

Вход

Редактировать профиль

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

Подписка на рассылку

Рекомендации по увеличению производительности сайта

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