Como Optimizar la Velocidad de Carga en Sitios Web

La velocidad de carga de nuestros sitios web es una de las claves para lograr una buena reputación con los buscadores, casi tan importante como un buen contenido. Muchas veces no nos damos cuenta de cuanto contenido realmente hay cargando en la página, a medida que nuestro sitio web se torna más complejo, se llena de archivos javascript, css e imágenes que si no han sido optimizados a la larga penalizaran nuestra posición en la red, así como alejar a nuestros posibles clientes con tiempos de carga excesivos. En las siguientes lineas trataré de mostrar cuales son las optimizaciones más sencillas para que nuestro sitio web cargue más rápido.

Una de las cosas más fáciles de realizar (en general) es comprimir el sitio mediante el modulo deflate que generalmente viene instalado en el server Apache, si tenemos CPanel para controlar la cuenta simplemente tenemos que ir a la sección Software / Servicios e ingresar en Optimizar el Sitio de Web (así esta escrito en la versión que utilizo), ahí seleccionamos la opción que dice comprimir todo el contenido o en caso de que quieran ser más específicos Comprimir los tipos de MIME especificados y le damos actualizar configuraciones. Ahora el sitio se comprimirá antes de ser enviado al usuario por lo que el tiempo de carga mejorará al poco.

Otra de las razones principales por las que nuestro sitio puede cargar lento son las imágenes, es muy importante utilizar imágenes optimizadas para la web y en la resolución correcta, es más conveniente tener más versiones de la imagen en diferentes resoluciones que escalar la misma mediante HTML, CSS o JS. A la hora de elegir que formato de imagen utilizar, yo prefiero el formato .jpg para las imágenes no pertenecientes al diseño de la página y .png para las que si usamos en el diseño, con algunas excepciones. Una de las razones por las que utilizo .png para el diseño es por que soportan transparencias mientras que las .jpg no, aunque si no tenemos transparencias y la imagen que va a ser parte de la estructura de la página es grande, conviene más utilizar el formato .jpg por el menor peso.

Para comprimir las imágenes .jpg utilizo Gimp y un factor de compresión de alrededor del 80%, pero siempre hay que ver la calidad de la imagen resultante, a veces si la imagen ya paso por algún programa y ya fue optimizada el resultado puede ser pixelado y de mala calidad. A la hora de mostrar las imágenes siempre conviene mostrar una imagen previamente escalada para el tamaño deseado y que luego cuando el usuario haga click en la misma se muestre la versión de tamaño completo, esto ahorra un tiempo de carga bastante grande, especialmente si son imágenes de tamaño grande.

Otra de las cosas que demora la carga de una página es el abuso de cargas externas, principalmente scripts provenientes de otros sitios, como los botones de las redes sociales, y particularmente los de Facebook que tienden a demorar en cargar. Una de las soluciones es cargarlos de forma asíncrona, que en el caso de los botones de Google + ya viene de forma predeterminada, en el caso de Facebook puede ser conveniente utilizar el elemento onload para llamar a la función de carga del botón, especialmente si tenemos muchos botones por página, cosa que es mejor tratar de evitar.

El uso de anuncios publicitarios (ej: AdWords) también es causa de demoras en las cargas e incluso a veces de errores de validación del HTML, pero en estos casos no podemos modificar el código para no infringir en las normas del contrato que tomamos cuando utilizamos dichas publicidades, así que no queda otra que optimizar el resto y dejar las publicidades quietas.

El último punto que voy a tratar en este post es la minificación de el código, para reducir el tamaño del mismo, principalmente conviene minificar el JS y el CSS, aunque también se puede minificar el HTML, yo no le encuentro mucha ventaja ya que la mayoría de mi HTML es generado de manera dinámica. Para minificar el código JS utilizo una herramienta que ya describí aquí y que le quita todos los espacios y comentarios al código reduciendo bastante el archivo resultante y logrando seguir mejorando la velocidad de carga. Para el CSS se puede utilizar esta otra herramienta http://www.csscompressor.com/ que hace básicamente lo mismo pero también acorta las denominaciones de colores (ej el negro de 000000 a 000) y algunas propiedades, una herramienta muy útil.

Para poder medir si alguna de estas mejoras que realizamos tienen algún efecto podemos utilizar la extensión PageSpeed de Chrome o ir mismo a la página de PageSpeed (que es de Google), donde se nos da un ranking de 0 a 100 en optimización del sitio, así como los diferentes puntos donde deberíamos corregir el sitio para obtener mejores velocidades de carga. Por ahora eso es todo lo que voy a escribir de un tema que fácilmente da para un libro (no que yo pueda escribirlo) y que cuando pasen su sitio web por PageSpeed se va a hacer evidente, gracias por leer.

 

 

Author: gp2

Desarrollador Web, Programador PHP y MySQL, conocedor de HTML5, CSS3 y Javascript. Del culto JQuery, gran coleccionador de funciones ajenas y especialista en hacer código redundante. Últimamente programador Java.

Deja un comentario