Оглавление: развернуть полностью
Время чтения: ~6 минут
Ваш город Краснодар?
10020
02.12.2021
#аналитика#продвижение в интернете#seo-продвижениеАлександр Солдатов
Технический директор
Оглавление: развернуть полностью
Время чтения: ~6 минут
Скорость загрузки страниц — один из параметров, по которым поисковые системы Яндекс и Google ранжируют сайт. Кроме того, скорость загрузки прямо влияет на поведенческие характеристики посетителей и, следовательно, показатели конверсии (иначе говоря, вашу прибыль - ave SEO!). По данным Google, показатель конверсии мобильной страницы выше на 15%, если скорость загрузки не превышала 2 секунд. Сайт может быть бесконечно прекрасен как с точки зрения UI, так и с точки зрения функционала, однако если страницы прогружаются более 6 секунд — вряд ли пользователь будет им пользоваться.
Разбираемся, что и как влияет на скорость загрузки веб-страниц, а также какие действия помогут её оптимизировать.
В мае 2021 года Google представил новую группу факторов, по которым происходит ранжирование сайта — Web Vitals. Нас интересуют три ключевых фактора (Core Web Vitals), два из которых как раз оценивают скорость сайта и его ответ на действия пользователя, а третий отвечает за стабильность контента страниц:
— Largest Contentful Paint (отрисовка основного контента). Время, за которое загружается самый крупный элемент страницы. Оптимальный показатель — до 2,5 секунд.
— First Input Delay (задержка первого ввода). Время с первой попытки пользователя взаимодействовать с контентом сайта до момента, когда сайт способен обработать это обращение. Оптимальный показатель — до 100 милисекунд.
— Cumulative Layout Shift (совокупное смещение макета). Визуальная стабильность контента. Чем ниже значение, тем менее явно будет заметно смещение остального контента при резкой загрузке тяжёлого (например, картинки высокого разрешения). Оптимальный показатель — до 0,1.
На просторах всемирной сети можно найти огромное количество сервисов, которые помогут «держать руку на пульсе» вашего сайта. Все они анализируют упомянутые выше факторы. Вот ссылки на такие сервисы:
— PageSpeed Insights. Подопечный Google, который может промониторить скорость загрузки страниц сайта. Делает это как для ПК, так и для мобильных устройств. Кроме того, по окончании анализа предоставит вам рекомендации по оптимизации сайта. Из минусов: рекомендации достаточно общие, поэтому их внедрение необязательно принесёт реальный результат;
Результаты анализа на примере сайта Старты
— WebPageTest. Ещё один сервис, который достаточно подробно анализирует скорость загрузки сайта. Проводит три теста и анализирует сайт по нескольким параметрам: скорость ответа сервера (First Byte Time), постоянство HTTP-соединения (Keep-alive Enabled), zip-сжатие информации при передаче с сервера (Compress Transfer), изображения (Compress Images) и кэширование (Cache static content). В отчёте предоставляет так называемый «водопад» — скорость загрузки каждого элемента страницы. Из минусов: интерфейс на английском языке.
Результаты анализа на примере сайта Старты
— Pingdom. Удобный сервис, который замеряет скорость загрузки контента сайта. Показывает точный вес изображений, кода и шрифтов. Единственный из перечисленных сервисов, который позволяет выгрузить результаты проверки в формате json. Из минусов: английский язык, детальный обзор только контентной части.
Результаты анализа на примере сайта Старты
Важно: в строке выбора региона России нет ни в WebPageTest, ни в Pingdom, поэтому мы рекомендуем выбирать Germany-Frankfurt как наиболее близкий.
Все сервисы бесплатные для разовых проверок, за деньги можно подключить автоматический ежедневный мониторинг состояния сайта.
Или вы можете заказать у нас бесплатный аудит, чтобы получить подробные рекомендации по улучшению производительности сайта.
Невероятно, но факт — скорость загрузки страницы зависит не только от количества и тяжести контента, и даже скрипты тут не при чём. Если мы проследим за процессом загрузки от момента ввода пользователем URL до просмотра контента страницы, получим следующие этапы:
Исходя из выделенных этапов можно выделить три основных источника, на которых и происходит «подвисание» страниц сайта: связь с сервером, проблемы в коде и контент.
DNS-запрос — запрос от клиента к серверу, где хранятся данные веб-ресурса.
ТСР — протокол обмена данными, который представляет собой поток данных с предварительной установкой соединения. Осуществляет повторный запрос данных в случае утери и устраняет дублирование при получении двух копий одного пакета.
HTML (англ. HyperText Markup Language) — это язык гипертекстовой разметки страницы. Показывает браузеру, как выглядит ваш сайт.
В первую очередь стоит проверять скорость ответа сервера на пользовательские запросы — т. е. время, которое прошло с момента взаимодействия с интерфейсом сайта и загрузки первого байта. Сделать это можно с помощью вышеупомянутых сервисов, а также с помощью Я.Метрика и Google Analytics (в отчётах: «Стандартные отчеты» / «Мониторинг» / «Время загрузки страниц»). Самый же простой способ это сделать — расширение для браузера (инструменты разработчика) (Ctrl+Shift+I).
Идеальным значением времени ответа сервера считается 0,2 сек.
Что делать?
Если время ответа сервера превышает все разумные пределы, вам стоит… Сменить хостинг. Такое случается, если вы приобрели тариф, который не соответствует содержимому вашего сайта. Например, проплатили хостинг, который рассчитан на лендинг, но увлеклись и создали для компании корпоративный сайт с тяжёлым контентом.
Если же с сервером всё нормально, возможности тарифа хостинга соответствуют размеру сайта, но ускорение загрузки всё равно оставляет желать лучшего — возможно, проблема в коде.
Для далёкого от разработки человека код — это набор бессвязных символов, прочитав которые вполне вероятен призыв дьявола. Поэтому некоторые владельцы бизнеса, закончив разработку, стараются к нему не возвращаться. И зря — о чистоте кода следует заботиться так же, как и о чистоте ушей.
Пробежимся по базовым способам оптимизации скорости загрузки сайта, которые не требуют специальных знаний и навыков.
Большое количество символов в коде прямо влияет на производительность сайта. Поэтому логично, что лишние пробелы, теги и элементы стоит убрать. Сделать это можно с помощью специальных сервисов (например, IksWeb). Принцип прост: находясь на нужной странице, открываем консоль разработчика (F12 или Ctrl+F12), находим местоположение папки с файлами CSS, копируем код и прогоняем через оптимизатор. Не забудьте только вернуть код на место через админку сайта.
Проверьте, в верном ли порядке расположены JavaScript и CSS. CSS-файлы вверху кода страницы, а JavaScript внизу. Это позволяет прогружать статичный контент, и только потом — динамичный. Как вы уже наверняка догадались, это обеспечивает плавную загрузку страницы сайта.
И, конечно, не забывайте кэшировать страницы сайта. Это поможет загружать контент быстрее для тех пользователей, которые уже были на сайте. Сделать это можно с помощью редактирования файла .htaccess, который либо находится в корневой папке сайта, либо придётся создать его самим:
1. Открываем программу Notepad+ и вставляем код:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType application/javascript "access plus 5 days"
ExpiresByType text/javascript "access plus 5 days"
ExpiresByType text/css "access plus 5 days"
ExpiresByType image/gif "access plus 5 days"
ExpiresByType image/jpeg "access plus 5 days"
ExpiresByType image/png "access plus 5 days"
</IfModule>
Кэширование — сохранение загруженного контента во время первого посещения сайта, что при следующем визите не делать этого вновь.
Вместо 5 days можно вставить любой другой промежуток времени. Чем чаще обновляется сайт, тем больший промежуток времени стоит указать.
2. Сохраняем файл под именем .htaccess и снова загружаем в корневую папку сайта вместо старого (если был).
Сайты на популярных движках по типу WordPress подразумевают в своём функционале специальные плагины, которые автоматически кэшируют страницы сайта.
Разобравшись с технической частью, имеет смысл позаботиться о контенте сайта — например, в статьях блога.
В первую очередь стоит позаботиться о внедрении CDN — сети доставки контента. Если говорить простым языком, это налаживание канала связи между разными серверами для более быстрого обмена контентом сайта. Если сервер с вашим сайтом находится в Москве, но рассчитан для посетителей со всего мира — CDN находит подходящие сервера и устраивает обмен. В идеале, быстро.
Внедрить CDN можно, например, с помощью Яндекс.Cloud. Услуга платная.
Следите и за размером изображений — чем он больше, тем медленнее загружается страница. Если ширина столбца с картинкой равна 768, то и ширина картинки должна быть такой же. Чтобы сжать изображения без потери качества, используйте специальные компрессоры — например, ILoveImg.
Существует вариант перевода графических изображений в формат WebP, который значительно легче PNG и JPEG. Но, к сожалению, сейчас его поддерживают далеко не все браузеры.
Если на сайте присутствуют gif и видео - элементы, их можно перевести в формат WebM, который поддерживают все популярные браузеры. Опять же, с помощью компрессоров.
Ещё вы можете сжать содержимое сайта в формат GZip, который уменьшает размер до 70%. Сделать это можно путём вставки кода в уже упомянутый файл .htaccess:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
Либо же можете подключить на сайт специальный плагин, который сделает всю работу за вас. Например, W3 Total Cache для сайтов на движке WordPress.
Резюмируем. Мы рассмотрели базовые работы над сайтом, которые помогут оптимизировать скорость его загрузки, увеличить юзабилити и, следовательно, увеличить шансы на попадание в ТОП поисковой выдачи. Конечно, есть и другие, более специфичные методы — но без специалиста они могут навредить сайту. Если вы проделали рассмотренные манипуляции, но ускорить страницы сайта не получилось — вы всегда можете обратиться к нам, чтобы получить оценку и способы решения проблемы.
Понравилось?
Подпишитесь на рассылку
Выберите город:
Мы собираем файлы cookie для корректной работы.
Принять
Комментарии (23)