Millorar el rendiment de la teva botiga en línia

La teva botiga en línia està formada per un conjunt de funcions, com ara codi del tema, aplicacions, imatges, vídeos, carrusels, canals de xarxes socials i anàlisi de dades. Aquestes funcions poden millorar l'experiència del visitant i ampliar les capacitats del teu lloc.

Tanmateix, cada funció que afegeixes a la teva botiga en línia pot afectar el rendiment de la botiga. Algunes funcions poden alentir el teu lloc o crear comportaments inesperats que poden afectar l'experiència d'usuari.

El rendiment web se centra a optimitzar l'experiència d'usuari. Actualment, el rendiment web es divideix en tres àrees principals que també es reflecteixen a Core Web Vitals:

La velocitat de càrrega, mesurada per Largest Contentful Paint (LCP)
L'estabilitat del disseny, mesurada per Cumulative Layout Shift (CLS)
La capacitat de resposta a la interacció de l'usuari, mesurada per Interaction to Next Paint (INP)

Optimitzar el rendiment web vol dir que és més probable que els teus clients es quedin al teu lloc i converteixin.

En aquesta pàgina

Optimitzacions per a la teva botiga en línia

La teva botiga en línia té integrada l'optimització web. Aquesta optimització també s'incorpora en les noves funcions. No has de fer res especial per aprofitar les característiques següents:

La teva botiga en línia s'allotja en servidors ràpids i globals i no es limita l'amplada de banda de la botiga. Pots comprovar l'estat de la teva botiga de Shopify a Shopify Status.
La teva botiga en línia té una xarxa de lliurament de contingut (CDN) gestionada per Cloudflare que garanteix que la teva botiga en línia es carregui ràpidament a tot el món. Pots comprovar l'estat de la CDN a la pàgina d'estat de Cloudflare.
Per mantenir els temps de càrrega ràpids, les imatges s'optimitzen automàticament mitjançant la CDN d'imatges. En combinació amb el codi del tema, la CDN d'imatges pot servir el millor format d'imatge amb la mida redimensionada i comprimida per mantenir petites les mides dels fitxers.

Factors que afecten el rendiment web

A les botigues de Shopify, aquests són els factors més importants que afecten el rendiment web:

El tema de la teva botiga en línia
Les aplicacions que has instal·lat
Qualsevol codi de tercers addicional que hagis afegit manualment a la teva botiga, inclosos els gestors d'etiquetes i les etiquetes que contenen

Això significa que t'has de centrar en el següent per millorar el teu rendiment web:

Utilitza un tema actualitzat i optimitzat. Tota la família de temes Horizon i els temes de l'Online Store 2.0 de Shopify són gratuïts i estan optimitzats per al rendiment web. A més, molts altres temes de tercers també estan optimitzats per al rendiment web. Pots revisar les últimes dades de rendiment dels temes.
Si el teu tema ofereix transicions de pàgina o altres animacions, compara el teu rendiment web abans i després d'activar-les. Les animacions poden alentir les pàgines.
Evita afegir massa seccions a les plantilles de pàgina del teu tema. Un nombre elevat de seccions a les pàgines pot reduir el rendiment web.
Si tens col·leccions amb grans quantitats de productes, considera activar la paginació per limitar el nombre de productes que es carreguen alhora.
Avalua les aplicacions instal·lades i el codi de tercers per garantir que estiguin creant prou valor per compensar qualsevol possible pèrdua de rendiment.
Audita el teu gestor d'etiquetes per eliminar les etiquetes que no utilitzis o que tinguin poc valor. Més informació sobre les bones pràctiques per a etiquetes i gestors d'etiquetes.

Eines de prova

Pots utilitzar les eines següents per investigar el rendiment de la teva botiga en línia:

Informes de rendiment web: els informes de rendiment web de Shopify utilitzen els Core Web Vitals per mesurar com experimenten la teva botiga en línia els usuaris reals.
PageSpeed Insights: pots executar els teus propis informes amb PageSpeed Insights de Google per veure mètriques més detallades de les pàgines de la teva botiga.

Entendre les recomanacions de rendiment de tercers

Les eines d'anàlisi de rendiment de tercers poden suggerir canvis per millorar la velocitat de la teva botiga. Tot i això, moltes d'aquestes recomanacions ja estan implementades per Shopify o no s'apliquen a les botigues de Shopify.

Optimitzacions ja incloses a Shopify

La teva botiga de Shopify inclou automàticament les optimitzacions de rendiment següents:

Xarxa de distribució de contingut (CDN): Shopify proporciona una CDN de primer nivell sense cap cost addicional per garantir un rendiment global ràpid. Tots els actius es publiquen mitjançant HTTP/2, la qual cosa redueix la sobrecàrrega en comparació amb protocols més antics.

Memòria cau del navegador: Shopify estableix la memòria cau del navegador dels recursos emmagatzemables a un any, la durada màxima possible. Això vol dir que els visitants recurrents a la teva botiga experimentaran temps de càrrega més ràpids.

Compressió gzip: Shopify empra la compressió gzip al CSS, al JavaScript, als documents i a les pàgines per reduir l'amplada de banda i millorar els temps de càrrega. També s'activa el Keep-alive per a la recuperació de diversos fitxers.

Optimització d'imatges: Shopify comprimeix automàticament les imatges JPG amb algoritmes avançats per equilibrar la compressió i l'atractiu visual. Sovint, les imatges es publiquen en format WebP per obtenir una millor compressió i una càrrega més ràpida.

Minificació de fitxers: Shopify minifica automàticament els fitxers CSS i JavaScript quan els sol·licita l'aparador per reduir les mides de fitxer sense afectar la funcionalitat.

Quan les recomanacions de tercers no s'apliquen

Les eines d'anàlisi de tercers poden suggerir canvis que no són rellevants per a les botigues de Shopify:

Configuracions a nivell de servidor: les recomanacions sobre la configuració del servidor, les capçaleres HTTP o les polítiques de memòria cau ja estan optimitzades per la infraestructura de Shopify.
Implementació d'una CDN: els suggeriments per afegir una CDN són innecessaris, ja que Shopify inclou una CDN d'alt rendiment per defecte.
Configuració de compressió: les recomanacions sobre l'activació de la compressió ja estan implementades a tota la plataforma de Shopify.

Actuar sobre les recomanacions rellevants

Centra't en les recomanacions relacionades amb el contingut i les funcions específiques de la teva botiga:

Optimització d'imatges: assegura't que les imatges pujades tinguin una mida adequada i utilitzin els formats recomanats.
Avaluació d'aplicacions: valora si les aplicacions instal·lades aporten prou valor per compensar qualsevol impacte en el rendiment.
Optimització del tema: tria temes optimitzats per al rendiment i limita el nombre de seccions de les plantilles de pàgina.

Resolució de problemes de pàgines de càrrega lenta

Si la botiga triga a carregar, segueix aquests passos per identificar i resoldre el problema:

Pas 1: verifica el problema

Comprova la velocitat de càrrega de la teva botiga des de diferents dispositius i connexions a Internet.
Demana a altres persones que provin la botiga per confirmar que no es tracta d'un problema local amb la teva connexió a Internet.
Utilitza eines de prova com PageSpeed Insights per obtenir mètriques de rendiment específiques.

Pas 2: identifica'n la causa

Comprova si hi ha un excés d'aplicacions: tenir massa aplicacions que carreguen actius al teu aparador pot alentir el rendiment. Revisa les aplicacions instal·lades i elimina les que no siguin essencials per a les vendes.

Revisa les imatges grans: les pàgines amb nombroses imatges d'alta qualitat poden carregar lentament. Optimitza les imatges o redueix-ne el nombre que es mostra. Més informació sobre les mides d'imatge recomanades.

Identifica els scripts lents: si el teu lloc web es penja com una pàgina en blanc abans de carregar-se de cop, utilitza les eines per a desenvolupadors del navegador per identificar els scripts de càrrega lenta. Posa't en contacte amb el desenvolupador de l'aplicació o del tema per trobar una solució.

Pas 3: passa a l'acció

Elimina aplicacions innecessàries: si desinstal·les una aplicació, el seu codi no s'elimina automàticament del tema. És possible que hagis de contactar amb el desenvolupador de l'aplicació per obtenir instruccions completes d'eliminació.

Optimitza les imatges: utilitza formats de fitxer adequats (JPG per a fotografies, PNG per a gràfics amb transparència) i canvia la mida de les imatges perquè coincideixi amb la seva mida de visualització.

Avalua el rendiment del tema: considera l'opció de canviar a un tema optimitzat per al rendiment si el tema actual està provocant un alentiment significatiu.

Aconseguir suport per al rendiment de la botiga en línia

Si fas servir un tema gratuït de Shopify, el Suport de Shopify et pot ajudar amb les millores de rendiment bàsiques.

Si utilitzes un tema de tercers i necessites assistència, has de contactar amb el desenvolupador del teu tema, contractar un expert en rendiment web de Shopify o contractar un Partner de Shopify especialitzat en la velocitat i el rendiment de llocs web. Més informació sobre com contractar un Partner de Shopify.

Si el problema de rendiment prové d'una aplicació, pots contactar amb el desenvolupador de la teva aplicació.

Si tens un equip de desenvolupament o una agència partner, també pots contactar-hi per obtenir més assistència.

Informació tècnica i recursos per a la resolució de problemes

Si ets desenvolupador i busques millorar el rendiment d'un aparador, d'un tema o d'una aplicació de Shopify, pots consultar els recursos següents per a cada Core Web Vital. Més informació sobre les bones pràctiques de rendiment per als temes de Shopify.

Velocitat de càrrega

El Largest Contentful Paint (LCP) mesura la velocitat de càrrega a partir del temps que triga a fer-se visible l'element més gran de la pantalla. El Time to First Byte (TTFB) i el First Contentful Paint (FCP) són mètriques de suport que t'ajuden a entendre millor d'on prové la causa principal del problema. Pots obtenir més informació sobre la depuració de les causes habituals de la càrrega lenta en aparadors Liquid de Shopify.

Estabilitat visual

El Cumulative Layout Shift (CLS) mesura l'estabilitat visual segons quant es mou el contingut de manera inesperada durant la càrrega. Per aprofundir en la depuració del CLS, llegeix Com optimitzar el Cumulative Layout Shift (CLS) als llocs web de Shopify.

Interactivitat

L'Interaction to Next Paint (INP) mesura la interactivitat en funció del temps que triga la pàgina a respondre a la majoria de les accions de l'usuari; per exemple, en fer clic a un enllaç o a un botó.

Si tens un INP deficient, el més probable és que tinguis massa JavaScript a la botiga, ja sigui a causa del codi del tema, de l'aplicació o de tercers/del gestor d'etiquetes. Centra't a netejar els elements més perjudicials. Obtén més informació sobre 3 maneres de trobar els elements de JavaScript que més perjudiquen la càrrega de la pàgina. Si continues tenint problemes amb l'INP, obtén més informació amb els recursos de web.dev.