Seguici su Telegram, ne vale la pena ❤️ ➡ @trovalost
domenico loia hGV2TfOh0ns unsplash

Generazione del CSS critico: come funziona e a che cosa serve

di

Il CSS critico, anche conosciuto come “above-the-fold CSS” o “inline CSS”, è una tecnica di ottimizzazione per il caricamento delle pagine web che mira a renderizzare rapidamente la parte visibile della pagina, riducendo così il tempo di caricamento iniziale. Ti darò un esempio pratico di come generare il CSS critico per una pagina web. Il CSS critico , è il CSS minimo necessario per renderizzare la parte visibile della pagina web. L’obiettivo è ridurre il tempo necessario per visualizzare il contenuto principale della pagina senza dover attendere il caricamento completo di tutti gli stili CSS. Il processo è indispensabile per effettuare operazioni come l’ottimizzazione del Pagespeed Insights, oppure risolvere il problema di LCP di un sito.

Come viene generato passo passo il critical CSS

Ecco una procedura passo-passo per generare il CSS critico:

  1. Identificare la parte visibile della pagina: Questo include l’header, la navigazione, il contenuto principale iniziale, e qualsiasi altro elemento critico che deve essere reso visibile all’utente immediatamente.
  2. Analizzare il CSS esistente: Guarda il file CSS che stai utilizzando per la tua pagina web. Identifica quali regole CSS sono strettamente legate alla parte visibile della pagina. Questi possono includere stili per l’header, la navigazione, i primi paragrafi di testo, ecc.
  3. Estrarre il CSS critico: Prendi le regole CSS identificate al punto precedente e creane una versione separata. Questo sarà il tuo CSS critico. Rimuovi tutti gli altri stili che non sono essenziali per la resa iniziale della pagina.
  4. Incorpora il CSS critico nella pagina HTML: Includi il CSS critico direttamente all’interno del tag <style> nella sezione <head> del tuo documento HTML. Questo assicura che il CSS critico venga caricato e applicato prima di qualsiasi altro CSS esterno.
  5. Caricamento del CSS non critico: Carica il resto del CSS non critico in modo asincrono o in modo differito (ad esempio, tramite JavaScript) dopo che la pagina è stata visualizzata. Questo permette al browser di visualizzare rapidamente la parte visibile della pagina, mentre gli stili non critici possono essere caricati in background.
  6. Test e ottimizzazione: Verifica che la pagina si visualizzi correttamente con il CSS critico. Se necessario, apporta modifiche ai CSS critici per garantire una resa visiva appropriata. Assicurati anche che il caricamento asincrono del CSS non critico funzioni come previsto.

Ci sono vari strumenti e librerie disponibili online che possono automatizzare questo processo, consentendo di generare il CSS critico in modo più efficiente. Alcuni esempi includono Critical CSS Generator, Penthouse, e molti altri. Utilizzando questi strumenti, è possibile generare automaticamente il CSS critico per una pagina web specificata, risparmiando tempo e sforzo nell’ottimizzazione delle prestazioni del caricamento della pagina.

Algoritmo del critical path (CSS)

Il “Critical Path CSS” è una parte del CSS critico che include solo gli stili necessari per il rendering iniziale della parte visibile di una pagina web. In altre parole, rappresenta l’insieme minimo di regole CSS richieste per visualizzare correttamente il contenuto sopra la piega (ovvero la parte visibile della pagina senza scorrere) senza dipendere da risorse esterne o ritardate.

Il termine “Critical Path” deriva dal concetto di “Critical Rendering Path”, che rappresenta la sequenza di operazioni necessarie per renderizzare una pagina web nel browser. Questo percorso critico include il caricamento e l’analisi del markup HTML, il caricamento dei fogli di stile CSS, l’elaborazione del DOM (Document Object Model) e il rendering delle risorse visibili.

Il Critical Path CSS, quindi, si concentra sull’identificare e includere solo quegli stili CSS che sono fondamentali per il rendering iniziale della pagina, eliminando tutto il resto. Questo è essenziale per migliorare le prestazioni del caricamento della pagina, specialmente su dispositivi con connessioni Internet lente o su reti mobili.

L’utilizzo del Critical Path CSS comporta generalmente i seguenti passaggi:

  1. Identificazione degli stili critici: Analisi della pagina web per identificare gli stili CSS necessari per visualizzare il contenuto sopra la piega.
  2. Estrazione dei CSS critici: Creazione di un foglio di stile separato che contiene solo le regole CSS necessarie per il rendering iniziale della pagina.
  3. Incorporazione nel documento HTML: Inclusione del CSS critico direttamente all’interno del tag <style> nella sezione <head> del documento HTML.
  4. Caricamento differito del CSS non critico: Caricamento asincrono o ritardato degli stili CSS non critici dopo che la pagina è stata visualizzata, per evitare di bloccare il rendering iniziale.

L’uso del Critical Path CSS è un’ottima pratica di ottimizzazione delle prestazioni web, poiché aiuta a ridurre il tempo di caricamento della pagina e a migliorare l’esperienza utente, specialmente su dispositivi con risorse limitate o connessioni Internet lente.

Esempio pratico

Supponiamo di avere una pagina HTML semplice come questa:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Example Page</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<h1>Welcome to our website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Us</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor libero id tortor molestie, et volutpat elit fermentum.</p>
</section>
<section>
<h2>Our Services</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla auctor libero id tortor molestie, et volutpat elit fermentum.</p>
</section>
</main>
<footer>
<p>&copy; 2024 Example Company. All rights reserved.</p>
</footer>
</body>
</html>

Il file styles.css contiene tutti i nostri stili CSS. Tuttavia, per ottimizzare il caricamento della pagina, vogliamo includere solo i CSS essenziali per il rendering iniziale della parte visibile della pagina. Possiamo fare ciò utilizzando uno strumento di generazione del CSS critico come Critical CSS Generator.

Diamo un’occhiata a un esempio di come potrebbe apparire il CSS critico per la parte superiore della pagina:

header {
background-color: #333;
color: #fff;
padding: 20px;
} nav ul { list-style: none; margin: 0; padding: 0; } nav ul li { display: inline; margin-right: 10px; } nav ul li a { color: #fff; text-decoration: none; }

Questo CSS critico include solo gli stili necessari per il rendering della parte superiore della pagina, come l’header e la navigazione. Il resto degli stili non critici verrà caricato in modo asincrono oppure, al limite, dopo il caricamento iniziale della pagina per migliorare le prestazioni complessive del caricamento della pagina.

Ricorda che la generazione del CSS critico può essere automatizzata utilizzando strumenti e librerie disponibili online, che possono analizzare la tua pagina e generare automaticamente il CSS critico per te.

Uno di questi strumenti per WordPress è Jetpack, il quale rileva e genera il CSS critico in automatico.

👇 Da non perdere 👇

Questo portale esiste da 4470 giorni (12 anni), e contiene ad oggi 7664 articoli (circa 6.131.200 parole in tutto) e 15 servizi online gratuiti. – Leggi un altro articolo a caso
Non ha ancora votato nessuno.

Ti sembra utile o interessante? Vota e fammelo sapere.

Leggi anche:
Questo sito contribuisce alla audience di sè stesso.
Il nostro network informativo: Lipercubo.it - Pagare.online - Trovalost.it.