Mantys Core
Fondatore di MantysLAB

Maxime

Maxime ha fondato MantysLAB e sviluppa Mantys Core, un plugin di performance per WordPress basato sul cloud.

Con Mantys Media, la sua attività da freelance, lavora direttamente sui siti WordPress dei clienti: page builder come Divi ed Elementor, negozi WooCommerce, configurazioni di tracciamento e consenso.

Le guide di questo sito nascono da quel lavoro: problemi incontrati su siti reali, misurati nel browser, e le soluzioni che hanno retto.

Aree di competenza

  • Core Web Vitals
  • WordPress
  • Critical CSS
  • JavaScript
  • Cache
  • WebP
  • Divi
  • Elementor
  • WooCommerce

Le guide di Maxime

Core Web Vitals · 11 min

Come ottimizzare un sito WordPress: da dove iniziare e in quale ordine

Velocizzare WordPress non è una lista di trenta trucchi da attivare tutti insieme, è una diagnosi: leggere i dati dei suoi visitatori, trovare quale metrica non passa su quale modello di pagina, correggere la causa nell’ordine giusto (server, immagini, CSS, JavaScript) e cambiare una sola cosa alla volta.

JavaScript · 9 min

Ritardare l'esecuzione di JavaScript ha rotto il mio sito: come trovare lo script colpevole

Ritardare JavaScript rompe un sito in cinque modi meccanici (una dipendenza mancante, un evento di pagina già scattato, un primo clic inghiottito, una catena bloccata su uno script, un visitatore mai contato), e ognuno lascia una firma leggibile nel browser, così si può escludere un solo script invece di spegnere tutta l'opzione.

Core Web Vitals · 8 min

Come correggere gli spostamenti del layout (CLS) su Divi ed Elementor

Sui page builder, la maggior parte degli spostamenti del layout nasce da sei fonti (immagini senza dimensioni, stili che arrivano dopo il primo rendering, web font che si scambiano, header e banner aggiunti da script, slider prima dell'avvio, contenuti incorporati), e ognuna si corregge riservando lo spazio prima che arrivi il contenuto.

Immagini · 7 min

Il mio hero è un'immagine di sfondo: perché rallenta l'LCP e come risolvere (Divi, Elementor)

Un'immagine di sfondo CSS è invisibile al browser finché il foglio di stile non è scaricato e applicato, non ha srcset e i builder spesso la mettono in lazy load via JavaScript, quindi l'hero parte tardi; la soluzione migliore è una vera immagine, e la seconda migliore è un preload per dispositivo e niente lazy load su quella sezione.

Immagini · 7 min

L'immagine LCP non è la stessa su mobile e desktop: come precaricare quella giusta

Quando l'immagine più grande cambia tra telefono e desktop, un solo preload fa scaricare a uno dei due un'immagine che non mostrerà, oppure fa scaricare l'hero due volte, e la soluzione è un preload per dispositivo, con gli stessi srcset e sizes dell'immagine, posto subito dopo il tag viewport.

Core Web Vitals · 8 min

PageSpeed e Search Console non concordano: come leggere i dati di laboratorio e i dati sul campo

Il punteggio di PageSpeed è una sola visita simulata su un telefono e una rete volutamente lenti, mentre Search Console riporta ciò che i Suoi visitatori reali hanno vissuto in 28 giorni, quindi i due possono divergere in entrambe le direzioni: un laboratorio verde con un campo scarso quando il Suo pubblico è più lento del test, e un laboratorio mediocre con un campo verde quando è più veloce.

CSS · 8 min

Rimuovere il CSS inutilizzato ha rotto il mio layout: come trovare gli stili mancanti

Una passata di CSS utilizzato conserva solo le regole che ha visto in uso su un'unica istantanea della pagina, quindi tutto ciò che non era sullo schermo in quel momento (uno stato aperto, l'altro dispositivo, contenuti caricati dopo, un font di icone, un'animazione d'ingresso) perde i suoi stili, e ognuna di queste lacune ha una firma che le indica quale regola rimettere.

JavaScript · 8 min

Come far caricare Axeptio più velocemente (senza rompere il consenso)

Un banner Axeptio arriva raramente in ritardo per colpa di Axeptio stesso, arriva in ritardo perché la sua catena di richieste (impostazioni, SDK, configurazione del progetto, font) fa la coda dietro tutto il resto che la pagina carica, quindi i rimedi sono alleggerire la concorrenza, non ritardare mai lo strumento di consenso, caricarlo presto, eliminare il font che non usa e personalizzarlo senza combattere contro il suo markup.

Cache · 11 min

Come velocizzare un negozio WooCommerce senza rompere il carrello

Un negozio WooCommerce sono due siti in uno, un catalogo che si può mettere in cache e ottimizzare a fondo, e una transazione (carrello, checkout, account) che non va mai messa in cache né alleggerita, quindi un negozio veloce comincia tracciando questo confine, poi sistema la cache, i cart fragments, le immagini dei prodotti e gli script su ciascun lato.

Immagini · 8 min

SVG inline: perfetto per un'icona, veleno per un'illustrazione

Un SVG non è un unico tipo di immagine. Una piccola icona inline è ideale, un'illustrazione pesante inline appesantisce la pagina, e una foto raster nascosta dentro un SVG è la peggiore delle tre. Ecco come distinguerle e scegliere ogni volta il formato giusto.

JavaScript · 8 min

Come scegliere un tema, e riconoscere quelli che spediscono un unico gigantesco file JavaScript

Prima ancora della tua prima riga di contenuto, il tema decide che cosa un browser deve scaricare, interpretare ed eseguire. La scelta che pesa di più è come spedisce il suo JavaScript: un insieme di piccoli file divisibili, oppure un unico blocco enorme che inchioda l'intera pagina alla sua parte più lenta.

CSS · 6 min

Perché il mio mini carrello WooCommerce smette di comparire quando attivo Remove Unused CSS?

Il pannello del mini carrello resta nascosto finché qualcuno non ci passa sopra col mouse, quindi un passaggio used-CSS ne rimuove gli stili e un ritardo JavaScript ne blocca l'apertura. Torna a funzionare non appena si mantengono i suoi stili in una safelist e si lasciano eseguire i suoi script, cart fragments incluso.

Core Web Vitals · 9 min

Come velocizzare un sito Divi e migliorare i suoi Core Web Vitals (passo dopo passo)

Un sito Divi può essere veloce se si ottimizza nell'ordine giusto, prima le immagini, poi il CSS, poi il JavaScript, iniziando dalle leve che non possono rompere nulla prima di toccare quelle che possono.

JavaScript · 5 min

Perché il mio menu hamburger si apre solo al secondo clic?

Se ha attivato un JavaScript delay (caricamento degli script al primo clic o dopo un timer), il primissimo tocco sull'hamburger risveglia il caricamento degli script, non apre il menu. Il menu risponde solo al secondo tocco. La soluzione: isolare lo script del menu e le sue dipendenze dal delay, oppure, meglio ancora, dotarlo di un menu vanilla senza dipendenze.

Core Web Vitals · 6 min

Quali ottimizzazioni può attivare senza alcun rischio di rompere il suo sito?

Esiste un'intera famiglia di ottimizzazioni che non può rompere il suo sito, perché riducono il peso dei file o forniscono indicazioni al browser, senza mai modificare ciò che viene eseguito. Inizi da queste: le fanno ottenere l'essenziale, a occhi chiusi.

CSS · 6 min

Perché il mio critical CSS ha rotto il menu / overlay (appare aperto al caricamento)?

I generatori di critical CSS mantengono solo gli stili per ciò che è visibile nella parte superiore della pagina al caricamento. Gli elementi nascosti di default e aperti al click (menu mobile, overlay di ricerca, modale, drawer) vengono giudicati inutili e rimossi. Il risultato: al caricamento, appaiono aperti, rotti, privi di stile.

Immagini · 5 min

Perché PageSpeed Insights continua a dire “Dimensiona le immagini correttamente” anche se ho un srcset?

Srcset offre al browser un elenco di dimensioni, ma è l'attributo sizes a dirgli quale scegliere. Se sizes manca, è sbagliato o viene ignorato, il browser scarica l'immagine più grande dell'elenco, e PageSpeed lo segnala, srcset o meno.

Il mio accountOttieni licenza →