Good Ideas

Comprimere il CSS su WordPress

Giusto in questi giorni stavo cercando un metodo per aumentare le prestazioni di Dynamick. In particolare il mio obiettivo è di comprimere in qualche maniera il CSS che oramai ha raggiunto dimensioni spropositate. Questo perchè si sono stratificati restyling successivi sullo stesso foglio di stile, senza mai aver fatto una vera e propria pulizia.

Compresore CSS via PHP

Ho analizzato alcuni compressori statici di CSS come CSS Compressor di CSS Drive e CSS Compressor di Arantius, ma hanno entrambi l’inconveniente che generano un file incomprensibile. Quindi per qualsiasi modifica, bisogna sempre ricorrere al CSS originale per poi ri-comprimerlo.

Compressione dinamica del CSS

Ho cercato allora altre vie e finalmente ho trovato la soluzione definitiva. Si chiama PHP CSS Compressor ed è un semplice script PHP da inserire all’interno del proprio foglio di stile. Ecco come funziona:

  • Il browser dell’utente richiede il foglio di stile normalmente
  • Il server comprime il CSS dinamicamente
  • Il foglio di stile è ritornato al browser

E’ necessario tener conto del commento iniziale necessario a WordPress per riconoscere alcuni meta-dati come il nome dello stile, dell’autore e il sito del tema.  Quindi la compressione va effettuata dopo tale commento.

Ecco come procedere. Nella prima riga del CSS inseriamo questa riga:

< ?php header('Content-type: text/css')?>

Inseriamo poi il commento di WordPress. 


/*
Theme Name: DynamicK
Theme URI: http://www.dynamick.it
Description: Template creato per il blog di DynamicK.
Version: 2
Author: Gobbi Michele
Author URI: http://www.dynamick.it
*/

Successivamente inseriamo il vero e proprio compressore:

< ?php ob_start("compress"); function compress($buffer) { // remove comments $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer); // remove tabs, spaces, newlines, etc. $buffer = str_replace(array("\r\n", "\r", "\n", "\t", ' ', ' ', ' '), '', $buffer); return $buffer; } ?>

Da questo punto in avanti possiamo inserire il nostro codice CSS:

body {background: white;}
...

Alla fine, come ultima cosa, dobbiamo inserire questa riga:

< ?php ob_end_flush()?>

Bene, il nostro file è apposto. Ora lo dovremmo rinominare con estensione .php, ma così facendo impediremo a WordPress di riconoscere il file. Il sistema infatti, cerca un file chiamato style.css. Per aggirare il problema, inseriamo nel file di configurazione di Apache, all’interno del virtual host dedicato al nostro blog, queste righe che attivano l’interprete PHP anche sul file style.css:



SetHandler application/x-httpd-php

Se non avete la possibilità di accedere al file di configurazione di Apache, è possibile inserire le stesse righe all’interno del file .htaccess posizionato nella document root del vostro sito.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *