Le impostazioni di ottimizzazione automatica ideali + Cloudflare / StackPath CDN (2020)

Autoptimize è un ottimo plugin, ma per la memorizzazione nella cache, WP Rocket è di solito il numero 1 nei sondaggi di Facebook.


Quindi perché dovresti usarlo?

Perché ad alcuni host piace Vai papà e Motore WP inserisce nella blacklist la maggior parte dei plug-in di cache (poiché hanno il proprio sistema di memorizzazione nella cache incorporato) ma non fanno cose come ottimizzare HTML, CSS, JavaScript, Google Fonts o CDN (rete di distribuzione dei contenuti). Quindi, mentre il sistema di memorizzazione nella cache del tuo host potrebbe funzionare bene per la memorizzazione nella cache, Autoptimize aiuta a fare il “resto” delle cose (correggendo gli elementi in GTmetrix + Pingdom). Evita Google PageSpeed ​​Insights così com’è non misura nemmeno i tempi di caricamento.

Anche lo sviluppatore di Autoptimize afferma nella sua pagina di plugin che funziona meglio se combinato con un plugin cache. Consiglio Swift se stai seguendo il percorso gratuito e WP Rocket se riesci a fare $ 49 / anno in quanto è più facile da configurare (è anche quello che uso e ho punteggi al 100% in GTmetrix) dal momento che viene fornito con molte funzionalità che la maggior parte dei plug-in di cache non ha (pulizia del database, hosting del codice di Google Analyitcs localmente, heartbeat controllo e integrazione con entrambi Cloudflare + altri CDN). Ho tutorial per WP Rocket, veloce, WP Fastest Cache, W3TC e persino WP Super Cache.

Quindi configuriamo le impostazioni di Ottimizzazione automatica. Ti mostrerò anche come aggiungere un CDN (idealmente entrambi Cloudflare e StackPath) poiché ognuno ha il proprio set di data center e più data center = consegna dei contenuti più rapida. CDN sono raccomandati in Guida all’ottimizzazione di WordPress.

Plugin automatico di ottimizzazione

1. JS, CSS, & HTML

Abilita tutti questi per ottimizzare i file JavaScript, CSS e HTML, quindi vedi le istruzioni di seguito.

Ottimizza automaticamente le impostazioni HTML CSS JS

Ottimizza il codice JavaScript

  • File JS aggregati: abilita, questo combina i file JavaScript come raccomandato da GTmetrix. Se disabilitato, i singoli file verranno caricati e non verranno combinati.
  • Aggrega anche JS in linea: abilita, questo combina file JavaScript che si trovano in file HTML. Autoptimize dà un avvertimento che sostanzialmente significa che se rompe qualcosa sul tuo sito, escludi i file JavaScript o disabilita questo.
  • Forza JavaScript in : disabilita, a meno che tu non abbia errori JavaScript. È meglio cercare di trovare file problematici ed escluderli piuttosto che selezionare questa opzione poiché ciò rende il blocco del rendering JavaScript (non ottimale per la velocità).
  • Escludere gli script da Autoptimize: se vedi errori dopo aver abilitato determinate impostazioni JavaScript, trova JavaScript problematico ed escludi i file qui.
  • Aggiungi il wrapping try-catch: disabilita, a meno che tu non abbia errori JavaScript. Questo è un altro modo per correggere gli errori JS senza dover abilitare JavaScript in testa.

Ottimizza il codice CSS

  • File CSS aggregati: enable, stessa cosa dell’aggregazione dei file JS solo per CSS.
  • Aggrega anche CSS in linea: abilita, la stessa cosa dell’aggregazione di file JS inline solo per CSS. Abilita entrambi per migliorare ulteriormente i tempi di caricamento + i punteggi GTmetrix.
  • Genera dati: URI per immagini: disabilita se si utilizza un CDN. MaxCDN (StackPath) ti avverte che abilitando ciò, le immagini verranno servite dal servizio di origine anziché dalla tua CDN. Abilitare questo potrebbe inizialmente comportare un minor numero di richieste HTTP, ma probabilmente non dopo aver impostato un CDN e servito le immagini attraverso quello.
  • Inline e Defer CSS: abilita, puoi solo abilitare questa opzione o “inline all CSS” che Autoptimize non consiglia nelle loro FAQ. Dicono “anche se l’integrazione di tutti i CSS renderà il blocco del rendering non CSS, si tradurrà in una pagina HTML di base che diventa significativamente più grande, quindi richiedono più” roundtrip “.
  • Inline all CSS: disabilita, Autoptimize non consiglia di abilitarlo.
  • Escludere CSS da Autoptimize: se vedi errori dopo aver abilitato determinate impostazioni CSS, trova i file CSS problematici ed escludili qui. Nota: l’opzione “minimizza CSS e JS esclusi” nelle Opzioni varie deve essere disabilitata.

2. Opzioni CDN

Questo è dove il tuo URL CDN va (istruzioni sotto). Cloudflare non ti fornisce un URL CDN (cambierai invece i nameserver). L’URL di base della CDN è specifico per StackPath, KeyCDN e altri CDN, non Cloudflare. Suggerisco di utilizzare sia StackPath + Cloudflare poiché i tuoi CDN avranno più data center e più data center = sito web più veloce.

Passo 1: Iscriviti per un CDN. Uso StackPath che ha oltre 34 data center che si trovano pesantemente negli Stati Uniti ed è il luogo dove si trovano la maggior parte dei miei visitatori. Sono $ 10 al mese con una prova gratuita di 30 giorni.

StackPath-Data-Center

Passo 2: Nella dashboard di StackPath, fai clic sulla scheda CDN e creare un sito CDN StackPath.

StackPath-CDN-Tab

StackPath-CDN-Domain

StackPath-Server-IP-Address

* Copia il tuo indirizzo IP del server come è necessario nel passaggio 5 di questa sezione.

StackPath-CDN-URL-Autoptimize

Passaggio 3: Incolla l’URL della tua CDN in Autoptimize con http: // o https: // (a seconda di quale usi).

Autoptimize URL CDN

Passaggio 4: In StackPath vai su CDN → Impostazioni cache, quindi fai clic su “Elimina tutto”.

StackPath-Purge-Cache

Passaggio 5: Autorizza il tuo indirizzo IP del server in StackPath (WAF → Firewall).

StackPath-Whitelist-IP

Passaggio 6: Esegui il tuo sito in GTmetrix e la “rete di distribuzione dei contenuti” dovrebbe essere verde in YSlow.

CDN GTmetrix YSlow

3. Impostazioni varie

Ecco le impostazioni Misc:

Ottimizza automaticamente le varie impostazioni

Salva script / css aggregati come file statici – se abilitato, significa che i file CSS e JS vengono salvati nella cache e pubblicati attraverso il tuo server, quindi se il tuo hosting non li gestisce, abilitalo.

Minimizza i file CSS e JS esclusi – se stai escludendo determinati file CSS e JavaScript, è perché c’è un problema nel tentativo di ottimizzarli e non li vuoi minimizzare.

Ottimizza anche per editor / amministratori registrati – disabilita, di solito si desidera disabilitare le funzioni di prestazione nell’amministratore di WordPress, incluse le caratteristiche di prestazione di Cloudflare.

4. Impostazioni immagini

La ottimizzazione automatica può anche aiutare a velocizzare il caricamento delle immagini.

Ottimizza automaticamente le impostazioni delle immagini

Ottimizza le immagini – Gli URL sul tuo sito Web verranno modificati in modo che puntino a CDN di ShortPixel. Ciò non dovrebbe influire sul loro aspetto purché sia ​​una compressione senza perdita, ma si caricheranno più velocemente.

Qualità di ottimizzazione delle immagini – trova il tuo equilibrio unico tra compressione e qualità (io uso lucido). Ecco le differenze in ciascun livello di compressione da ShortPixel:

Livelli di compressione delle immagini ShortPixel

  • lossy: maggior compressione, perdita di qualità.
  • Lucido: compressione media, scarsa perdita di qualità.
  • Senza perdita: bassa compressione, perdita di qualità minima.

Carica WebP nei browser supportati – abilitato se si utilizzano immagini WebP e immagini di caricamento lento.

Immagini a carico lento – Personalmente non carico pigro le mie immagini perché il caricamento costante delle immagini mentre scorri la pagina può essere fastidioso per gli utenti. Sì, comporta meno richieste ed è raccomandato da Google per tempi di caricamento più rapidi, ma lo trovo fastidioso. Questo dipende totalmente da te.

5. CSS critico

Questo si riferisce al Ottimizza automaticamente il plugin di accensione di criticalcss.com.

Richiede un premio piano a pagamento da criticalcss.com ($ 7 / mese).

Il plug-in crea regole CSS critiche per assicurarsi che le pagine vengano visualizzate prima del caricamento del CSS completo, migliorando il “tempo di inizio del rendering”. Tutto quello che devi fare è installare il plug-in, iscriverti a un piano, inserire la tua chiave API CSS critica nella sezione “Critical CSS” di Autoptimize e il plug-in farà il resto. Controlla i plugin Pagina FAQ per dettagli su configurazioni personalizzate.

Personalmente non lo uso e preferirei usare $ 7 al mese in più su un server più potente.

Autoptimize criticalcss com power-up

Ottimizza automaticamente le impostazioni CSS critiche

6. Impostazioni extra

Autoptimize-Extra-Settings

Google Fonts – abilitare se si utilizza Google Fonts che rallentano i tempi di caricamento quando vengono estratti da risorse esterne (la libreria di Google Font). Preferisco l’opzione “combina e collega in testa” poiché migliora i tempi di caricamento senza visibilità vedendo il caricamento dei caratteri (che è ciò che accade di solito quando si carica in modo asincrono. Inoltre, testare l’ultima opzione di Google Font “combinare e caricare i caratteri in modo asincrono con webfont.js“E vedere quali producono risultati migliori in GTmetrix.

Rimuovi Emoji – abilita (gli emoji sono dannosi per i tempi di caricamento).

Rimuovere le stringhe di query dalle risorse statiche – le stringhe di query sono generalmente generate dai plugin e non possono essere riparate (in GTmetrix / Pingdom) semplicemente abilitandolo, ma puoi provare. La soluzione migliore è controllare il tuo sito per i plug-in CPU elevati e sostituirli con plug-in leggeri. La maggior parte dei plug-in per CPU include condivisione social, galleria, compilatori di pagine, post correlati, statistiche e plug-in di chat live. Dovresti anche eliminare tutti i plugin non necessari e pulire il database (usando un plugin come WP-Optimize) per cancellare le tabelle lasciate dai plugin disinstallati.

Precollega a domini di terze parti – aiuta i browser ad anticipare le richieste da risorse esterne (Google Fonts, Analytics, Maps, Tag Manager, Amazon store, ecc.). Questi di solito appariranno come “riduzione delle ricerche DNS” nel rapporto GTmetrix, ma di seguito sono riportati esempi comuni.

  • https://fonts.googleapis.com
  • https://fonts.gstatic.com
  • https://www.google-analytics.com
  • https://ajax.googleapis.com
  • https://connect.facebook.net
  • https://www.googletagmanager.com
  • https://maps.google.com

Precarica richieste specifiche – puoi trovare ulteriori informazioni sul precarico e suggerimenti sulle risorse del browser da WP Rocket, ma in pratica questo rende alcuni file scaricati come prioritari.

File Javascript asincroni – ciò significa che qualcosa impedisce il caricamento rapido dei contenuti above the fold. Questo tutorial su rendering blocco JavaScripts lo spiega bene, ma se vedi errori JavaScript in GTmetrix e Pingdom, il Plugin Async JavaScipt potrebbe fare il trucco.

Ottimizza i video di YouTube – se il tuo sito ha video, WP YouTube Lyte pigro li carica in modo che vengano caricati solo quando gli utenti scorrono verso il basso e fanno clic sul pulsante di riproduzione, eliminando così le richieste iniziali ai server di YouTube. Questo può radere più secondi di volte carichi sui contenuti con i video, in quanto sono uno degli elementi più pesanti in una pagina. WP Rocket e Swift Performance hanno questo integrato nelle loro impostazioni, quindi non ti serve se ne usi uno come plug-in della cache.

7. Ottimizza di più

Se desideri ottimizzare ulteriormente il tuo sito, ecco gli strumenti consigliati:

WP Rocket – ha valutato il plug-in della cache n. 1 in più sondaggi di Facebook e ha molte opzioni non incluse in Autoptimize (pulizia del database, controllo del battito cardiaco, hosting locale di Google Analytics, sostituzione dell’iframe di YouTube con un’immagine di anteprima, aggiunta della cache del browser a Pixel di Facebook, ecc.). WP Rocket gestisce anche quasi tutto ciò che fa Autoptimize, quindi è necessario solo 1 plugin per tutte quelle ottimizzazioni di velocità. Ecco perché è così bello. Puoi anche ottenere uno sconto del 10% qui.

ShortPixel – popolare plugin per l’ottimizzazione delle immagini e quello che uso.

StackPath – CDN con oltre 30 data center. Molto facile da configurare; basta iscriversi a un piano ($ 10 / mese), quindi copiare / incollare l’URL della tua CDN nell’opzione Autoptimize CDN URL.

SiteGround – di solito ha valutato l’host numero 1 anche nei sondaggi di Facebook usato da Yoast.

Yoast-on-Twitter-We-appena-switched-to-Siteground

Sondaggio di hosting 2019

2017-WordPress-Hosting-FB-Poll

Raccomandazioni di hosting elementare

Raccomandazione di hosting di luglio 2019

WordPress-Host-Poll-ago-2018

Shared-Hosting-Poll-2017

2019-Hosting-Poll

Go-To-Hosting-Company

WordPress-Hosting-Poll-2017

Managed-Hosting-Poll

WooCommerce-Hosting-FB-Poll

2016-web-hosting-Poll

Best-WordPress-Hosting-Provider-Poll

Best-web-hosting-2019-Poll

Sondaggio di hosting amichevole WP

2016-WordPress-Hosting-FB-Poll

Hosting preferito per Elementor

Consigli di hosting 2018

Managed-WordPress-Hosting-Poll-2017

2019-Host-Poll-1

Hosting-Poll-For-Velocità

WordPress-Hosting-Poll-Giugno-1

SiteGround-Raccomandazione

2014-Managed-WordPress-Hosting-FB-Poll

Best-Web-Hosting-Provider-Poll

Hosting-Poll-feb-2019

Hosting-Raccomandazioni-Poll

Bluehost vs SiteGround

Sondaggio host web WordPress

Le persone di solito migrano perché loro tecnologia di velocità è molto più veloce di EIG o GoDaddy:

Passare a SiteGround

Migrazione del tempo di caricamento di SiteGround

Bluehost a SiteGround GTmetrix

HostGator a SiteGround

SiteGround Google PageSpeed ​​Insights

100 Punteggio perfetto su SiteGround

SiteGround Genesis

Velocità fornita da SiteGround

Tempi di carico ridotti con SiteGround

Nuovi tempi di risposta SiteGround

HostGator alla migrazione di SiteGround

SiteGround Tempi di risposta su Joomla

Passato a SiteGround Hosting

SiteGround Rocket Imagify Combo

SiteGround PageSpeed ​​Insights

SiteGround su Joomla

Tempi di caricamento ridotti di SiteGround

SiteGround Speedy Hosting

Nuovo tempo di risposta SiteGround

Miglioramento dei tempi di risposta di SiteGround

Anche SiteGround lo fa migrazioni libere con GrowBig+.

CloudWays – più veloce di SiteGround (è il cloud hosting, non condiviso) ed è stato anche valutato molto bene nei sondaggi di Facebook. Inizia a $ 10 / mese con il loro Piano DigitalOcean. Offrono 1 migrazione gratuita (su cui li ho occupati) ed ecco cosa è successo al mio tempo di risposta del mio server:

SiteGround-vs-CloudWays-Cloud-Hosting

Raccomandazioni di hosting Facebook

VPS Cloud Hosting WooCommerce Poll

Sondaggio hosting cloud VPS

Suggerimenti per l'hosting di WordPress

Tempi di risposta di Cloudways

Motore WP verso Cloudways

Senza titolo

Tempi di caricamento Pingdom di Cloudways

CloudWays-Facebook-Review

Puoi ottenere il 25% di sconto sui primi 2 mesi di Cloudways con il codice promozionale OMM25.

Kinsta – $ 30 al mese di hosting premium e mentre non li ho provati, non ho sentito altro che grandi cose sulla velocità, il supporto, i tempi di attività di Kinsta e quasi tutto ciò che riguarda il loro hosting.

Perfmatters – plugin di Kinsta che si occupa di ciò che mi piace chiamare “ottimizzazioni varie” come la disabilitazione selettiva dei plugin, la limitazione delle revisioni dei post, la disabilitazione dei salvataggi automatici, l’hosting di Google Analytics localmente e molto altro. Si prende cura del 10% finale della velocità.

Alcuni di questi sono raccomandati da Autoptimize, altri non lo sono:

Ottimizza automaticamente componenti aggiuntivi

8. Cloudflare

La ottimizzazione automatica non ha impostazioni da aggiungere Cloudflare “CDN, ma questo è facile da configurare. E sicuramente dovresti perché questo aggiunge Altri 200 centri alla rete di distribuzione dei contenuti (CDN).

Data center Cloudflare

Passo 1. Iscriviti a Cloudflare e ti verrà chiesto di aggiungere il tuo sito e iniziare una scansione.

CloudFlare-begin-scan

Passo 2. Al termine della scansione, seleziona il piano gratuito, quindi Cloudflare ti guiderà attraverso una serie di pagine. Alla fine verrai indirizzato a una pagina in cui Cloudflare ti assegna 2 nameserver.

CloudFlare-name-server-Dashboard

Passaggio 3. Accedi al tuo registrar di domini (ad es. Namecheap) e fai una ricerca su Google per “come cambiare i nameserver su Namecheap” (cerca solo il tuo registrar di domini), quindi segui le loro istruzioni. Copierete i 2 nameserver forniti da Cloudflare e li incollerete in un’opzione di nameserver personalizzata nel vostro registrar di domini. Attendere 72 ore per la propagazione.

Godaddy Cloudflare nameserver

Questo è tutto!

Qual è il prossimo?

Guarda il mio video – è un video di 42 minuti, ma copro praticamente tutto (timestamp nella descrizione del video) e dovresti imparare moltissime informazioni sulla velocità del sito WordPress:

Vuoi sapere come ho ottenuto punteggi al 100% in GTmetrix?
Consulta la mia guida completa all’ottimizzazione della velocità di WordPress che contiene oltre 38 suggerimenti per la correzione di elementi GTmetrix / Pingdom tra cui l’aggiornamento a PHP 7, la pubblicazione di immagini ridimensionate, la specifica delle dimensioni dell’immagine, la pulizia del database, l’hosting locale di Google Analytics, WP Disable e altri.

Domande frequenti

&# X1f680; Ho bisogno di altri plugin di velocità oltre a Ottimizzazione automatica?

Sì, di solito si desidera utilizzare anche un plug-in per la memorizzazione nella cache, l’ottimizzazione delle immagini, la pulizia del database, il controllo del battito cardiaco e la disabilitazione selettiva dei plug-in. Raccomando WP Rocket, ShortPixel e Perfmatters per quelli.

&# X1f680; Come si configura un CDN con Autoptimize?

Scegli il tuo CDN (io uso StackPath), copia il tuo URL CDN e incollalo nel campo UR CDN di Autoptimize.

&# X1f680; Come ottimizzare Google Fonts con Autoptimize?

Ti consiglio di usare l’opzione Combina e collega in testa e di preconnettere i tuoi caratteri usando Autoptimize.

&# X1f680; Autoptimize si occupa della memorizzazione nella cache?

No, dovrai utilizzare un plug-in separato per la memorizzazione nella cache. Raccomando WP Rocket o SG Optimizer se si utilizza SiteGround.

&# X1f680; Come si configurano le impostazioni di ottimizzazione automatica?

Tutto è elencato in questo tutorial: tieni d’occhio il rapporto GTmetrix e quali elementi specifici devono essere riparati. Se la configurazione delle impostazioni in Autoptimize non lo risolve, prendere in considerazione l’utilizzo di un altro plug-in per correggere gli elementi.

Domande? Fammi uno squillo!
Tom

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