Скорость загрузки сайта — один из главных факторов, влияющих на его позиции в выдаче. Поисковые системы ранжируют веб-страницы, исходя не только из их релевантности запросам, но и удобства для пользователей.
Низкая производительность, когда контент отображается долго, увеличивает показатель отказов. Это означает, что многие посетители покидают сайт, не переходя к другим его страницам. По статистике, при замедлении загрузки с 1 секунды до 3 количество отказов возрастает на треть, а если скорость снижается до 6 секунд, число посещений с отказами удваивается.
В этой статье мы расскажем, какие методы ускорения страниц актуальны сегодня, и как увеличить скорость загрузки сайта. Их применение будет положительно влиять на его позиции в будущем.
Среди недавних обновлений алгоритмов Google — Core Web Vitals. По показателям LCP (Largest Contentful Paint) и FID (First Input Delay) поисковик оценивает эффективность сайта. LCP говорит о времени отрисовки страницы на экране, а FID — насколько быстро браузер реагирует на взаимодействие посетителя с элементами интерфейса.
Один из способов узнать Core Web Vitals страниц — сервис для веб-мастеров Google Search Console. Статистика находится в разделе «Основные интернет-показатели» и доступна после подтверждения прав на сайт.
Используя онлайн-инструмент PageSpeed Insights, можно проверить скорость определенной страницы, узнать, какие факторы негативно влияют на ее производительность, а также получить рекомендации относительно оптимизации загрузки сайта.
Еще один вариант, подходящий для комплексного анализа скорости страниц, — аудит сайта с помощью платформы для SEO-специалистов. Например, в отчете сервиса SE Ranking можно увидеть Core Web Vitals любого ресурса, данные по объему HTML-кода, размерам изображений, файлам CSS и JS и другие показатели, влияющие на время отображения контента.
Загрузка каждой страницы — это результат обмена данными между браузером и сервером. Сервер получает запрос и передает соответствующий набор данных, размещенных на хостинге. После этого браузер воспроизводит контент на экране пользователя.
Производительность ресурса связана с объемом файлов и количеством запросов, которые должен обработать сервер. Целью оптимизации является снижение нагрузки на сервер, и, как следствие, ускорение работы сайта.
Минификация кода — это процесс удаления из него лишнего синтаксиса, не влияющего на функциональность ресурса, например, комментариев, повторяющихся отступов и пробелов. Это позволяет уменьшить размер исходных CSS/JS-файлов.
Для минификации CSS можно использовать такие инструменты, как Pretty Diff или CSSmin. Для кода JavaScript будут полезны компрессоры UglifyJS и Microsoft Ajax Minifier. Для оптимизации разных видов файлов CSS, JS и HTML подойдет программа Google Closure Compiler.
За отображением одной страницы часто стоит группа запросов серверу. Браузер может одновременно запрашивать разные компоненты HTML-документа — текст, изображения, таблицы стилей CSS, сценарии JavaScript и так далее.
Чем выше количество таких запросов, тем больше объем передаваемых данных, а также информации в заголовках запросов. Минимизировать число обращений к серверу помогают следующие методы:
объединение элементов CSS и JS в отдельные файлы;
балансировка нагрузки путем распределения компонентов страниц между серверами;
встраивание inline-картинок в таблицы файлы CSS;
объединение графических элементов формата SVG в один файл.
Еще один вариант, направленный на увеличение скорости загрузки сайта, — частичное перемещение данных на отдельный поддомен и указание пути к ним в корневом файле config.php, размещенном на хостинге.
Например, у ресурса много изображений. Если перенести папку с ними на другой поддомен, браузер будет воспринимать запросы, как адресованные разным серверам. Таким образом, нагрузка на сервер снизится, а возможности параллельной загрузки файлов возрастут.
Рендеринг, то есть визуализация контента браузером, происходит поэтапно, начиная с верхней части страницы (head). При размещении стилей внизу HTML-документа и низкой скорости интернета может возникнуть ситуация, когда контент не отображается до загрузки стилей, и пользователь в это время видит белый экран.
Подключение основных стилей в верхнем блоке head сделает процесс визуализации последовательным — от отрисовки базовых элементов до полной загрузки всех компонентов страницы.
Скрипты, в которых прописаны динамические сценарии, делают дизайн интерактивным и привлекательным. Они дополняют страницу, но по сравнению с текстом и изображениями не являются приоритетным контентом.
Особенность элементов JavaScript в сравнительно большом объеме и синхронной загрузке. Если их разместить в верхней части HTML-документа, они могут блокировать отображение других его блоков. Для увеличения скорости загрузки страницы рекомендуем добавлять скрипты в нижней ее части.
Добиться ускорения загрузки страниц можно, благодаря кэшированию. Это процесс заключается в создании копий контента ранее загруженных файлов. В результате скорость воспроизведения возрастает, поскольку браузер воспроизводит сохраненные данные, не обращаясь к серверу снова. Настроить кэширование CSS и JS — это значит разрешить браузеру сохранять их копии.
Оптимизация загрузки страницы подразумевает настройку HTTP-заголовков кэширования. Рассмотрим две схемы, как ускорить загрузку интернет страниц:
HTTP-ответ Expires, когда при первичном запросе сервер отдает значение — дату, до которой данные будут храниться в кэше.
HTTP-ответ Cache-Control, когда период кэширования определен в директиве max-age.
До указанного времени хранения кэша браузер будет обращаться к сохраненным копиям.
На скорость загрузки страницы может влиять местонахождение пользователя и сервера и то, насколько далеко они находятся друг от друга. CDN (Content Delivery Network) — это система, при которой серверы географически рассредоточены. При обработке запроса она выбирает сервер с наименьшим числом промежуточных узлов (хопов), что ускоряет передачу данных.
У Google есть CDN — Google Libraries, применяемая для популярных библиотек JavaScript. Совместное использование JS-фреймворка jQuery с Google Libraries снижают нагрузку на сервер. Кроме того, при таком подходе браузер кэширует файлы со скриптами, не загружая их повторно.
С помощью архивирования контента можно снизить вес страниц и, как следствие, объем передаваемых данных. Gzip — это формат, полученный в результате сжатия файлов. Его используют для документов с расширением .html, .css, .js.
Сервер возвращает информацию в уменьшенном формате gzip, после чего браузер распаковывает и отображает содержимое страницы в исходном виде. Это ускоряет процесс загрузки в целом.
Content-Encoding — это заголовок сжатия текстового контента. С его помощью сервер сжимает содержимое страницы и сообщает метод сжатия: Content-Encoding: gzip. Архивирование gzip настраивают в файле конфигурации. Для серверов типа Apache изменения нужно вносить в документ .htaccess, для Nginx — в nginx.conf.
Тяжелые изображения часто являются причиной низкой скорости отображения страниц. Оптимизация картинок подразумевает уменьшение их объема. Один из способов это сделать — произвести сжатие файлов. Это означает уменьшение веса изображений без потери качества.
Также на объем визуальных файлов влияет их формат. К популярным расширениям относятся jpeg и png. При оптимизации изображений обычно используют jpeg, так как при аналогичном качестве они могут весить намного меньше. В рекомендациях веб-мастерам относительно того, как ускорить загрузку страниц, указаны такие форматы, как WebP и AVIF.
Конвертировать расширения изображений можно вручную, применяя графические редакторы. Также есть бесплатные сервисы для массового преобразования фото одного формата в другой, например Png2jpg и Convertio.
Использование визуальных файлов в большом масштабе часто неоправданно, поскольку для четкого отображения на компьютерах, планшетах и смартфонах может быть достаточно картинок меньшего размера.
Например, ширина и высота исходного изображения — 3000?2000 пикселей. При этом ее уменьшенная версия 1500?1000 пикселей имеет хорошее качество и большой размер относительно экрана. Если картинок на странице несколько, их оптимизация позволит снизить объем передаваемых данных и, как следствие, ускорить загрузку страницы.
Кроме размера исходной картинки можно устанавливать атрибуты width (ширина) и height (высота) на уровне HTML-страницы. В этом случае браузер получает информацию о формате изображений из тегов и воспроизводит их в указанном виде.
Важно то, что вес исходных файлов при этом подходе остается прежним, и лучшим решением будет редактирование файлов в оригинале с помощью графического редактора, как например Photoshop или простые более варианты из пакета стандартных программ операционной системы — Paint, Microsoft Pictures Office Manager и другие.
<Наша система сама подберет вам исполнителей на услуги, связанные с разработкой сайта или приложения, поисковой оптимизацией, контекстной рекламой, маркетингом, SMM и PR.
Заполнить заявку
12254 тендера
проведено за восемь лет работы нашего сайта.
Быстрая загрузка веб-страниц является важным критерием при оценке сайта, влияющим на его позиции в выдаче. С помощью онлайн-сервисов можно выявить страницы с низкой производительностью и провести оптимизацию скорости сайта.
К основным рекомендациям, помогающим улучшить скорость загрузки, относятся:
сжатие и архивирование HTML-страниц и их компонентов;
минификация кода CSS и JS;
оптимизация изображений;
уменьшение количества запросов серверу;
настройка кэшированных копий;
размещение таблиц стилей вверху страницы, а скриптов — внизу.
С помощью этих приемов вы сможете ускорить работу сайта и улучшить его видимость в результатах поиска.
