Ещё в апреле 2010 г. Компания Google объявила, что фактором ранжирования теперь считается и время загрузки страниц веб-сайта.

Спустя два года и «Яндекс» официально признал, что учитывает этот показатель, в систему веб-аналитики «Яндекс.Метрика» были добавлены и инструменты по анализу.

Почему это важно?

• Во-первых, скорость влияет на показатели конверсии и на уровень отказов. Медленный сайт снижает конверсию, и если ниша более-менее конкурентна, пользователь уходит к другому поставщику услуг/товаров. Отношение количества полезных целевых действий к трафику снижается.

• Во-вторых, поисковые системы (ПС) напрямую заинтересованы в позитивном user experience аудитории. Поисковые результаты (SERP) хотят решать задачу пользователя полно, достоверно и быстро. Сама SERP-страница формируется «на лету» из индекса ПС, задержка пользовательского запроса, которые вносит площадка, фиксируется и обрабатывается.

ПС стараются не пускать в топ «нерасторопные» сайты в интересах пользователя, который не хочет (и не должен) ждать.

DOM – это объектная модель документа (Document Object Model), структура, используемая браузером для представления данных. Проще говоря, это время от начала перехода на страницу до полной загрузки страницы со всеми её компонентами (тексты, таблицы, изображения, CSS, скрипты и т. п.). Значение субъективно воспринимается посетителем как «качество» или «скорость» страницы.

Оценить эти показатели можно в стандартном отчёте «Яндекс.Метрики» – «Время загрузки страниц»

Время до отрисовки и время до загрузки DOM в отчёте «Яндекс.Метрики»

«Время до отрисовки» характеризует хостинговую составляющую и скорость обработки DNS-запроса.

«Время до загрузки DOM» — качество веб-проекта: совместимость сайта с браузерами, скорость работы сайта на стороне браузера, размер загружаемых объектов, объём и качество кода. Если сайт собран на «студийной» CMS сайт не тестировался на полную совместимость с наиболее распространёнными браузерами, не удивляйтесь, если он начнет «прорисовываться» некорректно и с задержками.

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

Скорость загрузки страниц сайта. Определение «самых задумчивых» страниц сайта в отчёте «Яндекс.Метрики».

Аналогичный функционал заложен и в сервисе Google PageSpeed Insights для разработчиков.

Существует ряд независимых от ПС сервисов, измеряющих скорость загрузки:

• https://tools.pingdom.com/ – оценивает скорость, показывает количество обращений к серверу и среднее время загрузки. В сводной таблице подробно показывает данные по каждому запросу к серверу (стили, скрипты, изображения и др). Это позволяет выявить причину долгой загрузки.
• http://www.webpagetest.org/ – комплексно тестирует скорость проекта, варьируя локацию клиента (континент, страна), тип устройства (десктоп, мобайл, операционная система), браузер и способ подключения к серверу. Позволяет осуществлять сравнение скорости проектов – конкурентов в нише.
• http://whichloadsfaster.co/ – даёт возможность загружать два сайта для сравнения (свой и конкурента), а затем визуально наблюдать, какой проект загружается быстрее (удобно демонстрировать клиентам). В конце загрузки отображается информация, какой сайт выиграл и во сколько раз быстрее он загрузился.
• http://pr-cy.ru/speed_test/ – пакетная проверка скорости до 10 адресов URL. Сравнивается время загрузки и размер index-документа для каждого из ресурсов. Входит в состав пакета инструментов для веб-мастеров.
• http://sitespeed.me/ru/ – посылает запросы к анализируемому документу на сайте от 30 серверов, расположенных на значительном расстоянии, и определяет скорость доступа для каждого из них. Подсвечивает лучшие, худшие и средние показатели по скорости доступа

Мы рекомендуем для анализа скорости загрузки сайта и дальнейшей оптимизации использовать встроенные в системы веб-аналитики «Яндекс» и Google-отчёты.

1. Уменьшение размера загружаемых объектов

Минимизация кода происходит за счёт удаления избыточных пробелов, табуляций, переносов строк, комментариев, дублирующегося кода. Минимизация применима к коду HTML, CSS и JS и, в зависимости от размера и содержимого кода, достигает результатов, близких к gzip-сжатию – уменьшать файлы до 20–30 % от исходного размера. При использовании ещё и gzip-сжатия предварительная минимизация увеличивает степень сжатия в среднем на 3–5 %. Используя gzip-сжатие, важно убедиться в том, что процедура отключена для изображений и других двоичных файлов. Поскольку эти файлы уже сжаты, а их размер существенно превышает размеры типичных текстовых файлов, применение gzip-сжатия не принесёт никакого выигрыша в клиентском быстродействии веб-страниц, зато увеличит нагрузку на сервер.

Результаты оптимизации графики для web

Для полноцветных изображений с богатой цветовой палитрой (фотографий, сложных градиентов и т. п.) следует использовать формат JPEG высокого качества. Помните, JPEG – это формат сжатия с потерями, и чем выше степень сжатия, тем большее число артефактов появится на итоговом изображении.

Устранение избыточного кода

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

1. Устранение встроенного в разметку кода

Суммарный объём кода можно также сократить за счёт устранения встроенного на веб-странице CSS и JS- кода. Множество атрибутов style=”” в HTML-тегах можно заменить за счёт использования классов единственным, общим для всех элементом – селектором, а множество javascript-обработчиков (например, обработчиков onclick=””, onmouseover=”” и др.) – одним единственным обработчиком. Изменить вёрстку и JavaScript (логику) в подобных ситуациях, как правило, не сложно.

1. Неиспользуемый код

Нередко на веб-страницах присутствует некоторое количество неиспользуемого кода, находящегося как непосредственно в HTML-документе, так и во внешних файлах. Время загрузки этих страниц увеличивается на время загрузки неиспользуемых внешних файлов из сети или из кэша браузера и на время, необходимое для разбора всех элементов DOM-дерева и CSS-правил, которые могут быть к ним применены. В случаях, когда размер веб-страницы и файлов ресурсов измеряется в сотнях килобайт, задержка становится существенной. Если в файлах CSS и JS, подключаемых на веб-странице, объем кода относится исключительно к другим страницам, его перераспределяют по нескольким файлам, подключая их на страницах по необходимости.

1. Устранение фреймов

Старайтесь отказаться от использования фреймов. При невозможности совсем отказаться от них, минимизируйте количество. Среди минусов фреймов: избыточные запросы к серверу, блокирование события onload, а также затруднения при поисковой индексации и сохранении адресов и состояний веб-страниц. Использование фреймов, как правило, оправдано только тогда, когда требуется безопасно вставить блок стороннего содержимого, например рекламный. Можно избежать применения фреймов благодаря разумному использованию серверных скриптов и техник AJAX.

• Объединение файлов CSS

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

Популярные решения для того, чтобы повысить скорость загрузки сайта на самых распространенных движках, в том числе на базе CMS WordPress – системы управления сайтами, на которой работает каждый 3–4 сайт в мире:

• Для оптимизации страниц применяется плагин Optimize DB из пакета Yoast. Он позволит уменьшить размер таблиц mySQL и оптимизировать их структуру.
• Для кэширования запросов к базе данных — WP Super Cache от Automattic.

Направление кэширования востребовано среди разработчиков плагинов для WordPress. Достаточно ввести запрос «Cache» в разделе «Плагины» —> «Добавить новый», и вашему вниманию предстанет выдача из 3323 виджетов. Есть из чего выбрать!

Следующий момент – это адаптивная вёрстка сайта. Сегодня во всех нишах растёт доля пользователей с мобильных устройств. Ни в коем случае нельзя пренебрегать этой частью аудитории. Сайт должен быть удобен, понятен и решать задачи пользователя не только на декстопах. По нашей статистике, сегодня 70–75 % сайтов, приходящих в работу по SEO-продвижению, не имеет адаптивной версии. В оставшейся части «передовых» проектов мобильная версия есть, но её эффективность и конверсионность оставляет желать лучшего с точки зрения «заточенности» на выполнение бизнес-задач клиента и позитивного опыта взаимодействия посетителя с площадкой.

Если сайт не адаптирован к мобильным устройствам, то успех SEO-продвижения сомнителен!