Problemi velocità caricamento sito web

Problemi velocità caricamento sito web

Abbiamo già parlato in un precedente articolo di Gt Metrix come strumento per analizzare il PageSpeed, ovvero la velocità di apertura di un sito o di una pagina web.

Qui di seguito analizziamo singolarmente i problemi collegati alla velocità di caricamento di un sito o di una pagina web.

GT METRIX TEST VELOCITA DI CARICAMENTO PAGINE WEBProblemi velocità caricamento sito web

OTTIMIZZAZIONE CACHING DEL BROWSER

Ogni volta che un Browser visualizza una pagina web, deve scaricare tutti i file di scrittura presenti in essa, ai fini della sua visualizzazione. Tutto ciò include il codice HTML, CSS, JAVA e IMG. Alcune pagine sono di facile e veloce visualizzazione in quanto i file di scrittura in esse inclusi sono pochi e di piccole dimensioni, in altre invece sono contenuti molti file di grandi dimensioni. In questo secondo, caso la difficoltà di visualizzazione si manifesta soprattutto su dispositivi Mobile che, nell’era tecnologica che stiamo vivendo rappresenta la maggiore percentuale del traffico di ricerca. Il CACHING DEL BROWSER può aiutare a memorizzare questi file LOCALMENTE NEL BROWSER DELL’ UTENTE per cui, se un utente visualizza la prima volta la Home del sito www.xxxxx.it, ci vorrà un tempo standard per la visualizzazione della pagina, in quanto dovranno essere scaricati tutti i file di scrittura contenuti nella pagina stessa. A questo punto alcuni file verranno memorizzati nella cache locale dell’utente (proprio Browser), per far sì che la seconda volta, lo stesso utente abbia una migliore esperienza, in quanto una volta connesso alla HOME, riuscirà a visualizzarla in un minor tempo; in quanto dispone già di alcuni file necessari all’apertura della pagina stessa.

MANCATA OTTIMIZZAZIONE DELLE IMMAGINI PER IL WEB

Tale punto di criticità si riscontra in molti siti web, soprattutto negli e-commerce in quanto legati strettamente a dei file di immagine.

Nel momento in cui le dimensioni di un file immagine sono troppo grandi o elevate il sito aumenta i suoi tempi di caricamento. Ciò provoca, sia un disinteresse generale dell’utente che viene a contatto con il sito stesso, sia disinteresse da parte degli indici di Google che sono costretti a soffermarsi troppo sulla renderizzazione del file immagine. Tale situazione di lentezza causata dalle immagini viene quindi interpretata dagli spider degli indici di Google come un errato funzionamento del sito. Gli spider di Google quindi lentamente, perderanno interesse per il sito in questione, la cui elevata dimensione delle immagini viene appunto interpretata (ripetiamo) come errore strutturale del sito. Tale problematica può essere risolta sia allargando la SPECIFICAZIONE DELLE DIMENSIONI DELLE IMMAGINI ALLE STESSE IMMAGINI NON OTTIMIZZATE, oppure riducendo la DIMENSIONE DELLE IMMAGINI IN QUESTIONE AD UNA MISURA OTTIMALE, ovvero 800X600 pixel.

OTTIMIZZAZIONE DEI FILE CSS, DELLE IMMAGINI E DEI FOGLI DI STILE ATTRAVERSO LO STRUMENTO DELLA COMBINAZIONE ATTRAVERSO GLI “SPRITES”

Combinando le immagini nel minor numero di file possibile, utilizzando i cosiddetti SPRITES, si riescono a ridurre le richieste da parte del Browser, evitando il ritorno al Download di altre risorse necessarie alla renderizzazione, evidando cosi l’eccessivo sovraccarico di bytes da dover scaricare per renderizzare una pagina che contiene molte immagini. Faccio un esempio: ipotizziamo che un utente abbia appena trovato in serp il sito www.xxxx.it , nel momento in cui l’utente clicca sul sito, il Browser (dell’utente) fa una serie di richieste al Server (su cui è installato il sito). Ora se le immagini e i fogli di stile relativi alla Home non sono combinati in pochi e unici file, il browser ha bisogno di inviare nuove richieste al Server affinchè abbia tutti gli elementi e risorse necessarie per poter renderizzare la stessa Home nella sua interezza. Tutto ciò si traduce in un eccessivo lasso di tempo necessario alla renderizzazione della pagina (home) e in un eccessivo sovraccarico di Bytes da dover scaricare da parte del browser.

Ecco perche’ per lo stesso motivo gli indici di Google richiedono una combinazione dei file Css Esterni da incorporare possibilmente nei fogli di stile e file Css interni.

Lo stesso risultato si può ottenere utilizzando lo strumento CSS@Import nei fogli di stile o file Css esterni.

RIMANDARE L’ANALISI DEL CODICE JAVA SCRIPT

Per caricare una pagina il browser deve analizzare il contenuto di tutti i tag <script>, i quali aggiungono ulteriore tempo necessario per la renderizzazione della pagina stessa. Riducendo al minimo la quantità di Java Script necessari alla renderizzazione e rimandando l’analisi di tali codici ai soli casi di necessità e possibile ridurre i tempi di caricamento della pagina.

La tecnica piu’ semplice è quella di utilizzare l’attributo async><script che impedisce l’analisi del codice permettendo una più veloce apertura della pagina iniziale.

UTILIZZO DEL COMANDO ASYNC – DEFER

In questo caso particolare il caricamento della pagine (HOME ed E-SHOP su cui il test è stato eseguito) è bloccato. Questo blocco è dovuto al fatto che il browser si ferma sulla lettura degli SCRIPT.

Nei casi tradizionali in mancanza di tale ottimizzazione il browser prima di poter caricare tutti gli elementi HTML della pagina, deve attendere che siano letti, scaricati, analizzati ed eseguite tutte le risorse identificate come TAG SCRIPT, JAVA SCRIPT, TAG IMG, FILE CSS.

Tale problematica può essere risolta con moduli che contengono l’attributo ASYNC oppure DEFER.

L’attributo ASYNC dell’elemento SCRIPT consente di caricare ed eseguire lo SCRIPT associato in modo asincrono dal resto della pagina. Questo significa che lo SCRIPT viene caricato ed eseguito in BACKGROUND mentre la pagina continua ad essere analizzata. L’attributo ASYNC infatti migliora in modo significativo le prestazioni in fase di caricamento.

A tale scopo esiste anche il comando DEFER che a differenza del comando ASYNC rimanda la lettura del codice java a fine pagina.

MANCATA COMPRESSIONE GZIP

Ogni qual volta un utente si connette ad un sito il browser installato sul proprio pc o dispositivo Mobile fa una richiesta al server, il server risponderà con una serie di file (File di scrittura) contenuti in un foglio di stile. L’attivazione di una compressione in tal senso permette di sostituire le STRINGHE COMUNI E SIMILI e di riempire o eliminare gli spazi bianchi, riducedo le dimensioni del foglio di stile fino al 70% delle dimensioni originali. Un tale strumento aumenta le capacità complessive dell’intero sito, che attraverso il server dispone di risposte quasi immediate dei file necessari per la visualizzazione o renderizzazione della pagina.

LASCIA UN COMMENTO

Please enter your comment!
Please enter your name here