Come ridurre le richieste HTTP del tuo sito web

Ogni volta che navighi sul Web, un sacco di materiale tecnico accade dietro le quinte per distribuire contenuti sul tuo schermo.

Gli ingegneri sono di solito quelli che gestiscono queste attività. I marketer, anche quelli con un tocco tecnico, tendono a evitarlo. Una di queste attività è una richiesta HTTP e in realtà non è così complicata come si potrebbe pensare. In effetti, i marketer bisogno avere almeno una comprensione generale delle azioni eseguite dal proprio sito Web ogni volta che una persona lo visita.

Gli esperti di marketing delle metriche tendono ad essere responsabili della possibilità di dipendere pesantemente da come viene sviluppato il back-end di un sito web. Ad esempio, un numero elevato di richieste HTTP dalla tua pagina web può rallentare il tempo di caricamento della pagina, che in ultima analisi danneggia l'esperienza dell'utente. Ciò può far sì che i visitatori abbandonino la pagina più rapidamente se non si caricano abbastanza velocemente (il che aumenta il tuo
"frequenza di rimbalzo").

Le richieste HTTP possono influire su numerose metriche chiave che determinano quanto il pubblico è impegnato con la tua azienda.

Quindi, qual è esattamente una richiesta HTTP? In che modo influisce sull'esperienza utente? E cosa può fare un venditore ridurre richieste HTTP del loro sito web? Analizziamo ognuna di queste domande una per una. Alla fine, avrai una comprensione più chiara del perché questi protocolli di risposta sono importanti e cosa puoi fare per offrire ai tuoi visitatori del sito un'esperienza migliore e più rapida.

Ogni volta che qualcuno visita una pagina sul tuo sito web, ecco cosa succede in genere:

1. Il browser Web della persona (i browser più diffusi includono Chrome, Firefox e Safari) invia una richiesta al tuo server web. Il tuo server ospita la pagina web che stanno tentando di visitare sul tuo sito.
2. Il browser richiede che il tuo server invii un file contenente il contenuto associato a quella pagina. Questo file può contenere testo, immagini o contenuti multimediali presenti nella tua pagina web.
3. Una volta che il browser dell'utente riceve questo file, inizia a visualizzare il tuo sito web sullo schermo del computer o sul dispositivo mobile della persona.
4. Se nella pagina Web sono presenti altri contenuti che il browser non ha ancora ricevuto, il browser invierà un'altra richiesta HTTP.

I passaggi precedenti descrivono una singola richiesta HTTP, da chiedere a rispondere. HTTP sta per "Hypertext Transfer Protocol", che è solo un nome di fantasia per un browser web che invia una richiesta di file e il server che invia (o "trasferisce") quel file al browser.

Perché le richieste HTTP influiscono sull'esperienza utente

Esistono due motivi per cui le richieste HTTP possono influire sull'esperienza utente del tuo sito Web: il numero di file richiesti e il taglia dei file trasferiti.

Altri file = più richieste HTTP

Un browser Web deve effettuare una richiesta HTTP separata per ogni singolo file sul tuo sito web. Se il tuo sito web non ha molti file, non ci vorrà molto tempo per richiedere e scaricare i contenuti sul tuo sito. Ma i migliori siti web fare avere molti file

Più file sul tuo sito web, più richieste HTTP richiederà al browser dell'utente. Più richieste HTTP un browser fa, più tempo impiega il caricamento del tuo sito.

File più grandi = Richieste HTTP più lunghe

La dimensione del file trasferito è anche un fattore in quanto tempo può richiedere una pagina per caricare sullo schermo di un utente. E proprio come i file sul tuo computer hanno varie dimensioni di file – misurate in byte (B), kilobyte (KB), megabyte (MB) e così via – così anche i file sono incorporati nella tua pagina web. Le immagini grandi e ad alta definizione sono il colpevole comune di file di grandi dimensioni.

In altre parole, la definizione più ampia o più alta è il contenuto sul tuo sito web, maggiore è la dimensione del file. Maggiore è la dimensione del file, più tempo ci vorrà per trasferirlo dal tuo server al browser di un utente.

Più a lungo questo file è in transito, più a lungo il browser dell'utente deve attendere prima di rendere questo contenuto sul suo schermo.

In che modo le richieste HTTP influiscono sull'esperienza utente

Un lungo tempo di caricamento può essere un'esperienza dirompente e frustrante per i tuoi utenti. Gli utenti di dispositivi mobili avranno un'esperienza particolarmente negativa, poiché la maggior parte di essi dovrà attendere il download di tutte le risorse di una pagina Web prima che la pagina inizi a comparire anche sul proprio browser mobile.

E la ricerca dimostra che il tempo di caricamento è importante quando si tratta di prestazioni del sito web. Secondo i dati di Pingdom, un monitor delle prestazioni del sito Web, la frequenza di rimbalzo di una pagina può salire dal 9% a un enorme 38% se il tempo di caricamento della pagina aumenta da 2 secondi a 5 secondi. Questo perché molte più persone "rimbalzano" dal tuo sito web durante questo ritardo di tre secondi.

Quindi, qual è il numero magico di richieste HTTP a cui un sito web dovrebbe mirare? La risposta è non "uno." Alcune persone pensano di poter risolvere il problema utilizzando solo un file JavaScript per controllare l'intero sito Web. Ma ricorda: File taglia influisce anche sul tempo di caricamento. Per siti Web complessi, quel file può essere un viaggio incredibilmente lungo dal tuo server al browser del tuo pubblico.

Sebbene non ci sia necessariamente un numero ottimale di file a cui la tua pagina web dovrebbe essere ridotta, il principale marketing manager di HubSpot, Jeffrey Vocell, suggerisce di puntare tra 10-30 file.

Per la maggior parte dei siti Web dalle prestazioni elevate, arrivarci è difficile e richiede in genere risorse di progettazione dedicate. A partire da marzo 2019, il numero medio di richieste di pagine HTTP per caricare una pagina Web su dispositivi mobili o desktop era tra 69 e 75 richieste.

Come fare meno richieste HTTP al tuo sito web

1. Valuta le prestazioni del tuo sito web per trovare il problema di root.

Se stai partendo da zero, senza sapere come sta andando il tuo sito web, prima vorrai un rapporto dettagliato sullo stato di salute generale del tuo sito web. Per ottenere questo rapporto, controlla il Grader del sito web di HubSpot.

Usando Grader sito web, inserisci semplicemente il tuo indirizzo email e l'URL della pagina web che desideri controllare. Riceverai un rapporto personalizzato gratuito che classifica il tuo sito in base a parametri chiave, tra cui la disponibilità alla mobilità, SEO, la dimensione totale del file della tua pagina e, naturalmente, il numero di richieste HTTP ricevute dalla pagina.

Questo selezionatore può aiutarti a diagnosticare il problema preciso che sospetti abbia il tuo sito web. Ad esempio, se hai un basso numero di richieste di pagina, ma una dimensione di pagina elevata, il tuo obiettivo dovrebbe essere quello di ridurre le dimensioni del supporto sul tuo sito web – non necessariamente per ridurre la quantità di richieste HTTP che stai richiedendo ai browser.

2. Controlla quante richieste HTTP il tuo sito fa attualmente.

Una volta che hai un'idea di quanto sia "grande" la tua pagina web e quante richieste di pagine richiedi, utilizza il pannello Rete di Google Chrome per visualizzare in dettaglio questi numeri. Questo strumento semplifica la verifica di tutti gli elementi della pagina, il numero di richieste HTTP effettuate dalla pagina e il caricamento del file più lungo.

Per trovare la lunghezza di una richiesta …

Innanzitutto, questo strumento ti mostra tutti i file che un browser ha dovuto richiedere e trasferire per scaricare la pagina – e mostra anche una timeline di quando è successo. Ad esempio, l'API di Google Chrome può dirti esattamente quando è stata avviata la richiesta HTTP per un'immagine e quando è stato ricevuto il byte finale dell'immagine. È un modo davvero utile per vedere cosa c'è nella tua pagina e cosa richiede molto tempo per essere caricato.

Per vedere il pannello Network per una determinata pagina web, apri la pagina web in Google Chrome. Nel menu principale di Chrome nella parte superiore dello schermo, vai a vista > Sviluppatore > Strumenti di sviluppo.

Il pannello Network si aprirà nel tuo browser. Poiché registra tutte le attività di rete mentre DevTools è aperto, il pannello potrebbe essere vuoto quando lo si apre per la prima volta. Ricarica la pagina per avviare la registrazione o attendi solo che l'attività di rete si verifichi nella tua applicazione.

Ecco una panoramica di cosa significa tutto nel pannello Network:

Per contare le richieste HTTP …

Curioso quante richieste richiede il tuo sito web? Anche il pannello Network lo dirà. Dai uno sguardo alla parte in basso a sinistra dello screenshot qui sopra e vedrai il numero totale di richieste; in questo caso, sono 25 richieste.

Per sapere come leggere il pannello e valutare le prestazioni della tua rete in modo più dettagliato, leggi questa risorsa di Google Chrome.

3. Rimuovere le immagini non necessarie.

A questo punto, dovresti avere un'idea di quali file impiegano più tempo a caricare, inclusi i file di immagine. Il modo più semplice per ridurre il numero di file richiesti? Elimina le immagini non necessarie.

Le immagini sono una risorsa preziosa per la pagina Web, poiché consentono di ottenere una forte esperienza visiva sulle tue pagine web. Tuttavia, se hai immagini sulla tua pagina che non contribuiscono molto, è meglio semplicemente tagliarle del tutto – specialmente quelle che sono veramente grandi.

4. Ridurre le dimensioni del file per le immagini rimanenti.

Per le immagini te fare continua, usa foto di alta qualità con dimensioni di file compresse. Ciò consentirà di ridurre il tempo necessario per effettuare una richiesta HTTP, riducendo in tal modo il tempo di caricamento.

Se sei un utente di HubSpot, non devi preoccuparti troppo del ridimensionamento e della compressione delle immagini: il COS di HubSpot ridimensionerà e comprimerà automaticamente le tue immagini quando le carichi nel gestore file HubSpot. Per ridimensionare ulteriormente un'immagine, dopo averla caricata nel file manager, fai clic su "Clona e modifica", come mostrato di seguito:

Tieni presente che puoi sempre ridurre le dimensioni del file delle tue immagini prima di caricarle sul tuo sito web. Se si dispone di una pagina Web con molte immagini separate, ad esempio, sarà necessario ridurre le dimensioni dei file il più possibile prima di pubblicare la pagina.

Se possibile, consigliamo di ridurre le dimensioni del file di ogni immagine a meno di 100 KB. A seconda dell'immagine, potrebbe essere necessario scendere a compromessi su questo minimo, e va bene. Fai del tuo meglio per impedire che i tuoi singoli file entrino nel territorio dei megabyte ("MB").

Per comprimere le immagini al minimo, utilizzare uno strumento come Squoosh, uno strumento sviluppato da Google per ridurre le dimensioni dei file di immagine a scapito della qualità dell'immagine. Maggiore è il restringimento delle dimensioni del file, minore sarà la qualità dell'immagine ottenuta – utilizzare il misuratore del compressore scorrevole di Squoosh per trovare un equilibrio tra qualità e dimensioni più adatte a te.

Il tuo tempo è prezioso, però, e comprimere le immagini una ad una può essere un compito noioso. Per comprimere più immagini contemporaneamente, prendi in considerazione l'utilizzo di TinyPNG.

5. Impostare il sito Web per caricare i file JavaScript in modo asincrono.

Per impostazione predefinita, molti siti Web caricano contenuti scritti in JavaScript dall'alto verso il basso su una pagina Web. Pertanto, anche se il browser Web di un utente esegue più di una richiesta HTTP alla volta, il contenuto riceve un carico pezzo per pezzo. Questo è anche noto come "blocco del rendering" e può far caricare l'intera pagina web più lentamente perché ogni file attende il suo turno per caricarsi nel browser web dell'utente.

Impostare il tuo sito web per caricare JavaScript "in modo asincrono" può ignorare questa regola, e crea un'esperienza utente migliore.

Il caricamento asincrono consente al contenuto del sito Web di visualizzare contemporaneamente più elementi della pagina, indipendentemente dalla posizione in cui si trovano nella pagina. Su WordPress, ci sono numerosi plugin che possono aiutarti a farlo. HubSpot ti consente inoltre di modificare il luogo in cui un elemento JavaScript noto come "jQuery" esegue il rendering su una pagina Web in modo da non rimanere bloccato in attesa del caricamento. Guarda lo screenshot qui sotto per vedere questa opzione e leggi di più qui.

Per ulteriori informazioni su come rendere il codice JavaScript asincrono, consulta questa presentazione di Steve Souders e questo post del blog di Visual Website Optimizer.

6. Valutare altre parti della pagina che contribuiscono al tempo di caricamento della pagina.

Tagliare e comprimere le immagini sono un ottimo primo passo per ridurre le richieste HTTP e il tempo di caricamento della pagina. Ma cos'altro hai visto nel pannello Rete che aggiunge le richieste? Ad esempio, potresti scoprire che un'integrazione video o Twitter aggiunge un intero secondo o due al tuo tempo di caricamento. Buono a sapersi. Da lì, tu e il tuo team potete decidere se vale la pena mantenere tali beni.

7. Combina i file CSS insieme.

Ogni file CSS che usi per il tuo sito web aggiunge al numero di richieste HTTP richieste dal tuo sito web, aumentando così il tempo di caricamento della tua pagina. Sebbene a volte ciò sia inevitabile, nella maggior parte dei casi è possibile combinare insieme due o più file CSS. (Potrebbe essere necessario ottenere aiuto da uno sviluppatore per questo.)

Cosa significa questo? Ogni volta che identificate più file CSS che sembrano simili, elencati nel codice HTML del tuo sito web, hai la possibilità di combinare questi file in un unico file in modo che il browser dell'utente non debba effettuare più di una richiesta HTTP per produrre questi file. Ecco un esempio di un gruppo di file CSS separati prima di combinarli:

Ora, dai un'occhiata a come puoi combinare tutti questi file in un'unica riga, o file:

Se si utilizza HubSpot, è possibile combinare automaticamente molti file CSS.

Il codice CSS può essere ovunque sul tuo sito o in qualsiasi numero di file, e funziona comunque altrettanto bene. Infatti, spesso l'unica ragione per cui un sito ha più file CSS in primo luogo è perché il progettista del sito ha trovato più facile lavorare con file separati. Per ulteriori informazioni sulla combinazione di file CSS, dai un'occhiata a questa guida alle prestazioni del sito Web front-end.