Прискорення завантаження сторінок інтернет-магазину на OpenCart з Google PageSpeed Insights (Core Web Vitals)

Не сумнівайтеся з приводу необхідності високої швидкості завантаження інтернет-магазину. Тисячі досліджень доводять, що швидкість сторінок і продажу пов'язані безпосередньо. Якщо ви питаєте себе, навіщо мені платити гроші, для чого мені потрібен швидкий інтернет-магазин?

 – Відповідь одна: “Тільки для продажів, для ваших високих продажів”, оскільки:

1. Якщо у вас швидкий інтернет-магазин, вже з травня 2021 року його швидкість належним чином оцінить Google, який ось в цій довідці оголосив, що швидкість по CORE WEB VITALS тепер буде фактором ранжування в пошуковій видачі.
   
2. Якщо у вас буде класний швидкий інтернет-магазин, значить він буде ЗРУЧНИЙ вашим Покупцям, не змусить їх нервувати і довго чекати завантаження сторінок, товарів, фото і т.д.
   
3. А оскільки ваш швидкий інтернет-магазин сподобається відвідувачам у використанні, їм буде приємно швидко і зручно отримувати інформацію на своїх мобільних пристроях, вони будуть купувати у вас частіше, ніж на середньостатистичному повільному сайті-конкурента. Висловлюючись професійною термінологією - у вашого інтернет-магазину буде вище відсоток конверсії з користувачів в Покупці (це при всіх інших рівних умовах, до яких відносяться: якісне представлення товару (опис, зображення, відео, ціна товару), умови доставки, вибір і асортимент, ввічливі менеджери, умови гарантії і повернення, наявність акцій і т.д.).

Підводимо підсумок. Вам потрібен швидкий інтернет-магазин, оскільки:

1. Швидкі інтернет-магазини буде "поважати" і добре ранжувати Google, а це величезні плюси та економія на рекламних бюджетах в платній рекламі.
2. Його будуть любити Покупці, які охочіше будуть здійснювати покупки, тим самим ви, як грамотний маркетолог, збільшите показник повернення інвестицій в рекламу і в розвиток онлайн-вектора вашого бізнесу. При рівних витратах ви отримаєте більше продажів, ніж конкуренти з повільними сайтами, дослідження ось тут:

• https://www.portent.com/blog/analytics/research-site-speed-hurting-everyones-revenue.htm
• https://www.propellernet.co.uk/the-impact-of-speed-on-ecommerce/
• https://www.abtasty.com/blog/page-speed-conversions/.

Улітку 2020 р. Google ввів нові алгоритми, згідно з якими оцінка швидкості завантаження сторінок будь-якого сайту визначається за трьома показниками, які зараз називаються "Core Web Vitals":

1. LCP — швидкість завантаження основного вмісту (Largest Contentful Paint);
2. FID — час очікування до першої взаємодії з контентом (First Input Delay);
3. CLS — стабільність верстки і елементів, які не перешкоджають взаємодії з контентом (Cumulative Layout Shift).

Якщо колись у вашого інтернет-магазину і були хороші показники по тесту Google Insights PageSpeed https://developers.google.com/speed/pagespeed/insights/?hl=ru, то зараз все змінилося, показники по швидкості завантаження мобільної версії кардинально погіршилися - і це потрібно терміново виправляти.

Щоб почати роботи з поліпшення цих показників, спочатку необхідно провести більш глибокий аналіз-аудит сайту, щоб виявити проблемні місця, скласти детальний план дій для програміста і оцінити таке завдання.

Вартість діагностики (аудиту) інтернет-магазину на предмет швидкості завантаження його сторінок орієнтовно 2-3 години програміста. Актуальні ціни можете уточнювати у нашому телеграм-чаті.

Важливо. Якщо після діагностики ви замовите у нас і саму послугу впровадження Плану оптимізації, вартість діагностики віднімається від суми годин, яка буде рекомендуватися до покупки за результатами складання Плану оптимізації (тобто при замовленні послуги оптимізації швидкості, послуга діагностики виконується безкоштовно).

Діагностика включає в себе:

1. Перевірка сервера. Перевіряється можливість установки сторонніх бібліотек на сервері, можливість отримати "root-доступ", швидкість його роботи, конфігурація налаштування та існуючі на такому хостингу/сервері можливості для того, щоб забезпечити реалізацію необхідних робіт.
2. Перевірка шаблону інтернет-магазину та встановлених модулів. Перевіряється структура шаблону на різних сторінках, його верстка, встановлені модулі, які можуть впливати на швидкість завантаження і на віддачу контенту, а також наявність можливості вносити в них зміни.
3. Перевірка контенту інтернет-магазину. Перевіряємо кількість товарів, атрибутів, категорій, фільтрів. Перевіряємо формат зображень, їх розміри, а також де саме і як вони відображаються. Перевіряємо конфлікти контенту з оптимізацією.
4. Перевірка якості розробки інтернет-магазину за тестами інструменту для веб-майстрів Google Lighthouse https://developers.google.com/web/tools/lighthouse. Перевіряємо та аналізуємо всі істотні показники (Core Web Vitals) за тестами Google PageSpeed. Аналізуємо кожен пункт, підбираємо під кожну помилку можливі методи реалізації питань, за допомогою яких буде проходити оптимізація та усунення конкретних помилок.
5. Складання плану дій по оптимізації сайту. Після аналізу пунктів 1-4 складаємо план дій, які необхідно буде реалізувати, щоб максимально прискорити швидкість завантаження сторінок та отримати максимально-можливі бали по Google-тестів.

Якщо ваш інтернет-магазин на OpenCart колись займав провідні позиції по пошуковим запитам, а зараз трафіку стає все менше, результати продажів падають, вам терміново потрібно перевірити швидкість завантаження сторінки сайту інтернет-магазину на OpenCart по тесту Google Insights PageSpeed

Вся справа в тих змінах, які торкнулися нещодавно ринку в цілому, а також частки розподілу користувальницького попиту на сегменти і аудиторії зокрема. Суть проблеми в двох словах - значне зростання відсотка користувачів мобільних пристроїв і зниження в ранжируванні тих ресурсів, які набирають низькі бали на думку PageSpeed Insights.

За статистикою на 2020 рік, понад 53% користувачів мережі Інтернет вже використовують для веб-серфінгу мобільні пристрої, а в деяких нішах, використання смартфонів і планшетів досягає 80-90%! Пошуковий гігант Google, звичайно ж, адаптується під цей рух на ринку, і, щоб задовольнити попит своїх користувачів, вносить корективи у свої алгоритми ранжирування сайтів з тим, щоб в Топі були ті Інтернет-магазини, які зручні для перегляду і покупок з "мобільних". До того ж, не так давно ми розповідали про індекс mobile-first.

Яку оцінку поставив Google вашому інтернет-магазину?

Як перевірити і виміряти роботу сайту? Для незалежної, об'єктивної оцінки мега-пошуковик розробив спеціальний онлайн-тест аналізу швидкості сайтів - Google PageSpeed Insights.

За підсумками тестування ваш сайт отримує відповідну оцінку:

• зелена зона - добре (веб-сторінка набрала більше 85 балів, швидко завантажується і чудово оптимізована під всі типи пристроїв);
• жовта зона - ресурс потребує корекції (сторінка недостатньо швидко завантажується, потрібно внести виправлення відповідно до рекомендацій)
• червона зона - погано (веб-сторінка зовсім не оптимізована і повільно завантажується, слід негайно вносити корективи).

Наприклад, на 12.03.2021 нам вдалось отримати наступні показники по нашій платформі, модель А:

- головна сторінка

• для десктопної версії:

• для мобільних пристроїв:

- сторінка категорій

• для десктопної версії:

• для мобільних пристроїв:

- карточка товару

• для десктопної версії:

• для мобільних пристроїв:

Адаптивний дизайн, PWA, AMP або як прискорити роботу сайту для зручності користувачів?

Крім поліпшення показників Core Web Vitals пошуковики рекомендують впроваджувати PWA, AMP, Турбо-сторінки (актуально для проектів, орієнтованих на Яндекс).

PWA (Progressive Web App) або прогресивний веб додаток — це в буквальному перекладі "прогресивний мобільний додаток" для вашого інтернет-магазину. Це альтернатива нативних (тих, які ви зазвичай завантажуєте в Google Play і AppStore) додатків для мобільних пристроїв. Вашим покупцям більше не доведеться здійснювати додаткових дій, а вам не потрібно розробляти додаток з нуля. PWA буде доступний для завантаження вже з другого входу на сайт, система сама запропонує користувачеві встановити його у спливаючому вікні або з меню браузера вручну. Детальніше про PWA ми писали в статті: Розробка мобільного додатка (PWA) для інтернет-магазину на OpenCart.

AMP (Accelerated Mobile Pages) в перекладі – прискорені мобільні сторінки. AMP сторінки являють собою спрощені версії сторінок інтернет-магазину. На даних сторінках відображається вся важлива інформація про товар, щоб покупець міг ознайомитися та замовити / купити товар з мобільного пристрою.

Турбо-сторінки — це технологія Яндекса, що дозволяє створювати полегшені версії сторінок для відображения на мобільних пристроях. Швидкість завантаження турбо-сторінки перевищує звичайну приблизно в 15 разів. І, додатковий (але не останній), бонус — якщо сайт впаде, наприклад, через зараження або DDoS-атаки, його турбо-сторінки продовжать відкриватися і контент буде доступний користувачам.

Зручно людям користуватися вашим сайтом? Наскільки швидко відбувається завантаження сторінок? Однаково добре сприймати інформацію з вашого сайту, переглядаючи її на моніторі комп'ютера або смартфоні?

Сайт з адаптивним дизайном:

• забезпечує швидкий час завантаження сторінки незалежно від типу пристрою;
• гармонійно відображає зміст сайту на будь-якому пристрої, з якого користувач переглядає Інтернет-ресурс;
• на відміну від мобільних додатків, має єдину адреса сайту, а також уніфіковану систему управління контентом ресурсу.

Що входить у зміст послуги?

Як же прискорити завантаження сторінок сайту? Для отримання високого рейтингу від Google PageSpeed професіонали веб-студії «NeoSeo» знайдуть проблемні місця і, якщо це можливо, усунуть "гальма". Швидкість роботи інтернет-магазину оцінюється окремо для мобільної і десктопної версії за такими параметрами:

• Оптимізація зображення (можлива тільки у випадку, якщо ваш веб-ресурс працює на VPS - Virtual Private Server - сервер, який має суттєві переваги у порівнянні з класичним виділеним сервером: налаштування, управління тощо). За новими вимогами Google PageSpeed, потрібен новий формат зображень, а саме кодування JPEG 2000, JPEG XR і WebP. Для вирішення такої проблеми модуль використовує бібліотеки MozJpg, OptiPng, Imagick. З допомогою Imagick генеруються зображення у формат WebP, що дозволяє замінювати для підтримуваних браузерів зображення у форматі PNG.

• Відстрочене завантаження зображень (виведення зображень буде відбуватися на вимогу за допомогою бібліотеки blazy.js. При завантаженні сторінки відображатимуться заглушки зображень, потім по мірі відкриття сторінки і прокручування, користувачеві будуть прогружатися зображення).

• Включення gzip стиснення даних (веб-сторінка швидше завантажується при зменшенні розмірів зображень і текстових файлів з сервера, які направляються до браузеру користувача в оптимальних розширення html .css .js і т. д.).

• Використання кешу браузера на стороні користувача сайту (браузер зберігає кешовані файли раніше відвіданих веб-ресурсів, істотно прискорюючи наступні завантаження сторінок).

• Налаштування скорочення JavaScript (з допомогою певних алгоритмів відбувається оптимізація програмного коду, що впливає на підвищення швидкості веб-ресурсу).

• Підключення бібліотек JavaScript (метод підключення внутрішніх бібліотек JavaScript буде змінено на метод defer або async, такі підключення дозволять прибрати скрипти завантаження з основного потоку, вони будуть подгружаться паралельно).

• Ефективне стиснення CSS (Cascading Style Sheet використовується для візуальної презентації веб-сторінок і після оптимізації прискорює роботу сайту).

• Підключення внутрішніх CSS (стилі підключаються також паралельно, поза основним потоком).

• Підключення шрифтів (шрифти підключаються також поза основним потоком: спочатку повинен завантажуватися сам текст, вже після підключається шрифт).

• Налаштування скорочення HTML (HyperText Mark-up Language - мова розмітки, за допомогою якої браузер розпізнає текст Інтернет-сторінки).

Веб-студія «NeoSeo» не надає таких послуг:

• Зауваження, які мають відношення до сторонніх сайтів (наприклад, Google PageSpeed серед зауважень зазначає неправильний час кешування власного сценарію Google Analytics, і в цьому випадку дану проблему вирішити неможливо. На ваш розсуд: фахівці «NeoSeo» можуть запропонувати налаштування, в результаті яких при перевірці цього сервісу сторонні скрипти не видаються).

Вартість і терміни виконання робіт уточнюйте у менеджерів з продажу у Телеграм-чаті.

Замовляйте оптимізацію швидкості завантаження сторінок вашого інтернет-магазину на OpenCart, отримуйте найвищі бали, найвищі позиції і такі ж продажі. Завжди поруч, Команда веб-студії«NeoSeo»!