Categoría Wordpress | Ayuda para usuarios: : Especializados

En las versión Wordpress 2.5 no se puede habilitar la compresión de las paginas. La opción que existía en versiones anteriores a partir de la 2.5 se dejan a decisión del servidor. MichaelH/FAQ for 2.5
Existen plugins como Filosofo GZIP Plugin 1.1
que habilitan esta compresión con Gzip también tenemos (imprescindibles) plugins como WpCache2 o WP Super Cache que hacen muchas mas cosas aparte de comprimir y siempre podemos manejar la compresión nosotros sin usar plugin e intentar ajustarla al máximo.

Requisitos previos.

Solo uno, que el servidor en el que tengamos alojado nuestro Wordpress soporte GZip

Para verificarlo creamos un archivo info.php con:

<php echo phpinfo(); ?>

Lo subimos a nuestra web, lo llamamos desde el navegador y buscamos la sección titulada zlib si esta en enabled continuamos.

Borrar (o proteger) el archivo info.php para evitar que terceros obtengan información del servidor.

Comprimir archivos .php

Para que funcione la compresión en nuestros archivos .php solo tenemos que modificar 2 archivos de nuestra plantilla actual

Agregar en la primera linea del archivo header.php

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');}?>


Y en la ultima linea del archivo footer.php

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Así conseguiremos que todo lo que se encuentre entre estas 2 lineas (todas las paginas) este comprimido con Gzip y la web sea mucho mas rápida, a pesar de que suba el consumo de CPU nos puede interesar.

Para verificar si nuestro servidor esta comprimiendo, podemos hacerlo en la pagina http://www.gidnetwork.com/tools/gzip-test.php

Esto nos servirá para todos los php de la web, pero no se comprimiran los ficheros .css, ni .js (el plugin Filosofo tampoco lo hace) y son un gran porcentaje de trafico de la web. Estos archivos no se comprimen ya que no ejecutan código .php y no son afectados por ob_start('ob_gzhandler') o si……..

Comprimir archivos .css

Para comprimir archivos .css basta con que estos sean ficheros .php ejecuten la compresión con ob_start('ob_gzhandler')pero aparezcan como css.

Esto se consigue con header("Content-type: text/css");

Voy a ello.

Guardo mi fichero style.css de la plantilla actual como style.css.php agregando en la primera linea:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

y en la ultima

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Modifico el fichero header.php dentro del directorio de mi plantilla actual sustituyendo la linea que dice:

<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />

por:

<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory');?>/style.css.php"/>

Lo subo al servidor y miro que funciona correctamente.

El rendimiento según el análisis de Web Page Speed Report – WebSiteOptimization.com ha mejorado:

Antes de la modificación				Después de la modificación
Global Statistics				Global Statistics
Total HTTP Requests:	50			Total HTTP Requests:	30
Total Size:	290977 bytes			Total Size:	243551 bytes
Download Times*				Download Times*
Connection Rate	Download Time			Connection Rate	Download Time
14.4K	235.52 seconds			14.4K	194.76 seconds
28.8K	122.76 seconds			28.8K	100.38 seconds
33.6K	106.65 seconds			33.6K	86.90 seconds
56K	67.99 seconds			56K	54.54 seconds
ISDN 128K	27.76 seconds			ISDN 128K	20.87 seconds
T1 1.44Mbps	11.54 seconds			T1 1.44Mbps	7.29 seconds

Bajando el numero de objetos de 50 a 30 y los tiempos en un 20% aprox. parece interesante tener habilitada la compresion de archivos .css

Comprimir archivos .js

Como la idea es la misma, convertir a .php archivos y habilitar la compresión, habilito la compresión para todos los archivos pesados de .js (jquery.js ocupa 30 kb).

Abriendo el fichero .js deseado (\wp-includes\js\jquery\jquery.js) agregando en la primera linea:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: application/x-javascript"); ?>

El único cambio con respecto a la linea de .css es: Content-type: application/x-javascript

Y en la ultima:

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

Lo guardo como .js.php (\wp-includes\js\jquery\jquery.js.php)

La llamada para cargar el fichero jquery.js se realiza desde el fichero \wp-includes\script-loader.php en la linea 83 sustituyo:

$this->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.2.3');

por

$this->add( 'jquery', '/wp-includes/js/jquery/jquery.js.php', false, '1.2.3');

Aunque no se deberían tocar los archivos del core de Wordpress hasta que exista el plugin que lo haga es la única manera.

Bajando el tiempo de descarga a 6 segundos con una linea T1 1.44Mbps

Terminando

Para dejarlo mas fino y que sea fácil habilitar y deshabilitar esta compresión de ficheros, hago lo siguiente.

En el archivo de configuración de Wordpress wp-config.php creo 2 variables

define ('compresszlibcss', true);
define ('compresszlibjs', true);

Donde tengamos archivos .css (en el header.php) pondremos:

<?php if ( compresszlibcss == true ){?>
<link rel="stylesheet" type="text/css" media="screen" href="<?php bloginfo('template_directory');?>/style.css.php"/>
<?php }else{ ?>
<link href="<?php bloginfo('stylesheet_url'); ?>" rel="stylesheet" type="text/css" />
<?php } ?>

y donde queramos sustituir ficheros .js pondremos:

if ( compresszlibjs == true ){
$this->add( 'jquery', '/wp-includes/js/jquery/jquery.js.php', false, '1.2.3');
$this->add( 'jquery-form', '/wp-includes/js/jquery/jquery.form.js.php', array('jquery'), '2.02');
}else{
$this->add( 'jquery', '/wp-includes/js/jquery/jquery.js', false, '1.2.3');
$this->add( 'jquery-form', '/wp-includes/js/jquery/jquery.form.js', array('jquery'), '2.02');
}

Basta con cambiar las variables del fichero wp-config.php para que se compriman o no los archivos.

He comprimido algunos archivos de Wordpress que siempre se descargan (jquery.js, jquery-form.js) y ocupan bastante, muchos .js de plugins que uso, y casi todas las hojas de estilo, sin ningún problema.

Fuentes:

Reduce your Wordpress Bandwidth Usage

How To: Optimize Your CSS Even More

Por JmNieto el 14 Agosto 2008. 1,260 lecturas

Etiquetas gzip, rendimiento, Wordpress

1 comentario »

(Ayúdanos a mejorar. Valora el artículo.)

 Loading ...

No imprimas esta página guárdala como PDF

Recibe las novedades de Te Ayudo en tu correo.

Dirección de correo: