Обновления и новости

Невозможное возможно: как мы достигли почти 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 - Cлайдер выбора диапазона цен в поисковом фильтре» скопируйте код JavaScript.
3. Создайте блок меню и вставьте в него скопированный код.
4. Установите галочку «JavaScript / CSS style».
5. В появившемся поле с параметрами выберите «Javascript - async».

Для подключения стилей:

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

Код доступен по ссылке: #Price_range_swiper

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

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

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

В результате улучшена работа следующих функций:

• Перемотка товаров и статей
• Изменение количества товаров при добавлении в корзину
• Взаимодействие с разновидностями товаров
• Добавление товаров в избранные
• Отображение и скрытие заполненных значений в поисковом фильтре
• Мобильное меню
• Скрипт Слайд Меню
• И прочие...

Это обновление значительно ускоряет загрузку страниц и делает работу сайта более плавной и комфортной. Спасибо, что выбираете нас!

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

• 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()