Optimización del Rendimiento Web: optimización de textos, scripts e imágenes

wpo2

Comparte en tus redes...

La primera parte de esta entrada ha estado orientada principalmente a la zona externa de la web, servidores y navegadores. Hemos visto con ejemplos todos los aspectos que podemos tocar para optimizar la carga de nuestra página, con ejemplos reales basados en la web corporativa www.trasterosur.es y hemos comprobado como realmente los resultados son inmediatos.

Ahora vamos a implicarnos más en la parte técnica interna, también denominada OnPage, por los que entienden de esto.


Optimización del código HTML

En HTML debemos evitar siempre que podamos el código embebido, es decir, introducir estilos o scripts directamente en el código, en lugar de hacerlo en ficheros externos. A veces parece imposible evitarlo, por ejemplo cuando introducimos el código para el “me gusta” de Facebook o Google Analytics, pero siempre podemos sacarlos a un fichero externo si usamos PHP.

La forma de hacerlo: cree un archivo PHP con el código de  seguimiento de Google Analytics, nómbralo por ejemplo analyticstracking.php . A continuación, agrega la línea siguiente a cada página de su sitio web inmediatamente después de la etiqueta <body>:

<?php include_once("analyticstracking.php") ?>

De todas formas cuando el código embebido es poco, tampoco merece la pena externalizarlo en ficheros. Nosotros en el caso que nos atañe, hemos dejado el código de Google Analytics en la misma web, eso sí, hemos bajado el código al final de la página, para que la carga de GA no comience hasta que la web esté totalmente cargada.

 

CSS y ScriptsOtro aspecto a tener en cuenta, colocar los enlaces CSS arriba y los Script abajo. Esto es obvio pero casi nunca se hace. Lógicamente los CSS deben estar al inicio de la web para que se cargue rápidamente el forma de la página, pero los scripts no deben entorpecer la carga de la página. Lo suyo es crear un espacio para todos los script al final de la web, justo antes del cierre de </body>.

Recordamos que una de las mejoras que nos daba Page Speed de Google era esta precisamente: “Eliminar el Javascript que bloquea la visualización y el CSS del contenido de la mitad superior de la página”. Pues bien, bajando todos los enlaces a las librerías Javascript, solucionamos este problema que para mi entender es de los más comunes y más problemáticos.

 

Por supuesto, evita siempre que sea posible el uso de <iframe> aunque para enlazar con servicios de Google como Youtube o Google Maps muchas veces es imprescindible. Al menos, evitalo entonces en la página principal, que es la primera que cargarán los usuarios.

Utiliza siempre tablas de ancho fijo. En realidad no deberías usar tablas, pero si no tienes más remedio, no dejes que el navegador tenga que ajustar el tamaño de las tablas, ya que la tabla se creará después de cargar todo el contenido para poder calcular su anchura.

Cierra todos los elementos HTML. Aunque sea obvio, algunos elementos HTML no tienen por que llevar etiqueta de cierre, como <br> o <img>, sin embargo es bueno acostumbrarse a cerrarlos siempre, usando <br /> y <img src=”…” />

Otro aspecto que podríamos tener en cuenta es comprimir el código HTML, con lo que podemos reducir hasta un 40% el peso de una página. Sin embargo yo no lo aconsejo en absoluto, ya que la edición de una web es un proceso continuo, que requiere constante modificaciones y actualizaciones, y requiere a mi entender de un código limpio y legible que nos permita su lectura y edición fácilmente.

Optimización de las Hojas de Estilos CSS

Como hemos comentado anteriormente siempre que podamos debemos externalizar los contenidos estáticos. Los estilos CSS deben ser enlazados al inicio de la web, dentro de la zona del <head> y siempre cargados antes que cualquier otro script.

La compresión de los CSS si puede ser una buena práctica. Una vez terminada la web, raramente vamos a tocar los estilos, e incluso en este caso, es fácil hacerlo con software de edición como Dreamweaver. Sin embargo siempre podemos hacer una copia de los CSS originales y guardarlos a buen recaudo.

Algunas herramientas para la compresión de hojas de estilo son: CSS Compressor & Minifier, CSS Compressor, CSS Minifier, … Yo recomiendo CSS Compressor, que consta de 4 niveles de compresión y es muy rápida y efectiva.

05css

 

En total hemos recortado en nuestro ejemplo unos 100Kb, que no está nada mal, comprimiendo todos los CSS que teníamos. Recordad siempre hacer una copia de seguridad de los originales y guardarlos en un lugar seguro, nunca se sabe.

Otra técnica que a mi no me gusta, es combinar los CSS en un solo fichero para minimizar las llamadas, pero yo solo lo haría en caso de que fuesen muchos CSS distintos.

También podemos bajar los CSS menos importantes, para que no se carguen todos al principio de la web y así ralentizar su carga, e incluso PageSpeed de Google recomienda “sacar” de las hojas de estilo grandes, partes importantes en el estilo de la web para insertarlos de forma embebida en la página, y así mejorar la carga sin romper el estilo. Mi recomendación es que no hagamos todo lo que PageSpeed recomienda a toda costa, ya que es más importante una carga fluida de la web pero elegante y que se cargue en un instante pero que de un pantallazo feo al inicio, cosa que puede ocurrir si bajamos las hojas de estilo a la mitad o final de la página. Tenemos muchas otras opciones para recortar esos milisegundos necesarios, no nos volvamos locos.

Optimización de los Scripts

En este punto el objetivo y los pasos son muy parecidos al punto anterior:

  1. Externalizar los scripts y enlazar los ficheros externos.
  2. Aplazar la ejecución todo lo que se permita colocándolos abajo del todo siempre que se pueda.
  3. Cargar los scripts asincrónicamente mediante el atributo async, permitiendo que el script sea descargado en paralelo, sin bloquear al resto de la página. No se debe usar con funciones que usan jQuery, ya que puede fallar al intentar usar funciones que aún no se han declarado.
  4. Usar el atributo defer, que indica al navegador que posponga la descarga. Sólo se debe usar en scripts que no contengan document.write.
  5. Combinar los ficheros con los scripts en un sólo para reducir el número de llamadas (como dije antes, a mi esto no me gusta hacerlo).
  6. Comprimir los scripts. Al igual que antes, recomiendo hacer copias de todo antes de empezar a comprimir, porque muchas veces pueden provocar fallos. Un herramienta muy útil para esto es JS Compress, que comprime y une varios scripts en un solo fichero.

 

Optimización de imágenes

Es importante que en una web haya contenido multimedia de calidad para mejorar la experiencia del usuario de la que tanto habla Google, pero por otro lado, las imágenes y vídeos son los contenido que más ralentizan la carga de páginas web. Al fin y al cabo, todos los scripts y CSS juntos, igual pesan lo mismo que un fondo de pantalla mal gestionado.

07photos

 

Hay muchas formas y muchas herramientas para optimizar las imágenes pero en definitiva:

  1. Saber usar el tipo de imagen adecuado para cada objetivo.  Las imágenes PNG pesan mucho más que las JPEG ya que no permiten tanta compresión, pero son fundamentales para conseguir transparencias sin pérdidas de calidad en la imagen. Sólo hay que usar fotos en PNG cuando no hay más remedio.
  2. “Guardar para la Web”. Photoshop dispone de un método de grabación denominado “Guarda para la Web” (Ctrl+Alt+Mayúsculas+S) que permite guardar una foto en varios formato, comprimida específicamente para su uso en Internet y con varias pantallas donde se puede comprobar como está afectando en la calidad de la foto el nivel de compresión.
  3. Usar herramientas de optimización online. Para formatos PNG existe una herramienta llamada Compress PNG. Para imágenes en formato JPG sin duda recomiendo Kraken IO, ya que obtiene la máxima compresión posible sin pérdida de calidad.
    En nuestro caso tenemos 51 archivos JPG con un peso total de 2,11Mb. Tras pasar todas las imágenes por Web Interface de Kraken IO, el tamaño de todas las imágenes sin pérdida de calidad alguna, se queda en 1,22Mb, prácticamente la mitad ¡Fantástico!
  4. Evita el escalado de imágenes. Al igual que hicimos anteriormente con las tablas, es bueno siempre definir el ancho exacto de las imágenes siempre que se puede, y no dejar que procese la imagen para hacer un “repaint” con el tamaño nuevo, lo cual lleva realmente mucho tiempo.
  5. Usar Sprites siempre que se pueda. Los sprites son imágenes agrupadas bajo un solo fichero, normalmente un PNG transparente, que se llaman y posicionan mediante CSS y que disminuyen el número de peticiones al estar todas las imágenes dentro un sólo archivo.
  6. Usar siempre un favicon. De otra manera, además de lo poco estético que queda hoy en día una web sin favicon, provocará un error en el servidor “404 Not Found“, con el consecuente retraso que esto implica.

 

Optimización de Cookies

Si usarmos cookies tenemos otro posibilidad de reducir tamaño y tiempo de carga, gestionándolas de forma correcta:

  1. Eliminar cookies innecesarias.
  2. Reducir su tamaño
  3. Aplicar su ámbito correctamente.
  4. Establecer fechas de caducidad correctas.

 

Aplicando todos estos pasos de forma sistemática, como si se tratase de una check list, optimizaremos nuestra web de forma considerada, mejorando su entendimiento y a la larga, el posicionamiento de la misma.

10final 10final-pc

Leave a comment