Anche un ritardo di un secondo può ridurre drasticamente le visualizzazioni di pagina, la soddisfazione del cliente e il calo delle conversioni.

La velocità del tuo sito influenza anche le tue classifiche di ricerca organiche.

Foto de Fondo creado por ijeab – www.freepik.es

Qual è il fattore più importante che contribuisce alla velocità della tua pagina?

Dimensione.

Il browser impiega del tempo per scaricare il codice che costituisce la tua pagina. Deve scaricare il tuo HTML, i tuoi fogli di stile, i tuoi script e le tue immagini. Il download di tutti questi dati può richiedere del tempo.

Poiché gli utenti Web si aspettano progetti di siti più coinvolgenti, la dimensione dei file di risorse di un sito continuerà a crescere. Ogni nuova funzionalità richiede un nuovo script o foglio di stile che appesantisca il tuo sito solo un po ‘di più.

Come ti assicuri che il tuo sito sia aggiornato?

Ci sono alcune grandi risorse per analizzare questo.

PageSpeed ​​Insights di Google, oppure GTMetrix sono tra i più popolari. Entrambi i servizi analizzeranno il tuo sito e ti diranno dove ti stai nascondendo.

Un piccolo avvertimento: i risultati possono essere un po ‘scoraggianti a volte, ma la maggior parte delle correzioni sono relativamente veloci e facili. Potresti non correggere tutto ciò che il servizio di velocità consiglia, ma dovresti risolvere abbastanza per rendere l’esperienza del sito migliore per i tuoi visitatori.

Impariamo come accelerare le cose.

Mentre alcuni moderni sistemi di gestione dei contenuti come HubSpot implementano immediatamente opzioni di miglioramento della velocità, i sistemi più comuni, come WordPress e Joomla, richiedono un po ‘di lavoro manuale per essere aggiornati.

Ora diamo un’occhiata ad alcune soluzioni di velocità essenziali che ogni webmaster dovrebbe considerare.

Come ridurre il tempo di caricamento della pagina?

• Ridimensiona le tue immagini.
• Cache il browser per l’archiviazione dei dati.
• Ridurre il tempo di caricamento CSS.
• Mantieni gli script in basso.
• Aggiungi pagine asincrone.
• Riduci al minimo i reindirizzamenti.

1. Ridimensiona le tue immagini.

Le immagini sono uno dei mali di larghezza di banda più comuni sul web. Il primo modo per ottimizzare le immagini è ridimensionarle in modo appropriato, in modo da non influire troppo sul tempo di caricamento della pagina.

Molti webmaster usano immagini enormi e poi le ridimensionano con CSS. Quello che non capiscono è che il tuo browser li carica ancora alla dimensione intera dell’immagine. Ad esempio, se si dispone di un’immagine di 1000 x 1000 pixel, ma è stata ridotta a 100 x 100 pixel, il browser deve caricare dieci volte più del necessario.

Dai un’occhiata alla differenza di dimensioni quando abbiamo ridimensionato una delle nostre immagini:

Quanta dimensione del file è influenzata dal ridimensionamento Solo cambiando le dimensioni della mia immagine, da 598 x 398 a 600 x 232, la dimensione del file è diminuita immensamente. Se ottimizzi le tue immagini prima di caricarle, non ti dimenticherai di quando le metterai sulla tua pagina.

A volte, tuttavia, il ridimensionamento delle immagini renderà le tue foto sfocate. La chiarezza può essere persa e l’immagine diventa distorta. Se ciò accade di solito, vai con la seconda opzione: la compressione.

La compressione delle immagini ridurrà drasticamente le dimensioni dell’immagine senza perdere la qualità. Esistono diversi strumenti online gratuiti per la compressione delle immagini, come tinypng.com, che possono ridurre le dimensioni delle immagini. Puoi vedere riduzioni delle dimensioni ovunque dal 25% all’80%.

Ad esempio, ho preso quella prima immagine, con 133 KB, e l’ho compressa usando un’app di siti Web gratuita chiamata Squoosh. Quando l’immagine è stata completata, era più piccola dell’87% e non ha perso la sua qualità originale.

Un ottimo plugin per ottimizzare le immagini è WP Smush!

2. Memorizzare nella cache il browser per l’archiviazione dei dati.

Perché i visitatori scaricano le stesse cose ogni volta che caricano una pagina? L’attivazione della memorizzazione nella cache del browser ti consente di archiviare temporaneamente alcuni dati sul computer di un visitatore, in modo che non debbano attendere che vengano caricati ogni volta che visitano la tua pagina.

La durata della memorizzazione dei dati dipende dalla configurazione del browser e dalle impostazioni della cache sul lato server. Per impostare la memorizzazione nella cache del browser sul server, controlla le risorse seguenti o contatta la società di hosting:

Memorizzazione nella cache di Apache
Caching IIS
Memorizzazione nella cache di Nginx

3. Ridurre il tempo di caricamento CSS.

Il tuo CSS si carica prima che le persone vedano il tuo sito. Più tempo impiegano a scaricare il tuo CSS, più attendono. Un CSS ottimizzato significa che i tuoi file verranno scaricati più velocemente, offrendo ai tuoi visitatori un accesso più rapido alle tue pagine.

Inizia chiedendoti “Uso tutto il mio CSS?” In caso contrario, eliminare il codice superfluo nei file. Ogni piccolo spreco di dati può sommarsi fino a quando la velocità del tuo sito web non spaventa i tuoi visitatori.

Successivamente, è necessario ridurre al minimo i file CSS. Gli spazi extra nei fogli di stile aumentano le dimensioni del file. La minimizzazione CSS rimuove quegli spazi extra dal tuo codice per assicurarti che il tuo file abbia le dimensioni più piccole.

Verifica se il tuo CMS minimizza già il tuo CSS o se esiste un’opzione per esso.

Se il tuo CMS non ha un’opzione CSS minimizza, puoi usare un servizio online gratuito come CSS Minifier. Basta incollare il tuo CSS e premere “Comprimi” per vedere il tuo nuovo foglio di stile minimizzato.

Ridurre al minimo i file delle risorse è un ottimo modo per eliminare alcune dimensioni dai file. Fidati di me: quei piccoli spazi si sommano rapidamente.

Un plugin utile che consiglio è WP Fastest cache che consente di minimizzare automaticamente il css.

4. Conserva gli script

I file Javascript possono essere caricati dopo il resto della pagina, ma se li metti tutti prima dei tuoi contenuti – come fanno molte aziende – verranno caricati prima dei tuoi contenuti.

Ciò significa che i tuoi visitatori devono attendere il caricamento dei file Javascript prima di vedere la tua pagina. La soluzione più semplice è posizionare i file Javascript esterni nella parte inferiore della pagina, appena prima della chiusura del tag body. Ora più del tuo sito può essere caricato prima dei tuoi script.

Un altro metodo che consente un controllo ancora maggiore consiste nell’utilizzare gli attributi di differimento o asincrono quando si posizionano file .js esterni sul sito. Sia il rinvio che l’asincrono sono molto utili, ma assicurati di capire la differenza prima di usarli.

I tag asincroni caricano gli script mentre il resto della pagina viene caricato, ma gli script possono essere caricati in modo anomalo. Fondamentalmente, i file più leggeri vengono caricati per primi. Questo potrebbe andare bene per alcuni script, ma può essere disastroso per altri.

Ad esempio, supponiamo che una delle tue pagine abbia un video above the fold, un testo sotto e un paio di immagini in fondo. Se esegui tag asincroni su questa pagina, il testo verrà caricato per primo, quindi le immagini e il video per ultimo.

Il file più grande – il file video – è anche quello con cui gli utenti dovrebbero interagire per primi. Quando si carica per ultimo, non ha lo stesso impatto. Quindi usa i tag asincroni se la tua pagina ha molti degli stessi elementi che non richiedono molto tempo per essere caricati, come il testo o una sequenza di immagini.

L’attributo defer carica gli script dopo che il contenuto è stato caricato. Esegue anche gli script in ordine. Per illustrare, pensa alla tua homepage. Tutti gli elementi, compresi i campi immagine, campi di testo e layout, appariranno in ordine, con il resto che verrà caricato dopo.

Assicurati solo che i tuoi script vengano eseguiti senza interrompere il tuo sito. Tutto quello che devi fare è aggiungere una semplice parola nei tag <script>. Ad esempio, puoi prendere il tuo script originale:

<script type = “text / javascript” src = “/ path / nomefile.js”> </script>

E aggiungi il piccolo codice per assicurarti che venga caricato quando vuoi:

<script type = “text / javascript” src = “/ path / filename.js” defer> </script>

<script type = “text / javascript” src = “/ path / nomefile.js” asincrono> </script>

L’importanza dei tuoi script determinerà se ottengono un attributo e quale attributo aggiungi. Gli script più essenziali dovrebbero probabilmente avere l’attributo asincrono in modo che possano caricarsi rapidamente senza trattenere il resto del contenuto. Quelli non essenziali, tuttavia, dovrebbero attendere fino alla fine per garantire ai visitatori di vedere la tua pagina più velocemente.

Assicurati sempre di testare ogni script per assicurarti che l’attributo non rompa il tuo sito.

5. Aggiungi pagine asincrone.

La maggior parte delle pagine Web scarica contenuti a poco a poco da fonti diverse. Ad esempio, il corpo di una pagina Web viene caricato dal browser. La testa, tuttavia, è resa da fonti esterne, come un foglio di stile e uno script usati per caricare testo e immagini.

Il browser che carica la pagina dall’inizio alla fine, testa a corpo, richiede un po ‘di tempo, ma è il modo in cui vengono visualizzate molte pagine, con questo caricamento sincrono. Se una parte della pagina necessita di una determinata funzione da caricare, ma quel componente sta già caricando un’altra parte della pagina, quel caricamento iniziale deve terminare prima di iniziare a lavorare sull’attività successiva.

Nel frattempo, il visitatore sta aspettando da tempo che appaia una pagina web. Sul back-end, viene sfruttato gran parte del processore di un computer che sembra che tutto si fermi.

Al contrario, il caricamento asincrono riconosce gli script che possono essere caricati contemporaneamente, sovrascrivendo le funzionalità sincrone. Quando alcune pagine vengono caricate contemporaneamente, eliminando quella catena di comandi di funzione discussi in precedenza, altri aspetti della pagina, come la testa della pagina, possono essere caricati in tandem.

6. Rimuovere i plug-in inutili

I plugin sono fantastici per estendere le funzionalità di WordPress. Poiché i plug-in sono così facili da installare, la maggior parte dei blogger si lascia facilmente trasportare e installa dozzine di plug-in sui loro siti Web per aggiungere più funzioni.

Quello che probabilmente non sai è che ogni plug-in che installi aggiunge più peso al tuo sito Web, il che si traduce in un maggiore utilizzo delle risorse del server. Sbarazzarsi di alcuni dei tuoi plugin non essenziali è il primo passo che dovresti fare per velocizzare il tuo sito web.

7. Ridurre al minimo i reindirizzamenti.

Quanti reindirizzamenti si trovano sul tuo sito Web? Se di recente hai effettuato una migrazione del sito Web o acquisito sottodomini, è probabile che tu abbia una richiesta HTTP o due. Questi reindirizzamenti richiedono il caricamento delle pagine.

Reindirizzamenti, come “Errore: 404 non trovato”, vengono visualizzati quando gli utenti digitano un indirizzo Web errato o vengono indirizzati a una pagina non funzionante su un sito Web. Quando una pagina viene reindirizzata, un’altra pagina prende il suo posto o una pagina vuota con il messaggio di errore sostituisce lo schermo.

I visitatori dovrebbero sedere attraverso la schermata HTTP mentre vengono reindirizzati, aumentando il tempo impiegato per caricare la pagina. Supponiamo che la tua pagina “Informazioni” sia stata spostata in un sottodominio diverso.

Quando i visitatori digitano il sito web, diciamo mywebsite.com/about, dovrebbero essere portati immediatamente a quella pagina. Invece, mywebsite.com/about conduce a una pagina HTTP, quindi porta un visitatore a mywebsite.com> mywebsite.com/aboutus. Questa è una pagina aggiuntiva che gli utenti devono attraversare solo per raggiungere la destinazione prevista.

Invece di ospitare più reindirizzamenti, rimuovili. In questo post, imparerai come trovare tutte le pagine di reindirizzamento, le alternative e, soprattutto, come rimuoverle.

Poiché gli utenti online richiedono un’esperienza online più ricca, le dimensioni delle nostre pagine continueranno a crescere. Ci saranno Javascript più appariscenti, più trucchi CSS e più analisi di terze parti per appesantire i nostri siti Web.

Un po ‘di attenzione farà molta strada: ricorda, basta un secondo di ritardo per perdere un vantaggio!

Se volete invece un All-in-One davvero completa fate affidamento a WPMU DEV che include davvero tutto, ma ha un prezzo!