Ottimizzazione della velocità della pagina: come migliorare i tempi di caricamento

I tempi di caricamento del sito Web sono importanti per un semplice motivo: hanno un grande impatto sull'esperienza complessiva degli utenti. Pertanto, una delle considerazioni più importanti per migliorare le prestazioni del tuo sito Web è come ottimizzare la velocità della pagina.

In questa guida completa imparerai come misurare la velocità della pagina (usando strumenti gratuiti ea pagamento), cosa può causare rallentamenti per gli utenti e scoprirai 26 modi per ottimizzare i tempi di caricamento. Cominciamo.

Contenuti

1. Tutto ciò che devi sapere sulla velocità della pagina
2. Quali strumenti dovresti usare per misurare la velocità della pagina
3. Quanto tempo ci vuole per caricare un sito web
4. Metodi per ottimizzare la velocità della pagina
5. Misure OnPage per un sito web veloce
6. Ottimizzazione automatizzata della velocità della pagina

Tutto quello che devi sapere sulla velocità della pagina

Perché il tempo di caricamento del sito Web è importante?

Ci sono diversi motivi per cui un tempo di caricamento veloce è molto importante:

1. Esperienza utente positiva: Google ritiene che tempi di caricamento più lunghi abbiano un forte impatto sulle frequenze di rimbalzo. In effetti, aumentare il tempo di caricamento da 1 a 6 secondi può aumentare la frequenza di rimbalzo del 106%, motivo per cui ora è uno dei Core Web Vitals per le prestazioni (vedi sotto).

2. Fattore di ranking SEO: per Google e altri motori di ricerca, un'esperienza utente positiva è un fattore importante nel determinare la qualità di un sito web. Questo è il motivo per cui Google ora utilizza la velocità della pagina come uno dei Core Web Vitals. Pertanto, più velocemente si carica il tuo sito, maggiori sono le tue possibilità di posizionarti in alto.

3. Ottimizzazione del tasso di conversione: un ritardo di un secondo nel tempo di caricamento può ridurre le conversioni fino al sette percento, secondo questo studio. All'inizio potrebbe non sembrare così significativo, ma se il tuo negozio online genera un fatturato giornaliero di 1.000 euro, un ritardo di un secondo nel tempo di caricamento può comportare una perdita di 70 euro al giorno, circa 2.100 al mese. Se lo calcoli su base annuale, una velocità di pagina lenta è un vero killer di fatturato.

4. Scansione: i siti Web che si caricano lentamente vengono sottoposti a scansione più lenta e non vengono sottoposti a scansione così intensiva, perché Googlebot ha solo un budget limitato per la scansione. Un tempo di caricamento più rapido può quindi significare che il tuo sito viene scansionato più spesso, il che significa che anche i tuoi contenuti nell'indice di Google saranno più pertinenti.

Come viene misurata la velocità della pagina?

In generale, il tempo di caricamento di un sito Web è il tempo, in secondi, da quando il sito Web viene richiamato fino a quando non viene visualizzato completamente nel browser. I termini "tempo di caricamento" e "velocità della pagina" sono usati in modo intercambiabile. Se cerchi sul Web l'argomento, troverai entrambe le varianti. Il tempo di caricamento di un sito web può anche essere suddiviso in 4 diverse misure:

• Time to First Byte (TTFB) : il tempo che intercorre tra la chiamata del sito Web e il primo byte caricato dal server Web.
• First Contentful Paint (FCP) : l'ora in cui un elemento di visualizzazione viene visualizzato nel browser per la prima volta.
• First Meaningful Paint (FMP) : il momento in cui l'utente ha l'impressione che il sito web sia caricato.
• Time to Interactive (TTI) : l'ora in cui il sito Web è stato visualizzato ed è pronto per l'input dell'utente.

In questo articolo puoi scoprire esattamente come viene misurata la velocità della pagina.

Quali strumenti dovresti usare per misurare la velocità della pagina

Sono disponibili molti strumenti per analizzare e ottimizzare i tempi di caricamento. Esistono anche altri modi per determinare il tempo di caricamento del tuo sito Web, ad esempio con l'analisi dei file di registro.

Approfondimenti sulla velocità della pagina

Questo strumento di Google per misurare i tempi di caricamento viene costantemente aggiornato e migliorato. L'ultima versione di Pagespeed Insights si basa su Lighthouse, uno strumento di ottimizzazione del sito Web disponibile anche come estensione nel browser Chrome. Utilizza i dati di CruUX, il rapporto sull'esperienza utente di Chrome.

Dopo aver inserito il tuo dominio, lo strumento calcola un punteggio di velocità compreso tra 0 e 100. PageSpeed ​​Insights distingue tra un punteggio per dispositivi mobili e un punteggio per desktop. Il punteggio mobile viene utilizzato come standard ed è spesso molto basso, poiché Google vorrebbe motivare gli operatori di siti Web a ottimizzare i propri siti Web specificamente per le versioni mobili. Sotto il punteggio di velocità vengono visualizzate le misurazioni individuali. La loro codifica a colori può essere utilizzata per determinare la gravità dei problemi.

Figura 1: Pagina iniziale di Google PageSpeed ​​Insights

statistiche di Google

Se analizzi il tuo sito web con Google Analytics, troverai le statistiche sui tempi di caricamento nell'area "Performance". Fai clic su "Velocità del sito web". Se hai installato il monitoraggio e-commerce, puoi valutare direttamente come la velocità di caricamento influisca sulle conversioni.

Console di ricerca di Google

Nella Google Search Console, troverai i tempi di caricamento sotto la voce di menu "Crawling". Lì ti verrà mostrato quanti kilobyte vengono scaricati al giorno e quanto tempo richiede Googlebot per scaricare uno dei tuoi siti in millisecondi. Questo ti aiuta a scoprire facilmente i problemi con i tempi di caricamento del tuo sito web.

Ryte

Sulla piattaforma Ryte sotto Web Performance , vedrai una panoramica del punteggio delle tue pagine nel rapporto "Tempi di caricamento". Sotto questa panoramica, vengono fornite anche informazioni dettagliate sul punteggio delle singole pagine per "Tempo di connessione", "Tempo al primo byte" e "Tempo di caricamento".

C'è anche un rapporto separato "Core Web Vitals", che mostra il punteggio del tuo sito per gli indicatori chiave dell'esperienza di Google, che includono la velocità di caricamento (misurata da "Largest Contentful Paint"), insieme all'interattività ("First Input Delay") e stabilità visiva ("Spostamento cumulativo del layout").

Yslow

Yslow è stato sviluppato da Yahoo!. Puoi usarlo come bookmarklet, strumento per il centro di comando o come estensione del browser. Le regole per la velocità si basano sulle specifiche di Yahoo!. Lo strumento è interessante anche per utenti avanzati grazie alle funzioni della riga di comando. Si noti che il plug-in, Firebug, deve essere installato anche per utilizzare il plug-in tramite Firefox.

Figura 2: Yslow

Pingdom

Devi registrarti per usare Pingdom.com. Ti mostra i tuoi tempi di caricamento con diagrammi e statistiche, il che semplifica la valutazione. Puoi facilmente vedere quali elementi.

Figura 3: Pingdom

WebPageTest.org

Con WebPageTest.org puoi simulare il tempo di caricamento con vari browser. Puoi anche testare da varie località per testare la velocità di caricamento di un sito per i visitatori di altri paesi.

Che si carica più velocemente

Quale carica più velocemente confronta il tempo di caricamento di due siti tra loro. Il Website Speed ​​Ranker, con il quale puoi confrontare fino a quattro siti alla volta, funziona in modo simile.

Quanto tempo ci vuole per caricare un sito web?

In generale, un sito Web dovrebbe caricarsi in meno di due secondi per un'esperienza utente soddisfacente. Minore è il tempo di caricamento, meglio è. Idealmente, il caricamento dovrebbe richiedere meno di un secondo. La velocità di caricamento del tuo sito web dipende da vari fattori. Alcuni, puoi migliorare con l'ottimizzazione on-page; altri non puoi influenzare.

Non hai alcuna influenza su questi fattori:

• Larghezza di banda: il tempo di caricamento del tuo sito Web è influenzato dalla larghezza di banda Internet disponibile. Con una connessione 3G e uno smartphone, il sito Web si caricherà più lentamente rispetto a una connessione DSL veloce.
• Cache del browser: se un utente utilizza un browser la cui cache non è stata svuotata da molto tempo, il caricamento del sito può essere notevolmente più lento perché la memoria del computer non è in grado di elaborare il volume dei dati.
• Potenza di elaborazione del client: i computer desktop e gli smartphone meno recenti potrebbero subire ritardi nel caricamento della pagina poiché la struttura DOM e l'esecuzione degli script sono rallentate da memoria e potenza di elaborazione insufficienti.

Puoi influenzare questi fattori:

• Dimensioni dei file: le dimensioni dei tuoi file determinano la velocità di caricamento del tuo sito web. Ciò include non solo il codice HTML stesso, ma anche fogli di stile, file di script e immagini. Più piccoli sono i file, più veloce sarà il caricamento della pagina.
• Connessioni server: quando viene richiamata una pagina web, il server web elabora la richiesta. Può elaborare più velocemente se ha meno dati da elaborare. Se vengono effettuate molte richieste contemporaneamente con un elevato traffico del sito Web, la memoria principale e la capacità del processore possono essere utilizzate eccessivamente e quindi diventare un collo di bottiglia per il tempo di caricamento. In questo caso le capacità dovrebbero essere aumentate.

24 modi per ottimizzare la velocità della pagina

OK, ora che sai perché i tempi di caricamento sono importanti e come misurarli per il tuo sito web, diamo un'occhiata ai vari metodi che puoi provare per ottimizzare la velocità della pagina:

1. Crea tempi di connessione rapidi

La connessione tra il web server e l'utente deve essere stabilita prima che la richiesta della pagina web possa essere elaborata dal web server. Il tempo impiegato per questo è chiamato tempo di connessione, latenza o ping. Puoi misurarlo sulla piattaforma Ryte, in Web Performance . Idealmente, la latenza è inferiore a 100 millisecondi. Se la configurazione della connessione richiede molto più tempo, è possibile adottare misure di ottimizzazione.

2. Usa una CDN per una portata globale

Se è importante per la tua attività online avere una presenza globale, noterai rapidamente che i tempi di connessione possono variare notevolmente a seconda della posizione da cui si accede al sito web. Ciò è dovuto al fatto che i nodi aumentano geograficamente fino al data center in cui si trova il tuo server web.

Una rete di distribuzione dei contenuti, in breve CDN, può aiutare qui. La CDN garantisce che il tuo sito Web sia memorizzato nella cache in una rete di server globale, in modo che ci sia sempre un numero ridotto di nodi tra il computer dell'utente e il server successivo nella CDN. Questo servizio è associato a costi elevati, che non ripagano necessariamente gli operatori di un sito web che si rivolge principalmente all'area di lingua tedesca.

Per utilizzare una CDN, è necessario registrarsi presso un provider. Cloudflare ha alcuni piani gratuiti, ma dovresti controllare esattamente con quali condizioni l'offerta è gratuita. I fornitori a pagamento di solito addebitano il volume di dati utilizzato mensilmente sulla rete.

I fornitori noti sono:

• Amazon Cloudfront
• Cloudflare
• Stackpath
• wao.io

3. Ottimizza il tuo server web per la velocità della pagina

Quando viene stabilita la connessione al server web, questa richiesta elabora e fornisce i file richiesti. Vengono anche chiamati script lato server che, ad esempio, leggono il contenuto dai database e lo rendono disponibile per l'output.

4. Rileva i colli di bottiglia nell'infrastruttura

Quando una pagina Web si carica lentamente, è possibile che il server Web e la relativa infrastruttura sottostante siano sovraccarichi. Ciò può avere diverse cause, ad esempio se l'hoster ha un errore o perché il server web deve rispondere a troppe richieste contemporaneamente.

È importante riconoscere questi colli di bottiglia per poter reagire rapidamente. Molte soluzioni di hosting offrono metriche per monitorare l'utilizzo del server. Tra le misurazioni presentate sopra, può essere utile anche il "Time to First Byte", che può essere misurato con la piattaforma Ryte in Web Performance . Se aumenta in modo significativo, potrebbe esserci un problema con il server web.

5. Utilizzare la memorizzazione nella cache lato server

Il contenuto richiesto di frequente, ad esempio le query del database, può essere memorizzato nella cache del server in modo che le richieste non debbano essere eseguite più e più volte. Ciò è particolarmente importante per gli utenti che desiderano leggere più articoli o visualizzare prodotti, ovvero richiamare più pagine nella propria sessione. I tempi di caricamento dopo aver richiamato la prima pagina possono quindi essere ridotti.

Nelle impostazioni del software del server Web – i più utilizzati sono Apache HTTP Server e Nginx – è possibile attivare e configurare la cache lato server. Se non hai le conoscenze necessarie, puoi chiedere al tuo provider di hosting o far eseguire la memorizzazione nella cache e altre misure di PageSpeed ​​da un servizio cloud automatizzato (vedi sotto).

6. Usa la memorizzazione nella cache del browser

Con la memorizzazione nella cache del browser, gli elementi del tuo sito Web vengono memorizzati nella cache da un browser Web, anziché dalla cache del server del server Web. Pertanto, non tutti gli elementi devono essere caricati di nuovo quando si accede a un nuovo URL sul tuo sito web. Ciò aumenta la velocità di caricamento.
La memorizzazione nella cache del browser può essere attivata da molti CMS tramite plugin o estensioni.

Possibili plugin per la memorizzazione nella cache del browser con WordPress sono, ad esempio:

• WP Rocket
• Cache totale W3
• La cache più veloce del WP

L'attivazione manuale della cache del browser avviene tramite una regolazione del file .htaccess. Pertanto, puoi attivare due moduli del server Apache: mod_headers e mod_expires.

Se utilizzi mod_headers, il .htaccess deve essere completato con il seguente codice (Source – GitHub):

<FilesMatch ".(css|js|gif|pdf|jpg|jpeg|png)$">
Header set Cache-Control "max-age=2592000, public"
</FilesMatch>

Le parentesi tonde si riferiscono al formato del file che deve essere inserito nella cache. Allo stesso tempo, la durata della cache deve essere data con "età". L'unità è in secondi. In questo esempio, la cache viene salvata dal browser per 30 giorni.

Se desideri utilizzare mod_expires per la memorizzazione nella cache del browser, il file .htaccess viene espanso con le seguenti righe:

## Scadenza cache ##
<IfModule mod_expires.c>
ScadeAttivo il
ExpiresByType image/jpg "accesso più 1 anno"
ExpiresByType image/jpeg "accesso più 1 anno"
ExpiresByType image/gif "accesso più 1 anno"
ExpiresByType image/png "accesso più 1 anno"
ExpiresByType text/css "accesso più 1 mese"
ExpiresByType text/html "accesso più 1 mese"
ExpiresByType application/pdf "accesso più 1 mese"
ExpiresByType text/x-javascript "accesso più 1 mese"
ExpiresByType application/x-shockwave-flash "accesso più 1 mese"
ExpiresByType image/x-icon "accesso più 1 anno"
ExpiresDefault "accesso più 1 mese"
</IfModulo>
## Scadenza della cache

Questo metodo consente di determinare separatamente un intervallo di tempo univoco per ciascun tipo di file.

7. Usa la compressione GZip

I file possono essere elaborati e inviati più velocemente se sono il più piccoli possibile. Questo vale anche per il codice che serve a visualizzare il sito web nel browser dell'utente. Come un file zip, questo codice può essere compresso e quindi ridotto di dimensioni. I dati compressi vengono quindi decompressi nel browser.

Questo metodo è stato a lungo visto con scetticismo, perché è necessaria la potenza di calcolo del server web, e anche questo richiede tempo. Tuttavia, il vantaggio supera gli svantaggi, quindi dovresti assolutamente usarlo. Leggi la nostra guida completa alla compressione del codice del sito web.

Come posso comprimere i file con gzip?

Il server Apache è il più utilizzato per i siti Web, quindi l'esempio seguente è per Apache.

Vengono utilizzati due diversi moduli: mod_deflate e mod_gzip.

1. Il modulo mod_deflate è solitamente preinstallato. Con il seguente comando della console puoi verificare se esiste già:

sudo apachectl -t -D DUMP_MODULES | grep sgonfia

Se ottieni l'output "deflate_module (condiviso)", allora mod_deflate è già installato. Altrimenti contatta il tuo host.

2. Ora apri “httpd.conf”, il file di configurazione di Apache. Di solito puoi trovarlo nella cartella “/etc/httpd/conf/”. Lì aggiungi la seguente riga:

AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript
applicazione/javascript

Ciò indica che il testo e il codice HTML, CSS e JavaScript sono compressi con GZip. Salva il file e riavvia il server web Apache. D'ora in poi i dati verranno compressi da Apache.

8. Abilita HTTP/2

Per impostazione predefinita, tutti i file delle pagine Web (ad es. immagini e script) vengono caricati utilizzando il protocollo HTTP/1.1. Questi file vengono scaricati uno dopo l'altro tramite una connessione separata.

Questo rallenta il processo di caricamento. Con un certificato SSL, il server web può essere commutato sul protocollo HTTP/2. Tramite HTTP/2, tutti i file vengono scaricati tramite un'unica connessione. Hanno anche la priorità. Tutti i browser comuni supportano il protocollo, quindi puoi lavorarci senza esitazione.

Scopri di più in questo articolo: Come migliorare la velocità di caricamento delle pagine web con HTTP/2: una guida per principianti.

9. Comprimi le immagini

La parte proporzionalmente maggiore del volume di download di un sito Web è costituita da immagini. Ciò è tanto più vero per i negozi online con molti prodotti e siti Web portfolio, in particolare quelli dei fotografi.

Se riesci a ridurre notevolmente la dimensione del file delle tue immagini, puoi aumentare notevolmente la velocità della tua pagina. Abbiamo già scritto un ampio articolo sulla compressione delle immagini su Ryte. Ecco un riassunto.

10. Ottimizza tutte le immagini

Le immagini sono importanti per rendere un sito web chiaro e attraente per i tuoi utenti. Ma le immagini minacciano anche di aumentare notevolmente le dimensioni del file del tuo sito web e di rallentare il tempo di caricamento. Pertanto, dovresti utilizzare solo immagini ottimizzate per l'uso sul Web.

In generale, le foto e la grafica di alta qualità dovrebbero essere considerate file JPEG e le immagini più piccole e le immagini con pochi colori o trasparenze dovrebbero essere considerate file PNG.

Ulteriori passaggi:

• Comprimi le tue immagini prima di caricarle sul tuo sito web con un programma di elaborazione delle immagini come Gimp o Adobe Photoshop. Entrambi i programmi offrono ai principianti una funzione "salva per il web". In questo modo, la dimensione del file verrà automaticamente ottimizzata. Con strumenti come kraken.io o PNGGauntlet, puoi ridurre le dimensioni del file rimuovendo informazioni aggiuntive.
• La dimensione dell'immagine corrispondente è indicata nel codice sorgente: Se un browser deve calcolare la dimensione della grafica stessa, il tempo di caricamento può essere aumentato. La dimensione indicata deve corrispondere alla dimensione originale dell'immagine memorizzata sul server. Puoi anche definire le informazioni sulla dimensione dell'immagine tramite CSS.
• Rimuovi meta tag e dati EXIF: se, ad esempio, utilizzi immagini dalla tua fotocamera o smartphone, contengono molte informazioni aggiuntive come posizione, fotocamera utilizzata e altri dati. Con uno strumento come tinypng, puoi rimuoverli e risparmiare spazio di archiviazione.

11. Utilizzare il formato immagine WebP

Con WebP, Google ha creato un nuovo formato di immagine in grado di comprimere le immagini sia senza perdita (simile a PNG) che con perdita (simile a JPEG). È ancora più efficiente dei vecchi formati.

Non tutti i browser supportano ancora WebP. Pertanto, ha senso memorizzare le alternative per i file WebP nel codice sorgente e installare uno switch, ad esempio:

<immagine>
<tipo di sorgente="immagine/webp">
<tipo di sorgente="immagine/jpeg">
<img src="img/testbild2.jpg" alt="Fallback-Bild">
</immagine>

12. Distinguere tra siti desktop e mobili

In futuro, più della metà di tutti gli utenti accederà ai siti Web tramite un dispositivo mobile anziché un computer desktop. Le richieste relative alle immagini sono molto diverse su entrambi i supporti di output. Sul desktop, di solito c'è una buona connessione a Internet e su grandi monitor HD, l'utente desidera immagini ad alta risoluzione corrispondenti con la migliore qualità.

Sui dispositivi mobili, invece, i siti web sono spesso accessibili in mobilità e quindi non con la larghezza di banda più elevata. Il display piccolo significa anche che i requisiti di qualità sono inferiori.

Inoltre, a causa del formato dello schermo, le immagini vengono visualizzate con una risoluzione diversa rispetto al desktop. Ha quindi senso distinguere tra il supporto di output e creare due varianti di un'immagine.

Analogamente all'esempio precedente per WebP, gli switch possono anche essere memorizzati nel codice del sito Web per questo scopo. Con CSS, ad esempio, è possibile interrogare la risoluzione dello schermo e quindi adattare il display al supporto di output.

13. Imposta il caricamento lento

Nelle panoramiche dei prodotti e nelle gallerie fotografiche vengono visualizzate molte immagini contemporaneamente: questo rallenta notevolmente il tempo di caricamento. Questo è particolarmente un problema per operatori di negozi e fotografi, e particolarmente fastidioso per i negozi online perché spesso è la home page o la prima pagina delle categorie di prodotti.

Tuttavia, molte delle immagini caricate in questo modo sono visibili all'utente solo quando scorre la pagina verso il basso. Quindi non è necessario che siano già caricati quando l'utente guarda la parte "above the fold".

Con un metodo chiamato "caricamento lento", puoi assicurarti che le immagini sotto la cartella vengano caricate solo quando vengono effettivamente visualizzate nel viewport.

14. Pulisci il codice sorgente

Quando viene richiamato l'URL di un sito Web, un client o un browser segue riga per riga il codice sorgente del documento HTML. Vengono letti tutti i caratteri vuoti o le interruzioni di riga. Un carattere vuoto superfluo non influenzerà negativamente le prestazioni del tuo sito web.

Ma poiché un sito Web, a seconda delle sue dimensioni, può essere costituito da più di cento righe di codice sorgente, molti caratteri vuoti o commenti superflui possono influire chiaramente sul tempo di caricamento.

Pertanto, dovresti ridurre al minimo il tuo codice sorgente:

• Rimuovi tutti i commenti non necessari.
• Rimuovi tutti i caratteri vuoti superflui.
• Elimina la formattazione non necessaria, se, ad esempio, nel codice sorgente viene trovata una formattazione senza contenuto come "<strong></strong>"

Per evitare codice sorgente superfluo, dovresti sempre inserire il testo formattato come HTML nel sito Web, utilizzare l'editor CMS oppure inserire e quindi formattare il testo come testo normale. Se si integra il testo da Word o da un altro programma di Office direttamente nel CMS, ciò risulterà in codice sorgente superfluo.

Inoltre, ci sono programmi che possono rimuovere tutti gli spazi e i commenti dal codice sorgente. Se vuoi usare questi programmi, dovresti sempre conservarne una copia per la modifica, perché il file minimizzato è difficilmente leggibile.

15. Riduci gli script esterni

Che si tratti di pulsanti di condivisione o codici di monitoraggio, gli script esterni possono essere integrati nel tuo sito Web in modi diversi e per scopi diversi. Questo ti rende dipendente dalla disponibilità di questi script da un'altra fonte.

Se il server web da cui viene recuperato lo script è particolarmente lento, questo rallenterà anche il tempo di caricamento del tuo sito web. Quindi controlla se hai davvero bisogno di questi script.

Ulteriori suggerimenti:

• Utilizzare solo codici di monitoraggio asincroni. Non vengono caricati fino a dopo il rendering del sito e non ostacolano il caricamento del sito.
• Utilizza strumenti come Google Tag Manager. Ciò significa che è necessario integrare un solo snippet di codice nel codice sorgente per un certo numero di codici di monitoraggio e il tempo di caricamento non viene influenzato in modo significativo.
• Se possibile, dovresti archiviare gli script sul tuo server web e non integrarli dall'esterno.
• Riduci il numero di iFrame.

16. Esternalizzare JavaScript e CSS

JavaScript è un linguaggio di scripting con il quale è possibile eseguire funzioni nel browser e quindi sul computer client. I CSS (Cascading Style Sheets) possono essere utilizzati per definire formati e rappresentazioni per il sito web. Per questi elementi è richiesto molto codice sorgente, che deve essere caricato nuovamente ogni volta che viene richiesto un URL. Questo richiede tempo.

Per ridurre il codice sorgente, puoi esternalizzare i file CSS e JavaScript. Verranno quindi uniti in un unico documento. È necessario un solo recupero. Se il browser carica il file nella cache, il tempo di caricamento può essere nuovamente ridotto.

Come esternalizzare JavaScript:

Visualizza il codice sorgente del tuo sito web con un editor. Quindi, ritaglia tutti i file JS e crea un nuovo file di testo in cui inserisci tutti i frammenti di codice. Salva il file come main.js e salvalo sul tuo server nella cartella in cui si trovano tutti gli altri file HTML.

Nel codice HTML del sito Web, rimuovere i seguenti comandi:

e

Scambia il comando eliminato con questo comando:

17. Riduci al minimo i file CSS e JavaScript

Puoi ridurre le dimensioni di CSS e JavaScript rimuovendo i caratteri vuoti non necessari. Questi sono anche chiamati "spazi bianchi". In questo modo il codice sorgente può, ad esempio, essere ridotto ad una sola riga.

Frammento di codice con caratteri vuoti disponibili:

Codice CSS e caratteri vuoti:

La leggibilità è notevolmente ridotta dalla rimozione di spazi vuoti e commenti. Idealmente dovresti lavorare con due versioni: una versione con tutti gli spazi ei commenti che puoi modificare e una versione da visualizzare sul sito web.

In modo da non dover duplicare ogni modifica apportata, puoi anche utilizzare i programmi per "minimizzarla", ad esempio. Puoi anche utilizzare strumenti speciali per ridurre al minimo JavaScript e CSS. Gli strumenti consigliati includono:

• YUI Compressor o cssmin.js per i file CSS
• Compilatore di chiusura per JavaScript

18. Carica JavaScript e CSS alla fine

Il tuo sito web non viene visualizzato completamente finché non vengono caricati tutti i file JavaScript e CSS. Per facilitare il processo di caricamento, puoi inserire JavaScript e CSS alla fine del codice HTML. Anche se il server è lento, lo sviluppo del tuo sito non sarà influenzato.

La posizione ideale per i file CSS è quindi nell'area <head> del sito. Tuttavia, dovresti incorporare JavaScript nel piè di pagina del sito web.

Una possibile integrazione dei file può apparire come:

19. Usa CSS3 per gli sfondi

Ogni immagine utilizzata sul tuo sito Web richiede diverse righe di codice. Questo codice viene letto riga per riga quando viene richiamato il sito web. Se memorizzi pulsanti, icone o sfondi come elementi grafici, un browser richiederà molto tempo per caricare il tuo sito web.

La soluzione sta nel generare tutti gli elementi grafici a parte le foto tramite CSS3. In questo modo ridurrai il codice sorgente. Allo stesso tempo, i file vengono visualizzati con la stessa alta qualità su tutti i dispositivi finali.

20. Usa pre-lettura e pre-rendering

Se utilizzi la tecnologia di pre-fetching, il tuo browser memorizza alcuni elementi del sito Web nella cache, anche prima che il sito sia completamente caricato. In questo modo è possibile caricare immagini, grafica o JavaScript e CSS senza ostacolare il rendering del sito web.

È necessario modificare il codice sorgente per consentire il precaricamento di un file. In questo caso, l'elemento desiderato è preceduto dall'attributo rel="prefetch".

Un esempio:

<link rel="prefetch" href="//mysite.com/example-image.jpg">

Qui, l'esempio viene ricaricato anche prima del caricamento di un altro sito. Il tempo di caricamento nella nuova visualizzazione del sito viene così ridotto.

Se si utilizza il metodo di pre-rendering, un sito Web completo viene scaricato in anticipo dal browser e viene temporaneamente archiviato nella cache. In questo sono contenuti tutti i file necessari per il rendering completo. Il sito Web renderizzato in anticipo può essere caricato quasi senza indugio quando viene chiamato. Il tempo di caricamento è quindi ridotto a meno di 50 millisecondi.

Per implementare il pre-rendering è necessario inserire nel codice sorgente del sito da visitare la seguente riga:

<link rel="prerender" href="//prerendering-site.com/index">

21. Riduci i reindirizzamenti 301

I reindirizzamenti 301 sono ottimi per evitare contenuti duplicati o per reindirizzare vecchi URL a nuovi URL dopo un rilancio. Tuttavia, ogni reindirizzamento aumenta il tempo di caricamento, non in modo significativo, ma ogni volta che un browser incontra un reindirizzamento, è necessario recuperare un nuovo URL e il browser deve attendere fino a quando non viene restituita una richiesta http. Se si susseguono più reindirizzamenti 310, il tempo di caricamento può essere notevolmente aumentato.

>> Reindirizzamenti: una guida per principianti <<

Per evitare troppi reindirizzamenti, dovresti documentare la struttura degli URL o lo sviluppo di nuovi URL. Lo stesso vale per i reindirizzamenti 301 stabiliti. Se nell'analisi del tuo sito web trovi più inoltri, dovresti guidare il primo inoltro direttamente all'obiettivo del collegamento effettivo senza deviare verso uno o più reindirizzamenti.

22. Evita cattive richieste

Se un client come un browser Web accede al tuo sito, viene inviata una richiesta affinché ciascuna risorsa sia in grado di visualizzare il file. Se tuttavia queste risorse non vengono trovate sotto forma di immagini o file JavaScript, ciò può portare a una catena di reazione che spreca il tempo di caricamento.

Puoi facilmente evitare richieste errate correggendo i file errati e fornendo il percorso corretto o inoltrando al nuovo file.

23. Usa AMP

Google offre ai webmaster con Accelerated Mobile Pages l'opportunità di caricare siti Web mobili quasi senza ritardi. A tal fine, i siti devono soddisfare determinati requisiti affinché possano essere visualizzati su dispositivi mobili.

Molti CMS come WordPress consentono l'uso di AMP con l'aiuto di plugin. Finora, AMP non poteva essere utilizzato per i negozi online. Tuttavia, questo è previsto dagli sviluppatori.

Ulteriori risorse:

• Homepage del Progetto AMP
• Plugin WordPress-AMP

24. Prova l'ottimizzazione automatica della velocità della pagina

In questa guida hai imparato molte misure per migliorare la velocità della pagina. Tuttavia, la maggior parte di queste misure richiede la conoscenza tecnica e il tempo per implementarle.

Se una di queste due cose dovesse essere un ostacolo per te, puoi lasciare l'ottimizzazione della velocità della pagina a un servizio automatizzato.

Il servizio cloud per l'ottimizzazione automatizzata della velocità di pagina wao.io funziona in questo modo: come una rete di distribuzione di contenuti, wao.io memorizza temporaneamente il sito Web ed esegue le misure che puoi definire tramite un menu. Oltre alla compressione intelligente delle immagini e alla minimizzazione del codice, questo include anche misure avanzate come il caricamento lento.

wao.io protegge anche dagli attacchi alla sicurezza e offre metriche per il monitoraggio del sito Web e i numeri degli utenti.

Conclusione

Un sito Web ha molte possibili viti di regolazione che puoi utilizzare per migliorare il tempo di caricamento della pagina.

In questo articolo hai scoperto alcune possibilità. Alcuni metodi sono anche molto facili da implementare per i principianti e per i principianti SEO.

Anche se ne provi solo alcuni, siamo sicuri che puoi rendere il tuo sito web più veloce, rendere più felici i tuoi utenti ed essere ricompensato con migliori classifiche di ricerca.