Pulizia delle risorse Pro

La prima cosa da fare è dargli uno sguardo logico. Ci sono caratteristiche particolari che vuoi mantenere o tralasciare? Ci sono plugin in esecuzione su una pagina che non necessitano di essere presenti?

Dammi Un esempio

I moduli di contatto sono comuni. Molte persone li hanno nel piè di pagina o sparsi ovunque. Ne hai davvero bisogno? Se qualcuno dovesse contattarti, andrebbe alla pagina dei contatti. È molto raro che qualcuno utilizzi un modulo di contatto nel piè di pagina, quindi perché averlo lì?

Gli script dei moduli di contatto sono piuttosto pesanti, generalmente 50kb-80kb e carichi di CSS. Ora quel piccolo modulo nel tuo piè di pagina sta forzando la pagina a caricare quegli script ad ogni caricamento della pagina. Non sarebbe meglio avere i moduli di contatto su una pagina logica e caricare solo gli script di contatto su quella pagina?

Questo è il genere di cose di cui si occupa l'ottimizzazione. Con Asset Cleanup Pro puoi andare alla pagina "contattaci" e scaricare gli script del modulo di contatto in tutto il sito tranne quella pagina. Ora hai risparmiato 50-80kb di peso della pagina riorganizzando i moduli di contatto in modo più logico.

Posso Fai questo Con tutti gli script?

Sì, più o meno. È anche molto utile con il branding. Spesso pagespeed significa ridurre leggermente il tuo sito web. Ma il tuo marchio potrebbe dipendere dall’aspetto e dalle funzionalità che hai sul tuo sito web. Quindi pensa alla struttura del tuo sito web tenendo presente il marchio. Crea pagine più semplici come la mia Home page, e poi creane di quelli con il tuo marchio dappertutto come il mio Chi siamo pagina.

Finché le tue pagine di destinazione sono ottimizzate, questo è davvero tutto ciò che conta. Non sacrificare mai il branding per la velocità della pagina. Rende semplicemente il tuo sito web orribile mentre lo spogli sempre più in basso. Superare 90% su Google Insights è abbastanza semplice su desktop, ma su dispositivi mobili è una storia diversa. I criteri sono molto più severi in quanto i dati dipendono dalle velocità di rete 4G simulate. Non lasciarti ossessionare. Finché si carica velocemente e ha un punteggio mobile negli anni '70, tutto andrà bene. Giusto perché tu lo sappia, il punteggio medio globale al momento in cui scrivo è 38% su dispositivo mobile.

Rinviare il codice significa caricare una parte di codice più avanti nel processo. Precaricare o Async significa caricarlo il prima possibile insieme ad altri file. Con il caricamento asincrono, il browser elaborerà i file insieme ad altri file per evitare qualsiasi blocco del rendering. Il rinvio non lo caricherà affatto fino alla fine del processo di caricamento.

Per ottenere un buon punteggio di pagespeed e tempi di caricamento rapidi, è necessario posticipare immediatamente il caricamento degli script che non sono necessari. Ciò su cui ti concentri sono i contenuti "above the fold". Vale a dire quello che vedi quando carichi la pagina per la prima volta. Non è necessario caricare nulla nel footer o nelle immagini più in basso nella pagina, solo il contenuto in alto.

È qui che può creare confusione perché non è sempre ciò che vedi che deve essere caricato. Ad esempio, potresti avere alcune routine JS che hanno dipendenze su un altro file. Ciò significa che il file JS "genitore" deve essere caricato affinché la subroutine JS figlio funzioni. Uno comune che emerge nei rapporti di Google Insights è il JQUERY file. Questo è un file framework da cui dipendono molti altri file JS per funzionare. Puoi provare a scaricarlo, ma molto probabilmente otterrai degli errori. Il mio consiglio è di tenerlo carico e risparmiarti molti mal di testa. Puoi comunque ottenere punteggi elevati anche durante il caricamento.

Il precaricamento presenta problemi simili. È fantastico che i file vengano caricati senza blocco del rendering, ma la chiave qui è che i file vengono scaricati insieme ad altri file. Ciò è particolarmente vero con i file JS e può causare alcuni problemi. Anche questo è dovuto alle dipendenze. Se il download di un file JS principale non è stato completato prima dell'inizio del download dello script figlio, lo script figlio non potrà funzionare causando errori.

Lo stesso si può dire dei file CSS, ma non causerà errori di base, piuttosto problemi di layout. La maggior parte dei temi ha un file "modulo" principale che contiene la maggior parte del codice CSS che costituisce gli elementi costitutivi del tuo sito web. Questo file dovrebbe essere mantenuto caricato per evitare errori e problemi di spostamento del layout, e normalmente è piuttosto grande. È qui che entrano in gioco i CSS critici e il precaricamento, ma ne parleremo più avanti Caricamento rapido pagina.

Quindi la cosa da fare è guardare il video, poi andare pagina per pagina e spuntare le caselle per rinviare o precaricare il file da ogni pagina. Se è qualcosa che non è necessario caricare, seleziona la casella per scaricarlo in tutto il sito e verrà scaricato su tutte le pagine. Esegui solo uno o due codici alla volta, svuota la cache e controllala. Se ne fai troppi e si rompe, diventa un po' un lavoro investigativo per vedere quale ha rotto il sito web!

La modifica dell'ordine di caricamento utilizzando Asset Cleanup Pro è una delle basi per ottimizzare il tuo sito web. Tuttavia, è la fase che richiede più tempo nel processo di pagespeed. Un buon consiglio è lavorare con i plugin prima di affrontare i file del tema. Questo perché è facile vedere quali plugin vengono caricati sulla pagina e giudicare se hai bisogno dei file o meno. Alcune funzioni del tema potrebbero essere meno ovvie e sono i file del tema che spesso causano la maggior parte degli errori. Potrebbe non essere necessario caricare qualcosa sull'intero sito Web, a parte una pagina critica, ed è facile perdere un'icona non caricata o un carosello mancante, ecc.

E allora Dovrei Fare?

Come affermato, ci sono molte fasi per l'ottimizzazione e questa è la prima. Per fortuna è anche il più complesso. Una volta caricati i plug-in solo dove devono essere e soddisfatto che tutto funzioni, eseguirei un nuovo backup del sito. Quindi esegui un test della velocità della pagina per ottenere un punteggio, annotalo e passa a un'altra fase che ti dà fastidio nel rapporto Insights. Forse prova l'ottimizzazione delle immagini o il trucco dell'organizzatore del plugin se il caricamento dei contenuti è intenso sui dispositivi mobili.

Un altro piccolo suggerimento particolarmente utile quando si rinviano i file JS è fare clic con il pulsante destro del mouse sulla finestra di Chrome e fare clic su "Ispeziona". Questo fa apparire una finestra che mostra tutto il caricamento del codice sullo schermo. Ora aggiorna la pagina web. Se vedi una piccola icona rossa con una croce sopra nella parte superiore della finestra del codice di Chrome, fai clic su di essa. Questo ti informerà di eventuali errori nella pagina. Guarda qual è l'errore e abbinalo ai nomi dei file sulla tua pagina. Reimposta ciò che hai fatto l'ultima volta (o smetti di rinviare JQUERY se lo hai provato). Aggiorna la pagina web e verifica se l'errore è scomparso. Se è sparito, sai di non rinviare quel particolare file.

Non provare a fare tutto in una sola seduta. Rilassati, esegui i plug-in, quindi il tema stesso una volta che ti senti a tuo agio con l'interfaccia utente di Asset Cleanup.

All'inizio del video noterai che l'host sta parlando dell'eliminazione delle funzionalità principali di WordPress. Presta particolare attenzione a questo perché è un attributo di Asset Cleanup Pro che non troverai altrove. Ti consente di eliminare il codice principale inutilizzato che può ridurre seriamente il peso del tuo sito web.

WordPress è così grande che raramente abbiamo bisogno di qualcosa di simile a tutto ciò che ha da offrire, quindi riduciamolo. Asset Cleanup Pro rende questo processo così semplice poiché tutto ciò che devi fare è accedere all'area di amministrazione del plug-in e piccoli interruttori attivano e disattivano le funzionalità. Nessuna codifica richiesta!

Cosa fa Ogni caratteristica Fare?

Con il caricamento dei caratteri, lo approfondiremo una volta arrivati al file Oh mio Dio pagina. Una volta terminato il download dei caratteri sul server, possiamo bloccare tutte le chiamate in uscita a Google Fonts tramite Asset Cleanup Pro. Tutto quello che devi fare è cliccare su Avanzate e spuntare la casella. Non farlo ancora perché caricherà solo i caratteri di sistema predefiniti che sembrano terribili!

Un rapido suggerimento sui caratteri

Nelle opzioni del tema, utilizza il minor numero possibile di tipi di carattere. Puoi utilizzare caratteri di peso diverso per i titoli, ecc., ma non utilizzare tipi diversi. I file di stile dei caratteri sono grandi e la scelta di un carattere solido non solo sembra coerente, ma aiuta davvero la velocità.

La maggior parte delle persone può disabilitare il servizio Pingback XML-RPC. Questo chiude anche alcune porte agli attacchi al tuo sito web. Non potrai disabilitare se utilizzi servizi di blogging esterni, Jetpack o hai un'app collegata al tuo sito. Tuttavia, se non hai nulla di tutto questo, disabilitalo.

I commenti sono abbastanza esplicativi. Se non li usi, disabilitalo. Se lo fai, tienilo caricato. La stessa cosa si può dire per gli EMOJI e i Dashicon. Se utilizzi un pagebuilder come Elementor o WP-Bakery, disabilita anche Gutenberg. Questo carica un bel po' di codice che non è necessario. Il tuo pagebuilder lo gestirà.

Con la pulizia del codice sorgente HTML, puoi praticamente eliminarli tutti. Ci sono istruzioni nella pagina, quindi leggile per essere sicuro di non utilizzare nessuna delle funzionalità.

Se utilizzate Kinsta o qualsiasi altro host web con Cloudflare, voi non abilitare il servizio CDN. Il CDN lo gestisce già e causerà errori se lo abiliti. Se utilizzi un CDN diverso, inserisci qui il tuo indirizzo CDN. Ciò aiuterà Asset Cleanup Pro a servire i file dalla posizione corretta nella configurazione.

Puoi tornare indietro e ottimizzare con Asset Cleanup Pro in qualsiasi momento. È utile testare le ottimizzazioni nelle sessioni, quindi una volta che alcune cose funzionano, puoi interrompere il lavoro e riprenderlo più tardi. Ogni volta che aggiungi un nuovo plugin puoi semplicemente entrare e ottimizzare quel particolare plugin nel modo in cui desideri che venga caricato.

Pulizia delle risorse Pro in sé non ci vuole troppo tempo per abituarsi. Ciò che può creare confusione è tutta questa attività di differimento/precaricamento. Una mossa sbagliata può interrompere la funzionalità, quindi eseguila sempre in piccoli passaggi in modo da poter ricordare facilmente qualsiasi modifica appena apportata.

Una volta che sei soddisfatto dei tuoi progressi, passa alla fase successiva.