Lista di controllo per l'ottimizzazione di WordPress

L'ottimizzazione di WordPress è l'arte di far funzionare il tuo sito web il più velocemente possibile, migliorando la tua esperienza utente, riducendo i costi del server e ha vantaggi SEO.

Molti studi mostrano che i visitatori non desiderano attendere il caricamento di un sito Web e sono inclini a saltare via dal tuo sito Web se impiega troppo tempo per caricarsi.

Un sito Web a caricamento rapido è particolarmente importante per te se hai un negozio online e desideri migliorare i tuoi tassi di conversione.

I test su Amazon hanno rivelato risultati simili: ogni 100 ms di aumento del tempo di caricamento di Amazon.com ha ridotto le vendite dell'1% (Kohavi e Longbotham 2007)

Fonte: https://www.websiteoptimization.com/speed/tweak/psychology-web-performance/

Anche la velocità di caricamento del tuo sito Web è estremamente importante per il tuo posizionamento su Google, rendendo l'ottimizzazione del sito Web una parte della tua strategia SEO.

Ma il mio sito web si carica molto velocemente!

Certo che lo fa. Almeno per te. Ma hai provato a visitare il tuo sito web per la prima volta dopo tanto tempo?

Quando navighi sul tuo sito web, la maggior parte di esso verrà memorizzata nella cache del tuo browser. Se vuoi provare per la prima volta, svuota la cache o usa un browser completamente diverso.

Ci sono molte cose da fare che possono migliorare la velocità del tuo sito Web WordPress, iniziamo.

Script minimizzanti

I siti Web WordPress sono una combinazione di HTML, CSS, JavaScript e immagini. Il codice HTML viene prima caricato e poi contiene informazioni su altri file di fogli di stile CSS, file JavaScript e immagini.

Ogni file viene caricato a turno. Un browser normalmente ha un limite di 2-4 "pipe", il che significa che il browser caricherà solo fino a 2-4 file contemporaneamente dal server su cui sono ospitati i file.

Se esamini il codice HTML del tuo sito Web WordPress, noterai molti file .css e .js diversi. Ognuno di questi proviene solitamente da plugin diversi, ognuno dei quali aggiunge file .js o .css al mix.

In alcuni casi il plugin inietterà anche stili JavaScript o CSS direttamente nell'HTML La maggior parte degli sviluppatori di plugin di WordPress o degli autori di temi sono abbastanza intelligenti da non farlo.

Questo è solo un esempio di un normale sito Web WordPress. Il codice HTML ha collegamenti a molti altri file. In questo semplice esempio vengono caricati 4 file JavaScript, uno per uno.

<tipo di script=”text/javascript” src=”https://domain.com/wp-includes/js/jquery/jquery.js?ver=1.7.2″></script>

<tipo di script=”text/javascript” src=”https://domain.com/wp-content/themes/Trim/js/socialite.min.js?ver=3.4.2″></script>

<tipo di script=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/functions.js?ver=3.4.2″></script>

<tipo di script=”text/javascript” src=”https://domain.com/wp-content/plugins/wp-greet-box/js/js-mode.js?ver=3.4.2″></script >

WordPress ha funzioni interne che consentono agli autori di plugin e temi di incorporare i file JavaScript e CSS necessari.

wp_enqueue_script() e wp_enqueue_style(). I nomi delle funzioni danno un indizio solido su ciò che fanno. Utilizzando uno di questi per incorporare i file necessari, gli autori di plugin e temi mettono in coda i loro file insieme a tutti gli altri plugin e persino a WordPress stesso.

È anche possibile istruire le funzioni di eventuali dipendenze di altre librerie, di solito un file di inclusione JavaScript dipende da jQuery da caricare per primo.

Di solito trovo e installo un plug-in di minimizzazione, lo attivo e poi vedo se qualcosa si rompe sul sito. Da lì vado a individuare cosa esattamente non funziona e se ho solo bisogno di modificare un paio di impostazioni per risolverlo.

I plug-in minimizzanti tendono ad avere impostazioni di esclusione per file specifici che non vengono riprodotti correttamente quando vengono caricati con altri o per modificare la posizione in cui vengono caricati i file, nell'intestazione o nel piè di pagina del documento.

$template_url=get_bloginfo('template_url');
wp_enqueue_script('cycle', $template_url."/js/jQuery.cycle.all.js", array('jquery'));
wp_enqueue_script('socialite', $template_url."/js/socialite.min.js", array('jquery'));
wp_enqueue_script('lazyload', $template_url."/js/jquery.lazyload.min.js", array('jquery'));

Nota: nell'esempio di codice memorizzo l'URL del tema in una variabile e quindi lo analizzo nella funzione wp_enqueue_script. Ciò riduce il numero di chiamate PHP e/o database necessarie, aumentando la velocità.

Nella ricerca di velocità di caricamento estreme, potrei scegliere di codificare il percorso dell'URL assoluto, ma ciò limiterebbe il tema a un solo dominio e renderebbe più difficile riutilizzare il codice su un altro sito.

Dopo aver installato un plug-in di minimizzazione, i fogli di stile JavaScript e CSS sono ora uniti in un minor numero di chiamate HTTP.

<script type="text/javascript" src="https://cleverplugins.com/wp-content/plugins/bwp-minify/min/?f=wp-includes/js/jquery/jquery.js,wp-content/themes/Trim/js/socialite.min.js,wp-content/plugins/wp-greet-box/js/functions.js,wp-content/plugins/wp-greet-box/js/js-mode.js"></script>

Questo combina i 4 file in un unico "file"/richiesta per il tuo browser.

Mi sono imbattuto in siti Web basati su WordPress che avevano 22 file .css caricati e 15 .js. Tutto in prima pagina. Il cambiamento di velocità può essere sorprendente se riesci a ridurre la quantità di file esterni.

Sebbene la minimizzazione degli script tenda ad avere enormi miglioramenti della velocità, è anche una delle tecniche che uso che tendono a causare la maggior parte dei problemi nell'impostazione.

Ottimizza header.php

L'header.php nel tuo tema viene chiamato su ogni pagina del tuo sito Web WordPress. Questo file di solito ha molti elementi che possono essere ottimizzati.

Un classico esempio è bloginfo('template_directory') che di solito viene chiamato più volte nell'intestazione per restituire l'URL del tema per includere file esterni.

Un metodo più efficiente consiste nell'effettuare un'unica richiesta per l'URL e quindi archiviarlo come variabile.

$template_directory = get_bloginfo('template_directory'); 

L'URL della directory del tema è ora memorizzato nella variabile $ directory_template.

Altri esempi su come migliorare l'efficienza di header.php possono essere letti nel blogpost WordPress header.php Suggerimenti per l'ottimizzazione

Riduzione del numero di plugin

Un'altra parte importante dell'ottimizzazione di WordPress è mantenere il numero di plug-in attivati ​​il ​​più basso possibile. Per molti utenti è allettante testare e sperimentare diversi plugin, che in effetti è uno dei vantaggi di WordPress.

Tuttavia, avere molti plugin attivi può ridurre la velocità del tuo sito Web WordPress. Molti plugin hanno una singola funzione che potrebbe essere gestita altrettanto facilmente da un pezzo di codice inserito nel tuo functions.php.

In molti casi potresti aver bisogno solo di una singola funzione, ma il plugin che usi ha molte altre opzioni che non usi mai.

Analizza ogni plugin sul tuo sito e assicurati di averne bisogno. Se non ti servono o la funzionalità può essere sostituita dal codice functions.php, disattiva ed elimina i plugin.

Non usare immagini: usa CSS3

Il design dei siti Web utilizza le immagini per creare l'interfaccia utente.

Dopo l'introduzione dei CSS e in particolare dei CSS3, molti effetti utilizzati per le interfacce web possono essere imitati utilizzando CSS e codice HTML.

[box]Nota: la maggior parte di questi effetti non è compatibile su tutti i browser, in particolare su Internet Explorer meno recente (sì, sempre il problema figlio di qualsiasi sviluppatore web). Se desideri ottimizzare la velocità del tuo sito Web, l'utilizzo degli effetti CSS può essere una soluzione rapida e veloce, ma non una buona scelta se il pubblico principale del cliente utilizza browser obsoleti.[/box]

Se stai lavorando per un cliente che si rivolge al B2C (business to consumer), dovresti controllare il loro Google Analytics o chiedere loro che tipo di clienti hanno (o desiderano raggiungere). Ciò può influenzare se puoi utilizzare gli effetti CSS3 se il pubblico dei clienti utilizza generalmente browser obsoleti.

Quando Elegantthemes.com ha rilasciato una nuova versione del loro plug-in shortcode, ha avuto un enorme impatto sui tempi di caricamento per i miei clienti a causa degli effetti CSS3 e dell'inserimento di più immagini in un singolo sprite.

La cartella shortcodes/images, che conteneva 90 immagini, ora ha un singolo sprite PNG, riducendo la dimensione complessiva da 140kb a 15kb!
(Si tratta di una riduzione delle dimensioni di circa il 90%.)

Immagini agli sprite

L'ottimizzazione dello sprite di un tema esistente può richiedere un po' di tempo, ma può anche portare un grande miglioramento della velocità del tuo sito web.

Uno sprite è una singola immagine, solitamente in formato .PNG che ha diversi elementi del tuo design/layout visivo. Invece di caricare ogni elemento grafico individualmente, tutte le immagini vengono unite in uno o nel minor numero possibile di sprite.

Questa tecnica dovrebbe essere utilizzata solo per le immagini utilizzate per il layout del design e non per i singoli post in evidenza, miniature, ecc. Le uniche immagini che dovresti provare a inserire in uno sprite sono le immagini che vengono utilizzate nel tuo sito Web in ogni pagina.

Invece di caricare ogni singola immagine (una diversa richiesta http), tutte le immagini vengono raggruppate in un unico file e il CSS che mostra ogni immagine viene modificato per spostare semplicemente lo sfondo dove nello sprite si trova la parte necessaria.

SpriteMe.org è un'eccellente risorsa per la creazione di sprite. Il metodo migliore è pianificare in anticipo e creare prima i tuoi sprite, ma se hai bisogno di riparare un sito Web esistente, il sito spriteme.org ha un bookmarklet che rende il processo molto semplice.

Esempio di stili CSS in combinazione con uno sprite:

.btn_top {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -10px;
}
.btn_top div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -40px;
}
.btn_bottom {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: 45px -70px;
}
.btn_bottom div {
  background-image: url(https://domain.com/images/spriteme1.png);
  background-position: -10px -100px;
}

Ogni stile CSS fa riferimento allo stesso file, ma la posizione dello sfondo è diversa, mostrando le diverse parti dell'immagine.

Distribuisci: usa una CDN

Esistono due vantaggi principali nell'utilizzo di una CDN (Content Distribution Network) per l'hosting dei file del tema e degli elementi di WordPress.

I tuoi file vengono caricati più velocemente poiché si trovano su un dominio diverso. Il limite del browser di 2-4 download simultanei di file è per ogni dominio .

Quindi, se i tuoi file sono ospitati su un dominio diverso, un browser caricherà questi file da solo, rendendo il tuo sito Web più veloce da caricare e riducendo lo stress di carico sul tuo dominio e sul tuo host.

Un altro vantaggio è che se stai utilizzando un importante CDN, avrà server distribuiti in tutto il mondo che rilevano quindi da dove viene il tuo visitatore e quindi servono loro i tuoi file dal server più vicino nella loro rete.

Il server giusto per il tuo sito web

Il server che ospita il sito Web deve essere posizionato vicino al pubblico di destinazione. Quindi, se un sito web è destinato al mercato tedesco, è meglio trovare un server con una società di hosting in Germania, o almeno in Europa centrale.

Ciò ha un grande impatto per i tuoi visitatori che caricano da un server molto più vicino a dove si trovano, rendendo la navigazione del tuo sito web molto più veloce.

Questo ha anche un'influenza SEO, non solo perché il sito si carica più velocemente, ma anche perché aumenta l'importanza del sito Web per il pubblico tedesco e quindi dovrebbe anche avere un ranking più alto.

Il vero effetto in termini di SEO è discutibile, ma se stai cercando di migliorare le prestazioni dei tuoi siti web, vale la pena considerare.

Questo è noto per i SEO, ma una volta che un sito è stato impostato, è raro vederlo spostato su un altro server per motivi puramente SEO. Vale la pena tenerlo a mente per il tuo prossimo progetto però.

Correggi gli errori 404

Dovresti eseguire regolarmente un controllo del tuo sito Web per assicurarti di non avere pagine 404, non trovate comunque. La riduzione dei collegamenti non validi sul tuo sito Web può ridurre il carico del server e offrirà una migliore esperienza utente. Non solo link e pagine possono scomparire, ma a volte un errore di battitura o un altro tipo di errore può portare a contenuti non trovati sul tuo sito web.

Suggerimento: controlla questo pezzo di codice per reindirizzare automaticamente 301 pagine non trovate.

[scatola]
Questa pagina è tutt'altro che finita e non copre ancora tutti i dettagli dell'ottimizzazione di WordPress. L'obiettivo è creare una risorsa di suggerimenti e trucchi per ottenere il massimo dal tuo sito WordPress.

Alcuni o la maggior parte dei trucchi saranno difficili da implementare a meno che tu non sia uno sviluppatore, ma ognuno di essi renderà il tuo sito WordPress più veloce.
[/scatola]

La lista di controllo

Questa è la lista di controllo, si prega di notare che ogni sito Web e progetto è diverso. Non tutti i passaggi possono essere utilizzati su tutti i siti Web.