t. +7 (495) 620-58-99
+7 (495) 620-58-99
Начнем знакомство?
Начнем знакомство?
/
/
Как увеличить скорость загрузки сайта
Блог
9307
31.08.2020

Как увеличить скорость загрузки сайта

Скорость загрузки сайта является одним из ключевых факторов ранжирования, для показа ресурса в ТОП-5 по высокочастотным запросам. Поисковые системы заинтересованы предоставлять пользователям релевантные ответы в максимально короткие сроки. Яндекс и Google продвигают рекомендации по оптимизации загрузки сайта, вводя данный фактор в свои алгоритмы ранжирования сайтов. Например, Яндекс будет помечать наличие долгого ответа сервера как критическую ошибку, а Google реализовал отдельный инструмент «Основные интернет-показатели», который аккумулирует в себе проблемы загрузки страниц.

мониторинг загрузки страниц в Яндекс Вебмастер
мониторинг загрузки страниц в Google Search Console

Низкая скорость загрузки сайта негативно влияет на конверсию. По данным исследований Google, даже самые незначительные изменения оказывают ощутимый эффект на количество заказов с сайта.

Уменьшив время загрузки сайта на 0,1 сек., вы можете повысить коэффициент конверсии на 8 %. 77 % пользователей смартфонов с большей вероятностью совершат покупку, если мобильная версия сайта или приложение предоставляет возможность сделать это быстро.

Google активнее других поисковых систем продвигает идеи оптимизации скорости загрузки страниц. Одним из инструментов стимуляции развития сайтов в данном направлении является модель индексации — Mobile First Index. Это специальное обновление основного алгоритма поиска, которое направлено на анализ мобильной версии сайтов. Удобство и скорость просмотра сайта на мобильных устройствах является сильным фактором ранжирования. Важно не пренебрегать оптимизацией скорости загрузки — есть риск проиграть важные позиции в ТОПе. В данной статье мы рассмотрим основные способы увеличения скорости загрузки сайта.

Какая скорость загрузки считается оптимальной?

Показатель оптимальной скорости загрузки различается — сайты бывают разного размера по формату, типу контента и его сложности. «Тяжелые» сайты со сложным функционалом сложно ускорить, в то время как простые статьи или страницы товаров должны отвечать всем требованиям скорости получения информации. Также, можно ориентироваться на показатели конкурентов, чтобы выявить приемлемые рамки.

Среди точных показателей важно выделить время ответа сервера. Это время, за которое сервер успевает сообщить информацию поисковому роботу или браузеру. Чем меньше времени занимает данный процесс, тем быстрее будет загружаться сайт. 200 миллисекунд является тем порогом, который нельзя переступать — в противном случае страница и сайт будут помечены как «медленные», что негативно отразится на позициях и трафике.

Google группирует сайты и страницы по следующим показателям:

  • Быстрая загрузка: 0–2,5 сек.
  • Средняя загрузка: 2,5–4 сек.
  • Медленная загрузка: 4 сек. и более
*Информация из сервиса ThinkWithGoogle.
критерии скорости загрузки страниц
Также можно ориентироваться на средние показатели в сервисах по замеру скорости. Например, сервис https://gtmetrix.com/ сравнивает анализируемый сайт со средними показателями всех исследованных им страниц за последние 30 дней

Средние показатели по скорости на сегодняшний день:

  • Время полной загрузки страницы (Fully Loaded Time) - 8 секунд.
  • Полный размер страницы (Total Page Size) - 3 мегабайта.
  • Количество обращений к серверу (Requests) - 90.

От чего зависит скорость загрузки

Скорость загрузки сайта зависит от нескольких факторов. Разделим данные зависимости на серверные (бэкенд) и видимые части сайта (фронтенд).

К серверным зависимостям относятся:

Время ответа сервера
CMS сайта
Местоположение пользователя

Это факторы, которые отвечают за «быстроту реакции» сайта. Как правило, проблему долгого ответа сервера можно решить выбором другого тарифа на хостинге с улучшенной пропускной способностью.

Для оптимизации CMS сайта, также следует обратить внимание на хостинг. Лучше подобрать тот, который полностью отвечает «системным» требованиям CMS. Основные хостинг-компании имеют специальные тарифы под определённую систему.

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

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

К зависимостям видимой части сайта относятся:

HTML-код страницы
Количество и размер файлов изображений
Объём файлов JS и CSS

Это факторы, отвечающие за объем страниц сайта, которые необходимо скачать пользователю, чтобы увидеть весь контент. Оптимизация размера и объёма, а также количества данных файлов и строк кода может значительно сократить период времени, за который страница полностью отобразится.

Как проверить скорость загрузки?

Чтобы определить текущие показатели скорости загрузки, можно воспользоваться набором бесплатных инструментов. Информация, представленная в данных инструментах даёт полное понимание основных проблем сайта, связанных со скоростью, а также содержит рекомендации по их исправлению.

Google PageSpeed Insights

Данный сервис имитирует полноценный процесс загрузки страницы и формирует рекомендации для каждой возникающей ошибки. Список анализируемых ошибок постоянно расширяется:

  • скорость отрисовки страницы (это время, за которое пользователь увидит первый контент);
  • время полной загрузки страницы;
  • файлы JS и CSS, которые блокируют отрисовку страницы или замедляют её;
  • неоптимизированные изображения;
  • проблемы с использованием слишком большого HTML-кода.

Webpagetest.org или GTmetrix.com

Данные сервисы показывают примерно те же данные, что и PageSpeed Insights, но позволяют в удобном виде выгрузить ссылки на проблемные изображения, файлы стилей или скриптов. GTmetrix также сравнивает результаты проверки скорости страниц со средними показателями всех сайтов за последние 30 дней, что дает дополнительную информацию, на которую можно опираться в процессе оптимизации сайта.

Google Search Console

Панель Вебмастера Google содержит в себе отдельный инструмент «Основные интернет-показатели», который собирает информацию о вашем сайте и определяет основные проблемы со скоростью страниц, но уступает в количестве и качестве информации предыдущим сервисам.

Яндекс Вебмастер

Яндекс Вебмастер позволяет узнать среднее время ответа сервера, а также освещает отдельным уведомлением критические проблемы, касающиеся данного вопроса.

Системы аналитики Яндекс Метрика и Google Analytics

Данные системы имеют в своём арсенале отчёты по скорости загрузки, информацию для которых они “собирают” на основе статистики от пользователей конкретного сайта. Их удобно использовать для сегментации данных при анализе скорости загрузки для пользователей из разных регионов или использующих разные устройства, операционные системы и браузеры.

данные о скорости загрузки в Google Analytics
отчет время загрузки страниц в Яндекс Метрика
отчет время ответа сервера Яндекс Метрика

Как увеличить скорость загрузки сайта

Выполнив основные рекомендации по оптимизации, представленные ниже, можно заметно увеличить скорость загрузки страниц.

Оптимизация работы сервера

Оптимизацию сервера можно разделить на две взаимно важные части:

  1. Увеличение скорости ответа.
    Как уже было отмечено в статье - здесь, как правило, требуется сменить хостинг, чтобы получить больше ресурсов для безупречной работы сайта.
  2. Использование GZIP-сжатия.
    Сжатие на стороне сервера позволяет сократить размер файлов, которые требуется загрузить пользователям. Следует применять независимо от общей оптимизации файлов. В таком случае оптимизированные файлы будут “весить” еще меньше.
  3. Настройка кеширования файлов.
    Данная доработка позволит указать браузеру пользователя какие файлы следует сохранить в памяти компьютера или смартфона, чтобы при повторном посещении не скачивать их повторно. Этот параметр не влияет на скорость загрузки при первичном посещении сайта, однако положительно сказывается на последующих визитах.
  4. Использование CDN для изображений, файлов JS и CSS.
    CDN (Content Delivery Network) даёт возможность децентрализованной загрузки файлов с серверов в разных регионах, выбирая при этом ближайший к пользователю. Например, если компания реализует продукцию или услуги по всей территории России (включая Калининград и Камчатку), тогда следует использовать CDN, который работает на территории РФ, чтобы пользователи удалённых регионов могли одинаково быстро получать полезный контент.
  5. Обновление до новейшей версии PHP.
    Эту доработку следует отнести к серверной части оптимизации, так как PHP является связующей частью между сервером сайта и его CMS. С каждой новой версией PHP получает сильный прирост к скорости работы, поэтому данный пункт следует обязательно включить в проработку при комплексной оптимизации сайта.
  6. Уменьшение количества HTTP-запросов.
    Уменьшение количества запросов (реквестов) к серверу необходимо рассмотреть подробнее. Чем меньше мы обращаемся к серверу за какой-либо информацией, тем быстрее страница загрузится.

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

пример спрайта

Также можно сократить количество реквестов, если встроить небольшой код стилей оформления или скриптов сразу в HTML-код страницы. В таком случае браузеру не придётся спрашивать сервер и скачивать отдельный файл.

Ещё один способ сокращения количества реквестов — объединение нескольких небольших файлов с JS или CSS в один файл.

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

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

Как и многие другие факторы, оптимизацию изображений можно разделить на несколько направлений:

  1. Оптимизация под использование в WEB.
    Изображения для сайтов необходимо сжимать и сокращать в размере, чтобы их объём был максимально малым. Большинство сервисов по анализу скорости загрузки сайта показывают список изображений, которые следует оптимизировать, а также потенциальный выигрыш (как правило, в килобайтах) от сжатия качества изображения. Оптимально, когда самые большие изображения на вашем сайте не превышают объём в 500 килобайт. Большое количество «тяжёлых» изображений может надолго отложить загрузку ваших страниц.
  2. Оптимизация масштаба изображений на странице.
    Необходимо использовать на сайте изображения только такого размера, в котором они будут показаны на странице. Не следует растягивать маленькое изображение на странице или же сжимать в размерах большое. Это негативно скажется на скорости формирования страницы — браузер затрачивает дополнительное время каждый раз, когда требуется изменить настоящий размер скачанного изображения.
  3. Использование Lazy Load, или же «ленивой загрузки».
    Эта техника позволяет загружать изображения только на первом экране, а остальные — после скролла дальше. В таком случае браузеру нужно загрузить изначально только часть изображений, остальные - по требованию самого пользователя. С использованием Lazy Load мы одновременно сокращаем количество серверных реквестов и размер изображений, которые нужно скачать.

Оптимизация файлов JS и CSS

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

Давайте рассмотрим основные направления:

  1. Встраивание небольшого кода сразу в HTML-код.
    Файлы в несколько строк кода следует сразу разместить в код страницы. Это сокращает количество HTTP-запросов к серверу.
  2. Минимизирование файлов или же минификация.
    Этот процесс нацелен на удаление лишних символов и строк в коде JS или CSS. Минификация кода убирает лишние килобайты, что влияет на общий объём дополнительных файлов, необходимых к загрузке браузером.
  3. Приоритезация загрузки.
    Необходимо определить какой код JS и CSS строго необходим для корректной загрузки полезного для пользователя контента, и загружать его в первую очередь. Весь остальной код, который не используется на странице или используется позже (например, заказ обратного звонка или модуль подписки на новости в нижней части сайта), следует загружать в самом конце.

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

Особенности увеличения скорости загрузки сайта на разных CMS

Описанные в данной статье способы оптимизации скорости загрузки сайта могут быть уже встроены в вашу CMS, поэтому вам придётся только настроить точнее необходимые функции. Также для практически любой популярной CMS на данный момент существуют плагины, которые направлены на оптимизацию скорости.

Например:

  • Wordpress — PageSpeed Ninja;
  • Bitrix — Ускоритель по Google Pagespeed;
  • MODx — PageSpeed.

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

Вывод

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

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