Ottimizzazione della velocità del sito Web: come farlo nel 2020 # Step-by-Step

Circa un decennio fa, Google annunciò che la velocità del sito avrebbe influenzato il ranking della ricerca web. Sebbene il post non abbia chiarito l’impatto della velocità sulle classifiche, i webmaster che leggono l’annuncio hanno capito che l’ottimizzazione della velocità del sito Web dovrebbe essere in cima ai loro piani di sviluppo.


Inoltre Vantaggi SEO dell’ottimizzazione della velocità, i tempi di caricamento della pagina sono importanti per determinare quanti utenti rimangono sul tuo sito web. HubSpot lo segnala un calo della conversione è correlato all’aumento dei tempi di caricamento della pagina – un ritardo di un secondo nel tempo di caricamento potrebbe comportare una riduzione della conversione del ~ 20-30%!

Guida all'ottimizzazione della velocità del sito Web

Negli ultimi anni, c’è stato un aumento delle dimensioni medie della pagina. In effetti, nel 2018, in media, una dimensione della pagina era superiore a 2 MB! Una parte significativa del caricamento di questa pagina è costituita da immagini, file statici e video.

Per non dire altro, le dimensioni del tuo sito Web e la velocità complessiva del tuo sito sono importanti! Anche con un caricamento della pagina sempre crescente, ci sono cose che puoi fare per migliorare il modo in cui il tuo sito gestisce le cose. Questo post discute tutto.

Ottimizzazione della velocità del sito Web: ciò di cui hai bisogno prima di iniziare

Questo post presuppone che tu abbia già curato due aspetti chiave:

  • Usi un tema ottimizzato che non introduce molto gonfio su WordPress stesso.
  • Sei su un host sufficientemente veloce.

Se si spuntano queste due caselle, è possibile passare alle sezioni seguenti per esplorare un elenco completo di attività che è possibile intraprendere per assicurarsi che i tempi di caricamento del sito Web siano minimi.

Introduzione all’ottimizzazione della velocità del sito Web

Anatomia di una pagina web

anatomia

Il trucco per ottimizzare le tue pagine Web per la velocità è capire cosa succede in una pagina web. Passiamo attraverso i componenti più popolari:

  • Il codice HTML che fornisce struttura e contenuto a una pagina Web – anche con WordPress che gestisce la festa sul tuo sito, tutto ciò che serve è prendere ciò che è nel database – tutto il contenuto – e convertirlo in output HTML statico
  • File statici che aiutano nella progettazione, funzionalità e interattività (CSS, JavaScript)
  • Immagini per sfondi, loghi e contenuti

Per eseguire il rendering di una pagina, il browser richiede per ogni elemento di una pagina Web: la pagina stessa sotto forma di HTML, file statici, immagini, contenuto esterno. Pertanto, il numero di Richieste HTTP svolge anche un ruolo cruciale nell’ottimizzazione della velocità del sito Web.

Scopri dove ti trovi: strumenti di ottimizzazione della velocità del sito Web

Prima di passare a tecniche specifiche che ti aiutano a ottimizzare il tuo sito web, prendiamoci un momento per esaminare gli strumenti che aiutano ad analizzare la velocità delle pagine Web.

Se sei un principiante alla ricerca di uno strumento di test casuale, puoi prendere in considerazione l’utilizzo gli strumenti di Pingdom suite per una rapida valutazione del tuo sito web. Per una soluzione più completa, puoi andare a Page Speed ​​Insights di Google.

Pingdom Speed ​​TestStrumenti Pingdom per Speed ​​Test

Oltre a questi, se stai cercando un’opzione rapida sotto forma di un plug-in del browser, puoi provare YSlow, che verifica i siti Web e fornisce suggerimenti all’interno del browser. Inoltre, il Strumento GTmetrix utilizza i risultati dei test di YSlow per i report.

�� Se vuoi più opzioni per testare la velocità del tuo sito, questo post elenca 5 dei migliori strumenti di controllo della velocità là fuori.

Prima di passare attraverso le tecniche elencate in questo post, assicurati di eseguire il tuo sito Web su uno degli strumenti elencati qui per fungere da punto di riferimento. Non appena si esegue l’ottimizzazione della velocità del sito Web, assicurarsi di tornare allo strumento per verificare eventuali miglioramenti della velocità.

Passaggio 1: ottimizza i file statici

Il primo passo di questa guida si concentra sull’ottimizzazione dei file statici, più comunemente sotto forma di fogli di stile (file CSS) e script (file JS).

(a) Sposta CSS in testa, JS in basso

La prima ottimizzazione da eseguire è assicurarsi che i fogli di stile vadano nella sezione della struttura della pagina, mentre tutti gli script vengono spostati appena sopra il tag di chiusura della pagina. La logica dietro questo è semplice:

  • In genere, i fogli di stile hanno dimensioni inferiori rispetto agli script
  • Una volta caricati i fogli di stile nel tag prima che il browser esegua il rendering del corpo della pagina, tutti gli elementi renderizzati nella pagina avranno uno stile adeguato
  • La funzionalità degli script generalmente entra in gioco una volta caricato il contenuto della pagina, quindi gli script possono generalmente essere posizionati in fondo

Questa pratica garantisce che i visitatori del tuo sito Web non lascino una pagina frustrata mentre aspettano che si carichi.

Per gestire rapidamente la parte degli script, è possibile installare il plug-in Script to Footer per WordPress. Funziona con il pilota automatico e fa bene il lavoro.


Script a piè di pagina Script a piè di pagina

Author (s): Joshua David Nelson

Versione corrente: 0.6.4.1

Ultimo aggiornamento: 15 aprile 2020

scripts-to-footerphp.0.6.4.1.zip


94% di commenti


20.000 + Installa


3.1.0Requires

(b) Imposta minificazione

La minimizzazione è il processo di rimozione di quelle parti di un file che non sono necessarie per la sua esecuzione. Ad esempio, nei fogli di stile o negli script, per l’esecuzione non sono necessari:

  • spazi bianchi per il rientro
  • Commenti
  • funzione lunga e nomi di variabili
  • codice inutilizzato

La minimizzazione aiuta notevolmente riducendo le dimensioni dei file statici. Puoi minimizzare i tuoi file usando un servizio come minify, o installando uno di questi plugin di minificazione in WordPress.

(c) Usa caricamento asincrono

Un browser Web esegue il rendering e le richieste di risorse in sequenza come appaiono in una pagina Web. Questo è definito come caricamento sincrono. Tuttavia, è possibile modificare questa funzionalità predefinita del browser utilizzando l’attributo asincrono caricare risorse non appena sono disponibili. Ad esempio, è possibile caricare uno script in modo asincrono come segue:

Qui è un elenco di plugin che ti aiutano con il caricamento asincrono in WordPress.

(d) Usa la compressione GZIP

La compressione GZip è una tecnica per comprimere le risorse tramite richieste HTTP. Con la compressione GZip, il server invia file compressi di risorse, che il browser decomprime durante il rendering di una pagina Web.

Il tempo e le risorse necessarie per comprimere e decomprimere una risorsa sono compensati dal tempo e dalla larghezza di banda salvati nel trasferimento di un file più piccolo dal server al client. Questa tecnica non solo carica le pagine più velocemente, ma consente anche di risparmiare sui costi del server.

La compressione GZip fa parte di alcuni plugin di cache di WordPress come WP Fastest Cache.

(e) Utilizzare Google CDN per le librerie più diffuse

La tecnica di ottimizzazione finale in questo passaggio è per utilizzare Google o Microsoft CDN durante il recupero di eventuali librerie comuni utilizzate sul tuo sito. Il motivo è semplice: a causa della popolarità di queste CDN, è probabile che un visitatore abbia già una versione cache della risorsa nel proprio browser.

Passaggio 2: ottimizza le immagini

Come discusso in precedenza, la fonte principale di dimensioni crescenti delle pagine Web nel corso degli anni sono le immagini.

Dai anche un’occhiata ai numeri di CodeinWP:

caricamento dell'immagine

Perciò, affrontare le immagini dovrebbe portare ai miglioramenti più significativi nella velocità del tuo sito web, e lo fa.

Le immagini sono essenziali per un sito Web, tuttavia non è consigliabile l’utilizzo di immagini di alta qualità per il Web. È necessario comprimere le immagini in misura tale da ridurne drasticamente le dimensioni, garantendo una qualità visiva equa.

Puoi fare un paio di cose per farlo accadere e avere in mente l’ottimizzazione della velocità del sito Web:

(a) Carica immagini delle giuste dimensioni

Il tuo tema attuale ha probabilmente la dimensione massima dell’immagine che è in grado di visualizzare – dal punto di vista dimensionale. Scopri di cosa si tratta e quindi carica solo immagini che hanno il doppio di dimensioni.

Perché due volte? Ciò consentirà inoltre al tema di visualizzare versioni di immagini di qualità retina.

(b) Utilizzare il tipo corretto di immagine

I due tipi di immagini più comunemente utilizzati sul Web sono JPG e PNG.

Non sono uguali.

  • Le immagini JPG sono pensate per foto e altre immagini complesse con molte informazioni sui colori
  • Le immagini PNG sono perfette per la grafica che ha poche informazioni sul colore, come gli screenshot dell’interfaccia.

Esempio di immagine PNGtemi

(c) Ottimizza le immagini localmente prima del caricamento

Esistono vari strumenti che puoi utilizzare prima di caricare qualsiasi immagine sul tuo sito.

tinypng
ImageOptim

(d) Lazy carica le tue immagini

Un’altra tecnica per ottimizzare le immagini è il caricamento lento, una pratica in cui un’immagine non viene scaricata fino a quando un visitatore non scorre verso il basso per vederla.

demo di lazyloadDimostrazione di caricamento lento su CodeinWP

Ecco una guida completa per il caricamento lento delle immagini sul tuo sito.

(e) Ottieni un plug-in per l’ottimizzazione delle immagini

Ultimo ma non meno importante, dovresti ottenere un plug-in di ottimizzazione delle immagini di qualità per il tuo sito WordPress. A seconda di quale finirai per usare, potresti ottenere gran parte delle tue esigenze di ottimizzazione delle immagini fatte con il pilota automatico.

Ecco qui 6 dei migliori plugin di ottimizzazione delle immagini confrontati.

Se hai bisogno di una breve raccomandazione, dai un’occhiata alla nostra Optimole. Fornisce una compressione delle immagini altamente efficiente, oltre a una CDN nel piano gratuito! Optimole offre anche alcuni risultati stellari rispetto ai suoi principali concorrenti:

Risultati di ottimizzazione PNG

Plugin Dimensione PNG originale Dopo ottimizzazione Ottimizzazione% compressione
Optimole301 KB34 KB88,7%Lossy and Lossless
Imagify301 KB67 KB77,7%lossy
TinyPNG301 KB79.7 KB73,5%lossy
ShortPixel301 KB90.4 KB69.96%lossy
Smush301 KB247 KB17,9%Senza perdita
EWWW301 KB257,4 KB14,6%Senza perdita

Risultati dell’ottimizzazione JPG

Plugin Dimensione JPG originale Dopo ottimizzazione Ottimizzazione% compressione
ShortPixel518 KB169 KB67.36%lossy
TinyPNG518 KB248.6 KB52%lossy
Optimole518 KB274 KB47%Lossy and Lossless
Imagify518 KB338.7 KB34.64%lossy
EWWW518 KB488,9 KB5,7%Senza perdita
Smush518 KB493 KB4,9%Senza perdita


Ottimizzazione dell'immagine e Lazy Load di Optimole Ottimizzazione delle immagini & Lazy Load di Optimole

Author (s): Optimole

Versione corrente: 2.3.1

Ultimo aggiornamento: 21 aprile 2020

optimole-wp.zip


96% di commenti


50.000 + Installa


WP 4.7 + Richiede

Passaggio 3: ottimizza le richieste HTTP

Precedentemente nel post, abbiamo discusso che quando un browser utente inizia a caricare una pagina Web, i trasferimenti effettivi vengono effettuati tramite richieste HTTP individuali. Una singola richiesta recupera ogni risorsa. Quindi, un aumento del numero di tali richieste aumenta i tempi di caricamento della tua pagina web.

richieste del sitoRichieste HTTP di una pagina web

(a) Combina file

La prima attività per ridurre al minimo il carico di richieste HTTP è combinare risorse simili. Quando si minimizzano le risorse, è possibile combinare file simili insieme. Ad esempio, tutti i fogli di stile (file CSS) e tutti i file JavaScript personalizzati possono essere combinati in singoli file. Ciò riduce il numero di richieste che un client deve effettuare per caricare tutte le risorse.

Ancora una volta, questi plugin di minificazione per WordPress può aiutarti a farlo.

(b) Ridurre al minimo le ricerche DNS

Quando viene effettuata una richiesta HTTP a un dominio come www.codeinwp.com, viene eseguita una ricerca DNS (sistema dei nomi di dominio) per trovare l’indirizzo IP del server. Di conseguenza, l’obiettivo dovrebbe essere anche quello di ridurre al minimo il numero di ricerche DNS tra tutte le richieste, al fine di accelerare il caricamento del sito Web.

Ecco un bella guida di Kinsta su come farlo.

(c) Abilita keep-alive

Senza alcuna ottimizzazione, il browser invia una singola richiesta HTTP per ogni risorsa. Questa connessione si chiude al termine del download. Il browser quindi invia una nuova richiesta al server per una nuova risorsa. Keep alive è una tecnica che non termina una richiesta al termine del download di una risorsa.

È possibile abilitare mantenersi in vita attraverso i seguenti modi:

(d) Riduci al minimo i reindirizzamenti

Un reindirizzamento è un’istruzione per portare automaticamente un client da una posizione a un’altra posizione di una risorsa. Ogni reindirizzamento aumenta i tempi di caricamento della tua pagina web e, a meno che non sia assolutamente necessario, dovresti evitare qualsiasi reindirizzamento nel tuo codice.

(e) Utilizzare un CDN

Una rete CDN (content delivery network) è una raccolta di server Web presenti in vaste aree geografiche che forniscono contenuti ai clienti in modo rapido ed efficiente.

A un client che richiede una risorsa verrà fornita la risorsa da un server geograficamente più vicino alla posizione del client. Ciò garantisce che il contenuto richiesto raggiunga il cliente nel più breve tempo possibile!

Abbiamo una risorsa separata che confronta le migliori soluzioni CDN per i siti WordPress, insieme a informazioni su come iniziare.

Passaggio 4: memorizzazione nella cache

Nessuna guida all’ottimizzazione della velocità del sito Web non può esistere senza una sezione sulla memorizzazione nella cache. Alcune tecniche di cui abbiamo discusso in precedenza, come la compressione GZip e la minificaiton, fanno oggi parte di molte soluzioni di memorizzazione nella cache.

La memorizzazione nella cache si riferisce a un fenomeno di archiviazione di una risorsa in una memoria temporanea per recuperarla rapidamente quando richiesto. Esistono varie forme di memorizzazione nella cache:

  • Caching delle pagine: una versione HTML statica di una pagina memorizzata sul server
  • Memorizzazione nella cache del database: i risultati delle query di database comuni (come i primi 10 post sul tuo sito) memorizzati sul server
  • Memorizzazione nella cache del browser: memorizzazione di parti della pagina nel browser

In questo post abbiamo confrontato i plugin di cache di WordPress più popolari. TL; DR: vai a dare un’occhiata WP Rocket se stai cercando una soluzione completa. In alternativa, se preferisci qualcosa di gratuito, ecco una guida su come configurare W3 Total Cache.

Passaggio 5: ottimizza per dispositivi mobili

Nelle parti precedenti di questo articolo, abbiamo discusso delle tecniche di ottimizzazione che sono rilevanti sia per desktop che per dispositivi mobili. Tuttavia, il consumo di contenuti sui dispositivi mobili sta aumentando e ci sono nuove sfide che uno schermo più piccolo comporta. Questa sezione, quindi, discute i metodi di ottimizzazione della velocità del sito Web per i dispositivi mobili.

L’ottimizzazione per dispositivi mobili si riferisce alla pratica di assicurare che i visitatori mobili della tua pagina web abbiano le stesse funzionalità ed efficienza delle loro controparti desktop. L’elenco seguente contiene alcuni fattori di igiene per la cura del contenuto Web per i dispositivi mobili:

  • Utilizza un web design reattivo per garantire a dispositivi diversi di ottenere versioni diverse di una pagina Web
  • Evita l’uso di flash e pop-up, poiché i dispositivi mobili potrebbero non supportarlo
  • Non posizionare interazioni come collegamenti troppo vicini tra loro

Oltre a questi fattori, AMP (Accelerated Mobile Pages) è un progetto che mira a creare contenuti veloci e coerenti su tutti i dispositivi.

Ecco una guida per iniziare a usare AMP in WordPress.


AMP

Author (s): Collaboratori del progetto AMP


74% di commenti


500.000 + Installa


WP 4.9 + Richiede

Ulteriori informazioni

amp.1.5.3.zip

Versione corrente: 1.5.3

Ultimo aggiornamento: 15 aprile 2020


74% di commenti


500.000 + Installa


WP 4.9 + Richiede

Pagina del plugin di WordPress.org


AMP

Conclusione

Spero che questa guida ti abbia dato alcuni consigli su cosa dovresti fare per migliorare il livello generale di ottimizzazione della velocità del tuo sito.

Solo per ricapitolare; abbiamo prima esaminato l’anatomia di una pagina Web per affrontare aree specifiche da migliorare. Quindi, siamo passati a passaggi specifici per l’ottimizzazione:

  • Il passaggio 1 ha riguardato l’ottimizzazione dei file statici sotto forma di fogli di stile e script
  • Step 2 ha affrontato le immagini e la loro ottimizzazione
  • Il passaggio 3 riguardava le tecniche per ottimizzare le richieste HTTP
  • Il passaggio 4 ha discusso di alcune popolari tecniche di memorizzazione nella cache
  • Il passaggio 5 ha riguardato l’ottimizzazione per i dispositivi mobili

C’è qualcosa con cui stai lottando quando si tratta di ottimizzare la velocità del sito Web? Fatecelo sapere nei commenti qui sotto.

Non dimenticare di partecipare al nostro corso intensivo per accelerare il tuo sito WordPress. Con alcune semplici correzioni, puoi ridurre i tempi di caricamento anche del 50-80%:

Layout, presentazione e modifica di Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map