Come ottimizzare la consegna CSS in WordPress con poca fatica

I CSS possono migliorare l’aspetto generale del tuo sito web ed è facile da usare, modificare e mantenere. L’unico svantaggio è la possibilità di rallentare la velocità di caricamento della pagina. Pertanto questo articolo creato dal nostro team di WpDataTables, ti mostrerà come ottimizzare la consegna CSS in WordPress.

Se il CSS non viene fornito correttamente, il browser dovrà elaborare e scaricare i dati prima di aver terminato il rendering della tua pagina. Ciò significa che i visitatori sperimenteranno un ritardo nella visualizzazione della tua pagina e potrebbero fare clic su di essa, perché sembra che non si stia caricando. Da qui l’importanza di ottimizzare la consegna CSS, quindi continua a leggere per imparare come evitare le insidie ​​che potrebbero rallentare la tua pagina web.

Tutto sulla consegna CSS

Fondamentalmente, CSS, un foglio di stile a cascata, rende i siti Web attraenti e, senza di essi, i siti Web sarebbero ancora bloccati negli anni ’90.

Le pagine Web, comprese le pagine Web di WordPress, sono in stile CSS. Ogni tema WordPress utilizza un file style.cc per creare un aspetto elegante. L’aggiunta di plug-in aggiungerà più fogli di stile, ad esempio, se si scarica un plug-in widget, verrà aggiunto un file CSS aggiuntivo (foglio di stile) per creare l’aspetto desiderato.

Gli script CSS vengono caricati prima che il tuo sito sia visibile, il che significa che il tuo browser non mostrerà alcun contenuto fino a quando le informazioni CSS fornite non saranno elaborate. .Ciò si traduce in un blocco del rendering che si verifica quando un browser sta caricando tutti gli script CSS prima di mostrare un sito.

I CSS possono essere utilizzati in diversi modi per la consegna in WordPress, con molte configurazioni diverse.

Indipendentemente da come hai impostato la tua pagina web, i CSS possono effettivamente aiutarti a rendere il tuo sito più veloce.

JavaScript e CSS che bloccano il rendering: che cos’è?

I siti a caricamento rapido sono previsti nella nostra società high-tech ed è fondamentale per una SEO di alto livello. PageSpeed ​​Insights di Google può aiutarti a capire la velocità di caricamento del tuo sito. A volte viene visualizzato un avviso quando si utilizza lo strumento: "Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold", ma ecco una soluzione a questo problema.

Il rendering dell’HTML è necessario prima che un browser possa mostrare qualsiasi pagina web. Mentre lo fa, si imbatterà in script e fogli di stile e dovrà fermarsi per richiedere e scaricare quel file. Quindi lo esegue e continua a scorrere l’HTML. La maggior parte dei temi e dei plugin per WordPress utilizza molti file JavaScript e/o CSS, il che può richiedere molto tempo per il rendering anche di una pagina del tuo sito.

Ciò impedisce ai visitatori del tuo sito di vedere rapidamente le informazioni delle pagine Web e, a peggiorare le cose, non è necessario caricare immediatamente questi script.

Questi file non necessari sono noti come CSS e JavaScript che bloccano il rendering. Continua a leggere per scoprire cosa sono e come eliminarli dal tuo sito WordPress.

Usa Google Pagespeed Insights per scoprire CSS e JavaScript che bloccano il rendering

I browser a caricamento lento di solito cercano di elaborare una quantità significativa di codice CSS e quindi non possono eseguire il rendering della pagina, tuttavia, non tutte le risorse CSS bloccano il rendering.

I siti web vengono visualizzati come vuoti o visibili solo in parte se il CSS è stato caricato in modo errato o se il CSS non è ottimizzato, il che può comportare font o layout errati.

È importante capire quali elementi sono necessari e quali no, al fine di ottimizzare l’erogazione dei CSS.

Per avviare il processo di blocco del rendering, verifica innanzitutto la velocità del tuo sito con Google PageSpeed ​​Insights.

Ecco come:

• Vai alla pagina di Google PageSpeed ​​Insights
• Copia e incolla l’URL del nostro sito nell’apposito campo
• Premi "Analizza"
• Ciò risulterà in un rapporto. Nota gli script che vengono visualizzati come "Elimina JavaScript e CSS che bloccano la visualizzazione"

Di solito, questi CSS sono fondamentali per il tuo sito:

• Stili di pagina above the fold
• Temi
• Colore dello sfondo
• Altri, a seconda del tipo di sito

Questi CSS sono generalmente meno importanti:

• Sotto la piega CSS
• CSS rivolto ad altri dispositivi

Riduci gli script di blocco del rendering

È possibile ridurre al minimo il numero di script di blocco del rendering che hai sul tuo sito, in questo modo:

• Ridurre la quantità di CSS e JavaScript. Puoi eliminare qualsiasi spazio bianco e commenti non necessari
• Combinando CSS e JavaScript. Prendi diversi file .css e .js e aggiungili insieme, il che risulterà in un minor numero di file.
• Rinviare il caricamento di JavaScript. Potresti farli caricare per ultimi dopo che tutto il resto è stato caricato, usando il caricamento asincrono.

WordPress utilizza un filtro combinato per la registrazione degli script front-end, così puoi vedere i file CSS o JavaScript in entrata. Potresti non sapere cosa cercare, quindi usare un plugin è utile.

lIl CSS non è sempre necessario su tutte le pagine. Tuttavia, c’è un motivo e lo utilizzerai tutto in una fase, ed è qui che è richiesto un percorso di rendering critico.

Diverse parti del CSS potrebbero essere richieste da una pagina Contattaci e da una pagina Servizi che offriamo. Quando qualcuno carica la pagina dei servizi che offriamo, le parti CSS che sono solo per la pagina Contattaci non sono richieste in quel momento, tuttavia, quel CSS è ancora caricato, perché il webmaster ha bisogno di tutti i file CSS caricati per eseguire il rendering della pagina web.

Pertanto, il sito web necessita di tutti i CSS, ma non di tutti i CSS per ogni singola pagina. Pertanto, il CSS critico è diverso su ogni pagina e per ogni utente del tuo sito.

CSS e JavaScript che bloccano il rendering above the fold sono un problema serio e devono essere risolti il ​​prima possibile.

Non è realistico aspettarsi che il tuo sito ottenga un punteggio di 100/100, quindi punta a un buon punteggio che dia ai tuoi visitatori una pagina di caricamento veloce.

Non rimuovere gli script necessari per una buona UX; questi sono più importanti che cercare di ottenere un punteggio più alto.

Ottimizzazione del percorso di rendering critico in WordPress

Il percorso di rendering critico indica l’ordine in cui il browser esegue le attività per il rendering della pagina, ovvero la sequenza in cui scarica ed elabora CSS, HTML e JavaScript e li mostra sul browser.

Il contenuto above the fold è importante perché questa è la prima parte che l’utente vedrà. C’è più tempo per caricare il contenuto below the fold, poiché l’utente dovrà scorrere per vederlo.

Per caricare la sezione above the fold il più velocemente possibile, è necessario:

• Crea l’HTML in modo che dia la priorità al caricamento delle parti above the fold
• Riduci al minimo i dati utilizzati da CSS, JS e HTML

Ulteriori spiegazioni possono essere trovate nella guida PageSpeed ​​di Google. A volte i dati necessari per caricare l’ATF sono più della finestra di congestione (pari a 14,6 kb). In questo caso, è necessario che si verifichino più viaggi di rete dal server al browser e viceversa. Le reti mobili che hanno un’elevata latenza scopriranno che ciò impedisce il caricamento della pagina.

Il DOM viene creato una parte alla volta dal browser, il che può ridurre il tempo necessario per eseguire il rendering dell’ATF. Struttura l’HTML in modo che il contenuto above the fold venga caricato prima e il resto della pagina in seguito.

Il processo di ottimizzazione richiede miglioramento, monitoraggio e misurazione continui.

Sebbene i CSS possano essere utilizzati in diversi modi per creare pagine Web eleganti, la cosa più importante è che si carichi velocemente. Pulisci il codice e segui i passaggi precedenti per caricare le tue pagine più velocemente.

Se ti è piaciuto leggere questo articolo su come ottimizzare la consegna CSS in WordPress, dovresti dare un’occhiata a questo su come aggiungere meta tag in WordPress senza un plug-in.

Abbiamo anche scritto di alcuni argomenti correlati come come incorporare un pdf in WordPress, come incorporare Excel in html, come nascondere un’immagine in primo piano in un post di WordPress, come capire se un sito è WordPress, come disinstallare WordPress da cPanel e come creare un sito web come Amazon.