Automattic ha pre-rilasciato un plug-in progettato per affrontare il difficile lavoro di ottenere migliori punteggi per le metriche Core Web Vitals di Google. Il plugin è attualmente in fase di test e non è pensato per essere utilizzato su siti di produzione live.
Il plugin Jetpack Boost è disponibile nel repository ufficiale dei plugin di WordPress.org, attualmente nella versione 0.9.19. Potrebbe essere disponibile in una versione completa della versione 1.0 entro la prossima settimana circa.
Jetpack Boost continuerà ad essere gratuito, comprese nuove funzionalità che potrebbero essere aggiunte in futuro. Potrebbero esserci anche funzionalità premium aggiuntive che automatizzano determinate funzioni, ma l’obiettivo del plug-in è di essere utile, indipendentemente dal fatto che si tratti della versione gratuita o premium.
Jetpack Boost
Secondo Automattic, la versione del plugin attualmente in rilascio non è pensata per un sito di produzione live. È attualmente disponibile per il download come software pre-rilascio a scopo di test su un sito di test. È un software in fase alpha pronto per essere testato.
L’obiettivo di Jetpack Boost è fornire una soluzione semplice per dare ai siti Web di WordPress una spinta nelle metriche dell’esperienza utente relative alla velocità e ai principali parametri vitali del web.
Alcuni plugin di WordPress progettati per migliorare le metriche di velocità richiedono conoscenze tecniche non alla portata di tutti per essere utilizzati al massimo delle loro potenzialità.
Jetpack Boost, tuttavia, è pensato per essere una soluzione semplice clic per velocizzare un sito con un clic. Sebbene l’attuale versione alpha accelererà tre aree, Boost potrebbe espandersi a più funzionalità, man mano che gli sviluppatori riceveranno più feedback.
Caratteristiche del plugin Jetpack Boost
Il nuovo plug-in per l’ottimizzazione della velocità del sito Web Jetpack Boost ha tre caratteristiche principali che potranno crescere per includerne altre.
- CSS critico locale
- Rimanda il JavaScript non essenziale
- Caricamento lento delle immagini
1. CSS critico locale
Il CSS (Cascading Style Sheets) è un codice (istruzioni) che indica al browser come applicare uno stile a una pagina web. Il CSS gestisce la larghezza di una pagina web, i colori usati per i caratteri, determina la dimensione delle immagini e essenzialmente tutto ciò che ha a che fare con l’aspetto che una pagina web deve avere.
Un CSS, però, è anche una risorsa che blocca il rendering. Ciò significa che una pagina web non può essere visualizzata (resa dal browser) fino a quando il CSS non è stato completamente scaricato e reso disponibile al browser.
Critical CSS è una tecnica per creare la percezione di una pagina Web a caricamento rapido estraendo il CSS che è fondamentale per visualizzare il contenuto above the fold (ciò che gli utenti vedono inizialmente senza scorrere far scorrere la pagina) e incorporandolo (il che significa posizionare il CSS all’interno del codice della pagina Web stesso rispetto aun file separato).
Il modulo CSS critico locale utilizza anche l’attributo asinc in modo che il file CSS stesso non blocchi il rendering della pagina Web da parte del browser.
L’eliminazione delle risorse che bloccano il rendering aiuta una pagina web a ottenere un punteggio migliore con varie metriche sull’esperienza della pagina Google.
L’eliminazione delle risorse che bloccano il rendering è un modo importante per migliorare l’esperienza utente e ottenere migliori punteggi Core Web Vitals.
2. Rimanda JavaScript non essenziale
Defer, in questo caso, è un riferimento a un attributo JavaScript.
In HTML, un elemento è come un blocco costitutivo di base di una pagina Web, come l’elemento JavaScript, l’elemento Paragraph (che denota un paragrafo di testo) o l’elemento Link.
Un attributo è qualcosa che modifica un elemento HTML. Ad esempio, con l’elemento Link (un elemento costitutivo di una pagina web) l’attributo Link “nofollow” modifica il comportamento di un collegamento dicendo ai motori di ricerca di non seguire il collegamento.
Per l’elemento JavaScript, esiste un elemento defer. L’elemento defer dice al browser di continuare a costruire la pagina web mentre scarica simultaneamente il JavaScript ma di non eseguire il JavaScript fino a quando la pagina web non è stata scaricata e resa in altro modo.
L’attributo defer è utile per JavaScript correlato a elementi della pagina Web non critici, come un video che si trova nella parte inferiore della pagina Web (below the fold).
Jetpack Boost rimanderà JavaScript non critico.
Ecco come lo descrive la pagina web ufficiale del plugin Jetpack Boost:
“Defer Non-Essential Javascript sposta alcune attività dopo il caricamento della pagina, in modo che le informazioni visive importanti possano essere visualizzate prima.”
3. Caricamento lento delle immagini
Il caricamento lento (lazy load) consente di scaricare una pagina Web senza dover scaricare ogni singola immagineprima di visualizzarla. Quello che fa è scaricare le immagini che si trovano nella visualizzazione di una schermata del browser, dove il visitatore del sito può vederle.
Facilità di utilizzo
Jetpack Boost è progettato per essere estremamente facile da usare. Tutto ciò che deve essere fatto è installare il plugin e attivare i moduli necessari.
Avvertenza: come accennato in precedenza, questa è una versione alpha del plug-in, un’anteprima pre-rilascio pensata per scopi di test su un sito Web che non è attivo sul Web.
I publisher con molto JavaScript personalizzato potrebbero dover controllare che il modulo Defer JavaScript non interrompa il loro JavaScript.
Detto questo, Jetpack Boost rilascerà presto la versione 1.0, entro un paio di settimane o prima, a quanto riferisce il sito di Automattic.
In futuro potrebbero essere aggiunte ulteriori funzionalità al plug-in. Finora, Jetpack Boost sembra un plug-in promettente per l’ottimizzazione della velocità di un sito Web.
