Поисковые системы типа Google проводят измерения скорости загрузки документов сайтов и используют полученные данные при формировании выдачи. Есть решения по оптимизации скорости загрузки, внедрения которых условно бесплатно.
Скорость загрузки сайта
Оптимизация скорости загрузки сайта является частью комплекса работы по поисковой оптимизации.
Скорость загрузки напрямую влияет на ряд параметров:
- Выдача на мобильных устройствах формируется с учетом скорости загрузки;
- Поведенческие факторы зависят от скорости загрузки сайта;
- Краулинговый бюджет зависит от пропускной возможности сервера, рассчитывается на основе данных о падении скорости;
- Конверсия сайта падает при низкой скорости загрузки сайта;
- Экономия батареи мобильного устройства;
- Экономия денег на расход трафика.
Польза от оптимизации скорости загрузки документов сайта очевидна. Согласно данным Amazon, задержка загрузки на 100ms снижает конверсию на 1%.
Есть способы увеличить скорость загрузки сайта без дополнительных финансовых вложений в дистрибутивные сети доставки контента.
Приоретизация загрузки документов
Приоритезация загрузки документов через браузера Chrome, Safari имеет определенную последовательность.
Этапы загрузки:
- Документ, CSS, шрифты;
- JS, XHR (ajax запрос);
- JS вне тега head, изображения;
- JS async, JS defer, JS модули, изображения;
- navigator.sendbeacon, prefetch, изображения.
Как увеличить скорость сайта
Способы ускорить загрузку сайта:
- Critical CSS;
- Сжатые форматы типа WebP;
- Предзагрузка
- Постзагрузка/Lazy loading;
- HTTP/2.
Critical CSS
Critical CSS означает подключение в head стилей для первых двух экранов, остальные загружаются по требованию.
Сжатые форматы
Для изображений в документе сайта рекомендуется использовать автоматический конвертер в формат Google WebP.
Предзагрукза
Предзагрузка элементов бывает разной по приоритету. Наивысший приоритет у preload. Пример:
<link rel="preload" href="some.js" as="script"> <link rel="preload" href="some.css" as="style"> <link rel="preload" href="picture.jpg" as="image"> <link rel="preload" href="picture.woff" as="font">
Способ preload позволяет полностью предзагрузить все страницы в невидимой вкладке. Проверить вкладки можно по ссылке — chrome://net-internals/#prerender.
Низкий приоритет у следующих способов:
- dns-prefetch
- prefetch
- prerender
- preconnect
Примеры:
<link rel="prefetch" href="/source/"> <link rel="dns-prefetch" href="https://youdomain.com"> <link rel="prerender" href="next-page">
Постзагрузка
Ленивая загрузка применяется к изображениям видео. Пример:
<img src="blank.svg" data-src="cool.jpg">
Постзагрузка может быть применена к скриптам. Скрипты будут загружены в фоне сразу после загрузки страницы если использовать директиву defer.
Скрипты будут загружены без блокировки страницы если использовать директиву async.
HTTP/2
HTTP/2 позволяет загружать множество элементов параллельно.
Преимущества:
- За счет сжатия заголовков уменьшает объем передаваемых данных;
- Бинарный протокол означает быстрое и простое интерпретирование;
- Мультиплексирование позволяет за одно соединение забирать несколько файлов;
- Запросы к ресурсы по разным хостам могут быть сделаны за одно соединение, уменьшая количество соединений.
Кэширование
Кэширование правильно делать на разных уровнях. Например:
- Кэширование запросов к базе данных;
- Кэширование запросов к файлам;
- Кэширование медиа файлов;
- Кэширование SSL переговоров.
Наиболее эффективный способ заключается в полном кэшировании страницы и сохранении результатов работы скрипта в оперативной памяти. Итого, веб-сервер с легкостью сможет сразу же отдать страницу, не обращаясь вновь к динамическому получению данных.
Сочетание нескольких уровней кэширования гарантирует быструю доставку данных и увеличивает потенциальное количество одновременно находящихся на сайте пользователей.
Использование SSD-диска на сервере
Использование быстрого диска на сервере позволяет увеличить скорость чтения файлов. В результаты, скрипты будут выполнятся быстрее, и статические файлы сайта будут загружаться быстрее.
Сравнение скорости считывания на дисках и в оперативной памяти (IOPS — операций ввода-вывода в секунду):
- HHD — 100;
- SSD — 300 000;
- RAM — 4 000 000.
Проверка скорости загрузки сайта
Инструменты для оценки скорости сайта:
- Pingdom;
- Axe;
- Приложение для Chrome — Axе;
- Приложение для Chrome — Axe Coconut.
Ускорить сайт можно используя продвигаемую Google технологию Accelerated Mobile Pages.
AMP
Внедрение технологии осуществляется посредством использования специальной разметки и скриптов.
- Подключение Accelerated Mobile Pages простое:
- В начале документа обозначается поддержка amp; Далее требуется указать коническую версию документа;
- Подключить скрипт обработчик Accelerated Mobile Pages;
- В коде документа требуется использовать Accelerated Mobile Pages.
<html amp> <link rel="canonical"> <script amp></script> <amp-img layout="responsive">
Google AMP Validator
Технология ограничивает скрипты и создана для документов состоящих из простых элементов: текстов и изображений. Использование скриптов javascript запрещено. Использование CSS скриптов ограничено:
- Запрещено использование important;
- Запрещено использование анимации.
PostCSS плагин прогоняет сайт, показывает что можно использовать в AMP из текущего сайта.
Валидация кода можно быть проведена через Google Validator.
Для расширения возможностей Accelerated Mobile Pages можно подключить дополнительные компоненты из библиотеки. Компоненты нельзя переопределить то есть изменить дизайн.
Примеры
Сайты использующие технологию от Google:
- wired.com;
- theguardian.com;
- washingtonpost.com;
- meduza.io
Найти примеры коммерческих документов можно по поисковому запросу:
macbook ebay
Есть и преимущества от использования AMP. Преимущества:
- Бесплатное внедрение
- Inline CSS, все стили инлайном подключены в head;
- Lazyload загрузка контент попадающего в viewport, остальное загружается при необходимости; component не будет инициализироваться, картинка не будет загружаться;
- Загрузка и prerendering первого экрана документа на в поисковой выдаче Google.
Проверка скорости загрузки сайта
Проверить скорость загрузки страниц сайта можно используя решения разного уровня. Список сервисов:
- Pingdom;
- Axe;
- Axe приложение для Chrome — Axe. Приложение для Chrome — Axe Coconut.
Сервис Pingdom позволяет провести проверку скорости загрузки документов на уровне отклика сервера доменных имен.
Проверка скорости загрузки сайта в Google
Измерить скорость загрузки сайта можно используя Google. Оценка скорости загрузки документа сайта происходит либо через сайты Google, либо через расширения для Chrome.
Сервисы проверки:
Обсуждение