Как ускорить загрузку сайта: основные способы
Загрузка страниц сайта, занимающая более 3 секунд, приводит к тому, что пользователи уходят на другой сайт, не дождавшись результата. Получив негативный опыт использования ресурса, посетители чаще всего к нему не возвращаются.
Медленная загрузка сайта негативно влияет на его конверсию и ранжирование в поисковиках, время, которое пользователь проводит на сайте, процент отказов, место в органической выдаче и стоимость клика в платном поиске.
Низкая скорость загрузки сайта также использует больше ресурсов хостинга, увеличивая расходы, уменьшает время пребывания посетителей на сайте, количество внутренних переходов и активность взаимодействия с контентом.
Как проверить скорость загрузки сайта
Стандартное время загрузки сайта на компьютере составляет 2-3 секунды, оптимальное - меньше 2 секунд. Загрузка страниц за 5 секунд считается терпимой, но нежелательной для поисковиков, которые понижают проект в рейтинге. Показатель загрузки сайта в 6 секунд и больше говорит о том, что с сайтом что-то не так и пора принимать меры. Пользователи мобильных версии готовы ждать 6-10 секунд загрузки сайта, однако в следующий раз могут и не обратиться к нему.
По словам Google, на мобильном телефоне загрузка веб-страницы занимает не более 9 секунд, время загрузки на персональном компьютере может составлять около 6 секунд по всему миру, а в среднем - около 3,5 секунд. Google - это лидер по скорости выдачи запросов менее чем за секунду.
Представители Яндекса заявили, что почти 40% пользователей уходят со страницы, если время загрузки составляет более 10 секунд. Кроме того, 74% пользователей уходят с сайта, если время загрузки на мобильном устройстве превышает 5 секунд.
Чтобы выяснить причины медленной загрузки сайта, стоит оценить временные рамки отклика сервера, отображения начальной страницы сайта, загрузки базовых элементов страниц, например, кнопок, стрелочек.
Для анализа скорости загрузки сайта, включая его страницы и элементы, можно воспользоваться несколькими бесплатными онлайн инструментами ниже:
Google PageSpeed Insights — бесплатный онлайн сервис для определения производительности сайта и выбора эффективных путей его оптимизации. Его удобно использовать как на компьютере, так и на мобильном устройстве. Он не показывает скорость загрузки страницы, а анализирует эффективность динамики загрузки страниц и элементов сайта с учетом JavaScript, CSS, структура HTML, конфигурация сервера, размер изображений и т. д.
В Lighthouse достаточно ввести ссылку на приложение, он запускает серию аудитов, а затем генерирует отчет о проблемах и рекомендации по улучшению приложения.
Основные метрики для оценки скорости загрузки сайтов
1
Первая отрисовка (FP) - время, спустя которое пользователь видит пустую страницу в браузере прежде, чем она загрузится на экране.
2
Первая отрисовка контента (FCP) — время, которое затрачивается на загрузку первого контента на сайте (поисковая строка, фрагмент, блок текста или изображение). FCP позволяет выявить проблемы при загрузке сайта на уровне соединения с сервером. Длительная загрузка контента свидетельствует о том, что загружаемые ресурсы очень тяжелые и их передача требует времени.
Показатели:
высокая скорость — менее 1 с;
средняя скорость — от 1 до 2,5 с;
низкая скорость — более 2,5 с.
3
Первая значимая отрисовка (FMP) (время загрузки достаточной части контента) — время, которое тратиться на загрузку всего основного контента сайта прежде, чем он появляется на экране (шапка сайта, меню, текст и изображения).
4
Время загрузки контента страницы для взаимодействия (TTI) — метрика, которая показывает, сколько времени требуется странице, чтобы стать интерактивной. Интерактивной страница становится тогда, когда на ней отображается большая часть контента, она реагирует на действия пользователей в течение 50 мс.
5
Время окончания работы ЦП — период, в который на странице становится возможным обработка данных, нужных пользователю.
6
Первая задержка ввода (FID) — период времени от первого взаимодействия пользователя с сайтом (нажатие на ссылку, кнопку и т.д.) до реакции браузера на это взаимодействие.
Показатели:
высокая скорость — менее 50 мс;
средняя скорость — от 50 до 250 мс;
низкая скорость — более 250 мс.
7
Индекс скорости (SI) показывает, насколько быстро страница наполняется контентом. Чем меньше значение индекса, тем лучше для сайта.
8
Визуально готово (VR) — метрика, которая показывает время, когда страница на 100 % загружена и готова к использованию.
Основные способы ускорения загрузки сайтов
1. Оптимизация хостинга Высокий приоритет
На что влияет: на время загрузки первого контента, индекс скорости загрузки контента, время загрузки страницы для взаимодействия с ней пользователя, на интервал времени между началом загрузки страницы и появления основного контента, на период окончании работы ЦП или времени, когда становится возможным взаимодействие пользователя с сайтом (ввод данных, нажатие ссылки, кнопок, разделов меню и пр.)
Для быстрой загрузки сайта может не хватать системных ресурсов хостинга, например, CPU, дисков или производительности процессора. Покупка более дорого пакета услуг или переход на другого хостинг-провайдера поможет улучшить скорость загрузки сайта, однако ненадолго, если не принять другие меры по оптимизации сайта.
2. Уменьшение количества http-запросов Высокий приоритет
На что влияет : индекс скорости загрузки контента, время загрузки первого контента, время загрузки страницы для взаимодействия с ней пользователя, на период окончании работы ЦП или времени, когда становится возможным взаимодействие пользователя с сайтом.
Загрузка элементов страницы: скриптов, фотографий, файлов CSS, flash требует много ресурсов хостинга. HTTP-запросы ко всем элементам сразу тормозят работу сайта, поскольку браузеры должны загружать не более 2-х компонентов веб-страницы с одного хостинга. Уменьшив количество загружаемых элементов можно снизить количество http-запросов к серверу и в результате увеличить скорость загрузки страницы.
Уменьшить количество http-запросов можно следующим образом:
комбинацией нескольких изображений в один CSS-спрайт, который в нужный момент выдает картинку со свойствами background-image и background-position;
использованием Inline или встроенных изображений в таблице стилей страницы с помощью URL-схемы data;
объединением нескольких css- или js-файлов в один;
минимизацией использования плагинов и скриптов.
3. Расположение CSS и JavaScript в нужном порядке Высокий приоритет
На что влияет: время загрузки достаточной части контента, индекс скорости загрузки страниц.)
Для оптимизации и быстрой загрузки сайта CSS-файлы помещают вверху кода страницы, а JavaScript внизу, чтобы сначала загружался статичный контент (логотип, навигация, заголовки), а затем динамичный, например, графика и анимация. Чтобы уменьшить размер файла и, соответственно, ускорить загрузку страниц, стоит почистить код от лишних комментариев, пробелов, переносов строк и символов. Для этого можно использовать такие инструменты, как JSCompress или Refresh-SF, а также Google PageSpeed Insights, который после анализа страницы позволяет сократить html код - нужно нажать «Сократить html», а затем «Посмотреть содержание».
4. Применение функции flush Средний приоритет
На что влияет: время загрузки достаточной части контента, индекс скорости загрузки страниц.)
Применение функции flush позволяет выводить информацию с сайта частями. Пока данные запроса передаются в браузер, открытое окно постепенно наполняется элементами сайта. Размещать функцию flush лучше в начале исходного кода страницы, сразу за заголовком, включив параллельную загрузку элементов CSS и JavaScript.
5. Использование сетей доставки контента CDN Средний приоритет
На что влияет: время загрузки достаточной части контента, индекс скорости загрузки страниц.
Размещая данные сайта (если он предназначен не для одной, а для многих стран) на серверах в разных точках мира с помощью сетей доставки контента CDN (Google Cloud CDN, Amazon CloudFront, Microsoft Azure CDN, Swarmify, Akamai, Limelight, CloudFlare, Rackspace CDN), можно ускорить загрузку элементов сайта с ближайших к пользователю серверов. CDN позиционируются как инструменты для увеличения скорости сайтов, поскольку они сокращают время передачи данных посетителем веб-ресурсов.
6. Размещение данных на серверах Nginx и Apache Средний приоритет
На что влияет: индекс скорости загрузки контента, время загрузки первого контента, время загрузки страницы для взаимодействия с ней пользователя, на период окончании работы ЦП или времени, когда становится возможным взаимодействие пользователя с сайтом.
Для увеличения скорости загрузки страниц можно разместить данные сайта одновременно на мощном сервере Apache и скоростном сервере Nginx. Nginx используется для обработки и сжатия статической информации, а Apache - для удаления лишних пробелов и атрибутов HTML-документов, объединения JS, CSS и HTML файлов в один, конвертации изображений под установленный в тегах < img/ > размер.
7. Кэширование данных сайта Высокий приоритет
На что влияет: индекс скорости загрузки контента, время загрузки первого контента, время загрузки страницы для взаимодействия с ней пользователя, на период окончании работы ЦП или времени, когда становится возможным взаимодействие пользователя с сайтом.
Благодаря кэшированию сохраняется часть информации со страниц сайта (текст, шрифты, графика, изображения, стили и скрипты) в браузер пользователя. При повторном заходе все элементы веб-сайта мгновенно загружаются из браузера, ускоряя его работу.
Виды кэширования:
Браузерное или клиентское кэширование: суть кэширования состоит в том, что при повторном посещении браузеру передается заголовок 304 Not Modified, а сама страница или ее элементы загружаются из локального пользовательского кэша. Экономится трафик между браузером посетителя и хостингом сайта, поэтому страницы сайта загружаются быстрее.
Кэширование файлов и изображений - браузер сохраняет загружаемые пользователем файлы и изображения, получив заголовки «expired» «304 Not Modified». Если на сайте меняются данные, браузер об этом не знает, поэтому требуется регулярная передача актуальных заголовков.
Серверное кэширование предполагает хранение на сервере всех данных, которые передаются браузером, и их быструю передачу при запросе пользователей.
Кэширование на стороне клиента: сервер передает браузеру http-заголовки с информацией о коде, изображениях и файлах стилей и скриптов, которые относятся к загруженной пользователем странице. Часть информации отвечает за кэширование на стороне пользователя, в частности Cache-Control, Expires, ETag, Last-Modifed находится в группе заголовков серверов, If-Modified-Since, If-None-Match - в группе запросов браузера. Благодаря закэшированной информации данные страницы при повторном заходе пользователя браузером будут загружаться быстрее, поскольку он не будет обращаться к серверу и проверять изменения.
Кэширование центра сертификации: пользователи сайта не ждут, когда центр сертификации или сервер обработает запрос от браузера пользователя и подтвердит актуаьность сайта.
Кэширование блоков страницы позволяет уменьшить количество запросов к базе данных от авторизованных пользователей, отслеживать состояние таблиц, сеанса пользователя, отключить кэширования при http запросах, настроить постоянное кэширование.
8. Gzip-сжатие файлов Высокий приоритет
На что влияет: индекс скорости загрузки контента, время загрузки первого контента, время загрузки страницы для взаимодействия с ней пользователя, на период окончании работы ЦП или времени, когда становится возможным взаимодействие пользователя с сайтом.
Чтобы уменьшить количество запросов на сервер из браузера, тем самым ускорив загрузку сайта, применяется метод Gzip-сжатия файлов. В версии протокола HTTP/1.1 в запросе указывается метод сжатия данных с помощью заголовка Accept-Encoding: gzip, deflate. Когда сервер видит такой заголовок в запросе, он сжимает данные указанным методом и выдает их пользователю.
Чтобы активировать GZIP-сжатие файлов на сайте, необходимо в файле .htaccess прописать следующие фрагменты кода:
<IfModule mod_deflate.c><br />
AddOutputFilterByType DEFLATE text/html<br />
AddOutputFilterByType DEFLATE application/javascript<br />
AddOutputFilterByType DEFLATE text/javascript<br />
AddOutputFilterByType DEFLATE text/css<br />
<IfModule mod_setenvif.c><br />
BrowserMatch ^Mozilla/4 gzip-only-text/html<br />
BrowserMatch ^Mozilla/4\.0[678] no-gzip<br />
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html<br />
</IfModule><br />
</IfModuleТакже можно добавить отрывок кода в начало html кода или PHP-страницы:
<?php if (substr_count($_SERVER[‘HTTP_ACCEPT_ENCODING’], ‘gzip’)) ob_start(“ob_gzhandler”); else ob_start(); ?или установить Gzip-плагин, например, W3 Total Cache.
9. Сжатие графики и видео Средний приоритет
На что влияет: индекс скорости загрузки контента, время загрузки первого контента, время загрузки страницы для взаимодействия с ней пользователя, на период окончании работы ЦП или времени, когда становится возможным взаимодействие пользователя с сайтом.
Графика и видео перед загрузкой на сайт должны быть в нужном для веб-сайта формате и размере, поскольку эти факторы существенно влияют на скорость загрузки страниц сайта.
Векторные логотипы и элементы интерфейса могут быть в формате SVG. Схемы, графики, иллюстрации, иконки и не векторные логотипы подойдут в формате PNG. Фото и картинки должны быть в формате JPG, а видео и анимация - формате MPEG4.
Оптимизировать графику и перевести данные в веб-формат можно в Adobe Photoshop и Illustrator, а также воспользовавшись бесплатными онлайн сервисами для сжатия изображений TinyPNG, Kraken.io, JPEGmini, PunyPNG, Smush.it.
Для сжатия изображений и видео в CMS можно устанавливать различные плагины, например, Imager. Однако эти элементы все равно предварительно должны быть сжаты по размеру, чтобы не терялось качество их отображения.
10. Оптимизация баз данных Высокий приоритет
На что влияет: время загрузки первого контента, индекс скорости загрузки, время загрузки достаточной части контента, время окончания работы ЦП.
По мере наполнения сайта контентом объем базы данных увеличивается, что и приводит к торможению загрузки сайта. Поэтому необходимо регулярно очищать базу от спама, ненужной информации, тестовых данных и копий. Сделать это можно вручную через функцию phpMyAdmin хостинга (SQL) или с помощью плагинов.
11. OCSP Stapling Средний приоритет
На что влияет: индекс скорости загрузки контента, время загрузки первого контента, время загрузки страницы для взаимодействия с ней пользователя, на период окончании работы ЦП или времени, когда становится возможным взаимодействие пользователя с сайтом.
Для быстрой загрузки контента сайта без необходимости браузерам совершать многочисленные запросы применяется кодирование веб-трафика или безопасная передача пользовательских данных с помощью технологии OCSP Stapling. Она поддерживается всеми современными браузерами и подключается в Apache и Nginx.
12. Минификация Высокий приоритет
На что влияет: индекс скорости загрузки контента, время загрузки первого контента, время загрузки страницы для взаимодействия с ней пользователя, на период окончании работы ЦП или времени, когда становится возможным взаимодействие пользователя с сайтом.
Ускорить загрузку сайтов и оптимизировать запросы можно с помощью минификации или процесса уменьшения размера исходного кода путём удаления ненужных символов (строк, комментариев, лишние отступов и пробелов, названий переменных) без изменения его функциональности. Такой подход уменьшает объем данных, которые должны быть обработаны, и позволяет сократить время загрузки элементов сайта.
13. Lazy loading Высокий приоритет
На что влияет: индекс скорости загрузки контента, время загрузки достаточной части контента, время, когда становится возможным взаимодействие пользователя с сайтом.
Для оптимизации скорости загрузки данных, некритичных для отображения страницы или взаимодействия с пользователями, используется метод «отложенной загрузки», при котором изображения и другие графические элементы не будут загружаться, пока не понадобятся посетителю. В зависимости от настроек контент (текст, медиафайлы, изображения) могут загружаться и отображаться при прокручиваний страницы или нажатии пользователем на заинтересовавший его элемент.
