Vai al contenuto
Mera News

Guida per gli editori, capitolo 2

Struttura della pagina su mobile e desktop

Ultima revisione novembre 2026

Un lettore decide in fretta se vale la pena fermarsi su una pagina di notizie. Il titolo dovrebbe comparire subito, la pagina dovrebbe restare ferma e ogni tocco dovrebbe ricevere una risposta. Google indicizza inoltre la versione mobile delle tue pagine, quindi anche per la Ricerca conta il layout da telefono.

I valori a cui puntare

I Core Web Vitals di Google offrono tre misure e un obiettivo chiaro per ciascuna.

MetricaCosa misuraBuono
Largest Contentful Paint (LCP)Caricamento2,5 secondi o meno
Interaction to Next Paint (INP)Risposta all'input200 millisecondi o meno
Cumulative Layout Shift (CLS)Stabilità visiva0,1 o meno

Misura il 75° percentile dei caricamenti di pagina, contando separatamente mobile e desktop. Una pagina supera il test quando tutte e tre le metriche raggiungono l'obiettivo a quel percentile.

Usa dati sul campo, provenienti da visite reali: il report Core Web Vitals in Search Console, PageSpeed Insights o il Chrome User Experience Report. Lighthouse è utile in laboratorio, ma non può misurare l'INP e al suo posto riporta il Total Blocking Time.

Google dice che non esiste un unico segnale di esperienza della pagina. Dice però che i Core Web Vitals sono usati dai suoi sistemi di ranking e che gli altri aspetti dell'esperienza della pagina non aiutano direttamente un sito a posizionarsi, anche se possono comunque renderlo più piacevole da usare.

Una sola pagina per entrambi gli schermi

Google raccomanda il design responsive come schema più semplice da realizzare e mantenere. Lo stesso HTML serve ogni dispositivo, quindi contenuti e metadati coincidono senza lavoro in più. Se gestisci pagine mobile separate, mantieni identici a quelli del desktop:

  • Il contenuto principale
  • I titoli
  • I dati strutturati
  • I meta tag robots (un noindex dimenticato può tenere una pagina mobile fuori dall'indice)

Parti dal tag viewport, poi verifica che la pagina si adatti a 320 pixel CSS di larghezza senza scorrimento orizzontale.

<meta name="viewport" content="width=device-width, initial-scale=1">

Su mobile

  • Metti per primi il titolo, la firma e la data visibile, poi l'immagine principale o il primo paragrafo.
  • Tieni il testo dell'articolo nell'HTML. Un pulsante «continua a leggere» che carica il resto al tocco può nascondere quel testo a Google, che non clicca, non scorre e non digita.
  • Rendi le aree di tocco di almeno 24 per 24 pixel CSS, il minimo del livello AA delle WCAG 2.2. Per menu e pulsanti di chiusura, punta a 44 per 44, il livello AAA.
  • Mantieni breve un'intestazione fissa e imposta scroll-padding-top alla sua altezza, così un link con il focus non finisce mai nascosto dietro di essa.

Su desktop

  • Mantieni il testo a 80 caratteri per riga o meno, oppure 40 per cinese, giapponese e coreano. È la linea guida di livello AAA delle WCAG e aiuta ogni lettore.
  • Imposta un'interlinea di almeno 1,5 all'interno dei paragrafi.
  • Tieni i contenuti di supporto in una barra laterale che non sposti l'articolo quando si carica.

Caricamento più rapido

L'elemento più grande di una pagina di notizie è spesso l'immagine principale. Trattala come la richiesta più importante della pagina.

<img
  src="/images/lead-1200.jpg"
  srcset="/images/lead-800.jpg 800w, /images/lead-1200.jpg 1200w"
  sizes="(min-width: 768px) 720px, 100vw"
  width="1200"
  height="675"
  alt="Describe what the photo shows"
  fetchpriority="high">
  • Non applicare mai il caricamento differito all'immagine LCP.
  • Mettila nell'HTML iniziale, così il browser la trova prima che parta qualsiasi script.
  • Usa fetchpriority="high" al massimo su una o due immagini. Oltre non serve più.
  • Usa loading="lazy" solo per immagini e iframe fuori dalla prima schermata.
  • Riduci i reindirizzamenti e mantieni la pagina memorizzabile in cache. Parametri URL univoci possono rimandare le richieste al server di origine invece che alla CDN.

Una pagina che resta ferma

  • Imposta width e height su ogni immagine e video, e mantieni height: auto nel CSS.
  • Usa lo stesso rapporto d'aspetto per ogni immagine in un srcset.
  • Riserva lo spazio per annunci, contenuti incorporati e iframe prima che si carichino. Il capitolo sulla pubblicità tratta le dimensioni degli spazi.
  • Sovrapponi gli avvisi sui cookie e le richieste di iscrizione, oppure riserva loro dello spazio, così non spingono in basso l'articolo.
  • Usa font-display: optional, oppure un font di ripiego regolato sulle metriche del tuo web font.
  • Anima con transform. Animare top o left provoca spostamenti del layout.

Risposte rapide

Il tempo totale di interazione ha tre parti: l'attesa prima che parta il tuo codice, il tuo codice e il rendering che segue. Qualsiasi attività più lunga di 50 millisecondi è un'attività lunga.

  • Fai il meno possibile nelle callback degli eventi. Aggiorna prima lo schermo, poi rimanda il resto.
  • Spezza i lavori lunghi con scheduler.yield() e ripiega su setTimeout nei browser che non lo supportano.
  • Mantieni piccolo il DOM. Gli elenchi lunghi di articoli possono usare content-visibility per renderizzare più tardi gli elementi fuori schermo.
  • Ricorda che ogni iframe ha il proprio thread principale, quindi controlla da quale frame arriva un'interazione lenta.

Pagine lunghe e scorrimento infinito

Se una pagina di sezione scorre senza fine, dai a ogni blocco un URL permanente con un numero di pagina assoluto come ?page=12 e collega quelle pagine in sequenza. Aggiorna l'indirizzo con la History API mentre il lettore avanza. Google non scorre né clicca, quindi i contenuti caricati in modo differito devono caricarsi quando entrano nel viewport, senza bisogno di alcuna azione.

Checklist

  • Controlla LCP, INP e CLS in Search Console, separatamente per mobile e desktop.
  • Apri su un telefono il modello di articolo più visitato e verifica che titolo e data siano nella prima schermata.
  • Verifica che il testo completo dell'articolo sia nell'HTML inviato dal server.
  • Confronta mobile e desktop per contenuti, titoli, dati strutturati e tag robots.
  • Rimuovi loading="lazy" dall'immagine principale e aggiungi fetchpriority="high".
  • Aggiungi width e height a ogni immagine e video.
  • Riserva lo spazio per ogni annuncio, contenuto incorporato e banner.
  • Imposta scroll-padding-top in base alla tua intestazione fissa.
  • Prova la pagina a 320 pixel CSS di larghezza.
  • Dai a ogni blocco di una pagina con scorrimento infinito il suo URL.

Fonti