Подобряване на ефективността на онлайн магазина

Вашият онлайн магазин се състои от набор от функции, като код на тема, приложения, изображения, видеоклипове, карусели, емисии от социални медии и анализи. Тези функции могат да подобрят потребителския опит на посетителите и да разширят възможностите на Вашия сайт.

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

Уеб ефективността се фокусира върху оптимизирането на потребителския опит. Понастоящем уеб ефективността се фокусира върху три основни области, които са отразени и в Core Web Vitals:

  • Скорост на зареждане, измерена чрез Largest Contentful Paint (LCP)
  • Стабилност на оформлението, измерена чрез Cumulative Layout Shift (CLS)
  • Реакция при взаимодействие с потребителя, измерена чрез Interaction to Next Paint (INP)

Оптимизирането на уеб ефективността означава, че е по-вероятно клиентите Ви да останат на сайта Ви и да конвертират.

Оптимизации за Вашия онлайн магазин

Вашият онлайн магазин има вградена уеб оптимизация. Уеб оптимизацията е вградена и във всички нови функции. Не е необходимо да правите нищо специално, за да се възползвате от следните функции:

  • Вашият онлайн магазин се хоства на бързи, глобални сървъри и не ограничава пропускателната способност на магазина Ви. Можете да проверите състоянието на Вашия магазин в Shopify на Shopify Status.
  • Вашият онлайн магазин има мрежа за доставка на съдържание (CDN), управлявана от Cloudflare, която гарантира, че онлайн магазинът Ви се зарежда бързо по целия свят. Можете да проверите състоянието на CDN на страницата за състояние на Cloudflare.
  • За да се поддържат бързи времена за зареждане, изображенията се оптимизират автоматично с помощта на CDN за изображения. В комбинация с кода на Вашата тема, CDN за изображения може да предостави най-добрия формат на изображението, което също е оразмерено и компресирано, за да се запазят малки размери на файловете.

Фактори, които влияят на уеб ефективността

За магазините в Shopify следните са най-големите фактори, които влияят на уеб ефективността:

  • Темата на Вашия онлайн магазин
  • Инсталираните от Вас приложения
  • Всеки допълнителен код от трета страна, който сте добавили ръчно към магазина си, включително мениджъри на тагове и таговете в тях

Това означава, че трябва да се съсредоточите върху следното, за да подобрите уеб ефективността си:

  • Използвайте актуална, оптимизирана тема. Всички теми от семейството Horizon и теми за Онлайн магазин 2.0 от Shopify са безплатни и оптимизирани за уеб ефективност. Освен това много други теми от трети страни също са оптимизирани за уеб ефективност. Можете да прегледате най-новите данни за ефективността на темите.
  • Ако темата Ви предлага преходи между страници или други анимации, сравнете уеб ефективността си преди и след активирането им. Анимациите могат да забавят страниците.
  • Избягвайте добавянето на твърде много секции към шаблоните на страници във Вашата тема. Големият брой секции на страниците може да намали уеб ефективността.
  • Ако имате колекции с голямо количество продукти в тях, обмислете активирането на страниране, за да ограничите броя на продуктите, които се зареждат наведнъж.
  • Оценете инсталираните си приложения и код от трети страни, за да се уверите, че те създават достатъчно стойност, за да компенсират евентуални загуби на ефективност.
  • Направете одит на мениджъра си на тагове, за да премахнете всички неизползвани или нискостойностни тагове. Научете повече за най-добрите практики за тагове и мениджъри на тагове.

Инструменти за тестване

Можете да използвате следните инструменти, за да проучите ефективността на Вашия онлайн магазин:

  • Отчети за уеб ефективност: Отчетите за уеб ефективност на Shopify използват Core Web Vitals, за да измерят как реалните потребители възприемат Вашия онлайн магазин.
  • PageSpeed Insights: Можете да изпълнявате свои собствени отчети, като използвате PageSpeed Insights на Google, за да видите по-подробни показатели за страниците в магазина си.

Разбиране на препоръките за ефективност от трети страни

Инструментите за сканиране на ефективността от трети страни могат да предложат промени за подобряване на скоростта на Вашия магазин. Въпреки това много от тези препоръки вече са приложени от Shopify или не се отнасят за магазините в Shopify.

Оптимизации, които вече са включени в Shopify

Вашият магазин в Shopify автоматично включва следните оптимизации на ефективността:

Мрежа за доставка на съдържание (CDN): Shopify предоставя CDN от световна класа без допълнително заплащане, което гарантира бърза глобална ефективност. Всички активи се обслужват чрез HTTP/2, което намалява натоварването в сравнение с по-старите протоколи.

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

Gzip компресиране: Shopify използва gzip компресиране на CSS, JavaScript, документи и страници, за да намали пропускателната способност и да подобри времето за зареждане. Keep-alive също е активиран за извличане на множество файлове.

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

Минифициране на файлове: Shopify автоматично минифицира CSS и JavaScript файлове, когато се заявят от Вашата витрина, като намалява размерите на файловете, без да засяга функционалността.

Когато препоръките от трети страни не се прилагат

Инструментите за сканиране от трети страни могат да предложат промени, които не са от значение за магазините в Shopify:

  • Конфигурации на ниво сървър: Препоръките относно настройката на сървъра, HTTP заглавките или правилата за кеширане вече са оптимизирани от инфраструктурата на Shopify.
  • Внедряване на CDN: Предложенията за добавяне на CDN са ненужни, тъй като Shopify включва високопроизводителен CDN по подразбиране.
  • Настройки за компресиране: Препоръките за активиране на компресиране вече са приложени в цялата платформа на Shopify.

Действия по съответните препоръки

Съсредоточете се върху препоръки, които са свързани с конкретното съдържание и функционалности на Вашия магазин:

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

Отстраняване на неизправности при бавно зареждащи се страници

Ако Вашият магазин се зарежда бавно, следвайте тези стъпки, за да идентифицирате и разрешите проблема:

Стъпка 1: Проверка на проблема

  1. Тествайте сами скоростта на зареждане на Вашия магазин от различни устройства и интернет връзки.
  2. Помолете други хора да тестват магазина Ви, за да потвърдите, че проблемът не е локален, свързан с Вашата интернет връзка.
  3. Използвайте инструменти за тестване като PageSpeed Insights, за да получите конкретни показатели за ефективността.

Стъпка 2: Идентифициране на причината

Проверете за твърде много приложения: Твърде много приложения, които зареждат активи във витрината на магазина Ви, могат да забавят ефективността. Прегледайте инсталираните си приложения и премахнете тези, които не са от съществено значение за продажбите.

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

Идентифицирайте бавните скриптове: Ако сайтът Ви увисва на празна страница, преди да се зареди изведнъж, използвайте инструментите за разработчици на Вашия браузър, за да идентифицирате бавно зареждащи се скриптове. Свържете се с разработчика на приложението или темата за разрешаване на проблема.

Стъпка 3: Предприемане на действия

Премахнете ненужните приложения: Деинсталирането на приложение не премахва автоматично кода му от Вашата тема. Може да се наложи да се свържете с разработчика на приложението за пълни инструкции за премахване.

Оптимизирайте изображенията: Използвайте подходящи файлови формати (JPG за снимки, PNG за графики с прозрачност) и преоразмерете изображенията, за да съответстват на размера им на показване.

Оценете ефективността на темата: Обмислете преминаване към тема, оптимизирана за ефективност, ако текущата Ви тема причинява значителни забавяния.

Получаване на поддръжка за ефективността на онлайн магазина

Ако използвате безплатна тема от Shopify, тогава екипът на Shopify за поддръжка може да Ви съдейства с основни подобрения на ефективността.

Ако използвате тема от трета страна и се нуждаете от съдействие, тогава трябва да се свържете с разработчика на Вашата тема, да наемете експерт по уеб ефективност на Shopify или да наемете Shopify партньор за ефективност и скорост на сайта. Научете повече за наемането на Shopify партньор.

Ако проблемът Ви с ефективността идва от приложение, тогава можете да се свържете с разработчика на Вашето приложение.

Ако имате екип за разработка или агенция-партньор, тогава можете да се свържете и с тях за допълнително съдействие.

Техническа информация и ресурси за отстраняване на неизправности

Ако сте разработчик, който се стреми да подобри ефективността на витрина, тема или приложение на Shopify, тогава можете да прегледате следните ресурси за всеки от основните уеб показатели (Core Web Vitals). Научете повече за най-добрите практики за ефективност за темите на Shopify.

Скорост на зареждане

Largest Contentful Paint (LCP) измерва скоростта на зареждане въз основа на това колко бързо най-големият елемент на екрана става видим. Времето до първия байт (Time to first byte – TTFB) и първото изобразяване на съдържание (first contentful paint – FCP) са поддържащи показатели, които Ви помагат да разберете по-добре откъде идва основната причина за проблема. Можете да научите повече за отстраняване на често срещани причини за бавно зареждане във витрините на Shopify с Liquid.

Визуална стабилност

Cumulative Layout Shift (CLS) измерва визуалната стабилност въз основа на това колко неочаквано се измества съдържанието по време на зареждане. За задълбочен поглед върху отстраняването на грешки в CLS прочетете Как да оптимизирате Cumulative Layout Shift (CLS) в сайтове на Shopify.

Интерактивност

Interaction to Next Paint (INP) измерва интерактивността въз основа на това колко време отнема на страницата да реагира на повечето потребителски действия. Например потребителски действия като кликване върху връзка или бутон.

Ако имате лош INP, тогава най-вероятно имате твърде много JavaScript във Вашия магазин от код на тема, код на приложение или код от трета страна/мениджър на тагове. Работете по изчистването на най-големите „нарушители“. Научете повече за 3 начина да намерите най-големите „нарушители“, свързани с JavaScript, при зареждане на страница. Ако все още имате проблеми с INP, тогава научете повече с ресурсите на web.dev.