Guest Post dello staff di supporthost.it

Merge e Minify un’azione che può rivelarsi davvero utile sul tuo sito WordPress, leggi questo articolo e scoprila meglio. 

Se sei capitato in questo articolo hai sicuramente sentito parla di Merge e Minify un processo molto particolare che ti illustreremo nelle prossime righe. Questo processo prevede che il proprietario di un sito WordPress, o chi per lui, vada ad eseguire una serie di operazioni necessarie per migliorare le prestazioni del suo sito online. Come puoi vedere leggendo la guida di SupportHost questa operazione si rivela molto utile anche quando abbiamo bisogno di rendere il nostro sito più veloce. Nelle prossime righe andremo perciò a parlare di più di questa operazione, di come funziona, di quali sono i vantaggi che ci porta e il perché eseguirla. Prosegui la lettura e scopri tutto quello che c’è da sapere. 

Che cos’è l’operazione definita Merge e Minify?

Con il termine Merge e Minify si indica un processo ben preciso con azioni mirate che permettono di ridurre le dimensioni di ogni pagina presente sul tuo sito ed anche il numero di richieste. Tutto questo porta dei vantaggi che andremo a scoprire più avanti. Con il merge si avvia un procedimento che prevede l’unione dei files CSS così da ottenere un numero inferiore rispetto a quello attuale. Potrai anche però unire i js che contengono i vari script per ridurre, come abbiamo già detto, il numero di richieste. Con il minify possiamo andare a ridurre le dimensioni di un file, attraverso l’eliminazione di caratteri non necessari come l’interruzione di riga oppure l’eliminazione dei commenti presenti nella pagina. Questo genere di file diventa difficile da leggere ma può rivelarsi utile se andiamo a apportare delle modifiche perché abbiamo modo di ridurre le dimensioni finali dei vari file legati al tuo sito web. Puoi eseguire questo tipo di operazione attraverso l’utilizzo di un plugin apposito che svolge tutto in automatico. 

Quali plugin possiamo usare?

Ci sono diversi plugin da poter utilizzare per eseguire un’azione di Merge e Minify, tra questi troviamo Asset Cleanup e Fast velocity Minify. Nei prossimi paragrafi andremo a capire meglio come funzionano entrambi. 

Asset Cleanup 

Asset Cleanup è un plugin molto utile quando vogliamo appunto eseguire una procedura Merge e Minify, grazie a questo plugin abbiamo la possibilità di:

  • Diminuire le richieste http caricate andando ad eliminare le risorse che bloccano il caricamento veloce della pagina.
  • Precaricare i file JS e CSS.
  • Minimizzare i files CSS e JavaScript.
  • Combinare i files JavaScript e CSS. 
  • Ridurre il codice HTML. 
  • Rimuovere dal sito Emoji, Dashicon e la risposta ai commenti lasciati dagli utenti. 
  • Rende il processo di scansione del codice sorgente molto più facile.
  • Rimuove eventuali conflitti tra plugin e temi scelti. 
  • I file di registro legati al server saranno più facili da scansionare. 
  • Combinerà tutte le richieste di Google Font.
  • E molto altro.

Per poter utilizzare il plugin dovrai scaricarlo, installarlo ed attivarlo sul tuo sito web WordPress. Una volta eseguito questo passaggio non dovrai far altro che andare nelle sue impostazioni e nella sezione tab selezionare “Combine CSS & JL Files”. Salva le tue impostazioni e pulisci la tua cache. Torna sul tuo sito web alla schermata home per visualizzare se si sono creati eventuali problemi, se dovessi verificare alcune problematiche dovrai trovare il file CSS o il file JavaScript interessato ed escluderlo da questa operazione, così da eliminare il problema. Questa operazione è la Merge, in un secondo momento dovrai occuparti di fare il Minify, allora andrai a selezione “Minify CSS & JL Files” imposta le tue preferenze, salva le impostazioni. Svuota nuovamente la tua cache e controlla il sito per verificare eventuali problematiche. Se non riscontrerai nessun problema avrai ottenuto l’effetto desiderato. I problemi che si possono verificare sono ben visibili in quanto potrebbe manifestarsi la mancanza di una parte grafica del tema e del tuo sito web, se invece il sito si presenta esattamente come prima allora non c’è stato alcun problema. 

Fast Velocity Minify 

Anche questo plugin, come abbiamo già detto, offre la possibilità di eseguire il Merge e Minify di tutte le risorse presenti sul tuo sito per velocizzare il tuo sito web WordPress. È un prodotto pensato per sviluppatori e utenti che sono pratici nell’utilizzo della piattaforma. Ti permette di:

  • Ridurre le richieste http andando ad unire i file CSS e JavaScript in gruppi di file. 
  • Minifica i file CSS e JS con PHP. 
  • Unisce, integra ed ottimizza Google Fonts.
  • Va a gestire gli script caricati separatamente in ogni parte della pagina di un sito web. 
  • Supporta gli script localizzati e mantiene l’ordine degli stessi per escludere alcuni file. 
  • Crea file di cache statici nella directory.
  • Conserva i file originale, duplicando e copiandoli nella directory. 
  • Minimizza l’HTML del tuo sito web rimuovendo tutte le informazioni extra. 
  • Elimina la cache. 
  • Ed ha una serie di servizi aggiuntivi e la possibilità di impostare le proprie preferenze per l’unione e la minimizzazione dei vari file.

Come abbiamo anticipato è un prodotto più adatto ai professionisti e a chi ha esigenze particolari. Permette di personalizzare ogni azione, di scegliere di eseguire impostazioni avanzate e non. Per poterlo utilizzare dovrai scaricarlo, installarlo e attivarlo. Una volta eseguita questa impostazione potrai recarti nelle sue impostazioni e definire ogni singolo parametro così da eseguire l’operazione Merge e Minify. 

Perché eseguire questo tipo di operazione?

L’operazione è necessaria per migliorare le prestazioni del nostro sito web WordPress. Grazie al Merge e Minify avrai la possibilità di rendere il tuo sito web molto più veloce, ciò ti darà un vantaggio non indifferente. Inoltre, come saprai, Google e gli altri motori di ricerca premiano i siti efficienti e con delle prestazioni elevate. Ciò vuol dire che più il tuo sito web sarà performante più sarà premiato dai vari motori di ricerca. Inoltre un sito veloce e che carica i contenuti rapidamente è sempre ben visto dagli utenti che scelgono di tornarci per reperire tutte le informazioni che vogliono. 

EDIT DEL 10 GIUGNO 2019: Il motivo principale per cui ciò accadava era perchè i register_meta venivano chiamati all’interno di un file che veniva caricato solo nel backend. Rendendoli disponibili anche in front funziona tutto a dovere.


Lavorando nella creazione di nuovi blocchi per il mio plugin Yasr, ho perso quasi due pomeriggi interi su quello che poi ho scoperto essere un bug di Gutenberg , (il link è al duplicato, ma credo che vada più diretto al punto) che purtroppo ho scoperto solo dopo che avevo già realizzato il mio workaround: l’ho trovato infatti quando stavo creando una nuova issue su GitHub.

Andiamo con ordine: avevo bisogno di pescare un valore tra i postmeta e utilizzarlo all’interno del pannello del blocco che stavo creando.
L’attributo era quindi così:

overallRating: {
type: ‘number’,
source: ‘meta’,
meta: ‘yasr_overall_rating’
}

Alla prima apertura di Gutenberg viene correttamente pescato, e a un determinata azione dell’utente, (quando inserisce un nuovo voto) il valore nel database viene aggiornato.
Quello che succedeva però era che, nonostante il valore nel database fosse correttamente aggiornato, quando il post veniva salvato o aggiornato, il valore per qualche oscuro motivo veniva ritornato come undefined . Questo succede solo quando il post viene aggiornato o salvato: ricaricando la pagina veniva visualizzato quello corretto.

Il mio workaround, che poi ho scoperto è stata anche la soluzione suggerita nell’issue su GitHub, è stata quella di lavorare con due attributi diversi

//this is from post meta
overallRatingMeta: {
type: ‘number’,
source: ‘meta’,
meta: ‘yasr_overall_rating’
},
//this is from gutenberg comments
overallRatingAttribute: {
type: ‘number’,
default: 0
},

Il secondo attributo è uno di quelli di default di Gutenberg, che salva i dati come commenti del blocco, e che funziona senza noie.
Se il post è nuovo, o se non ha lo shortcode salvato, overallRatingAttribute sarà sempre 0. In questo caso, assegno a overallRatingAttribute il valore di overallRatingMeta.
Se, invece, nel post è gia presente lo shortcode , overallRatingMeta non verrà mai utilizzato.

Spero che questa cosa possa aiuta a risparmiare tempo a chi come me deve leggere o manipolare dei post meta all’interno di Gutenberg.

Ci sono diversi motivi per cui si sceglie di usare un servizio di SMTP esterno per l’invio delle email piuttosto che usare le funzioni standard di WordPress (o php) : in primis la maggiore affidabilità, ma anche la possibilità di avere delle statistiche non è affatto male (per non parlare dell’invio di mailing list con servizi esterni).

Cercando un plugin per svolgere il compito, ci si imbatte sicuramente in Wp Mail Smtp: conta oltre 1 milione di installazioni attive ed è consigliato da articoli/tutorial come quelli di SiteGround, Dreamhost e tantissimi altri.

Con questi numeri, uno si fida e lo installa più o meno ad occhi chiusi.

Un errore assai grave, purtroppo, ora vi spiego perchè punto per punto.

Questa è la pagina delle impostazioni del plugin, la parte in cui si inseriscono i parametri per il login (come parametri ho usato smtp.provideracaso.it come host, come indirizzo email indirizzo@email.it e come password passwordacaso)

Impostazioni parametri login per wp mail smtp

Qui, subito notiamo che qualcosa non quadra:

The password is stored in plain text. We highly recommend you setup your password in your WordPress configuration file for improved security; to do this add the lines below to your wp-config.php file.
define( ‘WPMS_ON’, true );
define( ‘WPMS_SMTP_PASS’, ‘your_password’ );

Un messaggio ci avverte che la password è salvata nel database in chiaro, ammenoché non definiamo quelle due costanti nel file wp-config.php.

E già da qui mi viene da chiedere perchè cavolo si lascia la possibilità di salvare la password in chiaro allora, visto che c’è un metodo più sicuro.
Che più sicuro non è manco per il cazzo, come vedremo più avanti.

Diciamo che io sono uno scemo, non me ne frega niente di quel messaggio e la password la salvo comunque in chiaro.
Nella tabella _options, se cerco %smtp%, ecco compare tra le altre una riga che si chiama wp_mail_smtp, con la nostra bella password in chiaro, come ci avevano avvertito

Wp mail smt parametri nel db

Only shit!
È tutto vero!
Cancelliamo subito quella riga dal db e inseriamo quelle due costanti che ci aveva detto prima! (che è comunque è una soluzione di merda)

Ecco come appaiono ora le impostazioni

Impostazioni parametri login per wp mail smtp con le define

Notiamo subito come il campo password è preinserito e non modificabile; oltre questo il warning è sparito.

Siamo a posto no?
Ho fatto il bravo, ho seguito le istruzioni, sono al sicuro giusto?
Diciamo che ignoro che salvare la password in una costante invece che nel db non è una soluzione ma solo una grandissima minchiata, andiamo a vedere come cambia ora il nostro db:

Wp mail smt parametri nel db anche dopo la define

Holy Shit!
Ma solo a me sembra uguale a prima?

Ora, leggendo la loro doc, c’è questo passaggio

Unlike other Gmail SMTP plugins, our Gmail SMTP option uses OAuth to authenticate your Google account, keeping your login information 100% secure.
Read our Gmail documentation for more details.

In poche parole se si usa Gmail effettuano il login con OAuth.

A parte il fatto che non ho intenzione di usare Gmail come host SMTP, ma a parte questo, anche se fossi intenzionato, col cazzo che userei il mio account (nel quale ho praticamente la mia vita) in mano a questi sviluppatori.

Vi consiglio, invece, Post SMTP Mailer. Un plugin pensato in primis alla sicurezza, e oltre a questo ha anche funzioni in più (un giorno se mi va, forse, farò un tutorial).

P.s. Una volta disinstallato il plugin, i dati rimangono li.
Dovrete cancellarli a mano.

Quando ci si imbatte per le prime volte in WordPress, si scopre subito come questo CMS sia facilmente estendibile tramite delle piccole “applicazioni” (notare le virgolette) chiamate plugin.
Solo sul repository di WordPress.org al momento della stesura di questo articolo (Marzo 2018) ci sono oltre 54.000 plugins, (tra questi anche il mio) senza contare quelli a pagamento su siti come codecanyon!!

Troppi plugin rallentano il sito?

Questa è ancora oggi una delle domande più popolari nei vari gruppi/chat. Immancabilmente, ogni volta che un utente fa questa domanda, regolarmente si ha la riposta da parte del solito integralista di turno secondo il quale se usi piu di 4/5 plugins sei un folle, perchè devi fare il più possibile a mano.
Questo tipo di risposta, da un punto di vista delle prestazioni, non ha alcun senso.

Non concentrarti su quanti…ma su cosa fanno!

È proprio questo il punto cruciale. Il numero di plugins installati di per se non conta assolutamente niente.
Piuttosto, quello che bisogna controllare, è quanti file js e css il plugin carica (se li carica) e il numero di accessi al database (db) che questo fa.
Sopratutto questo parametro, è veramente fondamentale.
Contenuti multimediali a parte (foto, video, etc.) ciò che più rallenta l’esecuzione di un sito è il numero di accessi che questo fa al db…E sai come si fa a vedere il numero di accessi che il tuo sito fa?
Installando un plugin, ovviamente 😀

Installiamo Query Monitor

È proprio questo il nome del plugin che fa per noi.
Query monitor è un plugin usatissimo dagli sviluppatori di temi e plugin, ma può essere tranquillamente usato anche da chi non mastica di programmazione, vista la sua estrema semplicità!
Una volta installato lo possiamo vedere immediatamente all’opera, senza alcun bisogno di configurazione, nella admin bar (ovviamente visibile solo agli admin).
La voce che ci interessa a noi è quella chiamata “Queries”

Una volta cliccato qui abbiamo una lista ordinata, di quali queries (accessi) vengono eseguite e da chi (core WordPress, plugins, etc.).
Più basso è il numero di queries totali e ovviamente meglio è.
L’ideale sarebbe di non superare le 50-60 queries per page load.

Alcuni plugin, o perchè sono stati scritti male, o perchè hanno proprio bisogno di un elevato numero di queries per funzionare, possono da soli anche farne svariate decine…mentre alcuni potrebbero non farne nessuna!

Più avanti spiegherò altri trucchetti per rendere più veloce la propria installazione WordPress, per il momento, avanti con Query Monitor! 😉