Come smettere di caricare file non necessari e ridurre le richieste HTTP del sito Web: suggerimenti per l'ottimizzazione di WordPress

Su Crunchify, abbiamo pubblicato tutorial sull'ottimizzazione della velocità multipli a cui puoi fare riferimento in qualsiasi momento.

Usiamo MaxCDN come nostro fornitore di contenuti. Sono passati quasi 4 anni e finora funziona troppo bene. Genesis WordPress Framework e MaxCDN sono la migliore combinazione. Per impostazione predefinita, Genesis Framework include molte ottimizzazioni, schema di markup di Google, struttura ottimizzata per dispositivi mobili e molto altro.

La scorsa settimana stavo guardando il mio account MaxCDN e improvvisamente ho notato le migliori risorse di download. Come puoi vedere nell'immagine sopra, top 9 out of 10 resource files stati scaricati più di ~ 5 millions di volte nell'ultima settimana.

Sono rimasto sorpreso e ho pensato che avrei dovuto davvero aver bisogno di quelle risorse? Devo caricare quei file separatamente? Come eliminare quei file se non richiesti, ad eccezione del file style.css , che è assolutamente necessario per il caricamento del sito.

Iniziamo con come mi sono liberato di tutti quei 9 file con semplici trucchi

Passo 1

list all of those 9 files . La seconda colonna mostra il numero di volte in cui è stato scaricato.

Passo 2

Raggruppiamo insieme i file del plug-in Crayon Syntax Highlighter .

Ci sono 3 file:

neon.css , crayon.min.css e crayon.min.js . Ho scritto un tutorial separato completo con un totale di 7 passaggi dettagliati per eliminare quei file. Per favore, esaminalo e fammi sapere se vedi qualche problema.

Passaggio 3

Ora vai su wp-embed-min.js . Visita il tutorial Come disabilitare lo script di incorporamento automatico per WordPress 4.4+. Interromperà il caricamento del file di incorporamento nel front-end.

Passaggio 4

Esaminiamo 3 more .png :

bg-pattern.png

Stavo caricando questa immagine sullo sfondo dell'intestazione e del piè di pagina. L'ho eliminato usando invece il colore #333 .

crunchify-sprite.png

Stavo caricando questa immagine sprite per mostrare i pulsanti social follow nella barra laterale. L'ho sostituito con fontawesome .

h3.png

Stavo caricando questo per mostrare il segno di spunta per i post H3 su alcune posizioni. L'ho sostituito con fontawesome . Di seguito è riportato un equivalente fontawesome.

Passaggio 5

Ora ci rimangono solo 2 file. crunchify-logo.png e bg.png , che ho pensato di mantenerlo. Quindi, invece di chiamare come immagine, ho aggiunto l'equivalente dell'immagine base64 per quei file.

Prima:

Dopo:

Ho convertito entrambe le immagini in immagini base64. Il vantaggio che otterremo, non dover aprire un'altra connessione e fare una richiesta HTTP al server per l'immagine.

Meno richieste = Miglior tempo di caricamento della pagina

Ci sono alcuni vantaggi nell'usare SVG (Scalable Vector Graphic) image poiché le immagini si ridimensionano a qualsiasi dimensione senza perdere la chiarezza (tranne molto piccola) che sembra eccezionale sui display retina.

Questi Data URIs non sono limitati a .png o immagini ma per qualsiasi risorsa. Ecco un semplice strumento di conversione da .png a .svg che ho usato online.

Sommario

Questo tutorial fa parte della sezione Come velocizzare WordPress e aumentare le prestazioni. Qui troverai tutti i trucchi e i suggerimenti per l'ottimizzazione di WordPress.

In questo modo, ho eliminato tutte le 9 risorse indesiderate su 10. Il che significa che la mia pagina si carica molto velocemente poiché ci saranno 9 richieste in meno su ogni pagina

Fammi sapere se hai altri suggerimenti che miglioreranno la velocità della pagina del sito. In Crunchify, la velocità è il criterio principale ed è per questo che utilizziamo molto meno plugin. Tutte le pagine vengono caricate within half a second .