Ottimizzazione di WordPress con Varnish e W3 Total Cache

Questo tutorial segue Installazione di WordPress in Amazon Cloud, che mostra come ottimizzare il tuo sito con la memorizzazione nella cache.

Se si esegue l'hosting automatico di WordPress, è consigliabile implementare una sorta di soluzione di memorizzazione nella cache. Sia che tu voglia pubblicare il tuo blog in una micro istanza economica su Amazon's Cloud (AWS) o aspettarti che il tuo blog raggiunga dimensioni significative o picchi di traffico, il caching sarà fondamentale per gestire le prestazioni. Il caching può anche aiutare a migliorare la tua velocità della pagina di Google che influisce sul posizionamento del tuo motore di ricerca.

A seconda del traffico del tuo sito e della complessità del tuo tema WordPress, le prestazioni possono essere piuttosto lente su AWS. La mia raccomandazione è quella di combinare l'uso di Varnish Cache open source con il plugin W3 Total Cache (W3TC) gratuito. 

Varnish è una cache che memorizza copie di pagine per utenti che non hanno effettuato l'accesso (la maggior parte dei lettori non lo sono). Quando le richieste arrivano sul tuo server, Varnish restituisce queste pagine predefinite all'istante piuttosto che richiedere Apache, PHP e WordPress per ricostruire la pagina per ogni richiesta. Poiché il traffico si ridimensiona, la ricostruzione di ogni pagina attraverso lo stack WordPress può letteralmente bloccare il server. In seguito, W3 Total Cache può essere impostato per pre-compilare regolarmente le pagine del tuo sito in modo che siano sempre pronte per Varnish.

Nota: questo è anche un buon motivo per considerare un plugin per commenti esterni come Disqus piuttosto che commenti WordPress incorporati. Il JavaScript di Disqus è memorizzabile nella cache. Se i commentatori accedono al tuo sito WordPress, il caching verrà utilizzato meno spesso e la scalabilità per i tuoi visitatori più attivi sarà notevolmente ridotta.

Il potere di Varnish è drammatico quando l'interesse per i picchi del tuo sito. Ho eseguito correttamente il mio sito con questa configurazione utilizzando un'istanza di piccole dimensioni Amazon per circa $ 14,95 mensili gestendo con successo molte apparizioni su BoingBoing, Slashdot e altri.

Se desideri saperne di più sulla memorizzazione nella cache, sui suoi vantaggi e sul W3TC, leggi l'introduzione di Ahmad Awais alla memorizzazione nella cache. 

Installazione di Varnish Cache

Varnish Cache è un modulo di caching per Linux. Imposteremo Varnish per ascoltare il traffico HTTP (web) sulla porta 80 con Apache che ascolta solo Varnish sulla porta 8080. Quando Varnish necessita di una pagina da compilare manualmente, passerà la richiesta alla porta Apache 8080.

Questo può essere un po 'confuso all'inizio - ma sì, stiamo essenzialmente spostando Apache dietro le quinte. Varnish fungerà da porta d'ingresso sulla porta 80 per tutte le tue richieste web. Apache svolgerà un ruolo di supporto per Varnish sulla porta 8080. Non c'è traffico pubblico sulla porta 8080, solo richieste private da Varnish. Se sei curioso di sapere come questo si riferisce ai gruppi di sicurezza AWS, non è necessario aprire la porta 8080.

Per iniziare, dobbiamo installare Varnish nella nostra istanza:

sudo apt-get install varnish

Modifica il file ports.conf di Apache per l'ascolto sulla porta 8080:

sudo nano /etc/apache2/ports.conf

Ecco come dovrebbe essere:

Ascolta 8080

Modifica il file di configurazione del tuo sito Apache per rispondere alla porta 8080:

sudo nano /etc/apache2/sites-available/wordpress.conf

Cambia la linea VirtualHost da *: 80 a *: 8080

Potrebbe essere necessario modificare il sito predefinito di Apache per ascoltare sulla porta 8080 o disattivarlo:

sudo a2dissite 000-default

Spostare i file di configurazione di Varnish originali nella directory home come backup (nel caso in cui si decida di rivederli in un secondo momento):

sudo mv / etc / default / varnish ~ / default-varnish-vecchio sudo mv /etc/varnish/default.vcl ~ / varnish-default-vcl.old

Sostituisci la configurazione di default di Varnish con il file disponibile qui sul gist. Puoi usare il copia e incolla. 

sudo nano / etc / default / varnish

Quindi, sostituisci qui la configurazione VCL di Varnish con il file Gist (di nuovo copia e incolla).

Avvertimento: si possono ottenere errori VCL quando si tenta di riavviare Varnish se non si mantengono correttamente le interruzioni di riga quando si incolla. Le interruzioni di riga possono essere difficili da rilevare, quindi esaminale attentamente. Se ci sono errori durante il riavvio di Varnish, è abbastanza utile dirti quale numero di linea guardare.

sudo nano /etc/varnish/default.vcl

Ora, riavvia Apache e Varnish:

sudo service apache2 restart sudo service varnish restart

Ricorda, se ricevi errori VCL a questo punto, potrebbe essere a causa di interruzioni di riga interrotte da incollare nel file Varnish default.vcl.

Visita il tuo sito su http://yourdomain.com e tutto dovrebbe iniziare a lavorare con Varnish. La seconda volta che carichi una pagina statica, dovrebbe essere notevolmente più veloce.

Installazione di W3 Total Cache 

W3 Total Cache è un eccezionale plugin per WordPress. È gratuito e offre un'eccezionale ottimizzazione delle prestazioni per il tuo sito. Puoi saperne di più su W3 Total Cache sul suo sito di plugin.

Accedi alla tua pagina di amministrazione di WordPress all'indirizzo http://yourdomain.com/wp-admin utilizzando il nome utente e la password che hai configurato durante l'installazione. Seleziona Plugin -> Aggiungi nuovo dal menu della barra laterale sinistra. Cerca per W3 Total Cache.

A causa della sua potenza e raffinatezza, W3 Total Cache ha una vasta gamma di impostazioni che possono sembrare schiaccianti. Di seguito, fornisco alcune impostazioni consigliate che semplificano l'avvio.

Non essere sopraffatto. Inizia con le impostazioni generali mostrate di seguito e vai da lì. Se sei interessato a iniziare più velocemente, Ho fornito le istruzioni per scaricare le mie impostazioni predefinite e importarle (vedi più avanti).

In alternativa, W3 Total Cache offre installazione e supporto a pagamento da $ 150 in su. Puoi raggiungerli attraverso la sua pagina Dashboard plug-in o il loro sito web. Questo è un ottimo plugin, quindi mi sento a mio agio nel raccomandarli. Ho avuto qualche esperienza con il loro supporto pagato ed è generalmente buono. Si consiglia inoltre di rivedere la panoramica dell'installazione di W3 Total Cache e le domande frequenti sul sito Web del plugin per ulteriori dettagli.

Ad un livello elevato, ti consiglio di attivare le seguenti impostazioni che dettaglio più in dettaglio qui sotto:

  • Memorizzazione nella cache della pagina: Pagine di cache per un caricamento più rapido e una consegna più efficiente (separata da Varnish).
  • minify: Riduce e combina i file JS e CSS per un caricamento più rapido e una consegna più efficiente.
  • Cache oggetto: Accelera la generazione di contenuti con WordPress.
  • Cache del browser: Tagga correttamente il contenuto in modo che i client browser minimizzino il download di pagine.
  • Reverse Proxy: Indica a W3TC di eliminare la cache di Varnish quando vengono pubblicati post, pagine e altri. sono aggiornati.
  • Amazon CloudFront CDN: Garantisce la consegna di file e immagini statici rapidamente, in modo affidabile e geograficamente vicino ai visitatori.
  • Varie: Utilizzare un file indice Sitemap per memorizzare in precedenza le pagine con priorità alta.

Installazione di componenti di supporto

Prima di configurare W3 Total Cache, installiamo e attiviamo un numero di componenti Linux che richiederà. Di nuovo, connettiti alla tua istanza ed esegui i seguenti passi:

sudo apt-get install php5-dev php5-memcache memcached php-pera build-essential php5-tidy php5-curl apache2-dev php-apc

Modifica il tuo file php.ini per attivare memcache:

sudo nano /etc/php5/apache2/php.ini

Nella sezione Estensioni dinamiche, aggiungi le linee di seguito:

extension = apc.so extension = memcache.so

Di 'ad Apache di attivare questi moduli e riavviarlo:

sudo a2enmod rewrite sudo a2enmod scade sudo a2enmod headers sudo service apache2 restart

Modifica il tuo file wp-config.php per abilitare il caching:

sudo nano /var/www/wordpress/wp-config.php

Aggiungi la seguente definizione WP_CACHE sopra la riga di modifica dell'arresto:

define ('WP_CACHE', true); / * Questo è tutto, smetti di editare! Buon blog. * /

Revisione dello stato della configurazione

A questo punto, è utile visitare il Dashboard del plugin W3TC e controllare che tutti i componenti appropriati siano attivi. Ma prima, dobbiamo abilitare i permalink fantasiosi per i formati di URL, che ottimizzeranno il nostro sito per l'indicizzazione dei motori di ricerca. Da WordPress Admin Dashboard, seleziona Impostazioni -> Permalink, scegli Giorno e Nome e fai clic su Salva modifiche. 

Quindi, dalla barra laterale sinistra, fai clic su Prestazioni -> Dashboard, quindi fai clic sul pulsante Verifica compatibilità. Dovrebbe assomigliare a qualcosa di simile a questo:

Nota: puoi risparmiare un po 'di tempo se scegli un tema e installa gli altri plug-in che prevedi di utilizzare prima di completare il resto del processo di configurazione di W3 Total Cache. La modifica dei temi e l'aggiunta di plug-in richiederanno probabilmente di eliminare e ritestare le impostazioni della cache W3 Total.

impostazioni generali

W3TC generalmente funziona bene con le sue impostazioni predefinite. Quindi, dovremo principalmente configurare la pagina delle Impostazioni generali e non entrare in ogni singola area delle funzionalità.

Visita la pagina delle impostazioni generali del W3TC. Dalla barra laterale di sinistra, fai clic su Prestazioni -> Impostazioni generali. Siamo in grado di eseguire impostazioni di alto livello qui, ma poi faremo anche impostazioni più dettagliate sulle singole pagine delle impostazioni. Lascio il segno di spunta (deselezionato) "Attiva o disattiva tutti i tipi di memorizzazione nella cache (in una sola volta)" nella casella generale.

Abilita cache di pagine con Opcode Alternative PHP Cache (APC):

Abilita Minify con le seguenti impostazioni. Io uso la modalità manuale perché minify può rompere alcuni temi se le impostazioni sono troppo aggressive (tuttavia, il tema scelto potrebbe funzionare correttamente):

Lascio la selezione del caching del database non selezionata / disattivata in quanto è consigliata solo se non si attiva la caching degli oggetti.

Abilita la cache degli oggetti:

Abilita la cache del browser:

Abilita proxy inverso:

Configura W3TC per eliminare regolarmente Varnish Cache da 127.0.0.1 (localhost).

Impostazioni della cache di pagina

Dalla barra laterale di sinistra, fai clic su Prestazioni -> Cache della pagina. Scorri verso il basso fino alla casella Cache Preload. Abilita "Adatta automaticamente la cache della pagina". Inserisci l'URL della Sitemap. 

Nota: Avrai bisogno di aver installato il Miglior plug-in Sitemaps XML di Google WordPress prima che funzioni correttamente.

Se utilizzi un CAPTCHA nei moduli di contatto, ti consigliamo di includere il percorso di queste pagine nell'esclusione della cache. La memorizzazione nella cache di un CAPTCHA interromperà la funzionalità. Scorri verso il basso fino alla casella Impostazioni avanzate. Aggiungi il percorso del file, ad es. contatti qui:

Gruppi di agenti utente

Poiché il mio tema è reattivo, memorizzo separatamente gli agenti utente mobile e tablet. In altre parole, Varnish memorizza nella cache copie di vari layout reattivi del mio sito. Quando arriva un utente mobile sul sito, riceve un file specifico rispetto a quando arriva un utente desktop. Se il contenuto del tuo sito è dinamicamente reattivo (ad esempio solo modifiche in JavaScript e CSS), non dovrai farlo.  

Se si desidera fare ciò, abilitare i gruppi di utenti alti e bassi:

Gruppi di referenti

Abilito anche i gruppi referrer per i motori di ricerca:

Minify Settings

Minify comprime il codice HTML, JS e CSS e combina i file quando possibile. Ciò accelera la consegna delle tue pagine e riduce la larghezza di banda. Tuttavia, a volte può interrompere il codice del tema.

Potrebbe essere necessario regolare le impostazioni per il tema scelto. Ho scoperto che disattivando la minifrazione CSS in linea, il mio tema funziona bene. Dalla barra laterale di sinistra, fai clic su Prestazioni -> Minima:

Importazione delle impostazioni di esempio (facoltativo)

Se preferisci iniziare importando il mio file di impostazioni, procedi nel seguente modo:

  1. Scarica il file delle impostazioni di esempio
  2. Visita le Impostazioni generali del W3TC, ad es. barra laterale sinistra, Prestazioni -> Impostazioni generali e scorrere fino all'area inferiore con Importa / Esporta impostazioni (vedi sotto).
  3. Accanto alla configurazione dell'importazione, fare clic su Scegli file e selezionare il file delle impostazioni di esempio scaricato. Quindi, fai clic su Carica.
  4. Sfoglia le tue impostazioni W3TC e assicurati che abbiano un senso per il tuo sito WordPress.
  5. Potrebbe essere necessario personalizzare le impostazioni per il tuo sito dopo l'importazione, ad es. Google Page Speed, Amazon CloudFront CDN, ecc.

Utilizzo di Amazon CloudFront CDN

Vale sicuramente la pena attivare un CDN. Il CDN è molto utile per ridurre il carico generale sul tuo server. Ad esempio, W3TC può reindirizzare le richieste di immagini e file statici come script e css al CDN di Amazon.

Se desideri farlo, segui le istruzioni sul mio sito per l'attivazione di Amazon CloudFront. Attualmente sto usando il metodo Pull (il mio tutorial descrive il metodo Push precedente).

Monitoraggio delle prestazioni

Esistono molti modi diversi per monitorare le prestazioni del tuo server. W3TC supporta l'integrazione con il modulo di monitoraggio New Relic. W3TC offre un widget dashboard per Google Page Speed ​​e c'è anche un plug-in Google Page Speed ​​per WordPress. Questi saranno utili per valutare i risultati del tuo blog in corso.

Congratulazioni!

Ora dovresti essere l'orgoglioso proprietario di un sito WordPress completamente ottimizzato e self-hosted in Amazon Cloud utilizzando Varnish e W3 Total Cache. Spero che abbiate trovato utile questa serie in due parti. Fateci sapere cosa ha funzionato per voi e cosa no.