Lighthouse per Drupal
Lighthouse e' lo strumento Google per audit di Performance, Accessibility, Best Practices, SEO e PWA. Integrato in Chrome DevTools e in PageSpeed Insights, e' la metrica di riferimento per misurare la qualità di un sito Drupal. Punteggi alti (90+) sono correlati a migliori posizionamenti SEO e conversioni.
Core Web Vitals
Le tre metriche Google chiave:
- LCP (Largest Contentful Paint): tempo per caricare l'elemento principale, target < 2.5s
- INP (Interaction to Next Paint): latenza risposta ad interazione, target < 200ms
- CLS (Cumulative Layout Shift): stabilità visiva, target < 0.1
Diagnostica
Su Drupal i problemi tipici sono:
- Immagini non ottimizzate (formato JPEG invece di WebP, dimensioni eccessive)
- CSS/JS non aggregati o render-blocking
- TTFB alto per cache misconfiguration
- Fonts caricati blocking-mode
- Third-party scripts (analytics, chat) bloccanti
Ottimizzazione LCP
- Preload del hero image:
<link rel="preload" as="image" href="hero.webp"> - Responsive image con WebP/AVIF
- BigPipe abilitato (Drupal core)
- HTTP/2 server push (limitato in 2026)
- CDN con edge cache
Ottimizzazione INP
- Ridurre JavaScript bundle (defer/async non-critici)
- Web Workers per task pesanti
- Evitare long task > 50ms
- Disabilitare moduli contrib non usati che aggiungono JS
Ottimizzazione CLS
- Width/height espliciti su
<img> - Riservare spazio per ads/embed
- Font display: swap con fallback metrica simile
- Evitare contenuti che si inseriscono sopra il fold dinamicamente
Aggregazione CSS/JS
Da /admin/config/development/performance:
- Aggregate CSS files: ON
- Aggregate JavaScript files: ON
Per granularità avanzata: advagg modulo contrib offre minify aggiuntivo, inline critical CSS, prefetch.
Critical CSS
Il CSS above-the-fold inlineato nel <head> migliora il LCP. Tool come critical di Addy Osmani estraggono il CSS critico. In Drupal il modulo critical_css automatizza per tipo di pagina.
Lazy loading
Drupal 9.1+ aggiunge automaticamente loading="lazy" alle immagini non-hero. Per iframe (mappe, video) abilitare manualmente. Per moduli pesanti (chat widget) caricare solo dopo user interaction.
Accessibility
Drupal core e tema Olivero hanno punteggi accessibility >95 di default. Attenzione a:
- Alt text obbligatorio su immagini
- Form labels associati
- Color contrast WCAG AA
- Landmark regions (header, main, nav)
- Skip to content link
Monitoring continuo
Tools: Lighthouse CI in pipeline, web.dev/measure, SpeedCurve, Calibre. Allarmi se punteggio scende sotto soglia su ogni deploy.
Hai bisogno di aiuto?
Se vuoi un sito Drupal performante dal team di G Tech Group, scrivici tramite il modulo di contatto.