Брзина на Shopify: тема, апликации и слики

Секоја Shopify продавница работи на истите сервери и CDN, па бавната продавница е бавна поради она што го вчитува: темата, скриптите од апликации, сликите и видеото. Оптимизација на брзината на Shopify значи отстранување и намалување на тие работи, а не менување хостинг. Во повеќето продавници најголемите добивки се отстранување неискористен код од апликации, компресија на hero сликата и подоцнежно вчитување на виџетите.

Овој водич покажува како правилно да ја мериш брзината, а потоа ги поминува поправките по редоследот по кој обично се исплатуваат. Тој е дел од водичот за 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) по името на апликацијата и отстрани ги заостанатите snippets и script тагови.
Претпочитај апликации што користат theme app extensions (app blocks што ги додаваш во уредувачот на темата). Чисто се отстрануваат кога деинсталираш и се вчитуваат само таму каде што ги ставаш.
За апликациите што ги задржуваш, провери дали се вчитуваат на секоја страница. Табелата за големини е потребна само на страниците за производи.

2. Поправи ја најголемата слика

На повеќето страници за производи и колекции, најголемиот елемент е фотографија на производ или hero банер. Направи го брз:

Поставувај разумни фајлови. Намали ги фотографиите на околу 2.000 до 2.500 пиксели ширина пред поставување и компресирај ги. CDN на Shopify автоматски служи намалени верзии и модерни формати како WebP, но огромен оригинал сепак чини време.
Не користи lazy load за првата слика. Сликите на врвот од страницата треба да се вчитаат веднаш. Lazy loading е за сликите подолу.
Користи responsive слики. Актуелните теми ги користат филтрите image_url и image_tag на Shopify за да ја служат вистинската големина за секој екран. Постарите теми можеби служат една голема големина на секој уред.
Избегнувај видео што автоматски се пушта во hero. Ако ти треба видео, прво прикажи poster слика, а видеото вчитај го потоа.

3. Вчитувај ги виџетите подоцна

Рецензиите, балончињата за чет, pop-up прозорците, каруселите за дополнителна продажба и фидовите од социјални мрежи ретко треба да се вчитаат пред производот.

Вчитувај ги четот и pop-up прозорците откако страницата ќе стане интерактивна или по одложување.
Стави ги виџетите за рецензии под првиот екран за да не ја блокираат главната содржина. Задржи го текстот на рецензиите во HTML на страницата заради SEO.
Отстрани ги пикселите за следење од трети страни што повеќе не ги гледаш. Секој е уште една скрипта.

4. Користи актуелна тема

Темите изградени за Online Store 2.0, вклучително бесплатните теми на Shopify базирани на Dawn, се дизајнирани околу app blocks, responsive слики и полесен 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 од апликациите таму штети многу повеќе. Прво тестирај на мобилен.