Condividi su facebook
Condividi su linkedin
Condividi su twitter
Condividi su pinterest
Condividi su google

Contenuti

L'ottimizzazione di WordPress potrebbe sembrare un compito arduo. Il posizionamento dei plugin rompe tutto. Può diventare un disastro molto rapidamente. Alcuni plugin per la qualità delle immagini rendono le immagini brutte, piccole, inutilizzabili. Finisci per perdere la qualità del sito web per le prestazioni. Non preoccuparti, ti insegneremo passo passo come ottimizzare wordpress e dove stare attento.

Requisiti

  1. Ottimizzazione automatica. Ottieni il plugin Qui
  2. Cache LiteSpeed installata sul tuo server (opzionale)
  3. PerfMatters. Ottieni plugin Qui
  4. ShortPixel (puoi usare Litespeed per sostituire questo plugin)

Ti consiglio caldamente di utilizzare questo plugin per ottimizzare il tuo sito WordPress. Possono essere estremamente utili e ottimizzare le pagine del tuo sito web a un costo contenuto.

ATTENZIONE: questo potrebbe danneggiare il tuo sito WordPress. Crea una sandbox per provare queste impostazioni prima di applicarle a un sito Web in esecuzione.

Ottimizzazione automatica

Autooptimize è il miglior plugin per generare CSS critici, il che significa che rimuoverà la maggior parte delle parti inutili nei codici CSS. Inoltre ottimizza i codici JS e li minimizza.

Opzioni JavaScript

Alcune opzioni potrebbero danneggiare il tuo sito web. Ho posizionato con i colori le impostazioni che probabilmente vorrai applicare al tuo sito web. Quelle verdi hanno meno probabilità di rompere il tuo sito web e quelle rosse hanno maggiori probabilità di farlo. Se sai che il tuo sito web non funziona, controlla il file .js che è danneggiato e prova ad aggiungerlo a "escludi dall'ottimizzazione automatica". Questo risolverà la maggior parte dei problemi.

Aggregare anche JS in linea?
File JS aggregati? Aggregare tutti i file JS collegati per caricarli senza blocco di rendering? Se questa opzione è disattivata, i singoli file JS rimarranno al loro posto ma verranno minimizzati.
Aggregare anche JS in linea? Lascia che Autoptimize estragga anche JS dall'HTML. avvertimento: questo può far crescere rapidamente la dimensione della cache di Autoptimize, quindi abilitalo solo se sai cosa stai facendo.
Forza JavaScript in ? Carica JavaScript in anticipo, questo può potenzialmente correggere alcuni errori JS, ma blocca il rendering JS.
Escludi gli script da Autoptimize:
Un elenco separato da virgole di script che desideri escludere dall'ottimizzazione, ad esempio "any.js, another.js" (senza virgolette) per escludere quegli script dall'aggregazione da Autoptimize. Importante: i file esclusi non minimizzati vengono comunque minimizzati da Ottimizzazione automatica a meno che l'opzione in "misc" non sia disabilitata.
Aggiungere la confezione try-catch? Se i tuoi script si interrompono a causa di un errore JS, potresti provare questo.

Opzioni CSS

Opzioni CSS

CSS incorporato e differito?
File CSS aggregati? Aggregare tutti i file CSS collegati? Se questa opzione è disattivata, i singoli file CSS rimarranno al loro posto ma verranno minimizzati.
Aggregare anche CSS in linea? Seleziona questa opzione per Ottimizzazione automatica per aggregare anche CSS nell'HTML.
Genera dati: URI per le immagini? Abilitalo per includere piccole immagini di sfondo nel CSS stesso invece che come download separati.
CSS incorporato e differito? Inline "above the fold CSS" durante il caricamento del CSS principale ottimizzato automaticamente solo dopo il caricamento della pagina. Controlla le FAQ per maggiori informazioni. Questo può essere completamente automatizzato per diversi tipi di pagine su CriticalCSS tab.
Inline tutti i CSS? L'inlining di tutti i CSS è un modo semplice per impedire al CSS di bloccare il rendering, ma generalmente non è consigliato perché la dimensione dell'HTML aumenta in modo significativo. Inoltre, potrebbe spingere i meta-tag in una posizione in cui, ad esempio, Facebook e Whatsapp non li troveranno più, interrompendo le miniature durante la condivisione.

L '"inline all css" non è consigliato perché aumenta i tempi di caricamento. Sebbene possa essere caricato "asincrono", viene caricato sulla pagina e può ritardare il tempo per la prima pittura.

Ottimizzazione HTML

Ottimizzare il codice HTML?
Tenere i commenti HTML? Abilitalo se desideri che i commenti HTML rimangano nella pagina.

Non suggerisco di non mantenere i commenti html, perché tendono a non avere alcuna funzionalità.

Ottimizzazione dell'immagine

Rendi il tuo sito molto più veloce semplicemente spuntando un paio di caselle di controllo per ottimizzare e caricare lentamente le tue immagini, incluso il supporto WebP!

Ottimizza le immaginiOttimizza le immagini al volo e servile dal CDN globale di Shortpixel. Ottieni più amore da Google e migliora la velocità di caricamento del tuo sito web ottimizzando al volo le tue immagini disponibili pubblicamente (anche nel formato immagine WebP di "prossima generazione") di ShortPixel e poi memorizzato nella cache e servito velocemente dalla rete CDN globale di Shortpixel. Iscriviti ora ricevere un bonus di 1 000 + 50% crediti per l'ottimizzazione delle immagini in più indipendentemente dal traffico utilizzato. È possibile acquistare ulteriori ottimizzazioni delle immagini a partire da $4.99.Domande? Dai un'occhiata al file Domande frequenti su ShortPixel! Funziona solo per siti / immagini che sono disponibili pubblicamente. L'utilizzo di questa funzione è soggetto a Shortpixel Termini di utilizzo e Politica sulla riservatezza.
Immagini a caricamento lento?Il caricamento lento delle immagini ritarderà il caricamento delle immagini non visibili per consentire al browser di caricare in modo ottimale tutte le risorse per la prima pagina "above the fold".

Questo dovrebbe aiutarti a configurare il tuo sito web. Facile e non molti problemi. Anche questo plugin è gratuito.

Come ho detto, assicurati di testare accuratamente. Ciò potrebbe interrompere alcune funzionalità.

Ottimizzazioni extra

Google FontsLascia com'è
Rimuovi Google Fonts
Combina e collega in testa (i caratteri si caricano velocemente ma bloccano il rendering), include display: swap.
Combina e precarica in head (i caratteri vengono caricati in ritardo, ma non bloccano il rendering), include display: swap.
Combina e carica i caratteri in modo asincrono con webfont.js
Rimuovi gli emojiRimuove il CSS in linea delle emoji principali di WordPress, JavaScript in linea e un file JavaScript altrimenti non ottimizzato automaticamente.
Rimuovere le stringhe di query dalle risorse staticheRimuovere le stringhe di query (o più specificamente il file ver parametro) non migliorerà il tempo di caricamento, ma potrebbe migliorare i punteggi delle prestazioni.

Ora viene la parte difficile. Questa parte dovrebbe essere eseguita solo se sei sicuro di quello che stai facendo.

Vai su tools.pingdom.com e prova il tuo sito web.

Facile guida per ottimizzare Wordpress in meno di 1 ora. 1

Vedrai qualcosa del genere. Ora, questo ti dirà quali collegamenti, se ce ne sono, dovresti riconnetterti o dns prefetch. Questo è un buon esempio, perché il nostro sito web si ricollega solo ai caratteri di Google. Ciò significa che verrà utilizzato meno tempo per effettuare ricerche DNS su altri siti Web. In questo caso non è molto rilevante ma in questo esempio potrei mettere:

fonts.gstatic.com, fonts.googleapis.com

Assicurati anche di ascoltare gli approfondimenti sulla velocità di Google in quanto ti dirà se è necessario precaricare una richiesta. Se ti suggeriscono di precaricare qualsiasi .js o .css, inseriscilo in "Precarica richieste specifiche" e digitalo. Nel mio caso, inserirò il carattere come suggeriscono che venga caricato per primo per migliorare il tempo di primo rendering.

Uno dei vantaggi aggiuntivi dell'utilizzo dell'ottimizzazione automatica è che ti dà l'opportunità di generare file di cache. Questo può creare molti file, quindi assicurati che sia utile per il tuo sito web. Inoltre, ogni volta che elimini la cache, ci vorrà di più per caricare il tuo sito web. Se hai molte visite al tuo sito web, questo può farlo andare in crash e utilizzare quantità anomale di CPU.

Perfmatters

Questo plugin costa. Ma ne vale assolutamente la pena.

Opzioni

Seleziona le opzioni relative alle prestazioni che desideri abilitare.

Disattiva gli emojiAbilitare
Disabilita incorporamentiAbilitare
Rimuovi le stringhe di queryAbilitare
Disabilita XML-RPCAbilitare
Rimuovi jQuery MigrateAbilitare
Nascondi versione WPAbilitare
Rimuovi wlwmanifest LinkAbilitare
Rimuovi RSD LinkAbilitare
Rimuovi ShortlinkAbilitare
Disattiva i feed RSSAbilitare
Rimuovere i collegamenti ai feed RSSAbilitare
Disabilita i self pingbackAbilitare
Disabilita l'API RESTAbilitare
Rimuovere i collegamenti API RESTAbilitare
Disabilita DashiconAbilitare
Disabilita Google MapsAbilitare
Disattiva Google FontsAbilitare
Disattiva il misuratore di forza della passwordAbilitare
Disabilita commentiAbilitare
Rimuovi gli URL dei commentiAbilitare
Caricamento pigroBETAAbilitare
Usa NativeAbilitare
Disabilita battito cardiacoPredefinito Disabilita ovunque Consenti solo durante la modifica di articoli / pagine
Frequenza del battito cardiaco15 secondi (impostazione predefinita) 30 secondi 45 secondi 60 secondi
Limita le revisioni dei postDefaultDisable Post Revisions123451015202530
Intervallo di salvataggio automatico1 minuto (impostazione predefinita) 2 minuti 3 minuti 4 minuti 5 minuti
Modifica l'URL di accessoPotrebbe essere utile per motivi di sicurezza.

Questo dipenderà molto dal tuo sito web. Se hai Google Maps o non hai bisogno dei caratteri di Google, fai come è meglio per il tuo sito web. Allo stesso modo testare accuratamente e assicurarsi che non influisca su alcuna funzionalità.

Nella scheda Extra abilitare il "gestore di script".

Questa parte è molto utile, perché in Google ricevi spesso un avviso che dice "rimuovi i file css che non vengono utilizzati" o "rimuovi i file js che non vengono utilizzati"

Facile guida per ottimizzare Wordpress in meno di 1 ora. 2

In questo esempio, vedi alcuni file che sono quasi totalmente inutilizzati. Dicono che ha un possibile risparmio di 10,3 su 10,6 KB, questo significa che è probabilmente sicuro da rimuovere. Fai un test accurato quando lo fai. Perfmatters ci aiuta qui perché puoi disabilitarli direttamente.

Vai a http://yourwpdomain.com/yourwpdirectory/fileyouwanttoedit? perfmatters

o semplicemente aggiungi ? perfmatters alla pagina che desideri ottimizzare.

Qui vedrai gli script che si stanno caricando.

Facile guida per ottimizzare Wordpress in meno di 1 ora. 3

Alcuni avranno le seguenti informazioni:

Facile guida per ottimizzare Wordpress in meno di 1 ora. 4

Lì puoi abbinarlo ai suggerimenti di Google di .css inutilizzati. Disabilita tutti i CSS inutilizzati che ritieni non influenzeranno il tuo sito web. Fallo anche con i file .js. Ma come ho detto prima, devi praticamente controllare l'impostazione per impostazione e pagina per pagina per vedere quale funziona e quale no. Questo plugin rimuoverà tutti i file .js e .css inutilizzati che aumenteranno notevolmente le tue prestazioni.

Shortpixel - Ottimizzazione dell'immagine

Shortpixel è uno dei migliori ottimizzatori di immagini sul mercato. Queste sono le mie impostazioni:

ottimizzazione dell'immagine shortpixel

Nel mio caso personale, tengo molto alla qualità dell'immagine. Di conseguenza, decido di ridimensionare le mie immagini a 1025 × 1024. La maggior parte delle impostazioni presentate qui saranno estremamente utili per il tuo sito web.

Nelle impostazioni della pagina avanzate ti suggerisco di abilitare queste opzioni:

Conversione da CMYK a RGB Regola i colori delle tue immagini per la visualizzazione dello schermo del computer e del cellulare. Le immagini per il Web necessitano solo del formato RGB e la conversione da CMYK a RGB le rende più piccole.
Immagini WebP:Fornisci le versioni WebP delle immagini nel front-end:
Crea anche Versioni WebP delle immagini, gratuito.
 Usando il sintassi dei tag
 Globale (elabora l'intero buffer di output prima di inviare l'HTML al browser)
Ottimizza le immagini Retina Ottimizza anche le immagini Retina (@ 2x) se esistono.Se hai un plug-in Retina che genera immagini specifiche per Retina (@ 2x), ShortPixel può ottimizzarle anche, insieme alle normali immagini e miniature della Media Library.  Ulteriori informazioni 
Ottimizza gli altri pollici Ottimizza anche le miniature non elencate se trovate. Alcuni plugin creano miniature che non sono registrate nei metadati ma le creano solo insieme alle altre miniature. Lascia che anche ShortPixel li ottimizzi. 
Ottimizza i PDF Ottimizza automaticamente i documenti PDF.

Dovresti stare molto attento se vuoi abilitare "Converti immagini PNG in JPEG" perché a volte può manomettere le immagini che desideri con uno sfondo trasparente.

Dovresti anche abilitare questi:

Ottimizza i media durante il caricamento Ottimizza automaticamente gli elementi della libreria multimediale dopo che sono stati caricati (consigliato). Per impostazione predefinita, ShortPixel ottimizzerà automaticamente tutte le immagini ei file PDF appena caricati. Se lo deselezioni, dovrai eseguire Bulk ShortPixel o andare su Libreria multimediale (nella visualizzazione elenco) e fare clic sul pulsante / i "Ottimizza ora" sul lato destro. 
Processo in front-end Ottimizza automaticamente le immagini aggiunte dagli utenti nel front-end. Seleziona questa opzione se hai utenti che aggiungono immagini o documenti PDF da moduli personalizzati nel front-end. Ciò potrebbe aumentare il carico sul tuo server se hai molti utenti connessi contemporaneamente.

LiteSpeed Cache

Questo plugin dovrebbe essere usato solo se hai un server Litespeed. Riduce drasticamente i tempi di risposta.

Vai a Cache e abilita tutte le impostazioni su "Impostazioni controllo cache". Abilita ugualmente le impostazioni di controllo della cache. Per ulteriori informazioni dovresti andare al Sito web di Litespeed.