Скорост на Shopify: тема, приложения, снимки

Всеки Shopify магазин работи на едни и същи сървъри и CDN, така че бавният магазин е бавен заради това, което зарежда: темата, скриптовете на приложенията, изображенията и видеото. Оптимизацията на скоростта в Shopify означава да премахнеш и смалиш тези неща, а не да сменяш хостинга. В повечето магазини най-големите печалби идват от махането на неизползван код от приложения, компресирането на основното изображение и по-късното зареждане на уиджетите.

Това ръководство показва как да измериш скоростта правилно, после минава през поправките в реда, в който обикновено се отплащат. То е част от ръководството за SEO за Shopify.

Измервай правилните страници

Тествай продуктова страница и страница на колекция, а не само началната. Това са страниците, които се класират и на които купувачите попадат.

Google PageSpeed Insights дава лабораторни оценки за едно зареждане и, ако магазинът ти има достатъчно посетители, реални Core Web Vitals от потребители на Chrome за последните 28 дни. Данните от реални потребители са тези, които Google използва.
Отчетът Core Web Vitals в Search Console групира URL адресите ти по статус, така че виждаш дали всички продуктови страници имат общ проблем.
Отчетът за уеб производителност на Shopify в Analytics показва същите показатели от реални потребители във времето, което е полезно, за да провериш дали някоя промяна е помогнала.

Съсредоточи се върху трите Core Web Vitals: Largest Contentful Paint (колко бързо се появява основното изображение или текст), Interaction to Next Paint (колко бързо страницата реагира на докосване) и Cumulative Layout Shift (колко подскачат елементите). Лабораторните оценки се менят от тест на тест; не гони перфектните 100.

1. Махни кода на приложения, които не използваш

Приложенията са най-честата причина за бавен Shopify магазин. Всяко, което засяга витрината, може да добави JavaScript и CSS на всяка страница.

Направи списък с приложенията си. Деинсталирай тези, които вече не използваш.
Деинсталирането не винаги маха кода, който приложението е добавило в темата. Потърси името на приложението във файловете на темата (Online Store > Themes > Edit code) и махни останалите фрагменти и script тагове.
Предпочитай приложения, които използват theme app extensions (блокове на приложения, които добавяш в редактора на темата). Те се махат чисто при деинсталиране и се зареждат само там, където ги поставиш.
За приложенията, които оставяш, провери дали се зареждат на всяка страница. Таблица с размери трябва само на продуктовите страници.

2. Поправи най-голямото изображение

На повечето страници на продукти и колекции най-големият елемент е продуктова снимка или основен банер. Направи го бърз:

Качвай разумни файлове. Преоразмери снимките до около 2000 до 2500 пиксела ширина преди качване и ги компресирай. CDN-ът на Shopify автоматично сервира преоразмерени версии и модерни формати като WebP, но огромният оригинал пак струва време.
Не зареждай първото изображение мързеливо (lazy-load). Изображенията в горната част на страницата трябва да се зареждат веднага. Мързеливото зареждане е за изображенията по-надолу.
Използвай адаптивни изображения. Актуалните теми използват филтрите image_url и image_tag на Shopify, за да сервират правилния размер за всеки екран. По-старите теми може да сервират един голям размер на всяко устройство.
Избягвай видео с автоматично пускане в горната част. Ако ти трябва видео, покажи първо статично изображение и зареди видеото след това.

3. Зареждай уиджетите по-късно

Отзивите, чат балончетата, изскачащите прозорци, въртележките с допълнителни продажби и социалните ленти рядко трябва да се зареждат преди продукта.

Зареждай чата и изскачащите прозорци, след като страницата стане интерактивна или след забавяне.
Сложи уиджетите за отзиви под видимата част, за да не блокират основното съдържание. Остави текста на отзивите в HTML на страницата заради SEO.
Махни проследяващите пиксели на трети страни, които вече не гледаш. Всеки е още един скрипт.

4. Използвай актуална тема

Темите, създадени за Online Store 2.0, включително безплатните теми на Shopify на основата на Dawn, са изградени около блокове на приложения, адаптивни изображения и по-лек JavaScript. Тема отпреди няколко години с тежки слайдери и jQuery може да е бавна, каквото и да махнеш.

Преди да смениш, тествай демо продуктовата страница на новата тема в PageSpeed Insights. Тема, която е бавна в собственото си демо, ще е бавна и с твоите продукти.

5. Спри подскачането на оформлението

Съдържанието, което подскача, докато страницата се зарежда, вреди на Cumulative Layout Shift и дразни купувачите.

Задавай ширина и височина на изображенията (филтърът image_tag на Shopify ги добавя).
Запазвай място за банери и ленти със съобщения, които се появяват след зареждането.
Зареждай собствени шрифтове с font-display: swap и ограничи броя на дебелините.

Какво не помага особено

Приложения за ускоряване. Повечето добавят собствен скрипт към страницата. Махането на код е по-добре от добавянето на код.
Смяна на хостинга или CDN. В Shopify не можеш, а и не ти трябва.
Минифициране на няколко килобайта CSS. Рядко помръдва показателите от реални потребители в сравнение с махането на приложение или поправката на основното изображение.

Поддържай го бърз

Скоростта се влошава, докато добавяш приложения и секции. Проверявай отново продуктова страница след всяко ново приложение и гледай отчета Core Web Vitals всеки месец. Одит на сайта, например този на zaDojo, отбелязва бавните страници и прекалено големите изображения в целия магазин, така че не тестваш страниците една по една.

Въпроси, които хората задават

Влияе ли скоростта на Shopify на SEO? Да, малко. Core Web Vitals са сигнал за класиране, но съдържанието и релевантността имат по-голямо значение. Скоростта е по-важна за продажбите: купувачите напускат бавните продуктови страници.

Каква е добрата оценка за скорост в Shopify? Цели се към „Good“ Core Web Vitals по данни от реални потребители (Largest Contentful Paint под 2,5 секунди, Interaction to Next Paint под 200 милисекунди, Cumulative Layout Shift под 0,1). Лабораторната оценка от 100 е ориентир, а не цел.

Защо моят Shopify магазин е бавен на мобилни устройства? Телефоните имат по-бавни процесори и връзки, така че тежкият JavaScript от приложенията вреди много повече там. Тествай първо на мобилно устройство.