Istruzioni per l'uso del plugin Autoptimize
Sono molto interessato all'accelerazione di WordPress , poiché la velocità del sito è sempre stata l'argomento più importante per gli amministratori.
Oggi parlerò del plugin di stimolazione automatica, uno dei migliori acceleratori gratuiti.
Mục lục
In che modo un plug-in mi velocizza?
L'autostimolazione migliora i tempi di caricamento della pagina attraverso tre fattori chiave:
- Comprimi, unisci e ottimizza i file CSS
- Comprimi, unisci e ottimizza i file JavaScript
- Compressione HTML
La compressione riduce le dimensioni del file, mentre il pooling riduce il numero di richieste al server. Entrambi questi fattori aiutano ad aumentare la velocità del sito. Sebbene l'operazione "ottimale" riguardi principalmente la rimozione dei CSS che bloccano la visualizzazione e il JS che blocca il rendering per dare la preferenza ai contenuti above-the-fold.
Dopo aver installato e attivato il plugin, vai alle sue impostazioni:
Configurazione di base
La sua interfaccia personalizzata è la seguente, selezioni tutte e 3 le opzioni ottimali:
Quindi scorri fino in fondo e fai clic su Salva modifiche / Salva modifiche.
Se utilizzi un servizio CDN (come MaxCDN, KeyCDN, CDNSun), nelle opzioni CDN inserisci lì l'URL radice CDN, altrimenti lascialo vuoto (non lo uso personalmente, quindi questa parte non riempirà nulla):
Personalizzazione avanzata
Con l'opzione base devi già velocizzare il tuo sito web, se vuoi un'ottimizzazione più profonda allora scegli la personalizzazione avanzata.
Per accedere alla sezione di personalizzazione avanzata, fare clic sul pulsante come mostrato di seguito:
La sua interfaccia avanzata è la seguente:
Entrerò nel dettaglio di ciascuna opzione.
- Mantenere i commenti HTML? Ciò significa mantenere i commenti HTML nella pagina. Se vuoi mantenere il commento HTML, selezionalo.
- Forza JavaScript in <head>?: Cioè, spingi JS su . Controllare questo probabilmente risolverà alcuni bug relativi a JS, ma può creare problemi di blocco del rendering. La mia scelta personale: non spuntare.
- Aggrega anche JS inline?: Ciò include JS inline. Questo controllo aiuta a estrarre e aggregare JS inline e può aiutare a migliorare le prestazioni, ma può aumentare rapidamente le dimensioni della cache. Scelta personale: sì o no, a seconda del sito, ma solitamente non selezionata.
- Escludi script da Autoptimize : Cioè, non ottimizzare determinati file JS (nessuna confezione e compressione). Per impostazione predefinita, Autoptimize non ottimizzerà i file jQuery, il motivo è che molti plugin e temi utilizzano jQuery e se Autoptimize esegue l'ottimizzazione interromperà la funzionalità di tali plugin e temi (e influenzerà la pagina Web). Per aggiungere un file non ottimizzato, inserisci il suo nome nell'area corrispondente e separalo con una virgola, ad esempio: any.js, another.js
- Aggiungere il confezionamento try-catch? : Se hai un errore con JS, dovresti spuntare questo.
- Genera dati : URI per immagini? Ciò consente di includere la piccola immagine di sfondo nel file CSS per evitare ulteriori requisiti di download dell'immagine. Dovresti spuntare. (può utilizzare la codifica dell'immagine base64 per ottenere il codice inline direttamente nel CSS)
- Aggrega anche CSS in linea? Questo rende l'unione CSS in linea, simile all'unione JS in linea, che può essere selezionata o meno a seconda della pagina, ma di solito non lo faccio, perché? Poiché sui temi di prestigio, il CSS in linea viene utilizzato principalmente per evitare il blocco in primo luogo, quindi non è necessario includere nulla.
- CSS in linea e differito? Cioè, inline e differisci i carichi CSS. Normalmente Autoptimze ottimizzerebbe il CSS e lo collocherebbe in cima al tag head, ma ciò bloccherebbe il rendering della pagina (il messaggio che di solito vedi nei messaggi di PageSpeed Insight di Google). Quando selezioni questa opzione, il file CSS verrà posticipato (preferendo che HTML e CSS inline vengano caricati prima). E in modo che il layout della pagina non venga influenzato troppo, puoi aggiungere il CSS a Incolla prima dei CSS qui: questi sono importanti CSS relativi al layout della pagina per i contenuti above-the-fold. Per ottenere questo CSS vai su: https://www.sitelocity.com/critical-path-css-generator e incolla l'URL del post, ti estrarrà il CSS richiesto. Scelta personale: Dipende, alcuni siti andranno bene, mentre altri no, ma nel complesso dovrebbe.
- Inline tutti i CSS? È in linea tutti i CSS. Ciò ha l'effetto di ridurre le richieste rispetto a mettere offline il CSS. Tuttavia, è efficace solo se il file CSS non è grande e il numero di visualizzazioni di pagina per utente non è molto. L'integrazione di tutti i CSS impedirà completamente la memorizzazione nella cache del browser. Scelta personale: non spuntare nella maggior parte dei casi.
- Escludi CSS da Autoptimize : ha lo stesso significato di escludere JS. Ma qui sono esclusi i file CSS. Ci sono file CSS che se ottimizzi con Autoptimize distruggono la funzionalità o il layout del sito, devi escluderlo qui. Per impostazione predefinita, alcuni file CSS sono esclusi come: wp-content/cache/, wp-content/uploads/, admin-bar.min.css, dashicons.min.css
- Informazioni sulla cache : questa sezione mostra le informazioni relative alla cache, inclusa la directory, lo stato di sovrascrittura dell'ottimizzazione automatica e la dimensione del file della cache disponibile.
- Opzioni varie : si tratta di opzioni avanzate aggiuntive. Salva script/css composito come file statico? relativo alla memorizzazione nella cache statica di file JS e CSS. Ottimizzare anche per gli utenti che hanno effettuato l'accesso? relativo all'ottimizzazione automatica sarà abilitato per entrambi gli utenti che hanno effettuato l'accesso. Scelta personale: spuntata.
Ottimizzazione extra/incrementale personalizzata
Queste opzioni continuano ad aiutarti a migliorare ulteriormente la velocità del tuo sito web.
- Rimuovi emoji : comporta la rimozione di CSS in linea e di emoji JS in linea (ad eccezione dei file JS non ottimizzati). Scelta personale: spuntata.
- Rimuovere le stringhe di query dalle risorse statiche : comporta la rimozione di stringhe di query (o parametri specifici della versione/versione). Non aumenta la velocità del sito, ma può aiutare a migliorare i punteggi delle prestazioni. Scelta personale: nessun segno di spunta.
- Google Fonts : se il tuo tema utilizza Google Fonts, questa opzione ti aiuta a rimuovere Google Fonts (Rimuovi Google Fonts). Combina e collega nella testa, il che significa che Google Fonts verrà unito e quindi costretto a inserire il tag head. Combinare e caricare i caratteri in modo asincrono con webfont.js significa unire file e caricare in modo asincrono con webfont.js. Lascialo così com'è, in altre parole se il sito ha Google Fonts verrà scaricato. Scelta personale: spuntata.
- Preconnessione a domini di terze parti (utenti avanzati): questa opzione prevede la preconnessione a un dominio di terze parti. Esegue ricerche DNS e protegge le connessioni in parallelo tra molte risorse di terze parti, riducendo così la latenza. Puoi imparare meccanismi più simili come prefetch e preload.
- Async Javascript-files (utenti avanzati) : questa opzione gestisce il caricamento dei file JS in modo asincrono. Se hai dei file che devono essere scaricati in modo asincrono, includili qui, inclusi quelli locali e di terze parti.
- Ottimizza i video di YouTube : ciò richiede l'installazione di plug-in aggiuntivi. Aiuta i video di YouTube a ritardare il caricamento aumentando così la velocità di caricamento della pagina. Tuttavia, adatto solo se il tuo video non è in cima alla pagina (consigliato solo se è al centro o in fondo alla pagina). Leggi di più su un altro modo per ritardare i download di video qui. Puoi fare riferimento a come utilizzare il plug-in WP YouTube Lyte qui.
Ulteriore ottimizzazione / nessun limite finale
È qui che l'autore di Autoptimize "fa soldi" fornendo prodotti "affiliati" che ottimizzano ulteriormente il sito, questi includono:
- Autoptimize Pro Support: il pacchetto di supporto premium di Autoptimize per velocizzare il tuo sito web. I prezzi partono da 99 euro.
- WP Rocket Questo è un plugin a pagamento per creare cache che aiuta a velocizzare il sito Web, che è molto apprezzato da molte persone. I blog personali potrebbero trovarlo costoso, ti consiglio se vuoi risparmiare denaro, sostituirlo con il plug-in WP Super Cache o Cache Enabler. Combinandolo con Autoptimize funziona bene.
- ShortPixel è un plugin che aiuta a comprimere le immagini.
- Criticalcss.com è una soluzione premium per CSS above-the-fold (alias CSS critici, per evitare CSS che bloccano il rendering).
- Siteground è una soluzione di hosting ottimizzata per WordPress. Suggerisco di aggiungere Closte, Linode, UpCloud, DigitalOcean, Vultr e KnownHost.
- Astra è una soluzione tematica ottimizzata per le prestazioni. Mi piace molto questo tema dell'acceleratore, anche la sua versione gratuita ha molti utenti. In generale, tuttavia, GeneratePress ha il sopravvento su Astra.
- In definitiva KeyCDN è una soluzione che utilizza un CDN per migliorare la velocità di caricamento della pagina attraverso un server distribuito a livello globale. Tuttavia, attualmente KeyCDN (2020) non ha un server in Vietnam, quindi possiamo sostituirlo con CDNSun, il prezzo è simile e ci sono 2 PoP ad Hanoi e Saigon (vedi il manuale CDNSun in questo). Inoltre, puoi utilizzare Cloudflare se vuoi velocizzare il web con un host situato al di fuori del Vietnam, questa è una soluzione conveniente, di buona qualità e soprattutto l'installazione è molto più semplice rispetto ad altri siti Web. altri servizi. servizi CDN tradizionali. In realtà, ho utilizzato la versione a pagamento di CloudFlare (piano da 20 USD al mese) e sono abbastanza soddisfatto (vedi la guida per l'utente di Cloudflare qui), ma è giusto dire che se sei abbastanza esperto da ottimizzare la CDN secondo lo stile tradizionale sarebbe meglio. PS: Sebbene Cloudflare abbia PoP in Vietnam, in effetti gli utenti non possono ancora scaricare risorse da qui, puoi fare riferimento a questo articolo per maggiori dettagli.
Conclusione
Autoptimze è un ottimo strumento per aiutarti a migliorare la velocità di caricamento della pagina. Le sue opzioni sono molto approfondite. E se sei abile nella personalizzazione, i risultati saranno impressionanti.
Autoptimize è anche un ottimo plug-in kBlood per plug-in di memorizzazione nella cache gratuiti, come Cache Enabler. Non dovrai spendere soldi extra per utilizzare i plug-in per la creazione di pagine statiche a pagamento.
Ora per la prova finale. L'attivazione automatica determina la velocità di caricamento della pagina. Userò il test A/B, un lato non sta usando Autoptimize, l'altro sta usando in condizioni equivalenti (stesso server, stessa interfaccia, stesso contenuto ecc., stesso ambiente cioè stessa condizione. ambiente)).
Userò lo strumento GTmetrix per testare la velocità del sito web. Nel video qui sotto, il riquadro di sinistra è il Web senza Autoptimize installato. Nel riquadro di destra è installato Autoptimize. Il test di velocità è stato eseguito 5 volte di seguito, i risultati hanno mostrato che in tutti i casi il sito Web con Autoptimize installato ha vinto tutti e 3 i fattori: velocità di caricamento della pagina, dimensione della pagina e numero di connessioni. Più basse sono queste statistiche, meglio è
