Non è un segreto: gli utenti web di oggi hanno bisogno di velocità. Con le connessioni Internet e cellulari sempre più veloci, gli utenti si aspettano che i siti si carichino rapidamente ed è compito dello sviluppatore fare il possibile per servire rapidamente quelle pagine. Quindi, come fai a rendere il tuo sito velocissimo? Ecco cosa dovresti fare in particolare quando crei con WordPress.

La prima cosa è la prima: testa la velocità del tuo sito

Le prestazioni possono essere suddivise in due categorie principali: front-end e back-end. Considero back-end qualsiasi cosa relativa al server e al modo in cui i dati vengono popolati su una pagina (il tuo codice PHP nel tuo tema è il "back-end"). Il front-end è costituito da tutte le tue risorse (CSS, JavaScript, immagini, ecc.) e dal markup. Tutto ciò che un browser web legge e interpreta è il "front-end". Il motivo per cui sto facendo questa distinzione in termini di prestazioni è perché è bene sapere cosa stai ottimizzando e, cosa ancora più importante, dove devi ottimizzare di più.

Per testare la velocità del tuo sito, ti consiglio di utilizzare una combinazione di WebPagetest e Google PageSpeed ​​Insights. WebPagetest ci dà una buona idea del tempo effettivo (in secondi) impiegato da un sito per caricarsi, fornendoti alcune buone metriche per sapere se è il back-end o il front-end che causa un caricamento lento di un sito. PageSpeed ​​Insights è la soluzione migliore per vedere come viene visualizzato il tuo sito dal browser e cosa puoi migliorare sul front-end.

Tieni presente che questo articolo è incentrato su siti WordPress totalmente personalizzati. Se stai eseguendo test di velocità su un sito utilizzando un tema ingombrante e 19 plug-in di terze parti (i plug-in possono rallentare sia il front-end che il back-end), inizia arrivando a una lavagna vuota e attivando lentamente i plug-in uno per uno per trovarli che stanno rallentando le cose.

Prestazioni front-end

Come migliorare l'accessibilità del tuo tema WordPress in questo momento

Non passa giorno che non usi il web, nemmeno quando sono in vacanza. Ho intenzione di fare un'ipotesi selvaggia che puoi riguardare. Sempre di più Internet gioca un ruolo...

La regola d'oro delle prestazioni, secondo Steve Souders, chief performance officer di Fastly, è che l'80-90% del tempo di caricamento totale di una pagina è costituito dal front-end (la regola 80/20). Il 10-20% del back-end è di fondamentale importanza, ma anche se stai utilizzando l'host più veloce che puoi acquistare, il tuo sito non sarà ancora all'altezza del suo potenziale senza ottimizzare il front-end per assicurarsi che gli utenti lo percepiscano si sta caricando velocemente. La percezione è importante quando si tratta di ottimizzazione front-end. A un utente non importerà quanto tempo, in termini di secondi, impiega un sito per caricarsi. Tutto ciò a cui importa davvero è la velocità con cui possono interagire con esso e vedere il contenuto o eseguire azioni senza indugio. Per non dire che non dovresti preoccuparti del tempo di caricamento effettivo (dovresti), ma seguendo le tecniche seguenti, puoi assicurarti che il tuo sito sia in uno stato utilizzabile il più rapidamente possibile, seguito rapidamente da un caricamento completo della pagina di tutti i beni.

CSS

La cosa più importante da fare con il tuo CSS prima che venga consegnato al browser è semplicemente comprimerlo e rimuovere i selettori inutilizzati. Ottenere un buon flusso di lavoro di sviluppo durante lo sviluppo di temi rende questo processo banale, soprattutto se stai utilizzando un preprocessore come Sass. Uso Grunt, che è un task runner JavaScript che esegue comandi per te durante lo sviluppo. C'è un plugin per Grunt chiamato grunt-contrib-sass che compila semplicemente tutti i tuoi file Sass in uno (se stai usando i parziali Sass, cioè), lo minimizza e lo comprime. Aggiungi il plug-in grunt-contrib-watch e eseguirà l'attività Sass ogni volta che salvi un file. Facile! Non perdere il sonno se non stai utilizzando la metodologia CSS più recente e migliore, ma prova a seguire una sorta di standard durante la creazione di CSS per evitare duplicazioni e file di dimensioni enormi.

Una volta che il foglio di stile è pronto per l'uso, il modo più semplice (e di gran lunga lo standard) per caricarlo è semplicemente fare riferimento ad esso nel <head> ;. In questo modo, il browser lo carica e lo analizza prima che venga caricato il resto del DOM. Tuttavia, esiste una nuova tecnica in cui gli stili "critici" sono inseriti in <head> e quindi l'intero foglio di stile viene caricato in modo asincrono utilizzando JavaScript. Uso davvero questa tecnica solo quando sto assolutamente cercando di caricare (o percepire il caricamento) un sito in meno di un secondo, ma è una cosa fantastica da guardare e vedere se può adattarsi al tuo flusso di lavoro. Il Filament Group ha un articolo molto ampio sull'utilizzo di questa tecnica.

JavaScript

Capire come WordPress utilizza MySQL

In linea di massima, WordPress può essere diviso in due segmenti: la logica e i modelli che generano l'aspetto grafico di un sito WordPress il database MySQL che memorizza tutti i contenuti e i poteri i...

La regola d'oro per ottimizzare JavaScript è semplice: servire il minor numero possibile di file JavaScript, minimizzare e concatenare. I plug-in di WordPress di terze parti possono essere dannosi in quanto gonfiano il documento con file JavaScript di blocco non minimizzati, quindi è importante prestare attenzione quando si scelgono i plug-in. Idealmente, dovresti concatenare TUTTI i file JavaScript in uno e poi ridurli al minimo. Per le volte in cui non è possibile concatenare tutti i tuoi file in uno, ci sono attributi HTML chiamati "async" e "defer" che possono essere utilizzati per caricare file JavaScript in modo asincrono o una volta caricato il resto della pagina.

Il luogo più comune al giorno d'oggi per fare riferimento a JavaScript è nella parte inferiore del documento, subito prima del tag di chiusura. Tuttavia, esistono tecniche più avanzate per caricare JavaScript. Ancora una volta, il Filament Group ha svolto tantissime ricerche su questo e ha diversi progetti open source che puoi utilizzare se stai mirando a un tempo di caricamento della pagina super veloce (a proposito, non sono in alcun modo affiliato con Filament Group; Penso solo che le loro cose siano fantastiche). L'approccio migliore sembra essere quello di caricare gli script in modo dinamico inserendo una piccola funzione in <head> ; che quindi aggiunge i tag di script senza bloccare il resto della pagina. Per ulteriori informazioni, controlla lo script loadJS.

immagini

Le immagini sono spesso i file più grandi su una pagina, responsabili del maggiore ritardo nel tempo di caricamento della pagina. La cosa buona delle immagini è che, a differenza di CSS e JavaScript, la maggior parte dei browser le carica in modo asincrono. Questo almeno aiuta con le prestazioni percepite di una pagina, ma vuoi comunque assicurarti che A) stai offrendo il minor numero di immagini possibile e B) quelle immagini siano compresse il più possibile.

Gli strumenti di compressione sono necessari per spremere quanto più eccesso possibile sulle immagini. ImageOptim è un'ottima app per Mac che lo fa bene, insieme a OptiPNG e jpegtran da utilizzare con task runner come Grunt.

Caratteri

I caratteri Web sono super comuni in questi giorni. Uso Google Web Fonts su quasi tutti i progetti, ma fino a poco tempo fa non mi rendevo conto del colpo di prestazioni che stavo subendo semplicemente facendo riferimento a loro nella <head> . Il successo in termini di prestazioni è piccolo, ma questo è un articolo su come rendere i siti velocissimi, quindi tutto conta! Per ottenere le migliori prestazioni utilizzando i caratteri Web, consiglio di utilizzare il caricatore di caratteri Web, sviluppato in collaborazione da Google e Typekit. È uno script open source che gestisce sia il caricamento dei tuoi font da terze parti come Google Web Fonts che consente loro di caricarsi in modo asincrono (ti sei già stancato di quella parola?).

Come previsto, sono necessarie alcune configurazioni per integrare Web Font Loader nel tuo progetto, quindi controlla il progetto su GitHub per i dettagli su come configurarlo.