Come ho verificato che il prerendering funziona davvero in produzione: il caso Alem Automotores
Come si distingue, dall'esterno, un prerendering che funziona da uno che non funziona, senza accesso al codice?
Di Pietro Fiorillo ·
Indice dell'articolo
Perché ho rivisto questo progetto dopo aver trovato un problema in un altro simile
Dopo aver verificato che il prerendering per rotta di AV Automotores non funzionava in produzione, ho voluto rivedere un progetto dello stesso tipo (SPA in React con Firestore, catalogo veicoli) per confermare se il problema fosse del pattern architetturale in generale o specifico di quel caso.
Cosa ho trovato: una scheda veicolo reale, non uno shell generico
Ho richiesto con curl -sL l'URL di un'Audi A3 2010 elencata nella sitemap pubblica del sito. A differenza di quanto trovato in AV Automotores, la risposta aveva un <title> specifico del veicolo (con anno e prezzo inclusi), un <link rel="canonical"> che punta a quello stesso URL, e un blocco <script type="application/ld+json"> reale.
{
"@context": "https://schema.org",
"@type": "Product",
"name": "Audi A3 2010",
"brand": { "@type": "Brand", "name": "Audi" },
"offers": {
"@type": "Offer",
"priceCurrency": "USD",
"price": 8800,
"availability": "https://schema.org/InStock"
}
}Vale la pena precisare una cosa: Schema.org ha un tipo Vehicle più specifico di Product, e la documentazione originale di questo progetto menzionava «schema markup per organizzazione, breadcrumb e recensioni» senza specificare quale. Quello che ho trovato in questa scheda è Product con Offer e Brand, che Google interpreta correttamente per prezzo e disponibilità, anche se non è il tipo più specifico possibile. Preferisco correggere questa imprecisione qui piuttosto che lasciarla.
Un dettaglio reale che potrebbe spiegare un LCP più lento del previsto
Il catalogo di questo progetto è più piccolo di altri simili (31 URL nella sitemap, contro 171 di un altro progetto della stessa categoria), quindi mi aspettavo un Lighthouse più alto. Non è stato così: 45 su 100 su mobile, con un LCP di 12,5 secondi.
Rivedendo l'HTML, ho trovato che gli URL delle immagini dei veicoli hanno spazi non codificati: https://automotoresalem877.com/vehicles/autos/Audi A3 2010/1.png, invece di %20 al posto degli spazi. Non posso confermare che questa sia la causa principale dell'LCP senza profilare a fondo il browser, ma è un dettaglio tecnico reale e osservabile, non una speculazione senza base.
Risultati misurabili
| Metrica | Risultato | Ambiente / evidenza |
|---|---|---|
| Lighthouse Performance (mobile, lab) | 45 / 100 | Lighthouse 13.5.0, throttling simulato |
| LCP (lab) | 12,5 s | Stessa misurazione Lighthouse, non è un dato di campo (CrUX) |
| URL nella sitemap | 31 | sitemap.xml pubblica, confermata con curl |
| Title e canonical per veicolo | Confermato, unico per rotta | Verificato sulla scheda di Audi A3 2010 |
La differenza tra un pattern che funziona e uno che non funziona spesso non sta nell'architettura scelta, sta nel fatto che qualcuno abbia verificato che continuasse a girare.
Il mio ruolo in questo progetto
Il mio ruolo in Alem Automotores ha incluso la migrazione del catalogo a Firestore, il pannello admin e la SEO tecnica del sito, come parte del mio lavoro in MANYA Digital.
Cosa farei diversamente: una precisione in sospeso sul tipo di schema
La descrizione originale di questo progetto non specificava il tipo esatto di Schema.org usato. L'ho già aggiornata per riflettere ciò che ho confermato in produzione: Product, Offer e Brand, non Vehicle. È una correzione minore rispetto ad altre di questa serie, ma vale la stessa regola: se posso verificarlo, lo preciso.
Cosa proverei dopo
Se avessi accesso al repository, codificherei correttamente gli URL delle immagini (sostituendo gli spazi con %20) come primo passo prima di cercare cause più complesse per l'LCP lento, e valuterei se vale la pena migrare il JSON-LD da Product a Vehicle per essere più specifico.
Fonti
Domande frequenti
Perché il JSON-LD usa Product invece di Vehicle?
Schema.org ha un tipo Vehicle più specifico, ma Product (con Offer e Brand) è comunque valido e Google lo interpreta bene per schede con prezzo e disponibilità. Non è un errore, è una scelta diversa da quella menzionata nella documentazione originale del progetto, e preferisco correggerlo qui invece di lasciarlo impreciso.
Perché l'LCP è così lento se il sito è piccolo?
Non lo so con certezza senza profilare a fondo il browser, ma ho trovato un dettaglio tecnico reale: gli URL delle immagini nell'HTML hanno spazi non codificati (/Audi A3 2010/1.png invece di %20). È il tipo di dettaglio che vale la pena controllare prima di cercare spiegazioni più complesse.
Questo contraddice quanto hai scritto su AV Automotores?
Al contrario, lo conferma: i due progetti usano un approccio simile (SPA con prerendering), ma qui il prerendering funziona davvero. È la prova che il pattern funziona quando viene eseguito correttamente, non che il pattern stesso sia il problema.
Come hai verificato questo senza accesso al repository?
Ho richiesto con curl un URL reale dalla sitemap pubblica e ho letto l'HTML completo restituito, esattamente ciò che vedrebbe un crawler che non esegue JavaScript. Non mi è servito il codice per confermare che title, canonical e JSON-LD sono reali e specifici per quel veicolo.
La sitemap di questo progetto è completa?
Ha 31 URL, coerente con un catalogo più piccolo rispetto ad altri progetti simili. Non ho trovato URL rotti o duplicati nel campione che ho controllato.
Quanto costa mantenere un catalogo così?
L'hosting di una SPA statica con Firestore è basso. Il costo reale sta nel caricare foto e dati di ogni veicolo dal pannello admin, e nel tempo di rivedere periodicamente dettagli tecnici come la codifica degli URL delle immagini.