Ottimizzare il tuo sito WordPress con SVG e base64

Uno dei miei obiettivi principali nell'ottimizzazione di un sito Web è migliorare i valori di First Contentful Paint (FCP) e First Meaningful Paint (FMP), e rendere quindi disponibile, il più velocemente possibile, il primo contenuto visibile del sito Web, che d'ora in poi chiameremo above fold.

Questa sezione è la parte più critica di ogni pagina Web. Quella che viene caricata e analizzata per prima dal browser e, di conseguenza, quella che deve essere più ottimizzata per ridurre il caricamento iniziale.

L'obiettivo di ogni sviluppatore sarebbe quello di consentire al browser di eseguire il rendering e mostrare i contenuti presente nell'above fold con il minor numero di richieste HTTP. La generazione di CSS critico e il caricamento differito di stili e script aiutano molto in questo.

Una delle tecniche simili che trovo molto efficace per ridurre il valore di FCP è l'utilizzo di immagini base64 e SVG inline.

Cosa sono le immagini Base64?

Base64 è una sorta di codifica da binario a testo. In altre parole, qualsiasi dato rappresentato come una stringa. Qualsiasi immagine può essere convertita in base64.

Un'immagine base64 in HTML si presenta così:

<img src="data:image/png;base64,..."/>

base64-image.de è un ottimo strumento per convertire le immagini in base64.

Cosa sono le immagini SVG?

SVG (Scalable Vector Graphics) è un altro formato di immagine rappresentato come codice in un formato basato su XML. È ideale per le immagini vettoriali. Solitamente i loghi e le icone sono i più indicati per questo tipo di formato.

Un'immagine SVG contiene codici e istruzioni HTML che possono tradursi in un'illustrazione o un'icona. Di conseguenza la dimensione dell'SVG è solitamente molto inferiore a JPG, PNG o Webp.

Proprio per il fatto che un SVG non è altro che codice HTML, si rivela il componente perfetto per essere inserito inline nel tuo codice risparmiando una richiesta HTTP.

Usare con cautela

Devi scegliere attentamente quali immagini devono essere inline.

Ecco alcune insidie ​​nelle immagini in linea:

  • La conversione delle immagini in base64 comporta un aumento del 30% delle dimensioni.
  • Se la dimensione della pagina HTML aumenta troppo influirà sul tuo TTFB (Time To First Byte)
  • Le immagini non possono essere inviate tramite CDN.

Indipendentemente da tutto ciò, ci sono alcune situazioni in cui inserire immagini inline è fondamentale.

Quando utilizzare immagini inline

Come detto in precedenza, le immagini presenti nell'above fold sono quelle più indicate per essere inserite come immagini inline. Così facendo per ogni immagine utilizzata come contenuto in linea avrai una richiesta HTML in meno.

All'interno di SimpleOxy, ad esempio, il logo e l'illustrazione presenti nell'above fold sono entrambi contenuti inline.

Attenzione però a non far aumentare il peso generale della tua pagina HTML abusando di questa tecnica. In questo modo, con l'intenzione di velocizzare il tuo sito Web, potresti avere l'effetto opposto.

Risorse e strumenti

Ecco alcune risorse e strumenti per mettere in atto al meglio la tecnica descritta:

Conclusione

L'inlining delle immagini può rivelarsi un po' complicato e, se sei alle prime armi, può disorientare. Tuttavia, scegliendo le immagini giuste e con un po' di esperienza otterrai ottimi risultati.

Prova subito all'interno del tuo sito WordPress per migliorare FCP e FMP!

menu-circlecross-circle linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram