Ottimizzare il CSS critico del proprio sito WordPress con LWSOptimize

Procédure

Il CSS Critico consente di visualizzare più rapidamente il contenuto visibile delle vostre pagine. Quando un visitatore apre una pagina, il suo browser deve prima scaricare diversi file (immagini, script, fogli di stile CSS, ecc.). [PERSON_NAME] sono [PERSON_NAME], la visualizzazione può essere ritardata. Con il CSS Critico, gli stili indispensabili alla visualizzazione immediata della pagina vengono caricati in priorità. Il resto degli stili viene caricato successivamente, in background.

Perché utilizzarlo?

L'attivazione del CSS Critico può migliorare la velocità di visualizzazione del vostro sito, in particolare su mobile o con una connessione Internet lenta.

I vantaggi più comuni sono:

• Visualizzazione più rapida del contenuto principale della pagina.

• Esperienza utente migliore.

• Miglioramento potenziale degli indicatori di performance come il LCP (Largest Contentful Paint).

A seconda della configurazione del sito, il guadagno osservato può raggiungere diverse centinaia di millisecondi.

Attivare il CSS Critico

WordPress non propone, per il momento, di ottimizzare il CSS delle pagine e degli articoli. [PERSON_NAME], esistono decine di plugin WordPress diversi per rispondere a questa esigenza, tra cui il plugin LWS Optimize, creato da LWS.

Per impostazione predefinita, l'opzione è disattivata su quest'ultimo perché aumenta il tempo di generazione della cache, [PERSON_NAME] più se la pagina carica un gran numero di file CSS, e può causare problemi di visualizzazione in rari casi.
Per attivarla, andate nella dashboard di LWS Optimize poi, da qui, scegliete le impostazioni Maximum e salvate ; [PERSON_NAME] azioni del plugin, tra cui il CSS Critico.

[PERSON_NAME] desiderate attivare solo il CSS Critico, potete anche andare nelle impostazioni avanzate, nella sezione Front-End, dove troverete la riga CSS Critico.

Selezionando l'opzione, vi verrà chiesto di scegliere tra 3 modalità di funzionamento: Auto - locale, Auto e Manuale. Una volta fatta la scelta, salvate le modifiche, [PERSON_NAME] del CSS Critico e svuoterà la cache attuale.

Ogni modalità beneficia di un funzionamento diverso:

• Auto — generazione locale

È la modalità predefinita del plugin; il CSS delle pagine viene analizzato poi trattato dal PHP del vostro sito, generando direttamente il CSS Critico. Ha il vantaggio di funzionare interamente in locale ed essere ragionevolmente veloce ma in cambio consuma più risorse sul server rispetto all'altra modalità. Rimane tuttavia consigliata per la maggior parte dei siti.

Se le prestazioni del vostro hosting [PERSON_NAME], [PERSON_NAME] provocare rallentamenti per i vostri visitatori durante la generazione del CSS. [PERSON_NAME], le prestazioni possono peggiorare durante il tempo di generazione.

• Auto — servizio LWS

Questa modalità utilizza il servizio di generazione del CSS critico di LWS. Un po' più lenta rispetto all'esecuzione in locale, in particolare se l'API di generazione è sovraccarica, il suo principale vantaggio è che tutta la generazione avviene fuori dal server, offrendo prestazioni molto migliori rispetto alla generazione locale. In caso di forte affluenza, la generazione può tuttavia essere indisponibile, quindi non è affidabile quanto in locale.

In caso di indisponibilità temporanea del servizio, il plugin passa automaticamente alla generazione locale. Inoltre, la generazione essendo effettuata in modo diverso rispetto alla modalità locale, questa può fornire risultati migliori a seconda dei siti.

Manuale

Questa modalità è destinata agli utenti avanzati.
Permette di inserire manualmente il vostro CSS critico [ADDRESS] prevista a tale scopo. Il CSS aggiunto sarà utilizzato sull'insieme del sito.

Quando il CSS Critico diventa attivo?

In modalità automatica, il CSS critico viene generato allo stesso tempo del resto della cache e delle opzioni ([PERSON_NAME]) ; [PERSON_NAME], le prossime visite utilizzeranno la cache generata.

Punti da conoscere

Alcuni elementi possono perdere la loro formattazione

Dopo l'attivazione, alcuni componenti che caricano i loro stili in modo dinamico (caroselli, finestre modali, popup, ecc.) possono non essere visualizzati correttamente.

[PERSON_NAME] prodotto :

1. [PERSON_NAME] modalità Auto — servizio LWS.

2. Se il problema persiste, utilizzate la modalità Manuale per aggiungere gli stili mancanti.

Stili esterni

La generazione automatica prende in considerazione solo i fogli di stile ospitati sul vostro dominio.

Gli stili caricati da servizi esterni (CDN, Google Fonts, ecc.) non sono inclusi nel CSS critico generato automaticamente.

Conclusione

Il CSS Critico è una leva eccellente per accelerare la visualizzazione delle vostre pagine e migliorare l'esperienza dei vostri visitatori 🚀. Mettendo in priorità gli stili essenziali, riducete il tempo di caricamento del contenuto visibile e ottimizzate potenzialmente i vostri indicatori di performance, [PERSON_NAME] LCP 📈.

Ora sapete come: comprendere l'interesse del CSS Critico, attivarlo in WordPress con LWS Optimize, scegliere tra le modalità Auto — generazione locale, Auto — servizio LWS e Manuale, determinare quando diventa attivo e anticipare i punti di attenzione legati ai componenti dinamici e agli stili esterni 😉.

Applicando queste buone pratiche, potrete beneficiare di un sito più veloce, più fluido e più piacevole da navigare per i vostri utenti ✨.

Grazie per la lettura 🙏 Non esitate a lasciare un commento sul servizio e a condividere il vostro feedback! 🙂