• Главная
  • О нас
  • Контакты
  • +7 812 244-71-48
    Блог

    Как скорость загрузки сайта влияет на эффективность его продвижения

    Время чтения — 20 минут
    20 июня 2018
    Алексей Чистяков

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

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

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

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

    За последние 5 лет средний размер веб-страниц вырос втрое, а за последний год – в полтора раза. Характерное время ожидания составляет 4 секунды. Если за это время сайт загружается у 90 % пользователей, вы счастливый владелец быстрого интернет-ресурса.
    Основное время при загрузке страниц сайта уходит на клиентскую часть. Серверные затраты малы, 50 — 500 мс. Среднему пользователю всё равно, сколько страница будет создаваться на сервере, если работать с ней можно уже через полсекунды. В этом случае фокус смещается  на клиентскую, а не серверную оптимизацию.

    Под скоростью загрузки страницы понимают совокупность параметров:

    • Время до отрисовки – от начала перехода на страницу до начала прорисовки на экране.
    • Время до загрузки DOM – от начала перехода на страницу до загрузки DOM и окончания обработки события onLoad.

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

    время загрузки страницы

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

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

    Скорость загрузки страниц сайта

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

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

    Google PageSpeed Insights

    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-отчёты.

    Конечно, стоит прислушаться и к мнению «сторонних экспертов», но прежде всего интернет-проект должен понравиться ПС. Внешние же сервисы просто необходимы для сравнения «скорострельности» вашего сайта с сайтами конкурентов в топе. Не имея доступа к счётчикам «Яндекс.Метрика» и Google Analytics, получить эту важную информацию можно только «на стороне». Нужно помнить, что методика сбора данных сторонними сервисами может существенно отличаться, результатом будут некорректные выводы и рекомендации для разработчиков по оптимизации скорости загрузки.

    Итак, аудит проведён, запаздывающие документы выявлены. Что дальше: как увеличить скорость загрузки сайта?
    Приступаем к выполнению чётко регламентированного алгоритма действий, который включает следующие этапы:

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

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

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

    За счёт использования подходящих графических форматов и сжатия без потерь суммарный объём страницы уменьшается до 50 % и более. Изображения, полученные с фотоаппаратов или сохраненные в некоторых графических редакторах, содержат массу дополнительной информации (метаданные, избыточная цветовая палитра и пр.). Существует несколько графических форматов, поддерживаемых  современными браузерами: PNG-8, PNG-24, JPEG, GIF. Каждый из них позволяет получить значительный выигрыш в размере. Вот наглядный пример, где видна проведённая оптимизация графики средствами Adobe Photoshop без потери качества, позволившая в 4,5 раза сократить исходный объём файла с 904 до 203 кБайт:

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

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

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

    В случае, когда для верстки требуются полупрозрачные изображения, используется формат PNG-24, поддерживающий альфа-каналы.
    Для изображений с ограниченной палитрой применяем PNG-8. Этот формат, как и GIF, позволяет использовать прозрачность, но в большинстве случаев превосходит GIF. Достигается это за счёт более совершенной методики сжатия, которая охватывает и горизонтальные, и вертикальные повторения, а также адекватно работает с градиентами.

    Единственным кросс-браузерным форматом, который отображает анимацию в изображениях, является GIF. Хотя уже в ближайшем будущем ему составит конкуренцию развивающийся APNG.

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

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

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

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

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

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

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

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

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

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

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

    На странице часто подключается несколько файлов JavaScript. Уменьшив их количество, можно увеличить итоговую скорость загрузки страниц. Код JS объединяется в одном файле, загруженном и кэшированном единожды. Это решение сработает, если кода JavaScript на сайте немного (до 100 килобайт в сжатом виде). В ситуации, когда сайт представляет собой сложное веб-приложение и объем кода превышает 100–150 килобайт в сжатом виде, у объединения всего кода в одном файле будет отрицательная сторона: при запросе первой страницы пользователь будет загружать часть кода, которую мог бы не загружать вовсе.

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

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

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

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

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

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

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

    Загрузить
    Комментарии

    Комментарии