L'ottimizzazione di Google PageSpeed è una parte essenziale del posizionamento di qualsiasi blog o sito Web nei risultati di ricerca di Google. Ecco la mia guida passo passo per ottimizzare la velocità della pagina del tuo blog WordPress e ottenere una performance perfetta di 100 su Google PageSpeed Insights.
La velocità di caricamento del tuo sito web è una parte importante di l'esperienza di un utente sul tuo blog. Ecco perché avere un sito web veloce è essenziale per il successo, se lo desideri creare un blog.
Google classifica anche i siti Web in base alla loro velocità utilizzando il loro punteggio PageSpeed. Ottenere un punteggio perfetto di 100 nel test PageSpeed di Google non è facile. Ma sono qui per aiutarti! Non importa se hai un blog o un sito di e-commerce, ti spiegheremo passo dopo passo come portare il tuo punteggio di Google PageSpeed a 100.
Google PageSpeed Optimization: come ottenere un punteggio di 100 in PageSpeed Insights
Esaminiamo prima le basi di Google PageSpeed, quindi ci immergeremo nell'ottimizzazione della velocità del tuo blog.
Cos'è Google PageSpeed?
La velocità della pagina è il tempo impiegato dai contenuti del tuo sito web per raggiungere il browser di un utente.
Questo è molto importante perché gli utenti che visitano il tuo sito non vogliono dover aspettare i tuoi contenuti. Conosci la sensazione o trovi una risposta alla tua domanda su Google, fai clic su un link e finisci per rinunciare perché la pagina non si carica velocemente.
Anche Google lo sa; questo è il motivo per cui la velocità del tuo sito è un importante fattore di ranking. Lo strumento più popolare per testare la velocità del tuo sito è il PageSpeed Insights di Google . Questo è il modo migliore per scoprire esattamente cosa pensa Google del tuo sito in termini di velocità della pagina.
Notevoli metriche di Google PageSpeed :
- La più grande vernice contenta (LCP): misurazione della velocità di caricamento della pagina percepita dagli utenti. Principalmente quando il contenuto above the fold ha terminato il caricamento.
- Ritardo primo ingresso (FID) : misurare in secondi il ritardo prima che un utente possa interagire con il sito web.
- Spostamento cumulativo del layout (CLS) : misure in secondi fino a quando il layout della pagina non ha smesso di "cambiare". Ad esempio, il caricamento di un'immagine può causare modifiche al layout del tuo sito. Questo è importante perché un utente potrebbe voler fare clic su qualcosa sul tuo sito prima che sia terminato il caricamento, il che potrebbe indurlo a fare clic su qualcos'altro.
- Prima vernice contenta (FCP): Una misura del tempo in cui qualcosa viene visualizzato sullo schermo.
- Interazione con Next Paint (INP): L'interazione con Next Paint osserva la latenza delle interazioni dell'utente con una pagina. Ad esempio, se un utente fa clic su una fisarmonica e si verifica un ritardo imprevisto durante l'apertura.
- Tempo al primo byte (TTFB): misura il tempo fino a quando il browser riceve una risposta dal server.
Vedrai questi termini usati spesso in Google Search Console (report Core Web Vitals), PageSpeed Insights e Chrome User Experience Report.
Perché la velocità della pagina è importante?
La velocità della pagina è importante perché influirà direttamente la quantità di traffico et quanti soldi può fare il tuo blog .
Des Études (in inglese) hanno dimostrato che la velocità del sito influisce direttamente sul il tasso di conversione. I dati di Portent mostrano che avere una velocità di caricamento della pagina di 1 secondo contro 5 secondi porterà a un calo di quasi il 50% delle conversioni. Non solo il tempo di caricamento del tuo sito influirà sulle classifiche di Google, ma influirà anche sul tasso di conversione.
Dalla tua posizione nei risultati di ricerca di Google alla pazienza dei clienti, il tempo di caricamento della pagina del tuo sito influisce su ogni aspetto dell'esperienza di un utente. Poiché gli utenti utilizzano principalmente dispositivi mobili, ogni kilobyte caricato dal tuo sito dovrebbe essere intenzionale.
Più a lungo un utente deve sedersi e attendere il caricamento di una pagina, maggiore sarà anche la frequenza di rimbalzo. La velocità del tuo sito non influisce solo sulle SERP di Google, ma la maggior parte dei motori di ricerca tiene conto della velocità della pagina. Ecco perché avere un sito a caricamento veloce è essenziale nel web di oggi.
Fortunatamente, costruire un sito veloce non è troppo difficile se usi strumenti moderni e sai cosa fare.
Come testare la velocità del tuo sito web
Se non hai familiarità con Google PageSpeed, è una serie di test che Google esegue sul tuo sito per determinare la velocità di caricamento del tuo sito. Quando un utente su Google fa clic su un risultato di ricerca, si aspetta che si carichi rapidamente. Questo è il motivo per cui Google ha creato il test PageSpeed Insights di Google .
Apri Google PageSpeed Insights
Ciò offre ai proprietari di siti Web gli strumenti per sapere esattamente cosa sta rallentando il loro sito Web e come risolverlo. Inoltre, fornisce a Google i dati di cui ha bisogno per classificare correttamente un sito web nel suo algoritmo del motore di ricerca.
Utilizzare lo strumento è semplice come inserire l'URL del tuo sito web e fare clic Analizzare. Il test verrà eseguito rapidamente e riceverai molte misurazioni chiave. Inoltre, se desideri eseguire un test locale, puoi utilizzare lIl fiore all'occhiello dell'open source di Google per produrre risultati simili direttamente nel tuo browser.
Un altro posto per vedere le prestazioni del sito Web è utilizzare il rapporto Page Sync di Google Analytics.
Probabilmente non avrai bisogno di coprire tutto in questo articolo, ma esaminerò i problemi più comuni di PageSpeed e come risolverli.
Best practice di PageSpeed : problemi comuni di PageSpeed di Google e come risolverli
La maggior parte dei consigli in questa sezione presuppone che tu abbia a blog WordPress. Ho anche incluso istruzioni più dettagliate per consentire agli sviluppatori di risolvere manualmente i problemi.
Di gran lunga il modo migliore che ho trovato per migliorare la velocità di caricamento del tuo sito WordPress è utilizzare WP-razzo . WP-Rocket è un plug-in a pagamento, ma ne vale la pena in quanto applica molte delle migliori pratiche di performance fin dall'inizio. Per risolvere la maggior parte dei problemi di velocità della pagina, evidenzierò se WP-Rocket può aiutare e fornire un'alternativa gratuita, se disponibile.
Anche il tuo tema WordPress svolgerà un ruolo importante negli elementi vitali del web.
Velocizza i tempi di risposta del server
Il tempo di risposta rapido del server è essenziale per un ottimo punteggio di Google PageSpeed. Fondamentalmente, il tempo di risposta del tuo server è il tempo impiegato dal server del tuo sito web per generare la pagina web. Questa è una delle cose più facili da correggere se vedi questo avviso nel tuo rapporto PageSpeed.
Il modo più comune per eliminare questo problema è utilizzare la memorizzazione nella cache delle pagine. Ciò significa che il tuo sito servirà la pagina web dalla cache, quindi il server stesso dovrà fare poco o nessun lavoro.
- Abilita la memorizzazione nella cache delle pagine: quando un utente richiede una pagina dal tuo sito, deve essere visualizzata e servita. Questo processo può essere saltato completamente con il caching delle pagine. Fondamentalmente, quando un utente visita una pagina del tuo sito Web, questa verrà salvata per l'utente successivo nella cache in modo che possa essere restituita all'istante. Molte società di hosting WordPress hanno la memorizzazione nella cache delle pagine integrata, ma se riscontri tempi di risposta del server elevati, probabilmente non è abilitata. Alcune delle migliori soluzioni di memorizzazione nella cache delle pagine di WordPress includono: WP-razzo , W3 Total Cache et Enabler cache.
- Usa uno stack moderno: le versioni di PHP e MySQL utilizzate dal tuo host web svolgono un ruolo importante nella velocità della pagina. Le società di web hosting dovrebbero averti coperto da questo lato. Se sei uno sviluppatore, ciò significa tenersi aggiornati con l'ultima versione di PHP e soluzioni di database.
Abilitare la compressione
Il tuo sito può comprimere il contenuto e le dimensioni della pagina prima di inviarlo al browser dell'utente con la compressione Brotli (più recente, supportata da Chrome) o GZIP. Questi metodi di compressione non hanno alcun effetto sulla visualizzazione del tuo sito poiché i browser degli utenti gestiscono automaticamente i contenuti compressi.
Le società di hosting WordPress più popolari applicheranno automaticamente la compressione per te. Se vuoi confermare che un metodo di compressione è abilitato sul tuo sito, puoi utilizzare a Test di compressione GZIP online .
Plugin WordPress il popolare software per le prestazioni comprimerà automaticamente GZIP per te, incluso WP-razzo , WP Super Cache (deve essere abilitato nelle impostazioni) e W3 Total Cache (deve essere abilitato nelle impostazioni). WP-Rocket applicherà automaticamente la compressione GZIP al tuo sito se utilizzi Apache senza alcuna configurazione.
Per gli sviluppatori: Per abilitare la compressione Brotli o GZIP sul tuo server, devi sapere se stai utilizzando Apache o Nginx. Invece di gestire la configurazione del server, ti consiglio di scegliere di utilizzare CloudFlare. CloudFlare applicherà la compressione GZIP e Brotli a seconda di cosa supporta il browser dell'utente e quale contenuto viene servito automaticamente.
Minimizza CSS, HTML e JavaScript
HTML, CSS e JavaScript influiscono tutti sulla velocità di caricamento della pagina. Durante la scrittura del codice, la maggior parte degli sviluppatori include tabulazioni, spazi e altro codice non essenziale per renderlo leggibile dall'uomo. Tutti quei caratteri inutilizzati si sommano e possono rallentare un po' il tuo sito.
Fortunatamente, tutte queste risorse possono essere facilmente ridotte al minimo senza influire sull'esperienza dell'utente. WP-razzo offre una pagina di ottimizzazione dei file con opzioni di minificazione per CSS e JavaScript. Inoltre, se la memorizzazione nella cache delle pagine è abilitata in WP-Rocket, la minificazione HTML verrà applicata alle pagine. Un'opzione gratuita è utilizzare il plug-in Autoptimize per minimizzare CSS/JS/HTML.
Tieni presente che quando minimizzi JavaScript può portare a problemi di funzionalità, quindi assicurati di testare durante l'attivazione.
Per gli sviluppatori: molti strumenti di sviluppo consentono agli sviluppatori di comprimere i propri file durante il flusso di lavoro. Pacchetti Node.js come Pulisci CSS può essere aggiunto a un flusso di lavoro per comprimere i file minificati mentre si lavora su di essi. Inoltre, per progetti più piccoli, ci sono molti strumenti online che comprimono il file CSS , JS e persino il HTML . Se utilizzi WordPress, dovrai solo scegliere di utilizzare un plug-in, poiché forniranno gli stessi risultati con molto meno sforzo.
Riduci i CSS inutilizzati
La rimozione di CSS inutilizzati può essere complicata. Le regole CSS sulla tua pagina che non vengono utilizzate per lo stile della pagina sono considerate CSS inutilizzate. La maggior parte dei framework, dei temi e dei plug-in lascerà il tuo sito con CSS inutilizzati.
Ad esempio, il tuo tema WordPress potrebbe contenere uno stile per una pagina di contatto ma non è utilizzato su tutte le altre pagine del tuo sito ma esiste ancora nel foglio di stile.
Fortunatamente, se utilizzi WordPress, ci sono alcuni plugin che taglieranno automaticamente i CSS inutilizzati. WP-razzo e Perfmatters farà un ottimo lavoro nel rimuovere i CSS inutilizzati dal tuo blog. Questi plugin caricheranno le tue pagine e si assicureranno che abbiano solo il CSS necessario per visualizzare correttamente la tua pagina, lasciandoti con un file CSS più piccolo.
Per gli sviluppatori: per eseguire questo processo manualmente, gli sviluppatori possono lavorare su rimozione delle foglie stile di un sito WordPress. Ciò ti consentirà di selezionare manualmente il CSS che desideri aggiungere al foglio di stile del tuo tema. Ci sono anche strumenti online per trova css inutilizzati sul tuo sito, ma probabilmente non sono l'ideale per i siti di grandi dimensioni.
Approfitta della memorizzazione nella cache del browser
Quando gli utenti visitano più pagine del tuo sito, è probabile che utilizzino le stesse risorse. Spesso immagini, CSS e JavaScript sono condivisi nell'intero sito. È qui che entra in gioco la memorizzazione nella cache del browser, puoi dire al browser di un utente di salvare le risorse per un uso successivo. La maggior parte plugin di WordPress le prestazioni abiliteranno le regole di memorizzazione nella cache del browser.
Per gli sviluppatori: A seconda che tu stia utilizzando Apache o Ngnix, puoi aggiungere una configurazione del server per indicare ai browser dell'utente di memorizzare nella cache contenuti specifici. In genere, questi metodi di memorizzazione nella cache del browser vengono applicati a CSS, JS e immagini.
Elimina le risorse che bloccano il rendering
Quando un browser web legge il codice del tuo sito web, determina cosa scaricare e visualizzare. I file JavaScript e CSS del tuo tag <head> sono considerate risorse di blocco del rendering. Quando il browser tenta di restituire la pagina a un utente, dovrebbe interrompersi, scaricare il file e ritardare in generale la visualizzazione della pagina.
Se il tuo sito disponeva di risorse che bloccano il rendering, Google PageSpeed Insights ti mostrerà i file più grandi e i potenziali risparmi.
Fortunatamente, la maggior parte dei plug-in per le prestazioni di WordPress ti aiuterà a rinviare o integrare JavaScript e CSS. Il plugin di WordPress ti aiuterà anche a spostare fogli di stile e JS non essenziali da caricare in fondo alla pagina. WP-razzo, Autoptimize (gratuito) e Perfmatters tutti fanno un lavoro per eliminare le risorse che bloccano il rendering.
Per gli sviluppatori: gli sviluppatori possono sfruttare diverse funzionalità del browser per migliorare il caricamento delle risorse. Ciò include l'uso del rimandare l'attributo sugli script, spostando CSS/JS nel piè di pagina e includendo solo CSS critici nell'intestazione.
Codifica le immagini in modo efficiente
Gli algoritmi di compressione delle immagini hanno risultati incredibili per comprimere le immagini senza perdere la qualità percepita.
In genere, le immagini JPG e PNG possono utilizzare una compressione aggiuntiva durante l'esportazione. Imagify, ShortPixel et Smush sono tutti eccellenti plugin di WordPress per comprimere automaticamente le immagini. Fondamentalmente, questi plugin comprimeranno le tue immagini mentre le carichi, accelerando la velocità di caricamento della pagina. Puoi anche selezionare il livello di compressione applicato alle immagini.
Poiché comprimere le immagini costa potenza di elaborazione, molti di questi plug-in addebiteranno una grande quantità di immagini. ShortPixel offre anche un plug-in per comprimere le immagini sul cloud utilizzando la loro rete di distribuzione dei contenuti e API. Se il tuo sito utilizza già CloudFlare, puoi iscriverti al loro piano professionale per ottimizzare le immagini al volo.
Per gli sviluppatori: sono disponibili molti strumenti di ottimizzazione delle immagini, inclusi strumenti online come Image Compressor e app desktop come Picchi. Dovrai comprimere le immagini su larga scala, quindi preferisco utilizzare un CDN che comprime automaticamente le immagini. Il mio preferito è il Piano CloudFlare Pro ($ 20/mese) che comprimerà automaticamente e persino le immagini webp del server. Puoi anche passare all'utilizzo di SVG per la grafica come il logo del tuo sito. Una buona regola da tenere presente è anche quella di utilizzare i file JPEG per le foto reali e i file SVG/PNG per la grafica. L'utilizzo di un file PNG per una foto risulterà in un file inutilmente grande.
Immagini di dimensioni adeguate
Un esempio di immagini di dimensioni errate è un'immagine grande di 2000 x 2000 px in un div largo 800 px. Poiché sono visibili solo 800 pixel, il browser deve aver caricato l'immagine più grande senza motivo. Ciò comporta una velocità di caricamento della pagina più lenta e un'esperienza peggiore per gli utenti. La maggior parte Temi WordPress quelli ben progettati non avranno questo problema.
Per gli sviluppatori: Se stai sviluppando un tema WordPress, puoi impostare le dimensioni predefinite delle immagini di WordPress in modo che corrispondano correttamente alla larghezza del tuo tema. Dovrai rigenerare le miniature di WordPress dopo aver modificato le dimensioni dell'immagine. Tieni presente che se desideri eseguire lo streaming di immagini per un display Retina, dovresti utilizzare il formatoattributo srcset. WordPress ha anche funzioni integrate per visualizzare le immagini su uno schermo ad alta densità di pixel.
Rinvia le immagini fuori schermo
Quando viene caricato un sito Web, se contiene immagini, verranno caricate tutte. È uno spreco di risorse e utilizzo della rete poiché le immagini sono visibili. Fortunatamente, la pubblicazione di immagini fuori dallo schermo è più facile che mai ora che tutti i principali browser supportano il formato lazy loading .
Per impostazione predefinita, WordPress applicherà l'attributo loading="lazy" to images per posticipare automaticamente il caricamento delle immagini fuori schermo in modo che probabilmente non vedrai questo errore. WP-Rocket applicherà anche il caricamento lento a immagini, iFrame e incorporamenti di YouTube. Puoi anche usare il plug-in di caricamento lento a3 gratuito per applicare il caricamento lento agli elementi fuori dallo schermo. Se il tuo sito ha molti file immagine e gif, questo è un aspetto importante per migliorare il caricamento della pagina.
Per gli sviluppatori: il modo più semplice per aggiungere il lazy loading a un'immagine è includere l'attributo loading="lazy" nel faro <img>. Ce ne sono anche molti Librerie Javascript per caricare contenuti pigri.
Tutto il testo rimane visibile durante i caricamenti di webfont
Quando sono stati introdotti i caratteri Web, era comune nascondere il testo prima che il carattere fosse caricato. Questo è un grande no-no poiché gli utenti vogliono iniziare immediatamente a leggere il tuo sito. WP-Rocket ottimizzerà automaticamente la visualizzazione dei caratteri Web quando le ottimizzazioni CSS sono abilitate. il WordPress Plugin gratis Scambia la visualizzazione dei caratteri di Google aggiungerà anche l'impostazione corretta a Google Fonts per il tuo sito WordPress.
Per gli sviluppatori: probabilmente stai utilizzando Google Fonts, che è abbastanza semplice per risolvere questo problema. Tutto quello che devi fare è aggiungere la stringa di query "&display=swap" al tuo URL di Google Font; maggiori dettagli da Google .
Evita i reindirizzamenti di più pagine
Se il tuo sito ha molti reindirizzamenti, questi aumenteranno lentamente la velocità di caricamento della pagina. Ad esempio, se la tua home page reindirizza a /home.html, questo causerà un ritardo nella risposta dei tuoi utenti. Potresti visualizzare questo errore se disponi di file CSS o JS che portano anche a un reindirizzamento.
Un altro esempio è se un URL nel menu di navigazione dell'intestazione va a un URL che reindirizza. È probabile che il tuo sito non venga contrassegnato per questo se utilizzi WordPress.
Domande frequenti sull'ottimizzazione e le statistiche di Google PageSpeed
Ecco le domande più frequenti su Google PageSpeed. Se manca qualcosa, chiedi nei commenti alla fine di questo articolo.
Cos'è il test di Google PageSpeed?
Il test di anteprima di Google PageSpeed viene utilizzato per determinare le prestazioni di un sito web. I risultati di un test ti danno un punteggio di PageSpeed su 100.
Che cos'è un punteggio di Google PageSpeed?
Un punteggio di Google PageSpeed è un test eseguito da Google progettato per analizzare le prestazioni di un sito Web. 100 è un punteggio perfetto mentre 90 è considerato buono. Mentre un punteggio compreso tra 50 e 90 deve essere migliorato e un punteggio inferiore a 50 è scarso.
La velocità della pagina influisce sulla SEO?
Sì. Il punteggio di Google PageSpeed Insights gioca un ruolo importante nella SEO. Google utilizza la velocità della pagina come fattore chiave per il posizionamento di un sito web.
Come posso migliorare il mio punteggio di Google PageSpeed?
Spero che questo articolo ti abbia aiutato a migliorare il tuo punteggio di Google PageSpeed. Le basi includono la rimozione delle risorse che bloccano il rendering, la rimozione di CSS inutilizzati, l'ottimizzazione delle immagini e la riduzione del tempo al primo byte.
Considerazioni finali sull'ottimizzazione di Google PageSpeed per il tuo blog
Spero che questi suggerimenti per ottimizzare l'ottimizzazione di Google Page Speed ti aiutino a migliorare le prestazioni del tuo blog e portino a un aumento del traffico organico nel tempo. Man mano che il web si evolve e gli strumenti diventano più facili da usare, sarà sempre più facile velocizzare i siti WordPress.
Ci sono un sacco di cose che puoi fare per migliorare un punteggio di Google Page Speed , ma ti consiglio di fare un test di superamento.
Avere un test di superamento (punteggio superiore a 90) giocherà un ruolo importante nel classificare i tuoi contenuti nelle prime posizioni per i risultati di ricerca organici di Google. Ricorda però che ottenere un punteggio perfetto di 100 può diventare un compito senza fine man mano che gli standard web cambiano, quindi cerca di rimanere entro quell'intervallo di 90+ e starai bene.
