Episodio 29: Comprimir y optimizar el código (minicast)
5 (100%) 1 voto

En este episodio hablaremos acerca de las buenas prácticas y trucos que se pueden implementar para comprimir el código (HTML/CSS/JS) de las páginas que generemos, lo cual se traducirá en una carga más rápida, menos uso de ancho de banda para el servidor, y una mejor experiencia para quienes visitan nuestros sitios.

Además de eso, les dejo los códigos que les prometí (lo menciono en el podcast):

1.- Para comprimir los CSS y JS en un único archivo, pueden echarle un vistazo a la librería minify:
https://github.com/mrclay/minify

2.- Para comprimir a nivel de .htaccess (mod_deflate), y habilitar el caché de navegador (mod_expires), pueden usar este código:

<IfModule mod_deflate.c>
	SetOutputFilter DEFLATE
	AddOutputFilterByType DEFLATE text/html text/plain text/css text/javascript application/javascript application/x-javascript
	<IfModule mod_headers.c>
		Header append Vary User-Agent
	</IfModule>
</IfModule>

<ifmodule mod_expires.c>
	<filesmatch "\.(jpg|gif|png|css|ico|js|woff|woff2|eot|svg|ttf)$">
	ExpiresActive on
	ExpiresDefault "access plus 1 month"
	</filesmatch>
</ifmodule>

3.- Para comprimir el HTML generado por PHP:

<?php
ob_start();
//acá iría todo tu código
$html=ob_get_clean();
$html=comprimirHTML($html);
echo $html;

function comprimirHTML($buffer){
	$search = array(
		'/\>[^\S ]+/s', //quitar espacios en blanco después de los tags, excepto los espacios
		'/[^\S ]+\].*?-->/s' //quitar comentarios
	);
	$replace = array(
		'>',
		'< ',
		' ',
		''
	);
	$buffer = preg_replace($search, $replace, $buffer);
	return $buffer;
}
?>

4.- Y para comprimir online, existen recursos como:
http://jscompress.com/
http://csscompressor.com/

Episodio 29: Comprimir y optimizar el código (minicast)
Etiquetado en:                        

2 pensamientos en “Episodio 29: Comprimir y optimizar el código (minicast)

  • 03/11/2015 a las 05:28
    Enlace permanente

    Me han parecido muy interesantes tus dos últimos post y lo primero de todo felicitarte.
    Los segundo, es una pregunta.
    A nivel de seo, como afecta la compresión del htaccess o la del html(esta última imagino que no muy bien)?
    También tengo una segunda pregunta.
    Comprimes en un único archivo tus js, junto con la librería(“jquery”), o estos si, por separado?

    Felicitarte por el trabajo que haces, para los que estamos empezando es como el agua. Claro, fresco y vital.
    He oído otros podcast y la verdad es que los tuyos, son sin duda los mejores.

    Responder
    • 03/11/2015 a las 11:30
      Enlace permanente

      Gracias Nacho!… este tipo de comentarios me motiva!

      Respecto a tus consultas, a nivel de SEO, la consulta de .htaccess no influye. Técnicamente tu tampoco notarás ningúna diferencia, pues lo que hace el servidor es comprimir el html, enviárselo al navegador (por lo tanto viaja comprimido a través de Internet), y el navegador al recibirlo lo descomprime y luego te lo muestra, es decir que tu sólo verás el HTML descomprimido… claramente si el HTML está optimizado (sin espacios, sin comentarios, etc.), el archivo comprimido también pesará menos.
      Respecto a la compresión del HTML, no lo he investigado en profundidad, pero la verdad es que creo que no debería afectar, ya que no estás cambiando nombres de elementos o textos, sino solamente quitando espacios, tabulaciones y comentarios… el “crawler” del buscador debería leer el código sin problemas.

      Al comprimir los archivos js y css, si los junto todos en un sólo archivo… y al hacerlo debe ser en el mismo orden en el que lo harías en tu HTML… primero jQuery y luego el resto de las librerías. Igual puedes cargar jQuery desde un servidor externo y el resto de las librerías juntarlas en un único archivo… lo importante es minimizar los archivos y bajar la cantidad de archivos que se deban cargar lo máximo posible, sin que afecte el rendimiento de tu página.

      Suerte!

Deja un comentario

¿Quieres recibir el contenido V.I.P de Preceptos Digitales?

¿Quieres recibir el contenido V.I.P de Preceptos Digitales?

Ingresa tu correo y te enviaremos contenidos especiales para quienes escuchan el Podcast!



Te has suscrito exitosamente! Nos hablamos!