Tattiche di crescita degli editori per la stagione elettorale | WEBINAR
Tattiche di crescita degli editori per la stagione elettorale | WEBINAR
Al termine di questo modulo dovresti avere una chiara comprensione dei vari componenti che contribuiscono alla Page Experience, perché sono importanti e come ognuno di essi può essere ottimizzato per migliorare sia l'esperienza utente del tuo sito che la sua SEO.
Durata del video
17:09
Rispondi al quiz
Fai il quiz del modulo attuale
Materiali
Modelli pronti all'uso
Risorse
Rapporti e risorse
2.3.1 Che cos'è la Page Experience?
L'esperienza di pagina è un insieme di segnali, tra cui Core Web Vitals (CWV), ottimizzazione per dispositivi mobili, HTTPS e linee guida sugli interstitial intrusivi, che Google utilizza per estrapolare l'esperienza utente su un sito web.
L'esperienza di pagina è una valutazione delle prestazioni di un sito, non dei suoi contenuti. Sebbene Google continui a dare priorità alla pertinenza dei contenuti quando risponde alle query degli utenti, l'esperienza di pagina è di fatto un fattore decisivo quando diversi siti offrono un livello di copertura simile.
I segnali dell'esperienza delle quattro pagine sono:
I CWV misurano l'esperienza utente concentrandosi sulla velocità di caricamento di una pagina, sulla sua reattività agli input dell'utente e sulla sua stabilità visiva. Esistono tre parametri per questo:
L'aggiornamento di Google di aprile 2015 ha introdotto la metrica mobile-friendly del gigante della ricerca, che aumenta il posizionamento delle pagine ottimizzate per i dispositivi mobili nelle SERP per dispositivi mobili.
Di fatto, Google darà priorità a quei siti che garantiscono che i loro contenuti siano facilmente leggibili sui dispositivi mobili, ovvero che non sia necessario ingrandire, che i touch target come i pulsanti di accesso non siano troppo vicini tra loro, che non ci sia scorrimento orizzontale e che vengano evitati contenuti non riproducibili.
L'aggiornamento si applica alle singole pagine, non all'intero sito web, e non influisce sui contenuti visualizzati sui browser desktop/laptop.
HTTPS, o protocollo di trasferimento ipertestuale sicuro, è una versione sicura del protocollo di comunicazione Internet HTTP.
HTTPS, o HTTP, costituisce la prima parte di ogni URL, nota come "schema". Questa parte precede il nome di dominio, che è la parte dell'URL nota come "autorità".
La differenza tra HTTPS e HTTP è che il primo è sicuro, mentre il secondo non lo è. In pratica, questo significa che gli utenti che accedono a un sito tramite una connessione HTTP inviano i propri dati personali in formato testo non crittografato.
HTTPS protegge questa connessione, il che significa che tutti i dati inviati tra il browser dell'utente e il server del sito web vengono crittografati durante il percorso. I siti che desiderano connessioni sicure necessitano di un certificato SSL, che il browser dell'utente controlla e verifica.
Gli interstitial sono un formato pubblicitario esclusivo per dispositivi mobili che compare solo nelle pause naturali del contenuto, ad esempio quando un utente passa da un articolo all'altro, coprendo l'intero schermo.
Gli interstitial sono considerati intrusivi quando bloccano o oscurano parzialmente la visione dei contenuti da parte degli utenti. Anche le finestre di dialogo sui siti web per dispositivi mobili che si comportano in modo simile rientrano in questa categoria.
Le competenze più forti della maggior parte degli editori tendono a essere la creazione di contenuti, la pubblicazione e il marketing, lasciando poco spazio alla comprensione e all'ottimizzazione dei vari pilastri dell'esperienza di pagina.
Le risorse limitate fanno sì che gli editori facciano fatica a giustificare il tempo e il denaro necessari per analizzare il backend delle singole pagine web, per non parlare di un intero sito web.
Anche se gli editori sono in grado di dedicare tempo ad affrontare il problema, come possiamo vedere sopra, l'esperienza di pagina è una questione multiforme che richiede un approccio olistico per ottenere miglioramenti significativi delle prestazioni.
Sapere su quale dei quattro segnali dell'esperienza di pagina iniziare a lavorare può essere di per sé un vero grattacapo.
L'esperienza della pagina è estremamente importante per la SEO degli editori, poiché un contenuto di qualità non è sufficiente per garantire un posizionamento elevato nelle SERP.
Google continua a dare priorità alle informazioni migliori, il che significa che contenuti esclusivi o "scoop" di notizie avranno un buon rendimento anche se l' esperienza di pagina è "insufficiente" . Tuttavia, nei casi in cui diversi editori offrono un'eccellente copertura tematica, l'esperienza di pagina diventa un fattore decisivo che influenza il posizionamento nelle SERP.
Ognuno dei quattro pilastri dell'esperienza di pagina ha un impatto diverso sulla SEO di un sito web. L'impatto più immediato deriva dall'attenzione rivolta ai CWV, che si tradurranno in un sito web che si carica più velocemente.
Numerosi studi hanno dimostrato che più tempo impiega un sito web a caricarsi, più rapidamente il pubblico perde interesse e più alto diventa il tasso di rimbalzo.
Ad esempio, uno studio di Google del 2018 ha rilevato che la probabilità di rimbalzo aumentava del 32% quando i tempi di caricamento della pagina passavano da 1 a 3 secondi.
Un altro studio di Google del 2020 ha rilevato che i siti di notizie che hanno superato il test CWV hanno registrato un tasso di abbandono inferiore del 22% rispetto a quelli che non lo hanno superato. Yahoo! JAPAN, nel frattempo, ha migliorato il suo punteggio CLS di 0,2 e ha registrato un aumento del 15,1% delle visualizzazioni di pagina per sessione e un aumento del 13,3% della durata della sessione.
Sebbene Google abbia affermato esplicitamente di non utilizzare i tassi di rimbalzo come segnale di ranking , un tasso di rimbalzo elevato indica fattori a cui Google tiene, ovvero la velocità di caricamento di una pagina, la reattività e la stabilità visiva.
Gli editori che si rivolgono a un pubblico che utilizza dispositivi mobili devono assicurarsi che il loro sito trasmetta segnali ottimizzati per i dispositivi mobili che sia Google che Bing possano recepire. Entrambi i motori di ricerca daranno priorità ai siti web ottimizzati per i dispositivi mobili quando forniranno risultati di ricerca agli utenti mobili.
Rispetto ai CWV e alla compatibilità con i dispositivi mobili, l'implementazione di HTTPS avrà un impatto molto minore sulla SEO di un editore. Google ha dichiarato nel 2014 che lo avrebbe utilizzato come segnale di ranking e ha iniziato a contrassegnare tutti i siti HTTP come "non sicuri" in Chrome nel 2018. Tuttavia, il vantaggio principale è una maggiore sicurezza dei dati, soprattutto se il tuo modulo aziendale si basa sui ricavi da abbonamenti.
Nel frattempo, annunci interstiziali o finestre di dialogo intrusive possono limitare la capacità dei web crawler di scansionare e indicizzare una pagina, impedendo ai motori di ricerca persino di classificarla, per non parlare di posizionarla in alto nei risultati di ricerca.
Il primo passo per migliorare l'esperienza di navigazione inizia con la valutazione dell'efficacia attuale del tuo sito web.
Esiste un'ampia gamma di strumenti proprietari e di terze parti per raggiungere questo obiettivo, ma in questa guida prenderemo in esame gli strumenti proprietari di Google.
Ora sappiamo che i CWV sono un importante fattore di ranking. Ma come vengono misurati? La tabella seguente elenca i parametri entro cui dovrebbero rientrare i valori CWV ottimali per la migliore esperienza di pagina.
Ora che sappiamo cosa dobbiamo misurare e in che misura, possiamo vedere come misurare l'esperienza della pagina.
Di seguito è riportato un elenco di alcuni dei metodi più comunemente utilizzati.
La prima opzione a disposizione degli editori è di gran lunga la più impegnativa dal punto di vista tecnico e non è quella che consigliamo di prendere in considerazione, a meno che non si abbia un bravo sviluppatore che possa assisterli nella sua implementazione.
Stiamo parlando della raccolta di dati utente dal tuo sito, un processo noto come monitoraggio degli utenti reali (RUM), e della successiva analisi dei risultati in Google Analytics 4 (GA4). Google offre altri strumenti, come PageSpeed Insights (PSI), che utilizzano il campionamento dei dati per valutare il tuo sito. Ma se l'obiettivo è avere un quadro completo dell'esperienza utente per il tuo sito web, allora hai bisogno di dati reali raccolti dal tuo sito.
Consigliamo di utilizzare GA4 per questa attività per il semplice motivo che Google intende iniziare a "dismettere" la precedente generazione di Google Analytics, Universal Analytics (UA), a partire dalla metà del 2023.
Come editore, dovresti aver già configurato un account GA4 in previsione del passaggio. In caso contrario, segui le guide di Google su come configurarlo per la prima volta o su come aggiungerlo a un sito che ha già UA .
Una volta fatto questo, il passo successivo è collegare il data warehouse BigQuery di Google a GA4 da Analytics Admin. Collegare BigQuery ti permetterà di interrogare i tuoi dati utilizzando SQL. Ecco una guida su come collegare i due .
Una volta completati questi passaggi, possiamo aggiungere la libreria Web-Vitals al tuo sito.
La libreria, che è una libreria JavaScript modulare estremamente piccola per la raccolta dati, è disponibile su GitHub.
La libreria può essere installata dal repository online open source npm eseguendo "npm install web-vitals" nel terminale di comando o tramite<script> tags on a content distribution network (CDN).
Ecco un esempio di tale script:
Una volta installata la libreria web-vitals, i dati degli utenti possono essere inviati a Google Tag Manager (GTM), utilizzando un tag modello personalizzato consigliato da Google, creato e gestito da Simo Ahava.
Una volta installato il tag, le metriche CWV e i dati di attribuzione associati possono essere inoltrati a GA4.
Una volta configurate le analisi per monitorare i dati GTM, potrai visualizzare i dati degli eventi nell'interfaccia di BigQuery. Questi dati possono quindi essere interrogati in questo modo:
Una volta restituita la query, il report dovrebbe apparire più o meno così:
Dobbiamo sottolineare ancora una volta che questa è una soluzione per sviluppatori e, in effetti, è molto più complessa di questa. Tuttavia, adottando questa soluzione otterrai la lettura più accurata delle prestazioni del tuo sito web.
Per una spiegazione più dettagliata di questo processo, consulta la guida di Google sulla visualizzazione dei CWV in GA4 .
Sebbene questo sia l'approccio più accurato per monitorare i CWV, esistono approcci più semplici per affrontare questo problema.
Il PSI è meno accurato rispetto all'approccio GA/RUM, tuttavia è spesso citato come uno degli strumenti più importanti per misurare i CWV, grazie alla sua semplicità d'uso.
Sebbene utilizzi solo campioni di esperienze utente reali tratti dal Chrome User Experience Report (CrUX) negli ultimi 28 giorni, PSI offre un'interfaccia utente semplice e intuitiva . Ciò significa che l'interpretazione dei dati è un processo molto più semplice.
Come puoi vedere nell'esempio qui sotto, l'esame del sito di Forbes fornisce immediatamente una grande quantità di informazioni sia sul sito web desktop che su quello mobile dell'editore.
PSI utilizza le categorie verde, ambra e rossa di cui sopra quando assegna i voti di prestazione Buono, Da migliorare e Scarso.
L'approccio di campionamento di CrUX implica che, sebbene la valutazione di Forbes di cui sopra abbia preso in considerazione alcune esperienze reali degli utenti del sito, non può tenere conto di tutti i dati degli utenti del sito.
Questo approccio di campionamento diventa problematico per i siti più piccoli, molti dei quali non saranno inclusi nei dati sul campo di CrUX.
strumento open source Lighthouse di Google . Vedi l'esempio seguente:
Il problema di questo approccio è che Lighthouse raccoglie i dati utilizzando impostazioni di rete e dispositivi predeterminate, che non riflettono le impostazioni degli utenti. Questo significa che è un sostituto scadente della realtà.
GSC è uno strumento progettato per fornire agli editori una panoramica dei problemi CWV dei loro siti web, aprendo le porte a un approccio olistico per migliorare le prestazioni del sito.
Ciò avviene raggruppando i report sulle prestazioni degli URL in base a stato, tipo di metrica o similarità tematica. Non identifica i problemi nelle singole pagine, impedendo di implementare soluzioni a livello granulare.
È qui che entra in gioco PSI. Vale la pena notare, tuttavia, che il report di PSI per pagina individuale potrebbe differire notevolmente dai risultati di gruppo di GSC. Questo perché la pagina individuale è solo una componente dei risultati di gruppo aggregati di GSC.
Accedendo alla dashboard di GSC, gli utenti vedranno la scheda Core Web Vitals sul lato sinistro. Cliccando su questa scheda, vengono visualizzati report CWV separati per dispositivi mobili e desktop per i gruppi di URL.
Nonostante siano presenti tre metriche CWV (LCP, FID e CLS), gli URL riceveranno un punteggio complessivo in base alla metrica con le prestazioni peggiori per un dispositivo specifico, il che influirà anche sui report del gruppo.
Ad esempio, se un URL su un dispositivo mobile riceve un FID scadente e un LCP buono, verrà etichettato come scadente su un dispositivo mobile.
Ancora una volta, è importante notare che GSC non è pensato per correzioni granulari. Tuttavia, è ottimo per gli editori che hanno molte pagine simili. Ad esempio, i siti di notizie potrebbero avere un design e un layout relativamente standard per le pagine degli articoli, che utilizzano un'immagine come elemento più grande above the fold. In questo caso, GSC può aiutare a identificare rapidamente i problemi di LCP su una vasta gamma di URL.
L'ultimo strumento del toolkit di misurazione delle prestazioni di Google è Lighthouse . Questo strumento è completamente diverso dai precedenti in quanto emula le prestazioni degli utenti sulla base di un insieme di parametri predefiniti.
Non utilizza dati di campo e quindi è più limitato in termini di utilizzi pratici. Ad esempio, i dati di campo sono influenzati dalla connessione di rete dell'utente e dalla sua distanza dai server del sito, mentre Lighthouse emula un dispositivo di fascia media per raccogliere dati in un ambiente controllato.
È anche importante comprendere che il punteggio di Lighthouse non è semplicemente una somma dei punteggi CWV. Esclude il FID, poiché i dati di laboratorio, per loro natura, escludono le interazioni con l'utente finale, aggiungendo al mix le metriche del tempo di blocco totale (TBT), dell'indice di velocità (SI) e del tempo di interazione (TTI). Per chi desidera simulare un'esperienza FID in laboratorio, il TBT può essere utilizzato come proxy.
Tuttavia, sconsigliamo di utilizzare Lighthouse come strumento di misurazione principale. Dovrebbe piuttosto essere utilizzato come strumento complementare a PSI per aiutare a risolvere problemi specifici delle pagine.
Gli editori che desiderano utilizzare Lighthouse nei loro test possono farlo tramite Chrome Devtools , integrato direttamente nel browser Chrome, un'estensione per tale browser o su web.dev/measure .
Lighthouse esaminerà la tua pagina web e assegnerà punteggi su 100 in quattro aree:
Ecco come appare quando inseriamo la nostra homepage tramite l'opzione web.dev.
Il web design per dispositivi mobili differisce dal web design tradizionale per desktop in quanto i dispositivi mobili hanno schermi più piccoli, generalmente sono dotati di hardware meno potente e si basano esclusivamente su input touch.
I siti ottimizzati per dispositivi mobili danno priorità all'esperienza utente seguendo una serie di best practice che approfondiremo più avanti. Per ora, il modo migliore per verificare se le tue pagine sono ottimizzate per i dispositivi mobili è utilizzare il Mobile-Friendly Test .
L'inserimento dell'URL di una pagina web ottimizzata per dispositivi mobili restituisce il seguente risultato:
Le pagine che non superano questo test mostreranno una serie di opzioni di correzione da seguire. Ne parleremo più avanti.
Verificare se il tuo sito web ha una connessione sicura è un processo estremamente semplice: basta aprire il browser e guardare il simbolo a sinistra dell'URL nella barra degli indirizzi.
In Chrome una connessione sicura sarà indicata da un simbolo di lucchetto chiuso come questo:
Una connessione non sicura avrà un simbolo Info come questo:
Determinare se i tuoi annunci interstiziali sono intrusivi o meno non è semplice come inserire il tuo sito web in uno strumento online e attendere che risponda o meno.
Richiede di studiare gli annunci interstiziali e le finestre di dialogo sul tuo sito e di decidere se soddisfano determinati parametri.
Pensa a questi parametri come a domande, ad esempio:
Se rispondi affermativamente a una qualsiasi di queste domande, è probabile che la pubblicità o la finestra di dialogo siano invadenti.
Ora che abbiamo una solida comprensione dei diversi componenti dei quattro componenti che contano per l'esperienza della pagina, nonché dei mezzi per monitorarne le prestazioni, passiamo ad esplorare come esattamente possiamo aumentare i segnali di ranking dei nostri siti
Esamineremo prima i CWV, poiché il debug e l'ottimizzazione di LCP, CLS e FID avranno il maggiore impatto sulla tua capacità di competere per le prime posizioni nelle classifiche SERP fortemente contese.
Sebbene la compatibilità con i dispositivi mobili sia estremamente importante per i siti rivolti agli utenti di dispositivi mobili, il miglioramento dei CWV aumenterà le prestazioni delle pagine dei siti, indipendentemente dal fatto che vengano visualizzati su dispositivi mobili o desktop.
La lotta contro HTTPS e gli interstitial intrusivi è stata rimandata alla fine, poiché rappresentano vittorie più facili e meno gratificanti.
Esistono numerose opzioni per migliorare le prestazioni del CWV, che abbiamo suddiviso in base all'importanza che riteniamo meritino.
L'ottimizzazione dei Core Web Vitals di qualsiasi pagina prevede una serie di azioni ed è importante sapere da dove iniziare per massimizzare le risorse.
Come abbiamo già notato in precedenza, il largest contentful paint (LCP) misura il tempo impiegato per caricare completamente il testo o l'immagine più grande visibile sopra la piega.
Utilizza PSI per identificare quale contenuto della pagina attiva il test LCP, andando alla sezione diagnosi del report e cliccando su "Elemento Paint con il contenuto più grande". Ecco cosa abbiamo visto dalla homepage di SODP:
Un punteggio LCP basso può solitamente essere attribuito a tempi di risposta lenti del server, a JavaScript e CSS che bloccano il rendering, a tempi di caricamento delle risorse o al rendering lato client, o anche a una combinazione di tutti e quattro.
L'ottimizzazione della pagina comporta in realtà l'ottimizzazione di quattro diverse sottoparti del processo di caricamento LCP:
Tutti questi passaggi devono essere ottimizzati per ottenere un miglioramento del punteggio LCP. Tuttavia, ciò non significa che tutte le sotto-parti siano ugualmente importanti.
Google ha suggerito che il tempo totale di LCP dovrebbe essere suddiviso in modo che TTFB e tempo di caricamento delle risorse rappresentino ciascuno circa il 40%, mentre i ritardi di caricamento delle risorse e di rendering degli elementi dovrebbero rappresentare ciascuno meno del 10%.
Idealmente, queste ultime due dovrebbero essere il più vicino possibile allo zero e avere la priorità sulle altre due fasi.
Esistono due modi per ridurre il ritardo nel caricamento delle risorse il più possibile a zero:
Lo diciamo subito: ti consigliamo di consultare il tuo sviluppatore web prima di cimentarti in queste soluzioni. Si tratta di un'operazione di backend e richiede una mano esperta per funzionare come desiderato.
Scoperta delle risorse
Ogni browser web è dotato di uno scanner di precaricamento, il cui compito è assistere il parser HTML principale del browser nel rilevamento del contenuto della pagina.
Mentre il parser HTML primario elabora il markup grezzo finché non incontra una risorsa bloccante, come uno script che non contiene un async o defer , lo scanner di precaricamento svolge un ruolo più speculativo.
In altre parole, lo scanner di precaricamento cerca risorse da recuperare prima che il parser HTML primario le raggiunga e continua a funzionare anche se il parser è bloccato. Lo scanner di precaricamento può essere utilizzato per trovare e caricare l'LCP il più vicino possibile alla richiesta di pagina iniziale.
Per garantire che la risorsa LCP sia rilevabile dalla sorgente HTML, gli sviluppatori dispongono di opzioni specifiche per le risorse.
Ad esempio, se l'LCP è un'immagine, i suoi src o srcset devono essere presenti nel codice sorgente. Le immagini di sfondo CSS, nel frattempo, possono essere precaricate includendo nel markup HTML o nell'intestazione. Infine, i font possono essere caricati in modo simile tramite .
Vale la pena notare, tuttavia, che l'utilizzo del precaricamento per ridurre i tempi di caricamento LCP può introdurre nuovi problemi, come la deprioritizzazione asincroni . C'è un motivo per cui consigliamo di parlarne con il tuo sviluppatore.
Per maggiori informazioni su questo argomento, consulta gli approfondimenti di Google sull'ottimizzazione LCP e sullo scanner di precaricamento .
Priorità delle risorse
I browser cercano di scaricare risorse CSS, font, script, immagini e iframe nel modo più ottimale possibile, assegnando delle priorità. I browser sono eccellenti nel determinare le priorità delle risorse, ma questo non significa che siano impeccabili.
Per ottimizzare la prioritizzazione delle risorse, gli sviluppatori possono utilizzare i Priority Hints basati sul markup per segnalare ai browser quali risorse hanno una priorità più alta. Ad esempio, uno sviluppatore può utilizzare JavaScript e l'API Fetch per taggare l'immagine LCP con l' fetchpriority="high" , velocizzando quella specifica metrica CWV.
Vale la pena notare che i suggerimenti prioritari funzionano solo sui browser basati su Chromium , come Google Chrome e Microsoft Edge.
Il tuo sviluppatore potrebbe aver già implementato il caricamento differito per le risorse below the fold, verifica con lui per esserne certo, ma vale la pena anche fargli usare i suggerimenti prioritari per le risorse above the fold.
Per maggiori informazioni sul caricamento prioritario, consigliamo vivamente di consultare la guida di Google sul caricamento delle risorse .
Il team di sviluppo del colosso della ricerca è riuscito a utilizzare Priority Hints per migliorare l'LCP da 2,6 secondi a 1,9 secondi in un test di Google Flights.
FID tiene traccia del tempo impiegato dal browser di un utente per iniziare a elaborare il primo input, escludendo lo scorrimento e lo zoom.
Questa misura riguarda l'esperienza dell'utente nell'interazione con una pagina web, il che significa che le pagine web lente otterranno un punteggio basso. L'obiettivo è mantenere il punteggio FID al di sotto dei 100 millisecondi.
Una scarsa reattività è generalmente dovuta a un uso eccessivo di JavaScript, che i browser elaborano prima degli input.
Il codice che consuma il focus del browser per 50 millisecondi o più è definito "Long Task" (attività lunga) ed è considerato un segno di sovraccarico di JavaScript. Suddividere queste attività lunghe in blocchi di codice più piccoli può risolvere il problema delle prestazioni lente e migliorare il FID (Field Identification).
Ma questo non è l'unico aspetto che vale la pena discutere con il tuo sviluppatore. È importante discutere di come l'esecuzione di script proprietari e di terze parti possa rallentare il tuo sito. Il caricamento progressivo di codice e funzionalità può aiutare ad affrontare le sfide del primo tipo, mentre il caricamento on-demand e la prioritizzazione del caricamento possono aiutare con il secondo.
Un'altra opzione potrebbe essere quella di utilizzare i web worker per eseguire JavaScript in background ed evitare che il browser si blocchi nell'elaborazione degli script.
Il CLS è fondamentalmente una misura della stabilità visiva del tuo sito web. Se i tuoi visitatori perdono il segno su una pagina perché i contenuti vengono spostati per far posto ad annunci e immagini, il tuo sito avrà un punteggio basso.
Minore è il numero di salti nel layout della pagina, migliore sarà il punteggio CLS. Google valuta i siti web considerando l'interruzione all'interno della viewport e la distanza percorsa dalle risorse rispetto a essa.
Per ridurre al minimo i cambiamenti imprevisti di layout, è fondamentale designare lo spazio per annunci, immagini e video incorporati.
Ricordate gli src o srcset che abbiamo esaminato parlando della scoperta delle risorse? Beh, questo è fondamentale per migliorare i punteggi CLS.
Per le immagini statiche, imposta la larghezza e l'altezza utilizzando gli src per indicare al browser di riservare spazio per le risorse con caricamento più lento, evitando così cambiamenti di layout.
Di seguito è riportato il codice di esempio di Google:
Le immagini responsive richiedono un srcset per definire i limiti massimi di larghezza e altezza selezionabili dal browser. Assicurati di utilizzare immagini con le stesse proporzioni.
Ecco un altro esempio:
Quando si ha a che fare con gli annunci pubblicitari, ecco alcuni passaggi che si possono seguire:
Si consiglia di riservare spazio statico anche se si intende implementare iFrame, contenuti incorporati e contenuti dinamici, come le call to action (CTA).
Quando i browser scaricano e visualizzano i web font, è possibile che si verifichi un flash di testo senza stile (FOUT) o un flash di testo invisibile (FOIT). Il primo si verifica quando un font di riserva viene sostituito con un nuovo font, mentre il secondo è il risultato di un ritardo nel rendering di un nuovo font.
Puoi risolvere entrambi i problemi usando per indicare allo scanner di precaricamento di acquisire prima i font web. I font precaricati hanno maggiori probabilità di essere riconosciuti dalla prima applicazione.
Sono disponibili altre soluzioni nella guida alla risoluzione dei problemi CLS , nonché nell'approfondimento sull'uso del preload per prevenire FOIT .
Se stai cercando di migliorare la velocità del tuo sito e utilizzi ancora un hosting tradizionale con un singolo server, allora è probabilmente il momento di prendere in considerazione il passaggio a una rete per la distribuzione di contenuti (CDN).
Una CDN è costituita da una rete di server situati in diversi data center in tutto il mondo che distribuiscono i contenuti di un sito web per migliorarne le prestazioni. Sebbene sia un'opzione con un singolo server, nota anche come hosting locale, sia una CDN distribuiscano i contenuti di un sito web ai visitatori, solo una CDN può tenere conto della posizione geografica dell'utente e quindi scegliere il server più vicino per ridurre i tempi di caricamento.
Tuttavia, la posizione geografica non è l'unico vantaggio, poiché le CDN sono anche meglio attrezzate per gestire picchi di traffico improvvisi e risorse del server root come la larghezza di banda.
In definitiva, un'esperienza di navigazione più veloce invia un forte segnale CWV a Google. Sebbene Cloudflare sia uno dei provider CDN più noti sul mercato, ci sono diversi concorrenti seri da considerare .
Indipendentemente dal provider di hosting che utilizzi, i suoi server saranno vincolati da determinati vincoli hardware.
I server contengono in gran parte gli stessi componenti chiave che consentono il funzionamento del tuo laptop/desktop, ovvero CPU e RAM, che gestiscono tutte le attività del tuo account. Dovresti essere in grado di utilizzare la dashboard del tuo provider di hosting per controllare la CPU e la RAM installate sul tuo server e persino di richiedere risorse aggiuntive per migliorare le prestazioni del tuo sito.
Se stai analizzando la CPU del tuo server, è importante capire che per soddisfare la richiesta di un visitatore di una pagina web viene utilizzato un solo core. Ciò significa che velocità di clock single-core più elevate sono sempre un vantaggio. Le CPU multi-core sono in grado di elaborare più visualizzazioni di pagina e altri servizi del server.
Questo è un altro consiglio per il tuo sviluppatore.
Controlla il tuo database con una certa frequenza per assicurarti che non sia sovraccarico di foto e file inutilizzati. Eliminare i file non necessari lo riordini, velocizzando i tempi medi di caricamento delle pagine.
L'utilizzo di immagini molto grandi può rallentare il tuo sito web. Quanto grandi? Qualsiasi cosa superiore a 1 MB è semplicemente troppo grande.
E come già sappiamo, tempi di caricamento più lenti porteranno a tassi di rimbalzo più elevati e invieranno segnali indesiderati a Google.
Per chi utilizza WordPress, sono disponibili diversi plugin per l'ottimizzazione delle immagini che possono semplificare un'attività manuale altrimenti noiosa. Inoltre, molti offrono anche altre funzionalità come il caricamento differito e il ridimensionamento automatico.
Il fatto che un sito sia ottimizzato o meno per i dispositivi mobili dipende dal fatto che tu abbia semplificato e ottimizzato il tuo sito per l'esperienza di navigazione su dispositivi mobili.
Gli utenti di dispositivi mobili interagiscono con le pagine in modo diverso e hanno molta meno pazienza per i tempi di caricamento lenti e i siti difficili da navigare. Se il tuo sito non ha superato il test di ottimizzazione per dispositivi mobili descritto sopra, o anche se lo ha superato ma sei interessato a un'ulteriore ottimizzazione, esaminiamo alcune delle migliori pratiche.
Questa dovrebbe essere la preoccupazione principale di ogni editore. Un modo semplice per affrontare la facilità d'uso è porsi domande come:
Queste risposte contribuiranno notevolmente a identificare i punti deboli degli utenti. Ad esempio, non vuoi che i tuoi utenti regolino lo schermo per visualizzare i tuoi contenuti. Puoi capire cosa intendiamo nell'esempio seguente.
Per ottimizzare i tuoi contenuti per i dispositivi mobili, hai a disposizione tre opzioni di sviluppo:
Li abbiamo ordinati in base alla facilità di implementazione e consigliamo di adottare un design responsivo, poiché è la meno impegnativa delle tre opzioni.
Gli sviluppatori aggiungono semplicemente il meta name=”viewport” al codice esistente di una pagina web
Il vantaggio in questo caso è che devi gestire un solo sito web, che può essere visualizzato facilmente su qualsiasi tipo di schermo.
Al contrario, i design dinamici funzionano servendo codice HTML diverso in base al dispositivo dell'utente. Le pagine devono utilizzare l'intestazione HTTP Vary per evitare che il codice errato venga servito al dispositivo sbagliato.
Infine, ci sono i sottodomini mobili, che sconsigliamo data la quantità di risorse richieste per un'implementazione efficace. I sottodomini mobili sono siti completamente separati, con esigenze di hosting diverse. Per garantire che i crawler comprendano la relazione tra dominio e sottodominio, è necessario includere il rel="canonical" .
Poiché il responsive design è l'opzione più semplice, è quella che consigliamo agli editori. Per un approfondimento sul responsive design, consulta la guida all'implementazione di Google .
Ecco un rapido elenco di considerazioni tecniche per qualsiasi progetto:
Quest'ultimo passaggio è il modo più semplice per migliorare l'esperienza di navigazione, ma contribuisce anche notevolmente ad aumentare la tranquillità dell'utente.
Passare a HTTPS protegge e crittografa le informazioni dei tuoi utenti e aiuta anche a prevenire gli attacchi Man-in-the-Middle (MitM). Inoltre, avere un certificato SSL elimina gli avvisi del browser relativi a una mancanza di sicurezza.
Il tuo provider di hosting dovrebbe essere in grado di fornirti la sicurezza HTTPS; in caso contrario, potrebbe valere la pena di prendere in considerazione un passaggio a uno che la offra. Esistono già diversi provider di hosting rinomati che offrono HTTPS gratuitamente . Inoltre, i provider di hosting che forniscono certificati SSL utilizzano il proprio servizio anziché quello esterno, rendendo il processo ancora più semplice e veloce da implementare.
Se desideri richiedere e installare un certificato SSL dalle autorità di certificazione (CA), devi seguire quattro passaggi. Questi sono:
È importante assicurarsi che la migrazione del sito a HTTPS non influisca sulla strategia di generazione di entrate pubblicitarie. Il problema è che un HTTPnon funzionerà su un sito che utilizza HTTPS.
Ti consigliamo di consultare i tuoi partner tecnologici pubblicitari prima di apportare modifiche al tuo sito.
Per maggiori dettagli consulta la guida completa di Google sull'argomento.
Gli annunci interstiziali e le finestre di dialogo intrusive rendono difficile per i motori di ricerca comprendere il contenuto di una pagina web, il che può compromettere le prestazioni della SERP.
Sarebbe fantastico se ci fosse un modo per creare annunci interstiziali che non interferiscano con l'esperienza utente, ma è proprio questo il punto di questo tipo di annunci: occupano l'intero schermo durante le pause nel contenuto per catturare l'attenzione dell'utente.
Pertanto, gli editori farebbero meglio a utilizzare banner pubblicitari anziché annunci interstiziali, poiché occupano solo una piccola porzione dello schermo. Meglio rischiare la "banner blindness" che la frustrazione degli utenti.
Gli editori possono utilizzare banner supportati dal browser o semplici banner HTML che rimandano alla pagina di destinazione della CTA.
Le finestre di dialogo possono essere utilizzate anche per campagne promozionali, ma possono essere progettate in modo da risultare discrete. È necessario garantire che gli utenti possano accedere ai contenuti senza interruzioni.
Non esistono scorciatoie per ottimizzare l'esperienza di navigazione delle pagine ed è fondamentale correggere i punti sopra menzionati. Detto questo, vale la pena sottolineare che, sebbene WordPress sia senza dubbio la piattaforma di pubblicazione più diffusa al mondo, ciò non significa necessariamente che sia il CMS migliore per migliorare le prestazioni di CWV.
Esaminando il CWVs Technology Report si evince che solo circa il 29% dei siti web WordPress ha buoni CWV, mentre il 41% dei siti Wix ha il segno di spunta verde.
Vale la pena valutare se passare a un CMS specializzato potrebbe migliorare i tuoi CWV in modo nativo.
C'è molto da fare quando si tratta di ottimizzare l'esperienza di pagina e iniziare può essere un po' scoraggiante. Tuttavia, è importante ricordare che si mangia l'elefante un boccone alla volta.
Puntare a un punteggio "Buono" in tutte le metriche CWV non è necessario per aiutare il tuo sito a scalare le SERP. Anzi, fissare obiettivi così ambiziosi può rivelarsi controproducente e demoralizzante.
Piuttosto, punta a piccoli successi quando si tratta dei tuoi CWV, concentrati sulla gestione dei risultati "Scarsi" senza preoccuparti eccessivamente della barra "Necessita di miglioramenti". Questo può arrivare in seguito, quando avrai più tempo e risorse da dedicare al processo.
Abbiamo già parlato del miglioramento del punteggio CLS di Yahoo! JAPAN; diamo un'occhiata ad altri due siti da cui possiamo imparare qualcosa.
Il quotidiano indiano The Economic Times, che conta oltre 45 milioni di utenti attivi al mese, ha ridotto il suo punteggio CLS del 250%, passando da 0,25 a 0,09, e il suo tempo LCP dell'80%, passando da 4,5 secondi a 2,5 secondi.
Tra ottobre 2020 e luglio 2021, l'editore ha ridotto del 33% i punteggi LCP nella fascia "Scarso", mentre i valori CLS nella fascia "Scarso" sono diminuiti del 65%. Questi miglioramenti hanno permesso a The Economic Times di superare le soglie CWV su tutta la sua origine, riducendo al contempo i tassi di rimbalzo complessivi del 43%.
L'editore ha raggiunto questo obiettivo in diversi modi, il primo dei quali è stato quello di dare priorità al download delle risorse utilizzando i Priority Hints. Ha anche affrontato le Long Task, suddividendo blocchi di codice per garantire che le risorse critiche per il rendering della pagina above the fold venissero caricate per prime.
Il sito web di notizie del Regno Unito ha migliorato il suo punteggio CLS da 0,25 a 0,1 , aumentando al contempo il numero di URL che hanno ricevuto un voto di sufficienza dal 57% al 72%.
Il Telegraph ha utilizzato Chrome DevTools per identificare singoli casi di layout variabile.
Prima di allora, utilizzavo WebPageTest per individuare il punto della sequenza temporale in cui si era verificato lo spostamento del layout.
Con questi dati in mano, il team ha iniziato a concentrarsi sulla riduzione dei cambiamenti di layout affrontando queste aree
Per quanto riguarda gli annunci pubblicitari, The Telegraphed ha iniziato a riservare loro uno spazio e ha utilizzato le dimensioni più comuni per specificare le dimensioni. Questo ha anche contribuito a impedire che gli annunci si comprimessero quando visualizzati su un tablet.
Il team ha affrontato un problema simile con le immagini in linea nella parte superiore degli articoli, che non avevano dimensioni specifiche.
Il Telegraph ha apportato altre modifiche, come lo spostamento dell'intestazione in cima al markup e l'utilizzo di segnaposto per i video incorporati, ma alla fine ha descritto il processo come "abbastanza semplice" pur avendo comunque un impatto significativo.
Migliorare l'esperienza di pagina non deve essere per forza un'impresa ardua. Misura i quattro pilastri dell'esperienza di pagina e poi decidi quali risorse puoi dedicare al miglioramento dei risultati.
Se sei un editore di piccole dimensioni, il bilanciamento delle risorse sarà fondamentale e ti consigliamo di individuare obiettivi ragionevolmente facili da raggiungere per il tuo primo progetto.
Esaminando l'approccio del Telegraph, si è concentrato su un aspetto dei CWV anziché su tutti e tre, apportando miglioramenti significativi. L'Economic Times si è concentrato su due dei tre, ottenendo risultati impressionanti.
Attivo ora
Vedi altro
