Блог

Неможливе можливе: як ми досягли майже 100% у Google PageSpeed

У сучасному веб-світі швидкість завантаження сайту — один із ключових факторів успіху. Нещодавно нам вдалося зробити справжній прорив і підняти показники Google PageSpeed до практично 100% за всіма найважливішими метриками! Це результат комплексної і ретельної оптимізації, у яку ми вклали максимум знань та досвіду.

Що допомогло досягти такого результату?

1. Оптимізація завантаження скриптів і стилів
Ми впровадили відкладене завантаження JavaScript і CSS, щоб критично важливі для відображення сторінки ресурси завантажувалися першими, а всі інші — асинхронно і лише за потреби. Більшість скриптів на платформі завантажується безпосередньо під час взаємодії з користувачем. Завдяки цьому користувачі бачать контент миттєво, а браузер не блокується зайвими викликами.

2. Стиск і мінімізація даних
Всі скрипти, стилі та зображення були максимально стиснуті і оптимізовані. Використання сучасних форматів зображень WebP/SVG, а також мініфікація CSS і JavaScript значно зменшили загальний обсяг завантажуваних даних.

3. Ефективне кешування та CDN
Ми налаштували кешування на сервері та використали мережу доставки контенту (CDN), що дозволило доставляти файли ближче до користувачів і зменшувати час відповіді сервера.

4. Розумна робота із зображеннями
Для всіх картинок реалізовано адаптивне завантаження — різні розміри і формати для різних пристроїв та роздільних здатностей. Використовуються техніки lazy loading, що дозволяє не завантажувати зображення, поки користувач до них не дійде.

5. Оптимізація шрифтів
Підключення шрифтів виконано з параметром font-display: swap, що знижує час відображення тексту без затримок через завантаження шрифтів.

6. Покращення рендерингу та DOM
Ми зменшили кількість зайвих елементів, оптимізували структуру HTML, прибрали непотрібні перерисовки та повторні обчислення стилів, що дозволило пришвидшити перше відображення і зробити інтерфейс чуйним.

Усі ці заходи дозволили нам практично досягти максимальних значень у Google PageSpeed Insights — а отже, сайт завантажується швидко, плавно та зручно на будь-яких пристроях і мережах.

Неможливе стало можливим завдяки увазі до деталей і комплексному підходу до оптимізації. Це відкриває нові горизонти для покращення користувацького досвіду і підвищення конверсії.

Всі ці переваги ви отримаєте, якщо оберете платформу Hotlist.biz для створення сайтів та інтернет-магазинів.

На платформі Hotlist.biz з’явилася нова сторінка зі списком країн виробників. Тепер відвідувачі ваших інтернет-магазинів зможуть швидко знаходити товари за країною їхнього виробництва.

Крім того, у картці товару назва країни виробника стала активним посиланням. Натиснувши на нього, ви потрапите на сторінку з усіма товарами з тієї ж країни, що й вибраний товар.

Це оновлення зробить пошук і вибір товарів ще зручнішим і допоможе швидше знаходити продукцію потрібного походження.

На платформу Hotlist.biz додано Price Range Swiper — слайдер вибору діапазону цін у пошуковому фільтрі. Тепер користувачі можуть зручно встановлювати мінімальну та максимальну ціну за допомогою повзунків «Від» та «До», які відображаються зверху форми пошуку. Це покращує зручність і точність підбору товарів за ціною.

Для встановлення цього коду виконайте наступні кроки:

1. Перейдіть у розділ «Сторінки» → «Віджети HTML».
2. У пункті «Price range swiper - Слайдер вибору діапазону цін у пошуковому фільтрі» скопіюйте код JavaScript.
3. Створіть блок меню та вставте в нього скопійований код.
4. Встановіть позначку «JavaScript / CSS style».
5. У появленому полі з параметрами оберіть «Javascript - async».

Для підключення стилів:

1. Скопіюйте CSS стиль зі сторінки інструкцій зі створення «Price Range Swiper».
2. Вставте його в редактор дизайну у вкладці «CSS стилі».

Код доступний за посиланням: #Price_range_swiper

Оновлення продуктивності сайту: оптимізація JavaScript та відкладене завантаження

Ми провели масштабну оптимізацію JavaScript на сайті для підвищення швидкості завантаження та покращення користувацького досвіду. Тепер більшість бібліотек завантажуються відкладено — лише тоді, коли це справді необхідно.

Всі скрипти винесені в окремі файли і підвантажуються виключно на тих сторінках, де вони використовуються, або коли користувач взаємодіє з відповідними елементами.

В результаті покращена робота наступних функцій:

• Перемотування товарів та статей
• Зміна кількості товарів при додаванні до кошика
• Взаємодія з різновидами товарів
• Додавання товарів до обраного
• Відображення та приховування заповнених значень у пошуковому фільтрі
• Мобільне меню
• Скрипт слайд-меню
• І інші...

Це оновлення значно пришвидшує завантаження сторінок і робить роботу сайту більш плавною та комфортною. Дякуємо, що обираєте нас!

• 🔧 Можливість підключення кастомних стилів лише на потрібних сторінках;
• 📁 Стилі зберігаються в окремому кешованому файлі, а не на самій сторінці;
• ⚡ Забезпечується чисте та швидке завантаження сторінок без вбудованого CSS.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.0/jquery-ui.min.js"></script>

• dialog()
• draggable()
• droppable()
• resizable()
• selectable()
• sortable()
• accordion()
• tabs()
• tooltip()
• datepicker()
• progressbar()
• spinner()
• slider()
• slider("option")
• slideUp()
• slideDown()
• fadeIn()
• fadeOut()
• position()
• widget()

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.0/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.14.0/jquery-ui.min.js"></script>

• dialog()
• draggable()
• droppable()
• resizable()
• selectable()
• sortable()
• accordion()
• tabs()
• tooltip()
• datepicker()
• progressbar()
• spinner()
• slider()
• slider("option")
• slideUp()
• slideDown()
• fadeIn()
• fadeOut()
• position()
• widget()