Ir al contenido principal

Comprimir archivos CSS y JavaScript con GZip (Todos los navegadores)

Las razones principales para reducir el peso de tus páginas web son evidentes:

- Cargan con mayor rapidez
- Ahorras ancho de banda

El problema es que no todos los navegadores soportan la codificación con gzip.

La solución que utilizo es subir una versión comprimida y una versión plana del mismo fichero, luego determino si el navegador soporta la codificación GZip y de esta maneja envío uno u otro archivo.

En este ejemplo cambio la extensión de los archivos comprimidos de Javascript .jsgz y la de los archivos CSS a .csgz.

1- Editando el .htaccess
Añadir las siguientes lineas al .htaccess

# Apache Content Negotiation http://bit.ly/cYepUl
Options MultiViews

# Compressed javascript and CSS files
AddEncoding x-gzip .jsgz .csgz

# Añadir los tipos (cómo se interpretará el fichero)
AddType application/x-javascript .jsgz
AddType text/css .csgz


2- Añadir la comprobación a las páginas que utilicen los archivos comprimidos (PHP)

$jsgz = substr_count($_SERVER['HTTP_ACCEPT_ENCODING'],'gzip')?'.jsgz':'.js';
$csgz = $jgz?'.csgz':'.css';

y finalmente, al momento de incluir los archivos CSS y JS pegar la extensión con PHP

<link type="text/css" href="style<?php echo $csgz; ?>" rel="stylesheet">
<script type="text/javascript" src="script<?php echo $jsgz; ?>"></script>

De esta forma se cargarán los archivos comprimidos solamente si el cliente los soporta.


Comentarios

  1. Hola,
    magnífico Blog. Navegando por Google he llegado a tí y quería saber si puedes solucionarme algunas dudas que tengo para optimizar el rendimiento de mi blog.

    1) Es un Blog Blogger (Diarios de la nube). He hecho todo lo necesario para opitmizar en PageSpeed hasta sacar un 98... pero hay cosas que no puedo cambiar, por ejemplo los .css ¿cómo puedo quitar los de blogger y poner los míos optimizados si desde la plantilla no puedo tocar ese punto?.

    2) ¿Cómo poder tocar en Blogger el .htacces si no puedes escribir nada?...

    En fin, creo que ninguna de las dos cosas se puede hacer, pero quería contrastarlo con un colega de profesión para ver si hay alguna forma viable...

    Muchísimas gracias.

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Validador de DPI / CUI en C#

Este método valida un número de CUI / DPI de Guatemala. Se basa en la implementación Java del siguiente blog http://xcodegt.blogspot.com/2016/09/funcion-para-validar-cui-guatemala-con.html Se actualizó el dato del número de municipios por departamento, ya que ha variado desde 2016 (fecha del post original) a la fecha. 1: private static bool ValidarDPI(string dpi) 2: { 3: var regex = "^[0-9]{4}-[0-9]{5}-[0-9]{4}$"; 4: var test = Regex.IsMatch(dpi, regex); 5: 6: if (!test) 7: { 8: return false; 9: } 10: 11: var cui = dpi.Replace("-", ""); 12: 13: var numero = cui.Substring(0, 8); 14: 15: 16: var depto = Convert.ToInt32(cui.Substring(9, 2)); 17: var muni = Convert.ToInt32(cui.Substring(11, 2)); 18: 19: var validador = Convert.ToInt32(cui.Substring(8, 1)); 20: 21: // Conteo de municipios por departamento 22: int[] munisPorDepto = 23: { 24: ...

Texto a Voz + SRT

Text to Speech + Subrip Subtitle Algunas veces me gusta leer y al mismo tiempo escuchar lo que leo. Esto me permite llevar un ritmo constante y lograr mayor concentración en la lectura. El otro día quise subir un texto a Youtube, sintetizado con una voz Loquendo y con subtítulos, de modo que desde Youtube el lector pudiera escuchar y al mismo tiempo leer la transcripción. Procedí a sintetizar el texto a voz utilizando SodelsCot Estándar y la voz de Loquendo Ximena. SodelsCot convierte a un archivo de audio el texto copiado al portapapeles y Youtube tiene una función que permite cargar la transcripción en formato de texto y convertirla a subtítulos en el video. Pero tanto SodelsCot como Youtube han presentado algunos inconvenientes: Si el texto es muy grande, SodelsCot falla en el proceso de conversión de Texto a Voz. Durante la conversión, prácticamente no se puede usar el portapapeles para otra cosa, ya que interfiere con el archivo de audio generado o crea archivos de má...

Videojuegos con Irrlicht 3D y Raknet

Hace cerca de dos años presenté un proyecto en la universidad sobre desarrollo de videojuegos. Básicamente es un documento que consta de dos partes: - Una introducción teórica a los videojuegos 3D (partiendo desde temas básicos de Álgebra lineal) y - El desarrollo de un pequeño videojuego de primera persona (con fines únicamente demostrativos) Parte del contenido del documento está basado en los tutoriales oficiales de Irrlicht Engine que están publicados en http://irrlicht.sourceforge.net/tutorials.html El documento se compone de cuatro capítulos que explican de forma general y secuencial los fundamentos utilizados para crear un videojuego 3D. Se asume que el lector tiene conocimientos de álgebra y programación, específicamente del lenguaje C++. Los primeros tres capítulos aportan la base teórica y el cuarto capítulo describe el juego irrArena (La aplicación de demostración). Contenido de los capítulos El capítulo I presenta una introducción a las Matemáticas de los ...