Оптимизация сайтов под google pagespeed

Зачем это нужно?

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

Следует помнить, что в расчет берется скорость работы проекта на мобильных устройствах. Для десктоп устройств (ноутбуки, стационарные компьютеры) - оценка скорости работы не играет принципиального значения и берется в расчет в очень специфических случаях.

Как оценивается?

Оценка производительности проекта осуществляется на основе результатов автоматического тестирования таким инструментом как Google PageSpeed/LightHouse

Закреплением результатов автоматического тестирования, служат данные полученные от посетителей ресурса по тем же метрикам, которые проверяет Google PageSpeed.

Критерии оценки

ПС Google считает, что чем быстрее посетитель увидит на своем экране контент, который отвечает его запросу - тем быстрее проект. Важно понимать, что речь идет о контенте, который должен быть отображен в текущей области просмотра мобильного браузера посетителя, а не всего сайта целиком.

Ключевые факторы влияющие на оценку скорости сайта:

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

Понимая принцип оценки, программист и верстальщик проекта, должны сформировать код страницы таким образом, чтобы эти временные отрезки сделать как можно меньше. В среднем, для получения всего необходимого, совокупное время должно быть не более 2 секунд. Задержка ввода должна быть не более 120мс.

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

Проблемы приводящие к долгой загрузке сайта

Проблемы, приводящие к долгой загрузке сайта делятся на две группы:

  1. Влияющие на то, как быстро проект начинает отдавать страницы браузеру (время между запросом от посетителя и получением первого байта браузером)
  2. И влияющие на то, насколько быстро браузер, получив код страницы, сможет отобразить что-то полезное посетителю.
  3. Группа 1

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

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

    Группа 2

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

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

    Подводя итоги, мы проводим комплекс мер, направленных на исправление проблемных мест проекта, для получения оценки 90+ по Google PageSpeed.

    Способ решения проблемы

    Объемы работ, их тип и стоимость, зависят от того, какого характера проблемы Вы хотите устранить.

    От нас заказчик получает:

    1. Рекомендации (если они нужны) по исправлению конфигурации серверной части проекта. Чаще всего это касается стратегии кэширования или прозрачной работы с WEBP. Сами правки в этом случае можем внести как мы, так и системный администратор по нашему документу.
    2. Собственно, программный комплекс, который содержит внутри себя набор подготовленных для проекта правил, позволяющих ему, получив страницу от кода сайта, адаптировать ее под требования производительности. И как следствие - высокие оценки в тесте PageSpeed.

    Без наших правок формирование страницы происходит так:

    1. Код проекта, формирует код страницы и отдает его в браузер посетителю;
    2. Браузер согласно коду страницы формирует ее отображение.

    С нашими правками:

    1. Код проекта формирует код страницы и отдает его модулю;
    2. Модуль вносит коррективы в логику формирования страницы по заданным ему правилам и передает страницу браузеру;
    3. Браузер согласно коду страницы формирует ее отображение.

    Комплекс сделан таким образом, что:

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

    Выполняемые работы:

    1. Работы по уменьшению количества внешних запросов требуемых для формирования всей страницы или главной ее части.
    2. При необходимости, оптимизация верстки тех частей страницы, которые приводят к замедлению работы.
    3. Оптимизация существующего CSS кода в случае, если его объем превышает допустимую границу.
    4. Оптимизация работы с шрифтами необходимыми для отображения проекта.
    5. Оптимизация загрузки изображений (внедрение LazyLoad) таким образом, чтобы снизить нагрузку на канал посетителя, при этом не навредив индексируемости сайта.
    6. Оптимизация загрузки ресурсов загружаемых посредством Iframe (Youtube плеера, карты и т.д.).
    7. Оптимизация и распределение нагрузки, создаваемой JavaScript логикой страницы.
    8. Настройка работы серверной части таким образом, чтобы изображения отдаваемые посетителю были сформированы в WEBP формате. Настройка не потребует от программистов проекта внесения изменений в свой код.

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

    Далее проводится тестирование проекта, на предмет нарушений в логике его работы. Все тестирование не влияет на посетителей. Измененные страницы видны только тем, кто попадает в группу тестеров.

    Открытие модуля для всех.

    На что стоит обратить внимание при выборе варианта оптимизации скорости загрузки

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

    Очевидно также, что все оптимизации можно провести исправив ошибки непосредственно в коде сайта.

    Однако, мы отказались от такого решения в пользу промежуточного модуля по причинам:

    1. Нагрузка создаваемая модулем не превышает 40мс, что во много раз меньше той экономии которую он создает.
    2. Мы не разрушаем привычную для программистов структуру, не вмешиваемся в их код. Для них все остается прозрачно.
    3. Существование модуля в таком формате, делает его максимально надежным для проекта. Потенциальные проблемы внутри модуля, не приводят к нарушению работы ресурса. Отключение модуля может сделать человек без квалификации!

    Какие гарантии нужно требовать в качестве результата оптимизации

    1. Мы гарантируем получения 90+ баллов в мобильном тесте оценки производительности по Google PageSpeed.
    2. Мы гарантируем получения 90+ баллов в десктоп тесте оценки производительности PageSpeed.
    3. Мы гарантируем поддержку 24x7 на случай возникновения проблем в работе проекта. Даже если они не вызваны работой модуля, мы поможем разобраться.
    4. Мы гарантируем бесплатное обновление кодовой базы нашего модуля под любые изменения в работе алгоритма оценки производительности.

    Кроме того

    1. Проводим любые консультации связанные с технической реализацией задач проекта, в том числе SEO оптимизации и аудит качества работы сторонних специалистов.
    2. Осуществляем комплексную услугу по оптимизации всего кода и «выжиманию» из страниц сайта всей скорости. Делается всё, вплоть до расчета объёма страниц, кратного передаче пакетов по TCP.

    P.S.:

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

Отправите нам сообщение?

Вы хотите связаться с нами?

Добро пожаловать!

Вы хотите позвонить нам?

Уведомление