10 способов ускорить загрузку вашего сайта

Существует множество причин, почему у пользователей может медленно загружаться сайт. Следуя лучшим практикам, можно, по крайней мере, смягчить проблему, убедившись, что мы сделали всё возможное.

CDN ( Content Delivery Network ) – г еографически распределённая сетевая инфраструктура, которая оптимизирует доставку контента конечным пользователям, давая доступ к сотням серверов по всему миру, размещающих копию вашего сайта.

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

В некоторых CDN gzip-сжатие можно включить флажком Enable compression . Сжатие файлов обеспечит более быструю загрузку контента пользователями сайта.

Уменьшайте все изображения, которые не потеряют в качестве и не будут масштабироватьсяУменьшайте все изображения, которые не потеряют в качестве и не будут масштабироваться

Распространённая причина долгой загрузки страниц – избыточное качество изображений или выбор неподходящего формата. Можно уменьшить количество пикселей по каждой из сторон и применить сжатие изображений. Прогресс не стоит на месте – обратите внимание на формат сжатия изображений WebP.

Если у вас сайт на WordPress, можно использовать плагины, которые уменьшат размер автоматически в процессе загрузки.

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

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

10 способов ускорить загрузку вашего сайта

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

Некоторые редиректы неизбежны, например, www -> root domain или root domain -> www , но основная часть трафика не должна поступать через перенаправления.

Время до первого байта (TTFB) – это время, которое браузер тратит на ожидание данных с сервера после отправки запроса на ресурс.

На этот показатель влияют два параметра:

  1. Время, потраченное на сервере.
  2. Время, потраченное на отправку данных.

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

О втором параметре мы уже поговорили – на него мы можем повлиять, используя CDN.

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

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

10 способов ускорить загрузку вашего сайта

Минимизация подразумевает использование инструментов для удаления пробелов, символов перевода строки и сокращения длины имён переменных. Как правило, это делается автоматически в рамках процесса сборки. Есть специальные инструменты: например, UglifyJS для JavaScript или cssnano для CSS.

Чем больше проект, тем больше вероятность, что какой-то код стал неактуальным. И лучший способ его минимизировать и сократить время загрузки – просто удалить ненужный код.

Начиная с Chrome 59, в Chrome DevTools можно анализировать использование JavaScript и CSS. Для этого откройте DevTools , перейдите во вкладку Console , нажмите на три точки и откройте Coverage . При нажатии кнопки со значком перезагрузки будет проведен аудит использования CSS и JavaScript. Помеченные красным блоки кода загружаются, но не используются.

Аудит использования CSS и JSАудит использования CSS и JS

Если вы возьмете за правило обращать внимание на проверку скорости загрузки, это станет гораздо меньшей проблемой.

Есть бесплатные инструменты для мониторинга скорости, например, WebPageTest и Google Lighthouse . Но нужно не забывать запускать их до и после внесения изменений. Для автоматизации запуска GoogleLighthouse можно использовать PerfBeacon .

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