I built a Shopify app that makes stores feel instant using link prefetching

{ "title": "Ускорение навигации в Shopify-магазинах через предзагрузку ссылок", "content": "

Что не так с навигацией в Shopify?

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

Решение проблемы: предзагрузка ссылок при наведении мыши

Автор решил устранить эту проблему путем внедрения техники предзагрузки ссылок (link prefetching). Идея заключается в том, чтобы начать загрузку целевой страницы задолго до того, как пользователь кликнет по ссылке. Это делается во время наведения курсора на ссылку, когда есть около 200–400 миллисекунд до реального клика.

Как работает решение

Для реализации автор создал небольшой плагин под названием Prefetch for Shopify. Он добавляет скрипт (~2 КБ после сжатия gzip) в магазин, который отслеживает события наведения мыши и инициирует предварительную загрузку целевых страниц с помощью элемента <link rel=\"prefetch\">.

Основные технические детали

1. Дебаффинг намерения наведения
   Чтобы избежать излишней нагрузки на сеть, скрипт не запускает предзагрузку при каждом случайном движении мышью. Вместо этого используется задержка примерно в 65 миллисекунд, что позволяет определить реальное намерение пользователя.

   link.addEventListener('mouseover', () => {
     hoverTimer = setTimeout(() => prefetch(link.href), 65);
   });
   link.addEventListener('mouseout', () => clearTimeout(hoverTimer));
   

2. Адаптивность к скорости соединения
   На медленных соединениях (например, 2G или слабом 3G) предзагрузка может негативно сказаться на производительности основного сайта. Поэтому скрипт автоматически отключается, если обнаруживается низкая скорость интернета.

   const conn = navigator.connection;
   if (conn && (conn.saveData || /2g/.test(conn.effectiveType))) {
     // Отключаем предзагрузку
   }
   

Заключение

Предварительная загрузка ссылок является простым и эффективным способом улучшения пользовательского опыта в Shopify-магазинах. Благодаря этому решению пользователи получают более плавный и быстрый переход между страницами, что положительно сказывается на восприятии магазина и его конверсиях. ", "excerpt": "Статья рассказывает о решении проблемы медленной навигации в Shopify-магазинах за счет использования технологии предзагрузки ссылок при наведении мыши. Автор разработал простой плагин, который улучшает производительность и повышает удобство пользователей.", "metaTitle": "Улучшение навигации в Shopify с помощью предзагрузки ссылок", "metaDescription": "В статье рассматривается технология предзагрузки ссылок для ускорения перехода между страницами в Shopify-магазинах. Описаны технические аспекты и преимущества данного подхода.", "tags": [ "Shopify", "JavaScript", "Performance Optimization", "Frontend Development" ], "category": "Frontend" }