Mantente informado de todas nuestras noticias

Actualizamos nuestro blog de forma asidua, no te pierdas ninguna publicación.

Este campo es obligatorio y debe tener el formato de un email

Error inesperado al ejecutar la petición, compruebe que no esté ya suscrito, o si no pruebe más tarde
Se deben aceptar las cookies para el correcto funcionamiento de este formulario.
Se ha registrado correctamente a la newsletter

Este campo es obligatorio

Rendimiento web

Optimiza tu web para llegar a más clientes

15ene.21

Orlando

Uno de los temas más importantes cuando hablamos de una página web que ya está publicada es la optimización o la velocidad de carga. El hecho de que una web vaya lenta hará que los usuarios o futuros clientes no decidan seguir navegando por tu negocio online, con lo cual, esto implicará que tus ventas se vean perjudicadas, además, hay que tener muy en cuenta que hoy en día se está centralizando toda la atención hacia los smartphones y la navegabilidad en ellos. De hecho, Google, entre sus requisitos de optimización de una web, está valorando, principalmente, que esta se comporte de forma ágil en este tipo de dispositivos.

 

Por tanto, si quieres optimizar tu web, empieza a analizar su comportamiento en dispositivos móviles, y centra gran parte de tu esfuerzo en esta tarea, pero sin dejar de lado el comportamiento en ordenadores. Si tienes en cuenta estas 2 premisas y actúas para que se cumplan, tendrás mucho ganado en tu negocio por internet.

 

En los siguientes apartados vamos a explicarte como puedes conseguir que tu web sea veloz y además te diremos como puedes ver los datos de su rendimiento.

 

Componentes a analizar para que tu web sea más rápida

 

De entre los elementos que forman parte de una web vamos a mencionar los que debes mejorar para conseguir que su rendimiento se vea mejorado de forma significativa. Piensa que la suma de mejoras en los pequeños detalles, son las que harán que tu web sea un éxito.

 

Tanto si tienes una web hecha con algunos de los CMS más conocidos, como si la tienes con otros hechos a medida, lo que te vamos a contar sirve en cualquiera de los casos. Si quieres conocer más detalles sobre ambos CMS, puedes acceder a nuestro artículo del blog CMS más populares vs desarrollo web a medida donde te damos algunos consejos interesantes.

 

Elementos para mejorar la velocidad de una página web:

 

  • Aspecto sencillo y ligero: tienes que procurar que tu página web tenga un diseño sencillo y sin efectos excesivos.
  • Imágenes reducidas y comprimidas: es importante reducir el tamaño y comprimir las imágenes, para que no ocupen espacio elevado. Una buena herramienta para reducir y comprimir es resizeimage.net, que tanto te permite reducir imágenes, como comprimirlas.
  • Código optimizado: procura que todo el código que se programe sea limpio y además esté minimizado.
  • Eliminar funciones innecesarias: no sobrecargar la página con funciones que no realicen tareas realmente necesarias.
  • Utiliza la cache: intenta aprovechar el almacenamiento en cache de aquellas páginas de tu web que puedan tener más visitas.
  • Evita saltos desde otras urls: las redirecciones entre páginas ralentizan la carga, evítalas, o redúcelas al mínimo.
  • Las páginas de error también afectan: si tienes una página de error, dale un formato adecuado, pero revisa tu web para que no haya errores de este tipo (error 404).
  • Escoge el alojamiento web adecuado: busca opciones de ubicar la web (puedes acceder a nuestro artículo ¿Qué alojamiento web es el mejor para tu negocio? si quieres saber más) que te den garantías de buen rendimiento.

 

Herramientas gratuitas para mejorar el rendimiento de tu web

 

En este punto es donde podrás ver algunas de las herramientas que existen actualmente y que te pueden ayudar, tanto a detectar los puntos en los que debes mejorar tu web, como para ver los diferentes valores en su rendimiento. Es decir, te servirán para tomarlo como referencia para seguir una rutina de optimización de tu negocio online.

 

Algunas de estas herramientas dan valores muy técnicos, pero en general son bastante intuitivas, y aunque no tengas conocimientos a nivel de programación te pueden servir para recopilar información e investigar sobre mejoras más profundas. También te dan la posibilidad de que te puedas crear un histórico de como ha evolucionado el comportamiento de tu web a lo largo del tiempo, esto es posible gracias a los informes que te puedes descargar (en algunas de ellas) sobre los análisis que hacen.

 

PageSpeed Insights de Google

 

Esta herramienta es propia de Google y se utiliza para visualizar el rendimiento de una página web, tanto para ordenadores, como para dispositivos móviles.


Suele tener oscilaciones de rendimiento algo variable según las ejecuciones que realices, por tanto, no debespreocuparte en exceso si tu página cambia de un análisis a otro. En lo que si que tienes que fijarte es en que lasvaloraciones de rendimiento, tanto para movil, como para ordenador, estén por encima de los 80 puntos, valores a partirde los cuales ya se empiezan a considerar buenos rendimientos.

Sus características principales son:

 

  • Indicador de velocidad a la que carga la página web.
  • Puntuación de rendimiento de 0 a 100 en móviles y ordenadores.
  • Muestra con colores verde, amarillo y rojo, los puntos que son correctos, a mejorar y a solucionar, respectivamente.
  • Eficientcia de las imágenes de la web, tanto por su tamaño, como por su compresión.
  • Código que debe ser minimizado u optimizado.
  • Recomendaciones para posponer funcionalidades de la web.
  • Control de redirecciones.
  • Correcto uso de la cache.
  • Varios indicadores de ejecución de procesos que pueden mejorarse.

 

GTmetrix

 

Te permite escoger la ubicación desde de donde testear tu web (Canadá, Reino Unido, etc...) de forma que puedes saber qué públicos tienen mejor el acceso a tu página, y te da la posibilidad de escoger el navegador desde donde probarla. No te muestra la información separada para dispositivos móviles y ordenadores, pero sí que tiene una serie de indicadores en los que puedes ver recomendaciones o soluciones a los problemas de carga que pueda tener tu web.

 

Es una herramienta algo más estable en las fluctuaciones de resultados que puedas obtener en cada prueba de rendimiento de tu web. Por tanto, parece algo más confiable que Page Speed a la hora de no tener sobresaltos en las diferentes pruebas.

 

Sus características principales son:

 

  • Porcentajes generales de actuación y estrutura de la web probada.
  • Valores de velocidad de carga de la web.
  • Resumen sobre la velocidad de carga.
  • Detalles sobre los principales problemas a solucionar, tanto renderizado, utilización de CDNs, tamaños de imágenes, DOM excesivo, o problemas de diseño.
  • Métricas de rendimiento detalladas, así como tiempos de ejecución del navegador.
  • Recomendaciones sobre la estructura, es decir, sobre el código a revisar (html, css, js, etc...).
  • Datos en cascada sobre el comportamiento de los procesos js que se ejecutan.
  • Video con recomendaciones generales sobre rendimiento.
  • Historial de la página que quieras probar en diferentes ocasiones, entrando con un usuario.
  • Posibilidad de descargar los informes en pdf.

 

Pingdom Tools

 

Permite monitorizar la disponibilidad de la web que quieras probar, además de obtener avisos y ver estadísticas de resultados. Es una herramienta sencilla de manejar. También puedes escoger la ubicación desde donde quieres realizar las pruebas (América del Norte, Asia, Europa, etc...).

 

Sus estadísticas no son tan completas como las 2 herramientas anteriores, pero la sencillez de estas hace que tengas una visión más clara de los elementos que debes mejorar en la web para obtener unos resultados óptimos en cuanto a rendimiento.

 

Sus características principales son:

 

  • Valor de 0 a 100 de rendimiento general.
  • Valores de velocidad de carga de la web.
  • Tamaño de la página web.
  • Número de llamadas a servicios web.
  • Posibilidad de descargar el código json con los resultados.
  • Posibilidad de compartir en redes sociales o a través de email, la url con los resultados.
  • Métricas con el rendimiento de la página, solicitudes http, compresión de componentes, posponer carga js, reducción elementos DOM.
  • Tamaños de los contenidos, tanto de elementos (imágenes, fuentes de letras), como de código (html).
  • Solicitudes por tipo de contenido, tanto elementos, como código
  • Tamaño del contenido por dominio.
  • Solicitudes por dominio.
  • Información en cascada de las solicitudes de los diferentes archivos.

 

WebPagetest

 

Esta herramienta tiene unas opciones de testeo que te permiten realizar pruebas desde diferentes ubicaciones, además desde diferentes dispositivos móviles y para ordenador, y también opción de escoger desde diferentes navegadores. Es una de las que tiene opciones más completas de testeo.

 

Tiene estadísticas visuales sobre diferentes métricas lo que hacen que esta herramienta sea bastante completa y bastante técnica, ya que te muestra gráficas en cascada con el detalle de los tiempos de cada uno de los scripts que forman parte de la web testeada.

 

Sus características principales son:

 

  • Valores generales de rendimiento y tiempos de carga.
  • Gráficos con lineas de tiempo que dan paso a detalles en cascada.
  • Graficos con porcentajes de desglose de contenido (html, imágenes, js, css, font).
  • Posibilidad de ver el código json con los resultados.
  • Posibilidad de ver video con la carga de la página web que se testea.

 

Test my site de Think with Google

 

Herramienta de Google para poder ver el rendimiento de una página web pero que muestra información genérica de como se comporta la web probada, y te muestra algunas recomendaciones de mejoras que se pueden hacer, pero todo bajo una visión más comercial que técnica. Da la posibilidad de pedir un informe con esos datos algo más en detalle, pero el informe no te llega de forma inmediata.

 

Es una opción un poco más sencilla que las anteriores, pero tampoco te da la información detallada que pudieran tener las anteriores, a simple vista.

 

Sus características principales son:

 

  • Valor general de tiempos de carga.
  • Recomendaciones genéricas de mejora.
  • Posibilidad de comparar 2 urls.

 

Measure de Web.dev

 

Muestra los datos muy similares a como los muestra Page Speed, la información es muy fácil de ver y entender. No es demasiado técnica, lo cual ayuda a comprender mejor los resultados, en caso de que no tengas un perfil de programación.

 

Muestra información muy sencilla y de una forma muy simple, obviamente, si estas empezando en este mundo de la optimización de páginas web, es un buen punto de partida, para ver los datos de rendimiento.

 

Sus características principales son:

 

  • Valores generales de actuación, accesibilidad, mejores prácticas y SEO.
  • Valores generales de tiempos de carga.
  • Parámetros de auditoría con diferentes recomendaciones sobre css, recursos bloqueantes, js no utilizado, formatos de imágenes, recomendación SEO genérica.
  • Links a documentación sobre los parámetros del punto anterior.

 

Google Lighthouse

 

Es una herramienta más técnica y destinada a profesionales que se dedican al desarrollo web o administradores de páginas web. Se ejecuta desde la herramientas de desarrollo de Google Chrome, y muestra la misma información que Page Speed, de hecho, Page Speed utiliza este motor para obtener los resultados de los análisis de las pruebas de testeo.

 

Lighthouse no separa la información entre ordenadores y dispositivos móviles, pero si que realiza las pruebas de forma automática simulando ambos tipos. Tiene toda la información que muestra Page Speed, pero debes tener nociones técnicas para poder ejecutarlo con garantías de que la información te pueda ser útil.

 

Sus características principales son:

 

  • Valores generales de actuación, accesibilidad, mejores prácticas y SEO.
  • Puntuación de rendimiento de 0 a 100.
  • Muestra con colores verde, amarillo y rojo, los puntos que son correctos, a mejorar y a solucionar, respectivamente.
  • Eficientcia de las imágenes de la web, tanto por su tamaño, como por su compresión.
  • Código que debe ser minimizado u optimizado.
  • Recomendaciones para posponer funcionalidades de la web.
  • Control de redirecciones.
  • Correcto uso de la cache.
  • Varios indicadores de ejecución de procesos que pueden mejorarse.

 

Conclusiones y recomendaciones

 

Por lo que respecta a las herramientas gratuitas que hemos presentado creo que las 2 que pueden tener información interesante y más clara a la hora de empezar con el testeo de páginas web pueden ser GT Metrix, porque los valores son más estables si se realizan varias ejecuciones, y Measure de Web.dev, por su simplicidad pero con información bastante completa, si no eres técnico.

 

Por otro lado tenemos a Page Speed que tiene información técnica y algo más completa, muy similar a GT Metrix, pero es algo menos estable y tiene más fluctuaciones de información en pruebas consecutivas. Es una buena herramienta y también da buenas garantías para optimizar correctamente una web.