Supera tutti i test CWV e PageSpeed ​​Insights con queste tecniche di sviluppo WordPress

Nel 2021, in StrategiQ, un'agenzia digitale full stack con sede nel Regno Unito, ci siamo posti l'obiettivo di iniziare a sviluppare ogni sito Web che sviluppiamo e lanciamo per superare le prestazioni di Google Core Web Vitals (CWV) e PageSpeed ​​Insights (PSI) rapporto.

Core Web Vitals mostra come si comporta il tuo sito web in vari modi. Ciò include la velocità di caricamento del primo contenuto su una pagina (Primo e più grande Contentful Paint), la velocità di attesa di un utente prima di poter interagire con esso (Time to Interactive) e i cambiamenti di layout (Spostamento cumulativo del layout) .

Testare il tuo CWV è facile: vai semplicemente su https://pagespeed.web.dev/ e inserisci il tuo indirizzo. L'area superiore mostra gli ultimi dati del mondo reale degli ultimi 28 giorni, mentre la sezione inferiore (un punteggio su 100, sia per dispositivi mobili che desktop), contiene dati generati dal laboratorio.

Perché è importante? Bene, perché lo dice Google.

Nel luglio 2018, Google ha annunciato che la velocità è un fattore determinante per la visualizzazione di un sito nei risultati di ricerca, in particolare sui dispositivi mobili. Fonte.

Nel 2020, hanno anche annunciato che le metriche dell'esperienza utente (che costituiscono i Core Web Vitals / CVW) sono ora utilizzate nel modo in cui classificano i siti. Fonte.

È semplice: più un sito è veloce e con prestazioni migliori, più è probabile che si classificherà.

Quindi il team di sviluppo di StrategiQ ha deciso che era il nostro turno di aiutare il dipartimento SEO. Gli esperti SEO possono sbarazzarsi dei loro piccoli vagabondi il più duramente possibile, ma un sito che funziona in modo terribile può fare molto più male che bene. Un sito che superi CWV e PSI, tuttavia, farà in modo che il loro eccellente lavoro abbia un brillante trampolino di lancio.

Ciò che vale la pena notare è che CWV e PSI sono notoriamente difficili da superare. La stragrande maggioranza dei siti non lo fa, nemmeno molti dei siti Web di più alto profilo al mondo . Pensa a YouTube, BBC e persino WP Engine stessi lottano per ottenere un passaggio sia su dispositivi mobili che desktop ( scusate ragazzi ).

Quindi cosa abbiamo fatto per assicurarci di vedere quelle deliziose ciambelle verdi del pass?

Abbiamo smontato tutto e lavorato su un semplice mantra:

Carica il meno possibile, il più rapidamente possibile.

Anche se non entrerò nel minimo dettaglio, analizzerò i nostri metodi principali per mantenere i nostri temi WordPress personalizzati il ​​più snelli possibile.

In primo luogo, parliamo di hardware. Non possiamo continuare senza prima parlare di WP Engine. Senza dubbio, sono uno dei, se non i migliori fornitori di hosting specifici per WordPress là fuori. Siamo stati lieti dell'impressionante supporto, del tempo di attività, degli ambienti per ogni installazione, dei backup e della facilità di gestione dei certificati SSL e dei domini tra molte altre funzionalità. Inoltre, la memorizzazione nella cache e l'ottimizzazione della velocità hard-baked assicurano che il sito funzioni il più velocemente possibile a livello di server.

Con un server ad alte prestazioni al suo interno, sappiamo che ora tocca a noi far funzionare un sito Web il più velocemente possibile.

Come la maggior parte delle agenzie, abbiamo il nostro modello di base artigianale che utilizziamo come punto di partenza per tutti i nostri siti Web su misura. Ogni sito che creiamo è progettato e codificato internamente, non un tema pre-costruito in vista.

Il nostro modello di base ha i nostri metodi di ottimizzazione della velocità consolidati, oltre a una serie di funzioni intelligenti e componenti riutilizzabili che ci troviamo a richiedere in ogni progetto. Avere quel punto di partenza ci fa risparmiare tempo a lungo termine e garantisce che ogni sito funzioni al meglio con un sovraccarico minimo richiesto dallo sviluppatore.

So cosa stai pensando: arriva alle cose buone!

Non mi preoccuperò di elencare le solite cose noiose che vedi su ogni post del blog là fuori, come "immagini di caricamento pigro". Ma se non lo fai, questo è davvero un must: abbiamo una funzione di immagine che stampa le nostre immagini caricate pigramente con tag srcset e dimensioni (note come immagini reattive).

Entriamo subito.

Metodo 1: blocco e accodamento

Succede spesso: un progetto ha solo un file css e un file js e finiscono per gonfiarsi alle dimensioni di un piccolo pianeta. E dopo? Google ti chiede "perché stai caricando stili e javascript non utilizzati in questa pagina?". Come mai? Perché?!

È un punto valido. Perché dovresti caricare enormi quantità di css e javascript per un intero sito Web quando ti serve solo una frazione di quello per pagina?

Tutti i nostri siti sono interamente costruiti con blocchi di Gutenberg. Ciò significa che per ogni blocco, puoi utilizzare la brillante potenza di accodare i tuoi file css e js.

Per ogni blocco, creiamo un file css e js separato solo per quel file (se richiesto). Questi vengono quindi minimizzati (vedi il punto successivo per maggiori informazioni) e accodati blocco per blocco.

Il risultato? Carichiamo solo ciò che è effettivamente presente in ogni pagina.

Metodo 2: utilizza un task runner come gulp per combinare e ridurre al minimo le tue risorse

Tutte le risorse generate vengono minimizzate da una funzione gulp (altre sono disponibili, come grunt). Vale la pena notare che molte lune fa Google avrebbe preferito la concatenazione alla minimizzazione (una grande richiesta sarebbe stata preferibile a 5 piccole richieste), ma dall'ascesa di HTTP/2 (che multiplexa più richieste contemporaneamente) questo non è più un problema.

Ancora una volta, lo facciamo per mantenere i file il più piccoli possibile. Quindi ora non solo carichiamo le risorse che si trovano sulla pagina, ma sono anche di dimensioni minuscole.

Metodo 3: interrompere il rendering delle risorse che bloccano

Ci assicuriamo che tutte queste risorse accodate siano in fondo alla pagina e quindi non blocchino il rendering.

Eliminiamo persino la jQuery che viene fornita con WordPress e accodiamo una nuova versione (una che non ha vulnerabilità di sicurezza), anche in fondo alla pagina.

Ma che ne dici di un FOUC (Flash of Unstyled Content) che ti sento dire?

Metodo 4: above the fold css

Un lampo di contenuto non stilizzato si verifica quando una pagina viene inizialmente caricata senza stili, poiché il foglio di stile si trova nella parte inferiore della pagina. Una volta caricato il foglio di stile, gli stili vengono applicati, il sito lampeggia e finalmente sembra corretto.

Per risolvere questo problema, dividiamo gli stili above the fold e li aggiungiamo come tag <style> in linea nella testata. Non è una risorsa di blocco del rendering e non otteniamo un FOUC.

Metodo 5: WP Rocket

L'ultimo pezzo del puzzle è il miglior plug-in per le prestazioni della categoria WP Rocket. Creato in collaborazione con gli ingegneri di WP Engine, è l'unico plug-in di memorizzazione nella cache consentito sulla loro piattaforma di hosting.

I risultati?

Bene, i punteggi parlano da soli.

SportsAidEastern è un ente di beneficenza che sostiene gli atleti britannici. Secondo PSI, il sito che abbiamo sviluppato per loro ottiene un enorme punteggio di 97/100 su dispositivi mobili e 100/100 su desktop.

Calligo offre servizi di dati trasformativi e i punteggi dei loro siti sono persino migliori di SportsAid; arrivando a un 99/100 quasi perfetto su dispositivi mobili e 100/100 su desktop.

Conclusione

Si spera che questa sia stata una boccata d'aria fresca da tutti gli altri post del sito "come velocizzare il tuo WordPress" là fuori, e se stai lottando per ottenere un passaggio, forse abbiamo evidenziato qualcosa che puoi provare.

StrategiQ è la prima agenzia di marketing strategica. Scoprendo preziose informazioni sul mercato, rivelando opportunità di battere la concorrenza, definendo e fornendo strategie di marketing efficaci, il nostro team aiuta i marchi ambiziosi a superare i loro obiettivi attraverso consulenza, creatività, marketing e tecnologia.
Che tu abbia bisogno di strategia, consigli, risorse o competenze, fai il primo passo. Raccontaci di te e vedremo come possiamo aiutarti.