Conoce cómo medir y optimizar la velocidad de carga de tu página web a través de las reglas recomendadas por Google.

Se trata de un factor SEO de especial relevancia para los buscadores y determinante en tu tasa de abandono web.

Los motores tratan de ofrecer la mejor experiencia de búsqueda posible y un sitio lento y pesado no lo es.

Para corregir estos problemas, aparecen las técnicas de optimización del rendimiento web, en inglés Web Performance Optimization (WPO).

Esta técnicas proponen cambios de mejora para reducir el tiempo de espera de los usuarios cuando visualizan una página web.

Cómo medir la velocidad de carga de mi página web 

Lo primero que debemos hacer para mejorar la carga web es medir la velocidad y comprobar el tiempo de respuesta de nuestra página web.

Para ello, haremos uso de dos herramientas gratuitas sencillas:

1. Para medir y realizar un test de velocidad web, haremos uso de una herramienta de Google denominada PageSpeeds Insights.
2. Para medir el tiempo de carga web, utilizaremos otra herramienta muy conocida denominada Pingdom.

Medir Velocidad página web 

Una vez que midas el rendimiento de tu página web con PageSpeed Insights debes seguir las recomendaciones de mejora, especialmente las que tienen un signo de exclamación rojo.

No te preocupes si no te es familiar el lenguaje técnico de las recomendaciones, especialmente si es la primera vez que las ves.

En este artículo intentaremos desgranar como poner en marcha las normas de Google para mejorar el rendimiento de tu web.

PageSpeed de Google mide el rendimiento de las páginas en ordenadores y en dispositivos móviles, y su puntuación va de 0 a 100 puntos.

Google considera como rendimiento bueno de un sitio web, las puntuaciones superiores a 85 las cuales verás marcadas en color verde.

Para medir la importancia de las acciones a llevar a cabo, se ha clasificado cada recomendación en tres colores distintos:

Consejo: El umbral mínimo de rendimiento de tu sitio web es el color ámbar/amarillo, aunque el verde es el idóneo, por tanto no deberías estar en el color rojo.

Si necesitas profundizar en esta herramienta, tienes amplia información sobre su uso y  funcionalidades.

Medir tiempo carga web 

Pingdom es una herramienta para medir y analizar los tiempos de carga web y al igual que PageSpeed lo único que tenemos que hacer es incluir la url de nuestra página web para obtener los resultados.

Y te preguntarás que periodos de carga de un sitio web son razonables:

• Carga rápida, en menos de 2 segundos
• Carga normal, entre 2 y 4 segundos
• Carga lenta, más de 5 segundos

9 Reglas para optimizar la velocidad de mi página web 

Una vez obtenidos los resultados de PageSpeed y siempre que la puntuación de nuestro sitio web esté por debajo de 100, podremos mejorar el rendimiento de nuestra web.

¿Cómo lo hacemos?.

La velocidad de nuestra web la podemos optimizar a través de las recomendaciones elaboradas por Google. Veamos las 9 principales:

1. Compresión Gzip
2. Caché del navegador
3. Redirecciones
4. Imágenes
5. CSS
6. JavaScript
7. Contenido Visible
8. Recursos (HTML, CSS y JavaScript)
9. Tiempo de respuesta servidor

1.- Compresión Gzip 

En muchas ocasiones, los archivos HTML y CSS ocupan mucho espacio en nuestros servidores y es necesario comprimirlos.

La compresión Gzip reduce aproximadamente entre un 50% y un 70% el tamaño del archivo, lo que significa menos tiempo en cargar las páginas y menos ancho de banda consumido por el servidor.

Para habilitar la compresión Gzip, lo único que tenemos que hacer es añadir un trozo de código al archivo denominado “.htaccess” que está ubicado en la raíz del servidor.

Si no encuentras dicho archivo, te recomiendo que preguntes al servicio de tu hosting.

Si PageSpeed te aconseja “Habiliar la compresión Gzip”, sigue las siguientes instrucciones que dependerán según el servidor web en el cual tengas alojado tu sitio web:

• Apache: usar mod_deflate
• NGNIX: usar HttpGzipModule
• IIS: configurar la compresión HTTP

2.- Caché del Navegador 

Al abrir la página de tu navegador, el almacenamiento de archivos (imágenes, JS, CSS, etc.) y objetos (multimedia, PDF, etc) puede ahorrarte tiempo si visitas en más de una ocasión un sitio web.

Esto significa que un usuario de tu sitio web no tiene que volver a cargar el logo, archivos CSS, etc. en su segunda visita y por tanto la carga de las páginas será mucho más rápida.

Si PageSpeed Insights te indica “Especificar caché del navegador” lo que debes hacer es añadir un trozo de código al igual que en el caso anterior, compresión Gzip, en el archivo “.htaccess” que está ubicado en la raíz del servidor.

En dicho código, debes indicar periodos de tiempo para el almacén de archivos en caché a través de los valores “Expires” y “Last-Modified” que explicaremos a continuación, aunque lo mejor es verlo con un ejemplo:

1. EXPIRES CACHING ##
2. <IfModule mod_expires.c>
3. ExpiresActive On
4. ExpiresByType image/jpg «access 1 year»
5. ExpiresByType image/jpeg «access 1 year»
6. ExpiresByType image/gif «access 1 year»
7. ExpiresByType image/png «access 1 year»
8. ExpiresByType text/css «access 1 month»
9. ExpiresByType text/html «access 1 month»
10. ExpiresByType application/pdf «access 1 month»
11. ExpiresByType text/x-javascript «access 1 month»
12. ExpiresByType application/x-shockwave-flash «access 1 month»
13. ExpiresDefault «access plus 1 month»
14. </IfModule>
15. ## EXPIRES CACHING ##

En este ejemplo puedes ver que hay periodos de tiempo entre un mes (1 month) y un año (1 year) que están asociados a los distintos tipos de archivos y objetos.

Por ejemplo, los “pdf” se almacenan en caché  durante un mes.

La fecha de caducidad “Expires” se establece a través de un periodo de tiempo (día, semana, mes, año), mientras “Last Modified” a través de una fecha.

Es recomendable que la fecha Expires sea entre una semana y un año para evitar problemas.

Ten en cuenta que el valor “Expires” es la prioritaria como cabecera de caché.

“Expires” sirve para especificar el periodo en el que el navegador puede usar el recurso en caché sin comprobar que existe una nueva versión en el servidor web.

“Last Modified” se usa para especificar el modo en que el navegador determinará si los archivos están duplicados antes de almacenarlos en caché.

Si necesitas ampliar la información, puedes recurrir a las instrucciones de cómo “Especificar caché de navegador” de Google.

3.- Redirecciones 

Las redirecciones se producen cuando un usuario busca un archivo y es redirigido a otro.

Las más habituales en la web son las redirecciones de dominio realizadas a través de HTTP a través de las cuales cuando un usuario visita un dominio es redirigido a una nueva dirección (URL).

Dentro de ellas, las dos más comunes son la redirección denominada 301 (de carácter permanente) y 302 (de carácter temporal).

Imagínate que entras por la puerta principal de una tienda y, debido a unas obras en el inmueble, un cartel te indica con una flecha entrar por una puerta lateral.

¡A qué perderías tiempo al tener que desplazarte de un lugar a otro!.

En el mundo web pasaría lo mismo, hacen que tus páginas carguen lentamente debido al desplazamiento de una dirección web a otra.

Para aumentar la velocidad web, Google sugiere minimizar las redirecciones y te aconseja eliminar las redirecciones no estrictamente necesarias, es decir, no enlaces a una página web que tiene una redirección asociada.

Revisa bien el diseño de tu sitio web para ver en qué páginas puedes mejorar el rendimiento y por tanto su velocidad.

Si necesitas más información visita la información que ofrece Google sobre “Como evitar los redireccionamientos a páginas de destino”.

4.- Imágenes 

Google aconseja realizar una optimización básica y avanzada de todas las imágenes.

Así  que si una vez que mides la velocidad de tu página web, PageSpeed Insights te avisa que debes “Optimizar imágenes” sigue leyendo este apartado.

Comprimir imágenes

Las imágenes pueden ostensiblemente reducir la velocidad de carga de una página web.

Google es capaz de detectar las imágenes de la página que se pueden reducir de tamaño sin que pierda una calidad visual notoria.

Si guardas un formato adecuado en las imágenes, recortas el espacio innecesario y las comprimes, puedes conseguir un ahorro importante de espacio.

Esto lo puedes hacer con cualquier programa de edición de fotos o imágenes.

Yo suelo usar Pixlr en su versión básica “Pixlr Express” para pequeños retoques o su variante avanzada “Pixlr Editor” para ediciones más complejas.

Además de esto anterior, puedes adicionalmente comprimirlas sin perdidas de calidad en archivos JPG y PNG.

En este caso suelo usar el programa gratuito Riot, versión 0.5.2 y me ha funcionado muy bien tanto en Windows 7 y 8, como en 10.

Recuerda que:

• No uses archivos BMP o TIFF
• Usa sólo archivos GIF para imágenes con animaciones o para gráficos simples o muy reducidos en tamaño
• Utiliza JPG para fotografías e ilustraciones complicadas. Recomendación no comprimir más de un 70-80% para no perder excesiva calidad
• Usa PNG para fondos web, iconos o gráficos que no son fotografías. Es un formato de imagen sin pérdidas

Especificar dimensión 

Los navegadores reproducen tu página web en torno a tus imágenes. Únicamente pueden hacerlo si conocen la dimensión de tus imágenes.

Si no le indicas el tamaño de las imágenes (alto y ancho), el navegador reconstruirá una misma página varias veces al tener que descargar las imágenes individualmente y reconstruir cada vez la página que se descarga una imagen, ya que tiene que ajustar el texto alrededor de dicha imagen.

Por tanto, inserta el código HTML en las etiquetas “imagen”.

• Etiqueta imagen sin dimensiones:

<img src=»image.jpg» />

• Etiqueta imagen con dimensiones (ancho y alto)

<img src=»image.jpg» width=»200″ height=»200″ />

Escala real 

Muestra siempre imágenes en el código HTML que coinciden con su tamaño real.

Cuando en HTML muestras una imagen más grande que las dimensiones reales de la imagen (por ejemplo: una imagen 100px por 100px según HTML la muestras a 60px por 60px), el navegador descarga la imagen más grande, pero muestra la más pequeña en la página web.

¿Por qué no haces la imagen más pequeña con un editor de imágenes?.

Con ello conseguirás reducir la carga de tu página web, ya que el navegador no tendrá que descargar una imagen más grande que su tamaño real.

Por tanto, recuerda que si la imagen de tamaño completo es muy grande, hazla más pequeña pero no cambies su tamaño con HTML.

CSS Sprites 

La gran mayoría de las páginas web utilizan muchas imágenes pequeñas que consumen recursos disminuyendo la velocidad de carga de la página.

Necesitas una solución que permita combinar dichas imágenes pequeñas en una sola para que la página se muestre más rápida.

Para esto tienes CSS Sprites que permite combinar varias imágenes en una y según definamos el ancho y alto de cada imagen en CSS, se mostrará una u otra.

Explicar su funcionamiento en detalle daría para otro post entero, así que os dejo un ejemplo de código de la W3 Schools para que podáis experimentarlo vosotros mismos.

5.- CSS 

El CSS es un lenguaje de estilo que define la presentación de los documentos HTML. El CSS abarca, entre otras cuestiones, fuentes, colores, márgenes, líneas, altura, anchura o imágenes de fondo.

Por tanto, mientras HTML proporciona estructura al contenido, CSS le otorga un formato al mismo.

El CSS se puede utilizar de muchas maneras y por tanto, existen muchas configuraciones distintas.

El CSS debe ayudar a tu página web a hacerla más rápida y no a destruir el rendimiento de la misma.

Desde Google, recomiendan 4 buenas prácticas para una buena configuración CSS:

1. No superes más de una hoja de estilos CSS externa
2. Instrucciones CSS cortas en las etiquetas de estilo para el contenido superior
3. No realizar llamadas (@import) de CSS
4. No añadir líneas CSS en el código HTML en elementos como DIV´s o H1´s

Si después de hacer el test de velocidad de tu página web, Google te avisa en PageSpeed que debes “Optimizar la entrega de CSS” puedes hacerlos de muchas formas distintas.

Veamos los modos principales de optimizar tu CSS a través de la combinación de archivos CSS, de la compresión CSS y los CSS en línea.

CSS externo 

Los archivos CSS externos es una manera de gestionar tus CSS y se llaman así porque sus instrucciones se encuentran en un archivo separado de tu HTML.

La ventaja de una archivo CSS es que el navegador los guarda en su caché, aunque implica que el navegador tiene que cargar primero el archivo HTML y luego el CSS.

Probablemente, en la cabecera (head) de tu documento HTML tendrás un código del tipo:

<link rel=»stylesheet» type=»text/css» href=»http://www.tusitio.com/style.css» media=»screen» />

El problema se produce cuando tienes varios archivos CSS externos, ya que el navegador está obligado a descargar cada uno de ellos antes de mostrar tu página web, lo que se traduce en una página más lenta.

Por tanto, para aumentar la velocidad de carga de tu página web debes combinar dichos archivos CSS creando uno nuevo que contenga todo el contenido de los otros.

¿Cómo lo hago?.

Puedes copiar y pegar los contenidos de cada archivo CSS en uno principal o bien copiar el contenido de un archivo CSS y añadir dicho contenido en otro ya existente.

Compresión CSS 

Recuerda que Google te recomienda que las instrucciones CSS sean las más cortas posibles.

¿Cómo puedo comprimir el código CSS?.

Es muy sencillo, te puedes ayudar de múltiples herramientas online que existen en el mercado. Una de las que uso para mis proyectos es CSS Drive.

Veamos un ejemplo para comprimir la siguiente instrucción CSS:

1.   body {
2.   padding-left: 11em;
3.   font-family: Georgia, «Times New Roman»,
4.   Times, serif;
5.   color: purple;
6.   background-color: #d8da3d }

Ahora, lo podéis hacer vosotros. Este código cópialo y pégalo en la herramienta, y obtendrás el siguiente código:

body{ padding-left:11em;  font-family:Georgia,»Times New Roman», Times,serif;  color:purple;  background-color:#d8da3d}

El resultado es que de los 155 bytes originales hemos comprimido 25 bytes (un 16%). Imaginaros lo que nos podemos ahorrar con CSS más grandes.

Gracias a estas pequeñas modificaciones optimizarás tus páginas web al mejorar la velocidad de carga.

CSS en línea

Antes hablábamos que si utilizas archivos CSS externos, el navegador tiene que cargar primero el archivo HTML y luego el archivo CSS. Tienes una manera de escribir las instrucciones CSS en línea directamente en tu archivo HTML.

Con esto conseguirás que el navegador sólo tenga que descargar el HTML y será más rápido que una descarga doble (primero el archivo HTML y después el archivo CSS).

¿Cómo lo hago?.

Sólo tienes que copiar el contenido de tu archivo CSS externo entre las etiquetas de “estilo” en la cabecera de tu archivo HTML.

Abriremos una etiqueta de apertura de declaración de estilos, <style type=»text/css»>, a continuación colocaremos los estilos (archivos CSS) que deseemos y cerramos la declaración

1. <style type=»text/css»>
2. ul {color:red;}
3. a {color:green; text-decoration: none;}
4. </style>

No te olvides también de asegurarte que los estilos CSS estén por encima de los scripts de tu página. Puedes aprender más sobre estos últimos en el siguiente apartado.

6.- JavaScript 

JavaScript es un lenguaje de programación usado principalmente para crear páginas web dinámicas.

No necesita compilar programas, ya que se puede probar directamente en cualquier navegador y son estos últimos los encargados de interpretar el código.

Por ello, Javascript tiene la gran virtud de que se incorpora en cualquier página web, sin necesidad de instalar otro programa para ser visualizado.

No confundas el lenguaje JavaScript con el lenguaje Java. Son distintos y cada uno tiene sus propias características.

En algunas ocasiones, los archivos JavaScript demoran la carga web debido a que bloquean la visualización del contenido superior de una página.

Entonces, PageSpeed insights de Google nos avisa con “Quitar el JavaScript que bloquea la visualización de contenidos”.

Cada vez que un navegador se encuentra un script externo durante el análisis de una página web, debe pararse y descargar el archivo JavaScript, lo que retrasa la velocidad en que se muestra tu página web.

Según las normas de Google nos aconseja que “el JavaScript necesario para mostrar el contenido de la parte superior debería estar en el código HTML, mientras que el JavaScript para otras funcionalidades debería ejecutarse posteriormente”.

Dado que existen distintos usos de JavaScripts en una página (JavaScript Síncrono, diferido, Asíncrono, JavaScript inline…), no quiero extenderme más en este aspecto.

7.- Contenido visible 

Cuando compruebas la velocidad de carga web, si Google te informa  de que debes “Priorizar el contenido visible” significa que debes limitar el tamaño de tus datos (HTML, CSS, imágenes, JavaScript) para que muestres el contenido en la mitad superior de tu página web.

Para ello puedes:

1.- Estructurar tu página (código HTML) de modo que al servidor suministre los datos necesarios para mostrar el contenido más importante de la página y posponer el resto.

2.- Reducir la cantidad de datos utilizado por los recursos

Estructura el código HTML  para priorizar contenido más importante

Una de las mejores formas para mejorar la velocidad de tu web es asegurar que el código HTML muestre tu página antes que cualquier otro contenido.

Verás cómo con unos sencillos consejos se puede conseguir:

Barra Lateral o pie de página

Si tu barra lateral o pie de página que contiene banners, anuncios y botones de redes sociales aparece antes que tu contenido principal ralentizará mucho tu página web.

Por tanto, sólo tienes que cambiar el orden presentando el contenido principal primero sin que se tenga que cargar la barra lateral o el pie de página.

Erróneo:

1. <html>
2. <body>
3. <sidebar>
4. </sidebar>
5. <content>
6. </content>
7. </body>
8. </html>

Correcto:

1. <html>
2. <body>
3. <content>
4. </content>
5. <sidebar>
6. </sidebar>
7. </body>
8. </html>

Con este cambio sencillo en la estructura HTML conseguirás aumentar la velocidad de carga web para mostrar el contenido principal en primer lugar, pero también puedes hacer otras cosas.

Reducir la cantidad de datos para mostrar la página

Cuando veas la secuencia en que el navegador realiza una carga web, entenderás como puedes minimizar la cantidad de datos.

1. El navegador descarga el código HTML
2. Analiza el código HTML
3. Detiene el análisis cuando encuentra un recurso que tiene que cargar (CSS externo, imagen, etc.)
4. Carga el recurso externo
5. Si se trata de CSS o JavaScript, el navegador analiza dicho archivo

Por tanto, debemos priorizar el contenido superior de la página web para evitar una pronta carga de recursos externos que retrase la velocidad de tu página web.

¿Cómo lo hacemos?

• HTML. Modifica la estructura HTML para cargar el contenido principal primero. Los recursos mencionados en el HTML se cargan en la mayoría de los casos de forma secuencial, por tanto cambia dicha secuencia.
• CSS. A las hojas de estilos se debe principalmente a que una página cargue rápidamente. Si tienes una configuración adecuada de tus archivos CSS incrementarás la velocidad de tu página. Ya hemos visto en un apartado anterior cómo optimizar los archivos CSS.
• JavaScript. Puedes posponer la carga de los JavaScripts con el objetivo de cargar más rápido el contenido principal. Mira el apartado específico sobre JavaScript en donde lo explico.

8.- Recursos (HTML, CSS y JavaScript) 

Cuando medimos la velocidad web con la herramienta de Google PageSpeed Insights y se da cuenta de que alguno de los recursos puede reducirse, te recomendará “Minificar recursos”.

Esto quiere decir que podemos reducir el tamaño suprimiendo espacios, sangrías y saltos de líneas.

Con ello podemos acelerar la velocidad de tu carga y optimizar tu página web.

En secciones anteriores, hemos tratado los tres recursos: HTML, CSS y JavaScript.

Antes de finalizar este apartado, sí te aconsejaría que echaras un vistazo a las herramientas que Google propone para minificar el código HTML, CSS y JavaScript.

9.-Tiempo de respuesta del servidor 

Existen muchos motivos por los cuales la respuesta del servidor puede superar los 200 milisegundos, límite que propone Google y por encima del mismo considera un rendimiento no óptimo.

Si superas dicho límite, PageSpeed Insights te indicará que debes “Mejorar el tiempo de respuesta del servidor”, pero no te informará de la medición en segundos.

Para ello, debemos medir el tiempo de carga web a través de la herramienta Pingdom, tal y como explicamos al inicio del post, la cual te informará del tiempo de respuesta del servidor y en cuánto excede al límite que aconseja Google.

Muchas son las razones posibles para que haya una respuesta lenta del servidor:

• Consultas lentas a la base de datos
• Procesador insuficiente
• Memoria escasa
• Entornos
• Bibliotecas
• Etc.

Te dejo algunas recomendaciones para mejorar el tiempo de respuesta del servidor (no existe un orden de seguimiento y se pueden combinar, aunque lo lógico sería empezar optimizando las páginas web):

• Optimizar el servidor web. Si se está haciendo un mal uso de los recursos en el servidor web, puedes acelerar el tiempo de respuesta cambiando el mismo (por ejemplo: NGINX en vez de Apache) o aumentar los recursos (mayor memoria, almacenamiento y potencia de procesamiento).
• Liberar el servidor web. Optimiza tus páginas web para que el servidor tenga menos carga de trabajo, lo hemos tratado a lo largo de todo el artículo. Si tienes visitas de distintas zonas geográficas, piensa en usar un CDN.
• Mejorar hosting. Si no has podido solucionar el tiempo de respuesta optimizando tus páginas web y tu servidor, mi consejo es que te cambies el alojamiento (hosting) de tu servidor. Quizás tu servidor compartido no es suficiente y tienes que escalar a una solución más avanzada (por ejemplo VPS) o quizás tienes un servidor virtual y quieres pasarte a un servidor dedicado.

Para finalizar y a modo de resumen:

Presta especial cuidado a la velocidad de carga web, tanto si estás pensando crear un sitio web como si ya lo tienes desarrollado.

Mide, comprueba y analiza la velocidad de carga de todas tus páginas web y detecta las modificaciones que tienes que acometer a través de la herramienta PageSpeed Insights de Google.

Una vez identificadas y antes de proceder a su optimización, aprende las técnicas aquí mencionadas para aumentar y mejorar la velocidad de tu web.

Estas acciones te permitirán no sólo optimizar tu sitio web, sino mejorar el posicionamiento natural y la experiencia de navegación de tus visitantes online.

Este hecho es muchas veces olvidado y un sitio web lento significa pérdidas de tráfico web y limitar los beneficios que puede ofrecerte tu negocio en internet.

Esta es la quinta entrega sobre cómo posicionar mi web, la sexta y última entrega de esta serie será sobre “cómo las señales sociales pueden ayudar a tu posicionamiento SEO”.

Si estás interesado/a puedes consultar las anteriores entregas:

• Introducción: El por qué del posicionamiento natural en buscadores
• Parte 1: Como posicionar mi web
• Parte 2: Como escribir para la web
• Parte 3: Como los enlaces mejoran tu posicionamiento SEO
• Parte 4: Como los Rich Snippets mejoran tu CTR

Si necesitas ayuda puedes contactar conmigo. Y si te ha gustado el artículo dale a «me gusta» y compártelo.