Home Istruzioni Assicurati che il tuo sito di eCommerce sia caricato in meno di secondi
Applications

Assicurati che il tuo sito di eCommerce sia caricato in meno di secondi

About The Author

Outline

Garantire tempi di caricamento inferiori al secondo per il sito di eCommerce è un lavoro impegnativo. A Layer0, abbiamo cercato di renderlo un processo molto più semplice, e Layer0 è qui per aiutarti a raggiungere questo traguardo. Quello che abbiamo fatto qui è creare un elenco di controllo che puoi seguire per assicurarti che il tuo sito di produzione sia incredibilmente veloce e che tu trascorra la minor quantità di tempo a realizzarlo.

In primo luogo, parliamo di come misuriamo la velocità:

Misurazione delle prestazioni

** In questo caso abbiamo utilizzato SpeedCurve (SC), ma è possibile utilizzare WebPageTest o qualsiasi altro prodotto
Ci stiamo concentrando sulle metriche LCP per le nostre misurazioni. I nostri obiettivi sono:

  • Home Page < 1.5s
  • Navigazione da PLP a PDP: 0,5 s.

È anche importante tenere a mente i seguenti 3 casi in quanto influisce sull’esperienza del consumatore quando A) andare direttamente a PLP/PDP come risultato del traffico di ricerca organico e. (b) quando si naviga verso le pagine del carrello/checkout, è fondamentale per i nostri clienti dal punto di vista aziendale:

  • PLP come landing page
  • PDP come landing page
  • PWA -> origine/legacy (ad es. Carrello/checkout)

Cominciamo con alcuni controlli di base che potrebbero aiutarci a ottenere alcuni importanti guadagni di velocità

  • Assicurarsi che vengano utilizzati scheletri e che il layout sia stabile.
  • «In attesa di…» (O simile) messaggio nella finestra del browser (un problema noto in WebPageTest utilizzato da SC): Ispezionare le immagini della cascata per vedere se questa è l’unica causa di degradazione delle metriche.
  • Anche il passaggio da immagine a bassa risoluzione a immagine ad alta risoluzione potrebbe causare un deterioramento delle metriche in SC: Ispezionare le immagini a cascata per vedere se questa è l’unica causa.
  • Artefatti da componenti personalizzati (rispetto ai componenti RSF nativi creati tenendo presenti le BEST practice): Stile/elementi che causano un eccessivo rirendering dei componenti. Ispezionare nuovamente le immagini della cascata per verificare la presenza di artefatti visibili (ad esempio, immagine a bassa risoluzione -> carosello immagini sulla transizione PLP->PDP)

Navigazione da PLP a PDP

La navigazione dalle pagine PLP (Search Results or Category/Brand) alle pagine PDP è l’elemento di navigazione più importante dell’intero percorso del consumatore. Per ogni acquisto effettuato, un utente medio accede a 8,8 pagine PDP. Anche un rallentamento minore della pagina in una frequenza così elevata può avere un grande impatto negativo sull’esperienza utente. Ecco alcune cose che puoi seguire per garantire un’esperienza utente perfetta da PLP a PDP:

  • Utilizzare uno scheletro per la pagina sopra la piega e garantire la stabilità del layout
  • Assicurarsi che il contenuto sopra la piega corrisponda all’altezza dello schermo del dispositivo dell’utente.
  • Assicurarsi che la memorizzazione nella cache sia configurata correttamente. Ciò significa memorizzare nella cache i dati di pagina generici e non i punti di dati specifici dell’utente. (Consulta la nostra guida alla memorizzazione nella cache per maggiori dettagli)
  • Utilizzare il pre-caricamento (consulta la nostra guida sul pre-caricamento per maggiori dettagli)
  • Utilizzare la stessa istanza di miniature ovunque per evitare lo sfarfallio con il componente ForwardThumbnail
  • Passare il maggior numero di informazioni da PLP a PDP nelle pagine props per visualizzare tali informazioni su PDP

Caricamento pagina iniziale

La home page di solito è la prima interazione che un utente ha con il sito web. Garantire un ottimo inizio di viaggio è fondamentale per fornire agli utenti un flusso di lavoro soddisfacente fino al checkout e all’ordine. Di seguito sono riportate alcune delle cose che puoi seguire per garantire un’esperienza ottimale della Home Page:

  • Assicurarsi che la memorizzazione nella cache sia configurata correttamente. Ciò significa memorizzare nella cache i dati di pagina generici e non memorizzare nella cache i punti dati specifici dell’utente.
  • Carico pigro sotto il contenuto della piega
  • Utilizzare l’etichetta di precollegamento
  • Ottimizzare le immagini
  • Ritardare l’idratazione fino al completamento del caricamento della pagina
  • Altri miglioramenti

Caricamento pagina PDP

Dedicare tempo all’ottimizzazione della Home Page e della navigazione da PLP a PDP sarebbe inutile se l’utente non avesse una grande esperienza sulla pagina PDP stessa. Per ottimizzare il caricamento delle pagine PDP, è fondamentale garantire che le informazioni più importanti siano disponibili all’utente il prima possibile e ritardare gli oggetti non immediatamente visibili o utilizzabili. Di seguito sono riportati alcuni aspetti da tenere presenti durante l’ottimizzazione delle pagine PDP:

  • Memorizzare nella cache le risorse e i dati generici, incluse le risposte API, per garantire il recupero immediato dei dati e ridurre i colli di bottiglia sui sistemi back-end.
  • Contenuto carico lento sotto la piega
  • Utilizzare una prima immagine ottimizzata per ridurre i tempi di caricamento.
  • Utilizzare miniature e immagini con zoom e dita separate e caricare le immagini solo su richiesta.

Caricamento pagina PLP

  • Precaricare le immagini PDP per ottenere risultati superiori alla piegatura.
  • Contenuto carico lento sotto la piega
  • Ridurre o evitare le richieste di determinare le modifiche della pagina PLP, ad esempio per modifiche del colore di sfondo o altri elementi visivi.

Ancora qualche puntino

I metodi sopra menzionati coprono la maggior parte delle cose con cui un utente interagisce durante il viaggio. Ma c’è di più in una piattaforma di ciò che è visibile. Assicurarsi che i meccanismi interni della piattaforma siano ottimizzati è il prossimo passo che dobbiamo compiere. Di seguito sono riportati alcuni elementi da controllare per recuperare ulteriori guadagni nelle prestazioni:

  • TTL: controllare la dimensione del bundle usando Analyze=True npm run build
  • FCP: se un cliente sceglie di utilizzare un WebFont, è possibile che si verifichi un calo del punteggio LH.
  • Indice di velocità: la presenza di finestre a comparsa sullo schermo riduce l’indice di velocità della pagina
  • Evitare attività di esecuzione lunghe nell’ambito del modulo, ad esempio lato client.
  • I ganci React sono soggetti a un nuovo rendering non necessario. Anche se è improbabile che influiscano sulle metriche, questo rende il sito Web più lento.
  • Utilizzare i punteggi PSI per comprendere l’impatto delle modifiche al codice piuttosto che i punteggi LH della macchina locale e/o i risultati SpeedCurve. Utilizzare la modalità 4G nella produzione per ottenere punteggi LH realistici.