Mantys CoreGuide e knowledge base
Prestazioni WordPress in pratica, spiegate senza gergo.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.