Comprimir, combinar y cachear archivos CSS y JS con PHP

por .

comprimir js css con phpHace apenas unos días publique un pequeño tutorial sobre el mod_pagespeed, ahora y siguiendo un poco con la idea de optimizar nuestros sitios les quería comentar sobre Minimee, un pequeño script PHP programado por John D Wells, con el que vamos a poder comprimir, combinar y cachear nuestros archivos CSS y JS de forma automática.

La idea de Minimee es muy simple, ahorrar transferencia de datos y acelerar los tiempos de descarga de nuestros sitios web. Para eso utiliza PHP para leer nuestras hojas de estilo y archivos Javascript, combinarlos en caso de contar con más de uno a la vez que los comprime para reducir su tamaño. Todo esto de forma automática con tan solo colocar unas lineas de código.

Requerimientos

  • PHP5
  • ExpressionEngine 2.1 o superior
  • PHP tiene que estar compilado con soporte OpenSSL
  • La función file_get_contents() debe estar compilada. Para esto debera estar seteada la variable allow_url_fopen con TRUE (se encuentra en el archivo php.ini).

Los requerimientos son mínimos, los últimos dos son para realizar cosas especificas, en caso de no poder activarlos veremos limitadas las funcionalidades de Minimee.

Instalación

  • Copiar la carpeta minimee en nuestro servidor.
  • Crear una carpeta en donde se realizara la cache de archivos. Esta carpeta con permisos de escritura y lectura.
  • Opcional: Instalar la extensión de Minimee con acceso a base de datos para guardar la configuración.

Configuración

Hay tres formas distintas de configurar este script de optimización. La forma más simple de hacerlo es abriendo nuestro archivo index.php (o cualquier archivo en donde queremos aplicar las funcionalidades) y agregar las siguientes lineas de código PHP:

$assign_to_config['global_vars']['minimee_cache_path']	= '/path/to/your/cache';
$assign_to_config['global_vars']['minimee_cache_url']	= 'http://website.com/cache';

Ejemplo de uso

Minimee cuenta con varios parámetros de configuración, podemos indicar que cosa comprimir, que archivos cachear o bien cuales combinar. Les recomiendo que lean la documentación oficial para aprovechar al máximo las posibilidades de esta herramienta. Una configuración básica seria la siguiente:

CSS:

{exp:minimee:css media="screen"}
<link type="text/css" rel="stylesheet" href="reset-min.css" media="screen" />
<link type="text/css" rel="stylesheet" href="{stylesheet=css/screen}" media="screen" />
<link type="text/css" rel="stylesheet" href="/grid.css" media="screen" />
{/exp:minimee:css}

JS:

{exp:minimee:js}
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.easing.1.3.js"></script>
{/exp:minimee:js}

Eso es todo, ahora solo queda en nosotros en probar a fondo esta nueva forma de optimizar el rendimiento de nuestros sitios web.

Web: Minimee

Categorizado en: