Page Speed con un Budget Ridotto: Modi Economici per Migliorare le Prestazioni del Sito Web

Page Speed con un Budget Ridotto

Come consulente per i Core Web Vitals ricevo molte richieste diverse per il supporto relativo alla pagespeed. E sì, a volte non c'è un grande budget. In tal caso, devo essere ancora più efficiente con il mio tempo e apportare solo ottimizzazioni ad alto rendimento / basso sforzo. In questo articolo, esploreremo strategie pratiche ed economiche per elevare le prestazioni del sito web e offrire un'esperienza utente fluida.

SUGGERIMENTO per i Core Web Vitals: Il servizio più economico che offro è il supporto Core Web Vitals di 2 ore! In 2 ore ti aiuterò a impostare una strategia efficace che risolverà i problemi più urgenti, permettendoti di ottenere il massimo risultato con il minimo sforzo!

Prenota ora!

Scopri prima i problemi

Quando si ottimizza la Web Performance con un budget ridotto, dobbiamo essere assolutamente sicuri di ottimizzare nel modo più efficace possibile. Ciò significa che prima dobbiamo sapere qual è il vero problema.

Possiamo usare l'eccellente e gratuito PageSpeed Insights per interrogare i dati CrUX. I dati CrUX sono l'unica fonte di dati che conta poiché è la fonte di dati utilizzata da Google.

Dati CrUX superati!

Dati CrUX non superati!

Sotto il punteggio CrUX vedrai un audit di lighthouse. 

Voglio essere chiaro sull'audit di lighthouse! In questo momento non ci interessa lighthouse. Perché? Perché non misura i Core Web Vitals. Certo, lighthouse è uno strumento di test fantastico e sentiti libero di esplorare tutti i suoi suggerimenti, ma dato che abbiamo un budget limitato ci interessa superare i Core Web Vitals. In questo momento non ci interessa superare i test sintetici!

Torniamo ai dati CrUX. Ecco alcune linee guida da seguire se hai un budget limitato! Inizia a indagare sui Core Web Vitals in questo ordine esatto e concentrati prima su questi problemi!

• Se non stai superando il Time to First Byte, correggilo per primo!
• Se non stai superando il First Contentful Paint, correggi le risorse che bloccano il rendering (rinvia gli script e ottimizza gli stili)
• Se non stai superando il Largest Contentful Paint, dai la priorità alle risorse necessarie per quel LCP (come font o immagini)
• Se non stai superando il CLS, aggiungi larghezza e altezza a tutte le immagini, trova e rimuovi le transizioni CSS e riserva spazio per gli elementi che vengono renderizzati in ritardo (come annunci, filtri di prodotti, ecc.)
• Se non stai superando l'Interaction to Next Paint, molto probabilmente stai usando troppo JavaScript nel momento sbagliato. Rimuovi script/plugin non necessari, usa uno strumento RUM come CoreDash per trovare gli script più lenti

Ottimizzazione Responsabile delle Immagini

Le immagini contribuiscono ai Core Web Vitals in modi diversi. Spesso sono quelle che contribuiscono maggiormente alle dimensioni della pagina web. Sfruttando tecniche efficienti di compressione delle immagini e utilizzando formati di immagine moderni come WebP, i proprietari di siti web possono mantenere la qualità visiva riducendo significativamente i tempi di caricamento. Molte volte le immagini diventeranno l'elemento Largest Contentful Paint. Questo significa che dobbiamo dare la priorità a quelle immagini importanti per LCP e de-prioritizzare le immagini meno importanti e below-the-fold.

1. Converti le Immagini in WebP gratuitamente

Ci sono molti strumenti, soluzioni e plugin gratuiti disponibili che ti permetteranno di convertire le immagini in formati più recenti, veloci e moderni come WebP. Per WordPress ad esempio, suggerirei l'eccellente e gratuito WebP Express

2. Implementa il Lazy loading

Il Lazy loading segnalerà al browser che un'immagine non dovrebbe essere caricata fino a quando non è (quasi) nel viewport visibile (la parte visibile della pagina). Se hai 15 immagini in una pagina e solo 3 sono nella parte visibile della pagina, puoi tranquillamente aggiungere loading="lazy" alle immagini che non sono nel viewport visibile. 

Ci sono 2 modi per affrontarlo. Il primo è abilitare il lazy loading nel tuo CMS. Questo aggiungerà il lazy loading a tutte le immagini. Successivamente consulta la documentazione su come rimuovere il lazy loading per le immagini visibili e importanti. L'altro modo è aggiungere manualmente loading="lazy" alle immagini below-the-fold.

<img loading="lazy" src="image.jpg">

3. Configura la fetchpriority delle immagini

Aggiungendo fetchpriority = "high" a un tag immagine possiamo segnalare al browser che questa immagine è più importante di altre immagini e dovrebbe essere scaricata con un'alta fetchpriority. E anche se sono consapevole che ci sono modi migliori che includono il preloading delle immagini e i 103 early hints, impostare la fetchpriority è semplice, veloce ed efficace! Il processo è semplice: identifica semplicemente l'immagine più importante della tua pagina, modifica il template della pagina stessa e aggiungi fetchpriority = "high" all'immagine. Il risultato sarà qualcosa di simile a questo

<img fetchpriority="high" src="image.jpg">

2. Sfruttare il Caching del Browser per la Coerenza

Se stai usando un hosting economico, è probabile che il server web non sia configurato in modo ottimale. Uno degli errori che incontro regolarmente è la cache del browser configurata in modo errato.  La cache del browser consente di archiviare localmente le risorse a cui si accede di frequente come immagini, script e fogli di stile, riducendo i tempi di caricamento per i visitatori di ritorno. Configura le intestazioni di caching per trovare un equilibrio tra prestazioni ottimali e garanzia che gli utenti ricevano gli ultimi aggiornamenti dei contenuti.

Se stai usando Apache come server web, crea semplicemente un file chiamato .htaccess nella directory principale (base) del tuo sito web e aggiungi queste righe

<FilesMatch "\.(ico|pdf|jpg|jpeg|png|webp|gif|css|woff|woff2)$">
  <IfModule mod_headers.c>
    Header set Cache-Control "max-age=172800, public, must-revalidate"
  </IfModule>
</FilesMatch>

Se stai usando un server web diverso come NGINX contatta il tuo provider di hosting e indirizzalo a questo articolo!

3. Considera una CDN Gratuita o economica come CloudFlare

Esplora i vantaggi delle Content Delivery Network per distribuire contenuti statici su server in tutto il mondo. Sebbene le CDN premium offrano funzionalità avanzate, anche le opzioni gratuite o economiche possono fornire un notevole incremento in termini di velocità e affidabilità della pagina.

Nel piano gratuito:

Nel piano gratuito otterrai molte delle 'cose buone' come 

1. DNS super veloce. I server DNS di CloudFlare sono gratuiti e probabilmente supereranno i server DNS del tuo fornitore di hosting economico. Solo per questo motivo è un'ottima idea passare a CloudFlare 
2. HTTP/3. CloudFlare utilizza i protocolli più recenti e i metodi di compressione più veloci. Senza entrare troppo nei dettagli, stai certo che questo velocizzerà la tua rete di almeno il 10%.
3. Caching del Browser coerente. CloudFlare ha un'ottima reputazione quando si tratta di memorizzare nella cache le risorse statiche. La configurazione standard è probabilmente migliore di quella che hai ora!
4. Caching perimetrale per risorse statiche. CloudFlare memorizzerà nella cache le versioni delle tue risorse statiche come immagini, script e file css e le servirà direttamente all'utente finale dalla sua rete perimetrale. Questo elimina la necessità di viaggi di andata e ritorno verso il tuo server di origine.
5. Rocket loader. Rocket loader rinvierà il caricamento degli script e gestirà tutte le complicazioni che ne derivano. Rocket loader è un metodo rudimentale ma se non sei in grado di rinviare gli script manualmente, questo probabilmente migliorerà le metriche di visualizzazione come il Largest Contentful Paint.

Nel piano Pro

Una delle prime cose che dico sempre quando vedo un piano CloudFlare gratuito è 'passa al pro!'. Se 25$ sono una cifra che puoi permetterti e che sei disposto a spendere per un sito più veloce, dovresti probabilmente prenderlo in considerazione.

1. Tutte le funzionalità gratuite. Ovviamente il piano pro viene fornito con tutte le funzionalità gratuite.
2. CloudFlare APO per WordPress. APO per WordPress è una soluzione completa che memorizzerà nella cache le tue pagine sulla rete perimetrale se i visitatori non hanno effettuato l'accesso. Questo può accelerare enormemente il time to first byte. 
3. Ottimizzazione Immagini Lossless e Lossy. Uno dei principali vantaggi dell'utilizzo della versione pro di CloudFlare è la loro ottimizzazione delle immagini. CloudFlare convertirà e memorizzerà nella cache le immagini in formato webp e le servirà solo ai visitatori che accetteranno questi formati.

4. Auto-ospita il più possibile!

Un'altra ottimizzazione semplice ed efficace è l'auto-hosting delle 'risorse statiche'. Su molti siti le risorse statiche sono ospitate su CDN esterne (da non confondere con la tua CDN personale). Ad esempio jQuery è ospitato su  https://code.jquery.com/,  Bootstrap è ospitato su https://cdn.jsdelivr.net e i tuoi font sono ospitati su https://fonts.googleapis.com. Ne capisco il fascino, queste CDN si presentano come facili e veloci ma usarle è in realtà un'idea piuttosto pessima e rallenterà il tuo sito!

L'idea di usare una CDN condivisa per questi tipi di file era valida quando i browser potevano ancora condividere questi file tra i siti web. Questi giorni appartengono al passato. Il risultato è che un nuovo visitatore deve sempre scaricare il file statico ed è necessaria una nuova connessione a un nuovo server per ogni file. E queste nuove connessioni a questi nuovi server possono richiedere molto tempo extra.

La soluzione è auto-ospitare quei file di terze parti. Fare questo è facile, basta scaricare il file, posizionarlo sul tuo server e modificare il riferimento a questo file.

5. Caricamento Asincrono degli Script

Un enorme collo di bottiglia possono essere gli 'script bloccanti' nell'head della pagina. Questi script a volte possono ritardare il caricamento della pagina fino a 20 secondi! Ora rinviare questi script non è affatto difficile. Basta aggiungere defer al tag dello script e il gioco è fatto. Se puoi, fallo! Modifica il template e cambia il tuo script in questo modo

<!-- vecchio tag script bloccante -->
<script src="script.js"></script>

<!-- nuovo tag script rinviato -->
<script defer src="script.js"></script>

Ma ci sono delle insidie! Aggiungere defer ai tag degli script può causare ogni sorta di problemi e di errori di dipendenza. E poiché hai un budget limitato devo presumere che tu non abbia i mezzi per assumere un esperto JavaScript per risolvere tutti i problemi che potrebbero verificarsi. Quindi per favore prova a rinviare i tuoi script e controlla gli errori (premi Ctrl-Shift-I in chrome e controlla la scheda console). Se non ci sono problemi dopo i test... sei uno dei pochi fortunati! Se ci sono problemi dovresti probabilmente ricorrere a una delle seguenti soluzioni:

Usa Rocket loader 

Come discusso la versione gratuita di CloudFlare ti darà accesso a Rocket Loader. Questo rinvierà tutti gli script in una pagina. Non è affatto perfetto ma la maggior parte delle volte farà un ottimo lavoro.

Usa un plugin

La maggior parte dei siti basati su CMS ha un enorme repository di plugin. Ci sono molti plugin là fuori che ti permetteranno di rinviare JavaScript e gestire tutte le complicazioni che possono derivare dal rinvio degli script.

6. Caching caching caching!

Quando si ha un budget limitato e non si vuole spendere molto in hosting, il caching è uno dei modi più efficaci per velocizzare un sito web. Il caching è particolarmente efficace contro un alto time to first byte. Il caching può essere fatto a diversi livelli. 

Client side cache: Configura il tuo server web per istruire il browser a memorizzare nella cache quante più risorse statiche possibili. Questo diminuirà il carico sul tuo server.

Object Cache:  L'object cache può essere usata per memorizzare dati che potrebbero essere computazionalmente costosi da rigenerare, come il risultato di query complesse al database. Chiedi al tuo fornitore di hosting di installare Redis o Memcached.

Full Page Cache: Se stai usando un CMS vorresti probabilmente aggiungere una full page cache al tuo sito. Per WordPress delle buone opzioni sono WP Fastest Cache o WP Core Web Vitals

7. Fai scelte di hosting strategiche

Quando si tratta di hosting, vale la pena guardarsi intorno e l'host più costoso non è sempre il più veloce. Generalmente si cerca un piano di hosting che sia ottimizzato per il proprio CMS perché chi fa di tutto un po' non è maestro in niente!  Cerca provider che offrono server ottimizzati. Una scelta di hosting strategica può fare una differenza considerevole nella velocità del sito web.

8. Monitoraggio e Analisi Continui

Implementa una strategia di monitoraggio robusta con strumenti convenienti come [url =https://coredash.app]CoreDash[/url] Controlla regolarmente le prestazioni del tuo sito web per identificare nuove opportunità di ottimizzazione e garantire miglioramenti costanti della velocità.