Tecnología y Coaching para Emprendedores

Cómo Mejorar el Rendimiento Web

rendimiento-web-y-tiempo-de-carga

El otro día me dio por comprobar el tiempo de carga de esta web y casi me caigo de la silla: ¡más de 8 segundos! 3 de cada 4 usuarios que navegan con un móvil ya se habrían ido antes de que cargara. Así que este fin de semana me ha tocado ponerme las pilas y aplicar varias técnicas de rendimiento web para mejorar el tiempo de carga. Y aunque me ha costado unas horas el solucionar el problema que tenía, ahora tarda menos de 2 segundos en cargar si el usuario está en Amsterdam (prueba realizada con Pingdom Tools).

rendimiento web con pingdom tools

Si quieres aprender más sobre el tema, te recomiendo el curso de diseño web desde cero con HTML5 y CSS3 así como el curso de diseño web responsive, con los que vas a aprender todo lo que necesitas saber sobre diseño web a nivel profesional.

 

Aquí es importante tener en cuenta que sólo estamos midiendo los resultados de la página de inicio que tomamos como referencia, pues si miráramos algunos artículos con más de 100 imágenes tipo el de 150+ plantillas de WordPress de alta calidad veríamos cómo aumenta a 4.66 segundos:

rendimiento web con pingdom tools

 

¿El motivo? Que hay más de 150 imágenes sólo en el artículo, cada una de estas imágenes genera una petición HTTP, lo que en el pantallazo se ve como “requests” y la suma total de la página es una burrada: 15,6 Mb. Aun así, si comparamos ambos pantallazos vemos que en ambos casoes el grado de perfección es de 88/100 (en la gráfica “perf. grade”), lo que significa que a pesar de que en esta página en cuestión hay demasiadas imágenes (es lo que hay por el tipo de post), el rendimiento sigue siendo muy bueno por el grado de perfección alcanzado.

Aquí tienes un post con varias herramientas con las que comprobar el tiempo de carga. Hoy en día mis preferidas son:


Por qué mejorar el rendimiento web

Es posible que te preguntes por qué mejorar el rendimiento web, pues es un esfuerzo extra que en muchos casos requiere de conocimientos técnicos. Los motivos son los siguientes:

  • El 74% de los usuarios móviles abandonan una web que tarde más de 5 segundos en cargar. Esto es, que si nuestra web va lenta, perderemos muchos potenciales clientes y seguidores.
  • Google se está tomando muy en serio el tiempo de carga de una web, por lo que aquellas que sean lentas podrán ver cómo abandonan sus primeras posiciones en Google a favor de sitios web optimizados.
  • Si la web va muy lenta, podemos generar una mala experiencia de usuario en la persona que la visita, lo que va en detrimento de nuestra identidad digital. Es como ir a una cafetería y haber de esperar 10 minutos a que nos atiendan. Al final, por bien que nos caiga el camarero, si tenemos prisa cambiaremos de cafetería.

Como ves, apostar o no por mejorar el rendimiento web no es una opción, por lo que si te planteas tener un negocio online o tienes ya un sitio web con orientación profesional, te recomiendo verificar el tiempo de carga y poner solución a los problemas existentes. Tampoco se trata de buscar la perfección, este mismo sitio web aún se puede mejorar mucho, de lo que se trata es de encontrar el equilibrio entre tiempo de carga y funcionalidad.


Cómo mejorar el rendimiento web

Os dejo aquí algunos consejos prácticos para que vuestra web cargue rápido. Es posible que en algunos casos necesitéis contratar a una persona de perfil técnico como el mío para que os ayude, pues varias cosas requieren de conocimientos más avanzados. Veamos entonces los aspectos clave a tener en cuenta para mejorar el rendimiento web.


Alojamiento web

Este factor es de una importancia crucial, y uno de los grandes olvidados a la hora de contratar un hosting. Si usas un sitio web en WordPress a nivel profesional, entonces te recomiendo un VPS de Gigas, yo estoy alojada con ellos y va todo de maravilla. Incluso al hacer el cambio de VPS Elite a VPS Summum se me desconfiguró algo que hizo que fuera un poco más lento y con sólo abrir un ticket a las dos horas lo tenía solucionado. Con Google PageSpeed puedes comprobar el tiempo de respuesta del servidor, que en estos momentos es de 0.60 segundos.


Número de peticiones HTTP

Dicho de manera más sencilla, cada vez que le pedimos una imagen o un archivo al servidor se genera una petición HTTP. Así, si tenemos un post como el del ejemplo con más de 150 imágenes, el número de peticiones se dispara hasta el infinito. Las peticiones HTTP las generan muchas cosas, desde una tipografía de Google a la que llamamos desde nuestro código, a un plugin que usa recursos de su servidor, a imágenes o archivos externos.


Tamaño de las imágenes y archivos

El otro día impartí un curso de diseño web responsive en Barcelona Activa y vimos que la opción más compleja de implementar a nivel técnico son las imágenes adecuadas a la resolución de pantalla del dispositivo y la velocidad de la conexión. Sin entrar en detalles técnicos, aquí lo importante es evitar colgar imágenes de 1Mb de peso si podemos hacer lo mismo con una de 50kb. Se trata de reducir al máximo el peso de la imagen sin perder por ello demasiada calidad. Aquí hay que tener en cuenta que muchos dispositivos usan ya pantallas retina, que lo que hacen es que doblan el número de píxeles por el mismo espacio, lo que implica que si queremos garantizar una experiencia óptima en estos dispositivos deberíamos usar imágenes retina.


Evitar los redireccionamientos

Un redireccionamiento es cuando pedimos una página web y nos reenvía a otra. A veces es inevitable el programarlos, como por ejemplo cuando haces un cambio de dominio como hice yo con CreativaSfera. El problema es cuando abusamos de los redireccionamientos o los aplicamos a nivel interno de manera recurrente. Úsalos con cabeza y siempre que sea posible utiliza la opción del redireccionamiento permanente 301.


 Añadir un expires header

¿Un qué..? Sí, la palabrita se las trae. Lo mejor es que simplemente le pidas a tu servidor que lo hagan por ti. . Lo que hace un expires header es fijar el tiempo que ha de pasar hasta que el cliente necesite de nuevo descargar un contenido de nuestra web, es decir el expires header le indica al navegador que utilice el contenido de su caché hasta la fecha marcada. Si usas un CMS como WordPress puedes hacerlo con un plugin como W3 Total Cache, en el que también vas a poder configurar el sistema de caché de tu web. La caché es un sistema en el que se guarda una copia de determinados archivos en el navegador del usuario para que no tenga que volver a descargar la página cada vez que el usuario quiere verla. Determinados archivos que aparecen en todas las páginas como las hojas de estilo CSS y los script de JavaScript quedan entonces almacenados en el ordenador del usuario hasta que expira la caché.


Comprimir archivos

Esto no es lo que más afecta, pues aquí en eSandra no he comprimido los archivos CSS, JavaScript ni nada, pero para sitios con muchos problemas pueden ser una ayuda extra. Con el plugin W3 Total Cache de WordPress también puedes comprimir los archivos CSS y JS sin necesidad de conocimientos técnicos.


Vigilar con el uso de plugins

Uno de los principales problemas que tenía con este sitio web es que usaba muchos plugins de WordPress. Lo malo que tienen los plugins es que muchos de ellos cargan sus propias hojas de estilo y archivos JS, con lo que aumentan las peticiones HTTP y ralentizan el tiempo de carga. No sólo eso, sino que muchos se conectan a sus propios servidores, con lo que aun hacen que vaya todo más lento. Mi consejo es que utilices los plugins imprescindibles y que siempre compruebes como cada uno de ellos afectan a tu rendimiento.


Para acabar

Matt Cutts hace poco dijo que el rendimiento web va a pasar a ser uno de los aspectos fundamentales del SEO, esto es, va a ser uno de los factores clave que va a decidir si una página aparece en los primeros resultados de búsqueda o no. Muchos blogs de los que sigo tienen una excelente calidad de contenidos, pero tardan mucho en cargar, con lo que pueden verse penalizados por Google si no solucionan este problema.

Así que te animo ahora a comprobar el tiempo de carga de tu web para que mejore lo máximo posible. Si te ha sido útil el artículo, te animo a compartirlo en las redes sociales, así como dejar un comentario.

Un abrazo!


Comentarios

  • Xisco

    Buen artículo Sandra, muy bien explicado.

    Tienes toda la razón cuando dices que hay que controlar la velocidad de carga de una web, para el SEO es una pieza fundamental, y si lo dice el Sr. Cutts ya ni te cuento ;-).

    Un abrazo.

    • eSandra

      Hola Xisco!

      muchas gracias! La verdad es que a veces cuesta mantener el equilibrio entre rendimiento y funcionalidades, sobre todo con los plugins de WordPress, pero está claro que hay que optar por sitios web rápidos :-)

      un abrazo!
      Sandra

  • Edson

    Gracias por tus buenos consejos Sandra, tengo un par de dudas; Respecto al servicio de alojamiento escuche que es conveniente tener el servicio en tu propio país (mas que todo por cuestiones de soporte), si yo que me encuentro en Sud America quisiera contratar el servicio de hosting que tu utilizas, que tan aconsejable es?? y mi otra duda es si conoces alguna herramienta donde pueda reducir el tamaño de las imágenes sin perder calidad. Gracias de antemano Sandra

    • eSandra

      Hola Edson,

      efectivamente, si el servidor y los clientes están lejos, existe un problema de latencia. En Gigas te dan la opción de escoger entre Madrid y Miami. Si estás en Sud América y tus clientes viven allí, entonces has de valorarlo. Lo bueno de Gigas es la excelente relación calidad/precio y el fantástico soporte técnico, has de ver qué servidores te ofrecen en tu país y si te merece la pena o no el coste de la diferencia, porque muchos servidores tienen un tiempo de respuesta lento que es peor que la latencia misma.

      Un abrazo!
      Sandra

  • Benjamin

    Hola Sandra

    Nosotros tenemos ese problema, somos una inmobiliaria en Altea Alicante y nos gustaria si tu o alguna otra persona puede solucionarnos esto. La mayoria d nuestros clientes son suecos y noruegos te lo indico por el tema de la latencia.