Оптимизация и ускорение загрузки страницы товара сайта codan.com.ua (Opencart)

Техническое задание.

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

В конце 2019 года Google начал учитывать показатели скорости загрузки мобильной версии сайта при начислении платы за рекламу ( https://support.google.com/google-ads/answer/2404197?hl=ru ).

Качество целевой страницы

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

Рекомендации Google

Google: почему скорость загрузки важна?

Чем дольше скорость загрузки страницы, тем сильнее это влияет на показатели отказов, например:

  • если скорость загрузки замедлить с 1 секунды до 3, то показатель отказов вырастет на 32%;
  • если скорость загрузки замедлить с 1 до 6 секунд, то показатель вырастет на 106%;
  • страницы, помеченные как медленные, могут быть понижены в поиске Google.

Связался с Google 🙂

Техническая поддержка Google Ads мне никаких конкретных цифр не дала:

Katarzyna · 10:45 AM  Добрый день! Вас приветствует отдел рецепции для новых рекламодателей Google Ads. Меня зовут Екатерина. Чем могу помочь?  

Я: Здравствуйте, есть вопрос о влиянии скорости загрузки целевой страницы на стоимость за клик. Где-то попадалось, что показатели PageSpeed Insights ( https://developers.google.com/speed/pagespeed/insights/?hl=RU ) как-то влияют на стоимость клика в Гугл-рекламе. Не могли-бы Вы дать какую-то информацию, ссылки на какие-то документы по этому вопросу. Спасибо.

Пропустим неинтересные моменты знакомства-идентификации, переключения на другого специалиста…

Yuliia · 11:06 AM отвечая на Ваш вопрос — скорость загрузки целевой страницы влияет на показатели качества, а это в свою очередь влияет на то, как часто обьявление может выигрывать в аукционе и по меньшей цене за клик — чем выше показатель качества, тем больше вероятность того, что обьявление выиграет в аукционе, а цена за клик будет ниже

Я: А можете дать ссылки на какие-то документы по этому вопросу? Какие-то конкретные цифры, формулы?

Yuliia · 11:11 AM  https://support.google.com/google-ads/answer/1722122 «Фактическая цена за клик. Высокое качество рекламы зачастую позволяет показывать ее по более низкой цене за клик.» подскажите, пожалуйста, что Вы имеете в виду под формулами?

Я:  Я не нашел там ответа как скорость загрузки целевой страницы влияет на качество объявления? под формулами: увеличили скорость загрузки целевой страницы в 2 раза — получили снижение цены в 2 раза )

Yuliia · 11:12 AM  скорость загрузки целевой страницы влияет на показатель качества, а это в свою очередь может влиять на цену за клик   https://support.google.com/google-ads/answer/2404197?hl=ru  вот здесь хорошо описано про качество целевой страницы. Если Вы ее оптимизируете постоянно, если Ваша страница быстро загружается, система система дает ей хорошую оценку. От этой оценки зависит рейтинг обьявлений, и как следствие цена за клик и позиция на аукционе

Я:   Да, но хотелось-бы конкретные цифры…  А так это общие фразы…

Yuliia · 11:17 AM конкретных формул не могу Вам назвать, это больше касается маркетинговой стороны рекламы, есть общие рекомендации, как повысить качество целевой страницы.

Посему у заказчика встал вопрос по ускорению загрузки сайта интернет-магазина codan.com.ua

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

На тестовый сервер был установлен SSL Let’s Encrypt сертификат.

Оба сайта, основной и тестовый,  физически находятся на одном VPS-сервере, что сильно облегчает задачу корректного сравнения результатов работы.

Перед началом работы зафиксируем исходные показатели:

Google Search Console показала, что основная масса страниц (376) codan.com.ua с низкой скоростью.

Google Search Console

 

В Google Реклама колонка «Скорость работы на мобильных устройствах»: максимальное значение — 5/10:

Google Reklama

Обращаем внимание также на последний столбец —  «Доля кликов для мобильных страниц».

Для примерного измерения скорости загрузки сайта воспользуемся online-сервисом:  Google Page Speed Insights . Все алгоритмы расчета показателей скорости загрузки для мобильных страниц  Google реализовал здесь.  Необходимо учитывать, что нагрузка на этот сайт в последнее время огромная и показатели этого сайта очень сильно плавают и зависят от этой нагрузки, поэтому нужно делать несколько, даже много тестов в разное время и ориентироваться на наибольшее значение.

По желанию заказчика, в первую очередь, будем оптимизировать страницу товара. Для доработки была выбрана средняя по наполненности страница товара: Универсальная смазка S6+ Berner .

 

Pagespeed для мобильных блок 1

Pagespeed мобильные до ускорения 1

Pagespeed для десктоп блок 1

Pagespeed desktop до ускорения 1

Pagespeed для мобильных блок 2

Pagespeed для десктоп блок 2

Pagespeed для мобильных блок 3

Pagespeed для десктоп блок 3

Для мобильных — 23, Для компьютеров – 52. Невеселые значения, в идеале сайт должен набирать более 90 баллов, чтобы попасть в зеленую зону. Но на практике мало кому это удается (особенно если это касается мобильной версии — здесь даже в «оранжевую» зону мало кто попадает).

И если посмотреть показатели Pagespeed топовых магазинов Украины :

Pagespeed для мобильных Розетка

Розетка

Pagespeed для мобильных Брейн

Брейн

Pagespeed для мобильных блок 2

ItBox

Pagespeed для десктоп блок 2

Фокстрот

И тогда становится понятно, что увеличить показатели Pagespeed очень непросто даже для таких монстров 🙂

А теперь измерим показатели более тонкими,  профессиональными инструментами:

gtmetrix.com , правда этот инструмент, бесплатно измеряет только показатели десктопной страницы, но эта информация нам потом пригодится для анализа…

 

Gtmetrix_PageSpeed

Gtmetrix PageSpeed до оптимизации

Gtmetrix_YSlow

Gtmetrix YSlow до оптимизации

Ну и теперь самый точный, прецизионный инструмент, на его показания не влияет нагрузка на сайт  :  https://www.webpagetest.org/

Webpagetest Codan до оптимизации

Здесь мы видим, что все показатели качества красные…


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

 

Pagespeed для мобильных блок 1

Pagespeed мобильные после оптимизации 1

Pagespeed для десктоп блок 1

Pagespeed десктоп после оптимизации 1

Pagespeed для мобильных блок 2

Pagespeed мобильные после оптимизации 2

Pagespeed для десктоп блок 2

Pagespeed десктоп после оптимизации 2

Pagespeed для мобильных блок 3

Pagespeed мобильные после оптимизации 3

Pagespeed для десктоп блок 3

Pagespeed десктоп после оптимизации 3

 

Для удобства составил таблицу:

Показатель для мобильных

До оптимизации

После оптимизации

Улучшение %

Pagespeed

23

73

317

Запросов к серверу

95

45

211

Размер страницы

2 001 КБ

530 КБ

377

Время загрузки первого контента

3,0 сек.

2,5 сек.

120

Индекс скорости загрузки

6,5 сек.

4,6 сек.

141

Отрисовка крупного контента

11,3 сек.

4,4 сек.

256

Время загрузки для взаимодействия

10,6 сек.

5,8 сек.

182

Общее время блокировки

950 мс

200 мс

475

Совокупное смещение макета

0,921

0,068

1354

Успешные аудиты

9

19

210

 

Web Page Performance Test:

Webpagetest после оптимизации

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

Приведу еще сравнительные диаграммы от WebpageTest:

Cкорость начальной отрисовки контента  — Visual Progress (%) 

Visual Progress

Web Page Performance Test: сравнение скорости отрисовки контента на тестовом(Test) после оптимизации и основном (Main) до оптимизации.

Сравнение скорости отрисовки контента

На оптимизированном, тестовом основной контент страницы загружен за 2.5 сек, полностью страница загружена – 3 сек.

На неоптимизированном, основном,  основной контент страницы загружен за 6 сек, полностью страница загружена – 7 сек.

Сравнение основных временных показателей. Timings (mS)

Сравнение основных временных показателей

Количество запросов к серверу. Requests.

Количество запросов к серверу. Requests

Объем байт с разбивкой по типу файлов. Bytes.

Объем байт с разбивкой по типу файлов. Bytes.

PS: 18.10.2020

Ну, вот уже и результат, полученный через 2 месяца в Google Реклама (8/10, в основном 7/10), такие вещи быстро не проявляются:

Google_reklama

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

А если, кому очень интересно… может посмотреть пока в Word:  Отчет по оптимизации codan.com.ua

А вот отзыв заказчика:

После этого мы перешли на более мощный хостинг, обновили сервер +2 ядра, Ubuntu c 16 до 20….

Вообщем статья будет….