Dieci modi per migliorare i tempi di caricamento del tuo sito web e Google Core Vitals

Quali sono i principali Web Vital

All'inizio di quest'anno, Google ha introdotto una nuova serie di criteri che definiscono la stabilità, la velocità e la reattività di un determinato sito web. I tre criteri principali sono i seguenti:

• Lo spostamento cumulativo del layout definisce di quanto la struttura di una pagina Web dovrebbe spostarsi e cambiare posizione. Il benchmark per questo è 0,1.
• Il più grande Contentful Paint misura quanto tempo ci vuole per caricare il contenuto principale di una pagina. I risultati migliori dovrebbero essere 2,5 secondi o meno.
• Il primo ritardo di input è il tempo che intercorre tra l'apertura di una pagina Web e il momento in cui diventa interattiva per la prima volta. Il lasso di tempo più comunemente ricercato è di circa 100 millisecondi.

Con questi termini di base in mente, diamo un'occhiata a come puoi utilizzare Core Vitals per rendere il tuo sito Web il più veloce ed efficiente possibile.

1. Ottimizza la tua CDN e la cache del browser

I tuoi punteggi FID e LCP dovrebbero essere migliorati abbastanza rapidamente usando questo metodo. Servi le tue risorse statiche da una CDN o memorizzale nella cache su un servizio come Cloudfront da AWS. I browser otterranno i risultati necessari molto più rapidamente dopo questo.

Inoltre, le pagine dinamiche possono essere memorizzate nella cache nella tua CDN con valori TTL corretti già applicati a seconda di come si comportano le tue applicazioni.

2. Usa il dimensionamento esatto per tutti gli annunci e i media

Per quanto riguarda i tuoi punteggi CLS, questo è uno dei fattori più vitali. Verifica sempre di aver impostato un'altezza specifica sulle immagini o sulle risorse contrassegnate, il che è molto importante, specialmente per i componenti a livello di piegatura. Se hai poco tempo, puoi sempre impostare le altezze su automatico e ottenere una dimensione approssimativa che dovrebbe funzionare abbastanza bene in un pizzico.

Anche gli annunci tengono conto di CLS e devi controllarne l'altezza e le dimensioni accuratamente per assicurarti che non spostino i contenuti visualizzandoli in modo errato. Ciò potrebbe richiedere di contattare il tuo fornitore di servizi pubblicitari o di cercare alcune opzioni diverse se il tuo CLS viene influenzato in modo coerente.

Se utilizzi una piattaforma WordPress, ti consigliamo di prendere in considerazione un plug-in come Ewww , che può fornire automaticamente le tue immagini in Webp e abilitare funzionalità come il lazy load per ritardare il caricamento di tutte le immagini al caricamento della pagina.

3. Carica le immagini con la giusta risoluzione in modo pigro in base al tipo di dispositivo utilizzato

Questa tecnica produce risultati incredibilmente rapidamente e dovrebbe essere una delle tue prime considerazioni. Utilizzando un pacchetto di caricamento lento per, sorprendentemente, caricare in modo lazy tutte le immagini sul tuo sito, il tuo LCP avrà un impatto positivo, principalmente riducendo il peso della pagina e assicurando che si carichi il più rapidamente possibile.

È inoltre essenziale impostare la risoluzione per ogni risorsa in base al tipo di dispositivo utilizzato per visualizzare il tuo sito. Il caricamento della risoluzione come misura unica renderà il sito molto più lento su dispositivi più piccoli o meno potenti e avrà un impatto sul tuo LCP nel peggiore dei modi.

4. Usa SSR e CSR in modo intelligente

Google è sempre desideroso di incoraggiare e promuovere pagine Server Side Rendering (SSR) con un punteggio elevato per ispirare preziose prestazioni SEO. Tuttavia, devi considerare l'equilibrio tra SEO e prestazioni di caricamento della pagina. Le pagine con troppi contenuti possono impiegare anni per caricarsi lato server e ridurre le prestazioni generali del tuo sito.

Il contenuto effettivo dovrebbe essere mantenuto above the fold, mentre le altre funzionalità del sito dovrebbero essere conservate per migliorare SSR. Questo stile di caricamento asincrono richiede molto tempo dal caricamento e dal rendering dei punteggi.

5. Scomponi tutto suddividendo il tuo codice

L'utilizzo delle dimensioni di file più significative per le risorse (in particolare i file JS) è generalmente una cattiva idea. Invece, dovresti consentire il protocollo h2 e sfruttarlo per caricare nuovamente le risorse in modo asincrono in parti separate.

Inoltre, invece di utilizzare un unico file HTML di grandi dimensioni, puoi dividere il sito in più file più piccoli e quindi ridurre il carico di caricamento.

6. Utilizzare le tecniche di compressione Brotli per ridurre le risorse statiche

Per quanto riguarda la compressione, Brotli sembra essere l'opzione migliore in termini di velocità di caricamento. Tuttavia, rapporti di compressione più elevati aumenteranno i tempi di creazione e pacchetto in termini di DevOps.

Ma alla fine della giornata, il tempo di caricamento del sito è il fattore più cruciale e dovrebbe avere la priorità su qualsiasi altra cosa.

7. Rendi il contenuto della risposta e la richiesta API il più efficiente possibile

Indubbiamente, l'elemento più vitale in termini di velocità di caricamento, anche le modifiche più piccole, possono produrre risultati enormi con l'API. Le risposte e le richieste API devono essere controllate frequentemente per motivi di ottimizzazione.

Inoltre, definisci i parametri dei dati e usa solo ciò che è necessario per risparmiare molto tempo e fatica. Anche la scelta di una rete per le tue API merita un'attenta considerazione, poiché l'hosting su sottoreti sbagliate può aumentare enormemente il requisito di tempo.

8. Riduci le dimensioni complessive delle tue pagine e dei tuoi documenti

Le pagine di destinazione con codice pesante (è probabile che qualsiasi cosa al di sopra di 75kb sia grave) sono molto indesiderabili, poiché aumentano drasticamente i tempi di caricamento e di recupero.

Cerca sempre di mantenere le cose pulite sul lato codice delle cose poiché è facile perdere bit di dati ridondanti.

9. Sostituisci le miniature dei video con le immagini segnaposto

Molti visitatori del sito preferiscono non interagire con i contenuti video, quindi caricare le miniature sui video che non vengono riprodotti è uno spreco di risorse in questo caso.

È un'idea migliore scegliere un'immagine segnaposto o uno spazio video vuoto per risparmiare risorse e aumentare così la velocità del sito.

10. Scegli il server più veloce disponibile

Questo può sembrare un fattore ovvio, ma vale comunque la pena dirlo. Investire nella migliore infrastruttura server di solito è un'ottima idea poiché influisce direttamente sulla velocità dell'intero sito senza eccezioni.

Spendendo un po' più soldi, risparmierai una notevole quantità di tempo nel complesso. Cloudflare è un eccellente strumento a livello DNS che ti consente di ottimizzare il tuo sito in modo conveniente senza costose risorse del server.

Conclusione

I suggerimenti di cui sopra ti porteranno sulla strada giusta per ottenere un punteggio di Page Speed ​​e valori vitali migliori. Tuttavia, potresti trovarti su una piattaforma o un tema gonfio che spesso significherà la migliore linea d'azione per creare un sito nuovo, più pulito e più leggero.

Supponiamo che ti stai grattando la testa su tutti questi termini o ti senti scoraggiato all'idea di rielaborare l'intero sito per una maggiore velocità. In tal caso, potresti prendere in considerazione una revisione del sito da parte di un esperto di web design che probabilmente suggerirà la migliore linea d'azione per ottimizzare il tuo sito esistente o suggerirà di passare a un nuovo sito con una base di codice più ottimizzata per i principali elementi vitali.