Come Minificare / Minify il Codice Html di WordPress?

Come Minificare il Codice Html di WordPress per renderlo più Scattante e soprattutto come farti approvare da Google Page Speed Insight?

Tra i vari interventi per velocizzare qualsiasi sito web e/o piattaforma non possiamo dimenticare una importante impostazione semplicissima da attivare: La Minificazione del codice html o Minify HTML.

Cosa significa Minify Html? Minificare l’html?

La parola minificare dall’inglese “minify” in questo caso “minify html” quindi minifica html significa che viene messa su una sola riga l’intero codice html, togliendo spazi, commenti ed inutili sintassi non utili al rendering della pagina. Minificando il codice riusciamo a guadagnare un bel pò di tempo (in millisecondi ma anche secondi) rendendo la vita semplice ai browser.

Con poche righe di codice da ignettare nel file functions.php minifichiamo tutto il codice html di WordPress. Ti ricordo che prima di effettuare qualsiasi operazione sui file è bene munirsi di una copia o dei file o dell’intera piattaforma così che se qualcosa andasse storto potrai ripristinare il vecchio functions.php.

1. Entra in ftp sul tuo spazio web e preleva il file functions.php nella directory wp-content/themes/tuotema/functions.php
2. Apri il file con un editor di codice ad esempio notepad++
3. Copia la porzione di codice sottostante ed incollala alla fine del functions.php. Commenta l’innesto del codice in pagina così in futuro potrai identificare meglio la modifica
4. Salva il file e ricaricalo via ftp sovrascrivendo il precedente
5. Testa online l’avvenuta minificazione del codice html scrivendo nel browser view-source:https://www.tuosito.it (sostituisci tuosito.it con il tuo sito)
6. Se il codice non è stato minificato è probabile che la versione php del server sia l’inputato. Trova la quadra scegliendo una versione php adatta ai tuoi script ed al tuo tema

class WP_HTML_Compression
{
 // Settings
 protected $compress_css = true;
 protected $compress_js = true;
 protected $info_comment = true;
 protected $remove_comments = true;

// Variables
 protected $html;
 public function __construct($html)
 {
 if (!empty($html))
 {
 $this->parseHTML($html);
 }
 }
 public function __toString()
 {
 return $this->html;
 }
 protected function bottomComment($raw, $compressed)
 {
 $raw = strlen($raw);
 $compressed = strlen($compressed);
 
 $savings = ($raw-$compressed) / $raw * 100;
 
 $savings = round($savings, 2);
 
 return '<!--HTML compressed, size saved '.$savings.'%. From '.$raw.' bytes, now '.$compressed.' bytes-->';
 }
 protected function minifyHTML($html)
 {
 $pattern = '/<(?<script>script).*?<\/script\s*>|<(?<style>style).*?<\/style\s*>|<!(?<comment>--).*?-->|<(?<tag>[\/\w.:-]*)(?:".*?"|\'.*?\'|[^\'">]+)*>|(?<text>((<[^!\/\w.:-])?[^<]*)+)|/si';
 preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
 $overriding = false;
 $raw_tag = false;
 // Variable reused for output
 $html = '';
 foreach ($matches as $token)
 {
 $tag = (isset($token['tag'])) ? strtolower($token['tag']) : null;
 
 $content = $token[0];
 
 if (is_null($tag))
 {
 if ( !empty($token['script']) )
 {
 $strip = $this->compress_js;
 }
 else if ( !empty($token['style']) )
 {
 $strip = $this->compress_css;
 }
 else if ($content == '<!--wp-html-compression no compression-->')
 {
 $overriding = !$overriding;
 
 // Don't print the comment
 continue;
 }
 else if ($this->remove_comments)
 {
 if (!$overriding && $raw_tag != 'textarea')
 {
 // Remove any HTML comments, except MSIE conditional comments
 $content = preg_replace('/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:(?!-->).)*-->/s', '', $content);
 }
 }
 }
 else
 {
 if ($tag == 'pre' || $tag == 'textarea')
 {
 $raw_tag = $tag;
 }
 else if ($tag == '/pre' || $tag == '/textarea')
 {
 $raw_tag = false;
 }
 else
 {
 if ($raw_tag || $overriding)
 {
 $strip = false;
 }
 else
 {
 $strip = true;
 
 // Remove any empty attributes, except:
 // action, alt, content, src
 $content = preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/', '$1', $content);
 
 // Remove any space before the end of self-closing XHTML tags
 // JavaScript excluded
 $content = str_replace(' />', '/>', $content);
 }
 }
 }
 
 if ($strip)
 {
 $content = $this->removeWhiteSpace($content);
 }
 
 $html .= $content;
 }
 
 return $html;
 }
 
 public function parseHTML($html)
 {
 $this->html = $this->minifyHTML($html);
 
 if ($this->info_comment)
 {
 $this->html .= "\n" . $this->bottomComment($html, $this->html);
 }
 }
 
 protected function removeWhiteSpace($str)
 {
 $str = str_replace("\t", ' ', $str);
 $str = str_replace("\n", '', $str);
 $str = str_replace("\r", '', $str);
 
 while (stristr($str, ' '))
 {
 $str = str_replace(' ', ' ', $str);
 }
 
 return $str;
 }
}

function wp_html_compression_finish($html)
{
 return new WP_HTML_Compression($html);
}

function wp_html_compression_start()
{
 ob_start('wp_html_compression_finish');
}
add_action('get_header', 'wp_html_compression_start');

Se l’operazione è andata a buon e sei riuscito a mettere su una sola riga tutto il codice html ti faccio i complimenti e ti invito a leggere gli altri articoli per ottimizzare le performance del tuo sito WordPress!

A Presto!