Riprendendo il discorso che abbiamo fatto sull’ottimizzazione del PageSpeed Insights, abbiamo visto come WP Asset CleanUp sia uno dei plugin più completi, in grado di ridurre e migliorare sensibilmente le metriche del PSI. Google del resto ama i siti veloci, e li premia (si spera) anche in SERP – per cui tanto vale spendere un po’ di tempo con questo plugin.
Che tutto è, purtroppo (unica pecca), a parte essere user-friendly, per cui richiede un piccolo bagaglio teorico all’interno di premesse per poi passare alla dura e cruda pratica.
Scarica WP Asset CleanUp
Un po’ di teoria: waterfall e chiamate HTTPS
Come sappiamo internet si basa sul modello client-server, cioè: i visitatori richiedono una pagina ad un server e questi, coi suoi tempi, ve la fornisce. Dietro una singola chiamata da una pagina, in realtà , si nasconde un sottobosco di chiamate che costituiscono una vera e propria cascata di chiamate. Una principale, ad esempio, che poi include le chiamate ai file CSS, quelle alle varie immagini e loghi, quelle ai file JS e cosଠvia. Questo insieme di chiamate è noto come waterfall ed è composto in questi termini, ad esempio per una chiamata ad un miosito.it/page qualsiasi.
A cosa servono CSS e JS nel sito
Inoltre, poi, le varie componenti rivestono vari tipi di funzioni ben precise:
- i file JS si occupano dell’interattività delle pagine, quindi dei menà¹, degli accordion che si aprono onclick, del lazy loading, ecc.;
- i file CSS si occupano dell’aspetto grafico e visuale delle pagine;
- HTML è il markup con i contenuti;
- le immagini ed i video possono essere caricati sia con metodo tradizionale (attributo src) che mediante lazy-loading (cioè mostrandole solo quando si scrolla alla loro altezza o gi๠di là¬).
Ottimizzare il waterfall
L’obiettivo dell’ottimizzazione, come abbiamo visto, è quello di migliorare e velocizzare i tempi di caricamento delle pagine del sito. Questo equivale a intervenire sulle singole chiamate HTTPS che compongono la pagina stessa, e che sono riassunte graficamente da grafici detti waterfall o “a cascata”.
Ogni pagina, come sappiamo, è composta da una serie di chiamate diverse a varie componenti, ovvero JS, CSS, video, immagini che occupano ognuna un certo quantativo di tempo. Ovviamente non tutto si può ottimizzare, perchè se togliamo brutalmente il JS o le immagini da una pagina senza criterio ne risentiremo in termini di User eXperience, e se disabilitiamo il javascript il menu – ad esempio – smetterà di funzionare.
Quindi sarà necessario trovare un compromesso tra usabilità , User eXperience e grafica accettabile e se possibile identica a prima.
Ridurre il numero di chiamate HTTPS: meno CSS, immagini e JS caricate, meglio è!
Non c’è dubbio, pertanto, che meno componenti o assets si vadano a caricare, meglio sia in termini di PSI: questo è visibile dai waterfall del caricamento del sito, che potete vedere grazie allo strumento per webmaster integrato in Google Chrome.
C’è anche un problema di cattiva progettazione di alcuni theme e plugin, che tendono quasi sempre ad inserire nel markup HTML, di solito mediante funzione wp_enqueue(), file CSS e JS senza considerare dove effettivamente servano. Per fare prima, infatti, si infilano su TUTTE le pagine, e questo (per quanto sia sbrigativo per i poveri programmatori) è un problema di efficenza enorme, un vero e proprio disastro per tutte le pagine. Ad esempio Contact Form 7 non inserisce i propri JS e CSS solo dove compare lo shortcode dei contatti, ma su tutte le pagine – giusto per citare un plugin molto diffuso che, al momento della scrittura di questo post almeno, presenta questo piccolo difetto.
Il problema è anche che WordPress non permette di gestire in autonomia i JS ed i CSS che vengono infilati nella pagina, o meglio: da interfaccia backend permette solo di disabilitare i plugin che introducano overhead in termini di JS e CSS, ma spesso questo è eccessivamente drastico come intervento, e non risolve il problema degli assets in eccesso; a noi magari servirebbe disabilitare solo un singolo file JS, mentre attivare o disattivare il plugin significa caricare o scaricare solo 7 o 10 file alla volta, senza vie di mezzo.
Per fortuna, e per evitarci smazzamenti di codice non da poco, un plugin utile come WP Asset CleanUp ci viene incontro a braccia aperte, con qualche piccola controindicazione preliminare:
- rischiate di sfasciare la grafica del sito se selezionate le opzioni errate;
- potrebbe introdurre problemi di visualizzazione delle icone o delle immagini su alcuni theme;
- le sovraottimizzazioni valorizzano il PageSpeed Insights come punteggio, ma il tool non tiene conto del fatto che magari il sito si vede male o non funzioni in seguito allo scaricamento ed alla riduzione di CSS e JS o immagini o altro;
- si tratta di un tool essenzialmente per programmatori e smanettoni, quindi se qualcosa non quadra tornateci con calma in seguito, e tenete conto che il plugin è attrezzato per esportare le impostazioni in CSV, importarle da CSV, ripristinare tutto com’era prima e, insomma, basta prenderla nel verso giusto e dovreste riuscire a fare tutto a dovere.
Ragionate sempre, quindi, nei termini resi possibile dai file CSS e JS su cui potete lavorare: ad esempio se usate un theme in Boostrap e disabilitate bootstrap.min.js, ad esempio il secondo livello del menu del vostro sito non funzionerà più, mentre se non utilizzate secondi livelli (e se non viene usato da altre componenti, ovviamente) potrete toglierlo di mezzo abbastanza tranquillamente.
La cosa faticosa, in effetti, in questo tipo di approccio sta più nel lavoro di verifica (che deve essere meticolosa, sempre) che in quello di impostazione: quest’ultima, al netto dell’abitudine e del capire quello che si fa, richiede pochi minuti – a regime.
Nota: il numero di chiamate con HTTP/2 è ad oggi, in alcuni casi, un aspetto relativo per l’ottimizzazione, per quanto non sia supportato da tutti i tool per la velocità e da tutti i browser
Cosa permette di fare WP Asset CleanUp?
WP Asset CleanUp è un ottimizzatore di PageSpeed Insights e di altre metriche di velocità che lavora sul numero di chiamate HTTPS, cercando di ridurle per migliorare i tempi di caricamento delle pagine web, riducendo le possibilità di conflitti tra JS, CSS ridondanti e file non compressi o non minificati. Esso infatti non solo permette di scegliere quanti e quali file CSS e JS caricare, ma anche di decidere se comprimerli, riunirli in minori chiamate HTTPS, rimuovere i meta tag inutili dal markup HTML e cosଠvia.
La versione free permette di lavorare su pagine e articoli singoli, mentre quella a pagamento permette di operare anche sui file che vengono caricati nelle pagine di categoria e dei tag. Nella maggioranza dei casi, la versione free è sufficente allo scopo e permette di arrivare anche a 95/100, in media. Vediamo in azione WP Asset CleanUp, a questo punto.
WP Asset CleanUp nella pratica
Dopo averlo installato, preferibilmente solo su un sito di prova le prime volte, leggetevi il readme Stripping the “fat”, e cliccate sul bottone in basso “I understand…“. Fatto questo, andiamo a vedere l e singole sezioni con le impostazioni disponibili e qualche consiglio su come impostarle. Mentre ci lavorate, testate le pagine con il PageSpeed Insights a distanza di qualche minuto, disabilitando sempre cache ed altri eventuali plugin di minify per evitare conflitti. Una volta impostato il plugin, valuterete se sia il caso di tenere o meno la cache attiva.
Plugin Usage Preferences
Le opzioni standard vanno già bene, per avere massimo controllo selezionate Manage in the Dashboard. e magari Manage in the Front-end, in modo da avere sempre sottomano il tool. A meno che non abbiate programmato voi stessi il vostro theme, direi anche di selezionare Hide WordPress Core Files From The Assets List? in modo da evitare di fare potenziali danni al sito e farsi prendere troppo la mano. Click su Update all settings, e passate oltre.
HTML Source Cleanup
Questa è una delle prime cose che faccio su qualsiasi sito, cioè seleziono ed abilito tutte le componenti indicate in questa sezione. Questo serve solo a ridurre un po’ le dimensioni del DOM, che tende a produrre HTML molto “ciccioni” che piacciono pochissimo a Google.
Attenzione giusto all’ultima opzione sullo strip o rimozione dei commenti HTML, perchè in alcuni casi possono essere utili (ad esempio alcuni programmi di affiliazione validano i siti mediante commenti HTML, quindi eliminandolo potreste avere problemi a quel livello).
Test Mode
Questa funzione è utile per i siti che sono già online, perchè permetteranno di testare le opzioni solo tra voi ed i vostri clienti o collaboratori, ma possiede un limite: per testare i cambiamenti del PSI non si può usare. Quindi usatela magari all’inizio, ma come strumento di lavoro a regime Test Mode andrà per forza di cose disabilitata.
Optimize CSS
Prima sezione magica, che permette di minificare tutti i file CSS del vostro sito: per accorgervi dell’effetto, aprite il codice del vostro sito, abilitate le opzioni indicate (solo quelle indicate senza lucchetto in trasparenza, in genere: queste ultime, infatti, sono disponibili solo nella versione premium del plugin) e controllate che le occorrenze di file .css siano ridotte. Se prima erano in 25, per dire, adesso devono essere per forza di cose ridotte.
Conviene abilitare, ad esempio:
- CSS Files Minification: applica l’algoritmo di minificazione dei file CSS; in modo che occupino meno spazio del dovuto a parità espressiva e di significato (questo l’ho scritto per ostentare La Cultura(C) )
- Combine loaded CSS (Stylesheets) into fewer files: qui succede uan cosa ancora più simpatica, ovvero: invece di caricare ad esempio 3 file CSS distinti nella stessa pagina, il plugin li scarica dalla memoria e li ricarica come file CSS singolo dato dall’unione dei precedenti.
- Inline CSS Files: cerca di mettere più file possibili all’interno del markup HTML via tag <style>, se e quando possibile;
- Cache Dynamic Loaded: altra opzione da abilitare, il PSI guarda molto questo aspetto ed in genere è poco influente per l’utente.
Un piccolo significativo passo, questo, verso i 90/10 e oltre: da solo non basta, ma c’è il vantaggio che si tratta di modifiche safe, almeno in questa fase. Se qualcosa non funziona, disabilitate le opzioni finchè non avrete trovato la combinazione che funziona sul vostro sito.
Cosa vuol dire minify
Per la cronaca, se questo fosse il CSS non minificato:
|
/*border: 0; */
font-size: 12pt;
margin: 0 auto;
padding: 13px 10px;
position: absolute;
text-align: center;
box-sizing: border-box;
width:100%;
z-index: 9999;
box-shadow:rgba(0,0,0,.5) 0px 5px 50px;
display: none;
left:0px;
font-weight:300;
}
#cookie-law-info-again {
font-size: 10pt;
margin: 0;
padding:5px 10px;
text-align: center;
z-index: 9999;
cursor: pointer;
box-shadow: #161616 2px 2px 5px 2px;
}
#cookie-law-info-bar span {
vertical-align: middle;
}
/** commenti che occupano KB inutili */
.cli-plugin-button, .cli-plugin-button:visited {
display: inline-block;
padding:10px 16px 10px;
color: #fff;
text-decoration: none;
position: relative;
cursor: pointer;
margin-left: 0px;
text-decoration: none;
}
.cli-plugin-main-link {
margin-left:0px;
font-weight: 550; text-decoration: underline;
}
.cli-plugin-button:hover {
background-color: #111;
color: #fff;
text-decoration: none;
}
.small.cli-plugin-button, .small.cli-plugin-button:visited {
font-size: 11px;
}
.cli-plugin-button, .cli-plugin-button:visited,
.medium.cli-plugin-button, .medium.cli-plugin-button:visited {
font-size: 14px;
font-weight: 500;
line-height: 1;
}
.large.cli-plugin-button, .large.cli-plugin-button:visited {
font-size: 14px;
padding: 8px 14px 9px;
}
.super.cli-plugin-button, .super.cli-plugin-button:visited {
font-size: 34px;
padding: 8px 14px 9px;
}
.pink.cli-plugin-button, .magenta.cli-plugin-button:visited {
background-color: #e22092;
}
.pink.cli-plugin-button:hover {
background-color: #c81e82;
}
.green.cli-plugin-button, .green.cli-plugin-button:visited {
background-color: #91bd09;
}
.green.cli-plugin-button:hover {
background-color: #749a02;
}
.red.cli-plugin-button, .red.cli-plugin-button:visited {
background-color: #e62727;
}
.red.cli-plugin-button:hover {
background-color: #cf2525;
}
.orange.cli-plugin-button, .orange.cli-plugin-button:visited {
background-color: #ff5c00;
}
.orange.cli-plugin-button:hover {
background-color: #d45500;
}
.blue.cli-plugin-button, .blue.cli-plugin-button:visited {
background-color: #2981e4;
}
.blue.cli-plugin-button:hover {
background-color: #2575cf;
}
.yellow.cli-plugin-button, .yellow.cli-plugin-button:visited {
background-color: #ffb515;
}
.yellow.cli-plugin-button:hover {
background-color: #fc9200;
}
|
quello minificato sarebbe, in automatico, compresso senza spazi nè commenti in questi termini:
#cookie-law-info-bar{font-size:12pt;margin:0 auto;padding:13px 10px;position:absolute;text-align:center;box-sizing:border-box;width:100%;z-index:9999;box-shadow:rgba(0,0,0,.5) 0 5px 50px;display:none;left:0;font-weight:300}#cookie-law-info-again{font-size:10pt;margin:0;padding:5px 10px;text-align:center;z-index:9999;cursor:pointer;box-shadow:#161616 2px 2px 5px 2px}#cookie-law-info-bar span{vertical-align:middle}.cli-plugin-button,.cli-plugin-button:visited{display:inline-block;padding:10px 16px 10px;color:#fff;text-decoration:none;position:relative;cursor:pointer;margin-left:0;text-decoration:none}.cli-plugin-main-link{margin-left:0;font-weight:550;text-decoration:underline}.cli-plugin-button:hover{background-color:#111;color:#fff;text-decoration:none}.small.cli-plugin-button,.small.cli-plugin-button:visited{font-size:11px}.cli-plugin-button,.cli-plugin-button:visited,.medium.cli-plugin-button,.medium.cli-plugin-button:visited{font-size:14px;font-weight:500;line-height:1}.large.cli-plugin-button,.large.cli-plugin-button:visited{font-size:14px;padding:8px 14px 9px}.super.cli-plugin-button,.super.cli-plugin-button:visited{font-size:34px;padding:8px 14px 9px}.pink.cli-plugin-button,.magenta.cli-plugin-button:visited{background-color:#e22092}.pink.cli-plugin-button:hover{background-color:#c81e82}.green.cli-plugin-button,.green.cli-plugin-button:visited{background-color:#91bd09}.green.cli-plugin-button:hover{background-color:#749a02}.red.cli-plugin-button,.red.cli-plugin-button:visited{background-color:#e62727}.red.cli-plugin-button:hover{background-color:#cf2525}.orange.cli-plugin-button,.orange.cli-plugin-button:visited{background-color:#ff5c00}.orange.cli-plugin-button:hover{background-color:#d45500}.blue.cli-plugin-button,.blue.cli-plugin-button:visited{background-color:#2981e4}.blue.cli-plugin-button:hover{background-color:#2575cf}.yellow.cli-plugin-button,.yellow.cli-plugin-button:visited{background-color:#ffb515}.yellow.cli-plugin-button:hover{background-color:#fc9200}
Optimize JS
Se finora abbiamo relativamente cazzeggiato con le impostazioni, la questione inizia a diventare più impegnativa in questi successivi termini. Il rischio di sfasciare la grafica sale, ma al tempo stesso la possibilità di ottimizzare lo stesso aumenta di molto. Le opzioni attivabili a livello globale, anche qui, sono:
- JavaScript Files Minification: simile alla funzionalità analoga per fogli di stile, solo che lavora sui JS
- Combine loaded JS (JavaScript) into fewer files: simile alla funzionalità analoga per fogli di stile, solo che lavora sui JS
- Inline JavaScript File: evita le chiamate superflue ai JS sulla base della dimensione minima, di soglia, del file, infilando il codice JS nel markup. Ovviamente questo non va bene in tutti i casi, perchè alcune componenti possono smettere di funzionare e, insomma, bisogna sperimentare con molta calma la cosa.
Anche qui trovate la combinazione che renda il sito accettabile, e procedete oltre. Provate a misurare il PSI a questo punto, e se tutto va bene dovreste già averlo migliorato di qualche punto.
Ottimizzare le chiamate HTTPS pagina per pagina
Partite dalla home, ed editatela come se fosse un post. In basso troverete tra le opzioni del backend i file CSS e JS che vengono abilitati, con un comodo switch per abilitare e disabilitare. Ovviamente spingetevi al limite: più roba inutile togliete di mezzo meglio è, a patto che sia davvero inutile.
Ripetete lo stesso discorso per pagine e post, dando priorità alle pagine più visitate ad esempio, e tenendo conto che potete anche disabilitare globalmente il caricamento di uno script o di un file CSS per tutte le pagine e per tutti i post in un colpo solo.
Conclusioni
Le tecniche descritte sono ad un livello piuttosto avanzato e presuppongono che l’operatore sappia tecnicamente di che cosa si sta parlando, e che sia anche in grado di sperimentare e “osare”, se possibile; il principale vantaggio di questo plugin è che sembra essere l’unico modo, da backend e senza toccare il codice o gli hook, per migliorare il punteggio del PSI. Di contro, è una tecnica che può avere risvolti imprevedibili per cui rimane sconsigliata per i meno esperti. Ai webmaster di livello intermedio si suggerisce di applicarla per gradi su siti di prova, partendo da theme molto semplici e cercando di portare (ponendosi obiettivi realistici: tipo almeno a 80 o 90) il sito senza intaccarne le funzionalità e la grafica.
Credo di essere il primo a parlarne apertamente in Italia, per cui condividete pure senza remore e fatemi sapere se, secondo voi, qualcosa nell’approccio è rivedibile, troppo complesso e via dicendo.
👇 Da non perdere 👇
- 📈 Analizza Cellulari 📱
- 🔐 AI che dolor, Chat
- 🎯 Targetizza Database SQL 🗄
- 📊 Analizza Errori più comuni 📛
- 🚧 Costruisci Evergreen 📟
- 👩💻 Programma Gratis 🎉
- 💻 Configura Hosting a confronto 💑
- 🔒 Conosci Hosting reti e domini 💻
- 👩💻 Tapioca Informatica 🖥
- 💻 Iconizza Internet 💻
- 🔒 Gestisci Lavoro 🔧
- 💡 Mostra Marketing & SEO 🌪
- 🔑 Apprendi Meteo ⛅
- 🤯 Visiona Mondo Apple 🍎
- 🔍 Supervisiona Mondo Domini 🌐
- 🚀 Metti in cloud monitoraggio servizi online 📈
- 🔮 Anatomizza Nuove tecnologie 🖥
- 🔒 Antani PEC e firma digitale 📩
- 👀 Prematura Programmare 🖥
- 🎮 Lonfa Scrivere 🖋
- 🔒 Conosci Servizi di SMS 📶
- 👀 Guarda Sicurezza informatica e privacy digitale 🖥
- 🎮 Ricorda Siti web 🌎
- 🤖 Ottimizza Spiegoni 🎓
- 🧠 Neuralizza Svago 🎈
- 📡 Quantizza Usare Excel 🌀
- 🤖 Sovrascrivi Windows 😲
- 🎨 Personalizza Wireless 🚁
- 🔑 Decifra WordPress 🤵
- 💬 Il nostro canale Telegram: iscriviti
- 🔵 Come verificare i minuti residui TIM via SMS
- 🟢 Come verificare i minuti residui TIM via SMS
- 🔵 Come ottimizzare il proprio sito grazie ad AJAX (GUIDA)
