Avete mai notato la velocità sovrumana con cui figli e nipoti scandagliano i video su TikTok? Pollice in alto, scroll, mezzo secondo per decidere, scroll, prossimo video. Quando ho dovuto lanciare una mia campagna pubblicitaria sul social più frenetico che ci sia, il problema numero uno è saltato subito all’occhio.
In un contesto dove la noia scatta dopo mezzo secondo, l’attesa fra il click sull’inserzione e il caricamento della pagina fa la differenza fra una pagina anche vista e una solo richiesta, chiusa prima ancora di essere disegnata. Soprattutto per i miei cavi USB colorati — pensati esattamente per il pubblico Instagram e TikTok — non potevo permettermi di perdere visitatori al primo gradino.
La mia soluzione: landing page ibride in React, che si appoggiano a WooCommerce per i dati ma ne saltano completamente l’output HTML. Risposta praticamente istantanea, navigazione a swipe perfetta per la generazione Tinder.
WooCommerce è completo di tutto e questo ha il suo peso
WooCommerce è una piattaforma fantastica, ma genera ogni pagina prodotto attraverso decine di hook, filtri, query al database, ricerche di template e asset enqueued dinamicamente. Su una landing per una campagna, di tutto questo non mi serve quasi nulla: voglio mostrare una foto, un prezzo, un pulsante di acquisto. E lo voglio in mezzo secondo.
Le soluzioni convenzionali — caching aggressivo, ottimizzazione, plugin di velocizzazione — funzionano fino a un certo punto. Il limite è strutturale: ogni byte di HTML, CSS e JavaScript che WordPress mette in pagina rallenta il primo paint.
L’architettura React Island
L’idea che ho seguito è quella delle island architectures: una pagina HTML minimale e leggerissima, con un piccolo “isolotto” di JavaScript che gestisce l’interattività. Niente jQuery, niente frontend WooCommerce, niente tema. Un template PHP custom che restituisce esattamente questo:
<!DOCTYPE html>
<html>
<head>
<style>/* reset minimo + font inline */</style>
<link rel="preload" href="hero.webp" as="image">
<link rel="stylesheet" href="landing.css">
</head>
<body>
<main id="lp-root"><!-- skeleton statico --></main>
<script>window.__LP_DATA__ = { /* dati prodotto in JSON */ }</script>
<script defer src="landing.js"></script>
</body>
</html>
Il template PHP interroga WooCommerce una sola volta per estrarre i dati del prodotto (nome, prezzo, varianti, immagini, scadenza offerta) e li serializza in JSON inline nella pagina stessa. Il React (in realtà Preact, 8KB gzippato invece di 40) prende quei dati già pronti in memoria e disegna l’interfaccia. Zero chiamate AJAX in caricamento. L’unica fetch arriva quando l’utente clicca “Aggiungi al carrello”: un POST all’endpoint REST WooCommerce, redirect immediato al carrello.
Il bundle JavaScript completo pesa circa 25 KB gzippati. Il rendering è essenzialmente istantaneo.
Pagina WooCommerce standard VS Landing Island ottimizzata
Il percorso della risposta cambia radicalmente:
Due varianti: prodotto singolo e card set
Le landing esistono in due sapori:
Prodotto singolo — una pagina dedicata a un solo prodotto, con galleria immagini swipeable, selettore varianti (colore, lunghezza), countdown offerta e pulsante d’acquisto. Perfetta per campagne mono-prodotto.
Card set — più prodotti impilati come un mazzo di carte, navigabili con swipe orizzontale (lo stesso gesto che la generazione Tinder usa naturalmente). Ogni card è una mini-landing autonoma: foto, prezzo, varianti, CTA. Sulla prima card una manina animata scivola verso sinistra per due secondi, suggerendo il gesto a chi non lo conoscesse. Poi sparisce per sempre.
Tecnicamente lo swipe usa scroll-snap-type: x mandatory — nativo, browser-driven, zero librerie JavaScript. Su Android e iOS è fluido come la pagina di un’app nativa.
Abbiamo anche aggiunto una galleria automatica, con caricamento asincrono, per ogni prodotto tutto regolabile da un comodo pannello in WooCommerce:
I gotcha che mi hanno fatto perdere ore
Tre cose meritano una menzione, perché chi prova a replicare questa architettura le incontrerà:
- Variazioni WooCommerce e attributi tassonomia — le variazioni di prodotto restituiscono le chiavi con prefisso
attribute_(es.attribute_pa_colore), mentre il prodotto padre le restituisce senza. Senza una normalizzazione PHP che strippa il prefisso, il matching JavaScript fra selezione utente e variante disponibile fallisce sempre, silenziosamente. Tre giorni per scoprirlo. - CSS
touch-action— la specifica W3C la calcola per intersezione lungo la catena DOM. Metterepan-xsu un genitore epan-ysu un figlio non dà “entrambe le direzioni”: dà nessuna. La configurazione corretta èpan-x pan-ysullo swiper, che il browser disambigua in base al gesto reale. mix-blend-modee stacking context — unz-indexsull’elemento contenitore crea un nuovo stacking context isolato, e il blending vede solo i contenuti di quel context. Volevo una scia colorata che fosse sempre visibile su qualsiasi sfondo: serviva ilmix-blend-mode: difference, ma con z-index isolato non funzionava. Soluzione: layering tramite ordine del DOM (later = on top), nessun z-index.
Risultati
Su Google PageSpeed Insights in modalità mobile:
- Performance: 96/100
- First Contentful Paint: 0.9s
- Largest Contentful Paint: 2.4s
- Cumulative Layout Shift: 0
- Total Blocking Time: 150ms
L’utente vede il prodotto prima che il pollice abbia finito di togliersi dallo schermo. Il problema della generazione TikTok, almeno per qualche secondo, smette di essere un problema.
Ma nella pratica concreta, quali riscontri si ottengono?
Abbiamo applicato la landing island ad una campagna TikTok. Il risultato è stato eccellente! Le statistiche dimostrano un balzo 10x (sì, dieci per!) delle visite, rispetto alla pagina prodotto, pur ottimizzata. Pressoché tutti i click che risultano dalle statistiche dentro TikTok trovano ora riscontro nelle statistiche del sito.
Costi e benefici
Come in molte cose nella vita, quando guadagni qualcosa perdi qualcos’altro. La landing island, sia nella versione prodotto singolo che nelle card multi-prodotto, rinuncia a tutti i dettagli della pagina prodotto completa: descrizione estesa, recensioni, tag, pulsanti dei gateway di pagamento e così via.
Non è assolutamente una pagina sostitutiva! Ma serve il suo scopo alla perfezione: catturare l’attenzione del visitatore nell’istante in cui arriva. Tutti i passi successivi — l’aggiunta effettiva al carrello, i dettagli completi del prodotto — lo riportano all’esperienza WooCommerce integrale.
È una vetrina temporanea con un riflettore molto preciso: intercetta i passanti e li invoglia ad entrare.
La tecnica è replicabile su qualsiasi installazione WordPress + WooCommerce sui nostri server. Se vuoi vederla in azione, una delle landing card è qui. Per chi volesse implementare qualcosa di simile sul proprio shop, scriveteci.