Contratar un hosting compartido, conlleva el delegar la gestión del servidor en manos de otros. Suele pasar que el servidor en donde tengamos nuestro sitio alojado no disponga de todos los módulos necesarios para una perfecta optimización de nuestra web. Una de esas optimizaciones es la compresión gzip.
Comprimiendo mediante gzip conseguimos reducir el tamaño del html, css y JavaScript a una tercera parte de su tamaño. Siendo esta la manera más eficiente de ahorrar en transferencia de datos. Tema importante también en términos económicos ya que en algunos hostings tenemos transferencia limitada a cierta cantidad. Pero en el caso del compartido de 1&1 tenemos un problema y esque no instalan Gzip para evitar consumos de cpu, asi que no nos queda otra que activar Zlib.
Añadimos al .htaccess:
1 2 | AddType x-mapp-php5 .php .shtml .html .htm .js .txt .css AddHandler x-mapp-php5 .php .shtml .html .htm .js .txt .css |
Activamos la compresión Zlib en el php.ini: (Si no lo tenemos, creamos uno con un editor de txt y lo guardamos en la carpeta web)
1 2 3 | zlib.output_compression = On zlib.output_compression_level = 9 allow_url_fopen = On |
Problema con las cabeceras de los archivos css y javascript comprimidos: Hasta este punto podremos ver con herramientas como el plugin YSlow de Firefox que la compresión zlib se lleva a cabo. Pero en ciertos navegadores fallan los estilos y el JavaScript contenido en archivos externos. Esto es debido a que la compresión está cambiando las cabeceras de estos archivos a html corriente. La forma de solucionarlo es especificar el tipo de archivo para cada uno de ellos mediante programación.
Lo hacemos con el siguiente código:
1 2 3 4 5 6 7 8 9 10 | 01 $pathinfo = pathinfo($_SERVER['PHP_SELF']); 02 $extension = $pathinfo['extension']; 03 if($extension == "css") 04 { 05 header("Content-type: text/css"); 06 } 07 if($extension == "js") 08 { 09 header("Content-type: text/javascript"); 10 } |
Ahora hay que especificar que en cada llamada se consulte este archivo añadiendo esta línea al php.ini:
1 | auto_prepend_file = [RUTA_FISICA]/contentHeader.php |
Hay que especificar la ruta física dentro del servidor, la cual podemos consultar con el siguiente archivo en php:
1 2 | $ruta_absoluta = getcwd(); echo 'Ruta física: ' . $ruta_fisica; |
Si ejecutamos este código en el directorio donde tengamos el contentHeader.php veremos la información que nos falta para su correcta implantación. Una vez completado todo el php.ini hay que destacar que debemos copiarlo a todas las carpetas donde hayan archivos css y JavaScript. Ya que el php.ini solo se aplica a la carpeta en donde esté contenido.
Muy buen articulo, me ayudo mucho para comprimir los archivos en 1&1
Lo tengo implementado y funciona, solo que baja el speed, por no tener caducidad ni max-age. Pasa en todas http://www.webpagetest.org/performance_optimization.php?test=150314_1A_WWG&run=1&cached=0 .. incluida https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fcactomania.es%2F&tab=mobile
Intente inplementarlo por .htaccess declarandolo : AddType text/html .gz AddCharset utf-8 .js .php AddCharset ISO-8859-1 .html .htm AddType application/x-gzip .gz .tgz AddType application/x-gzip .gz .tgz AddEncoding x-gzip .gz AddType x-mapp-php5 .html .htm .js .mid AddHandler x-mapp-php5 .html .htm .js .mid Pero no da expires ni en html .htm .js .mid
Lo solucione: caducidad maxage
$pathinfo=pathinfo($_ENV[‘SCRIPT_FILENAME’]); $extension=$pathinfo[‘extension’]; $offset = 60 * 60 * 24 * 30; if($extension==’htm’){ header(‘Content-type: text/html’); header(“Expires: “.gmdate(“D, d M Y H:i:s”, time() + $offset).” GMT”);} if($extension==’html’){ header(‘Content-type: text/html’); header(“Expires: “.gmdate(“D, d M Y H:i:s”, time() + $offset).” GMT”);} if($extension==’mid’){ header(‘Content-type: audio/midi’);header(“Expires: “.gmdate(“D, d M Y H:i:s”, time() + $offset).” GMT”);} if($extension==’ico’){ header(‘Content-type: image/x-ico’);header(“Expires: “.gmdate(“D, d M Y H:i:s”, time() + $offset).” GMT”);} if($extension==’js’){ header(‘Content-type: text/javascript; charset=utf-8’); header(“Expires: “.gmdate(“D, d M Y H:i:s”, time() + $offset).” GMT”); } ?>
Ole, ole y ole!!!!!!
Por fin!!! Funciona a la perfeccion!! Me estaba volviendo loco intentando configurar el servidor apache en el htaccess y siempre me daba que no se comprimía…. Una observación: En el codigo para coger la ruta fisica creas una variable y llamas otra variable con otro nombre: $ruta_absoluta = getcwd(); echo ‘Ruta física: ‘ . $ruta_fisica;
Habría que cambiarlo por si alguien no se da cuenta. Un saludo y muchas gracias!!!
Muchas gracias por el artículo y muchas gracias también para Manuel por su comentario. Ha funcionado todo a la perfección.
Hola, tengo un servidor en 1and1 y solo comprime con zlib. estoy siguiendo todos los pasos del artículo.
paso 1: añadir al .htaccess el código paso 2: crear archivo php.ini y subirlo a la raiz hasta aquí todo bien. Voy a Check Gzip compression y me comprime, pero como dices en el art. en muchos navegadores la cabecera se ve mal.
el paso 3: ¿Este código donde lo tengo que poner? en una hoja en blanco o en un archivo que ya está creado? $pathinfo = pathinfo($_SERVER[‘PHP_SELF’]); $extension = $pathinfo[‘extension’]; if($extension == “css”) { header(“Content-type: text/css”); } if($extension == “js”) { header(“Content-type: text/javascript”); }
El paso 4: conocer la ruta absoluta, la sé ya. Y sé que hay que meter esa línea de código en el php.ini y subirlo a la raiz.
Por favor, me podrías indicar donde meter el código del PASO 3… a ver si por fin puedo solucionar el problema de mi web. Muchas gracias!
Isa. Debes crear un archivo llamado contentHeader.php
buenas, gracias por el artículo. Me funciona perfecto, pero tengo un problema 8server compartido 1and1).
La web principal está en una carpeta: /carpeta y comprime todo perfecto y demás. Pero tengo un foro de simpre forum machines en /carpeta/foro que cuando pongo esta línea: AddType x-mapp-php5 .php .shtml .html .htm .js .txt .css se fastidia el css y no lo carga, dando el error de que el mime es type/html en vez de type/css y no lo carga. Con esta línea va perfecto: AddType x-mapp-php5 .php .shtml .html .htm .js .txt pero claro, no comprime el css. Da igual si meto el htaccess en /carpeta solo o si lo subo también a /carpeta/foro, con .css no funciona…
Ideas? Gracias. un saludo.
Has leído esta parte del articulo???
Problema con las cabeceras de los archivos css y javascript comprimidos: Hasta este punto podremos ver con herramientas como el plugin YSlow de Firefox que la compresión zlib se lleva a cabo. Pero en ciertos navegadores fallan los estilos y el JavaScript contenido en archivos externos. Esto es debido a que la compresión está cambiando las cabeceras de estos archivos a html corriente. La forma de solucionarlo es especificar el tipo de archivo para cada uno de ellos mediante programación.
Lo hacemos con el siguiente código:
[/crayon]
Buenas Sergio, si, claro que lo he leído, por eso pregunto, porque el error me sale. Mi fichero de headers:
<?php if (isset($_SERVER['SCRIPT_FILENAME'])) { $timestamp = filemtime(__FILE__); header('Last-Modified: ' . $timestamp); $expires = 60*60*24*14; header("Pragma: public"); header("Cache-Control: maxage=".$expires); header('Expires: ' . gmdate('D, d M Y H:i:s', time()+$expires) . ' GMT'); header('Vary: Accept-Encoding'); $pathinfo = pathinfo($_SERVER['SCRIPT_FILENAME']); $extension = $pathinfo['extension']; if ($extension == 'css') { header('Content-type: text/css'); } if ($extension == 'js') { header('Content-type: text/javascript'); } }?>
Gracias, un saludo.