Cómo mejorar el rendimiento de un sitio web

La velocidad con la que se abre una página de Internet tiene un impacto significativo en varios factores, que entre otros incluyen:

el tiempo que pasa un usuario en un sitio en particular;

la cantidad de conversiones que obtiene de sus usuarios;

el posicionamiento de un sitio en los resultados orgánicos de los buscadores.

Lamentablemente, en la mayoría de los casos, una página web obtiene una puntuación muy baja a la hora de evaluar su velocidad real. Este punto puede tener un impacto fuertemente negativo en toda la estrategia que se haya desarrollado por la parte del marketing digital.

Puede haber muchos factores que pueden provocar una desaceleración y sería mejor intentar identificar tantos como sea posible. Lo que puede parecer una cantidad de tiempo adecuada para algunas personas, para otras puede parecer una eternidad. No es buena idea evaluar la velocidad de carga utilizando únicamente tu conexión a Internet.

Veamos juntos cuáles son los principales factores a tener en cuenta para mejorar el rendimiento de un sitio web y la velocidad de apertura de páginas:

ÍNDICE Elegir un servicio de alojamiento de buena calidad ¿Puede la velocidad de un sitio marcar la diferencia?

Habilite el almacenamiento en caché en su navegador

Priorizar el contenido en la mitad superior de la página

Optimizar archivos multimedia Optimizar imágenes

Utilice un sistema de almacenamiento en caché y una CDN

1. Elige un servicio de hosting de buena calidad Son muchos los usuarios que, cuando deciden abrir una web, empiezan a buscar ofertas o hosting compartido barato. Ahorrar en el servicio de hosting NO siempre es una ventaja para el proyecto que vas a desarrollar.

Cuando un usuario se encuentra en las páginas de un sitio web lento, no le interesa que el servicio de hosting haya permitido al propietario ahorrarse unas decenas de euros. A menudo, en lugar de esperar a que se cargue la página, regresa a los resultados de búsqueda y hace clic en el resultado de un competidor. Haber ahorrado unos euros podría convertirse en una pérdida de muchos miles de euros y de clientes fieles a la hora de renovar.

a name="speed""¿Puede la velocidad de un sitio marcar la diferencia?

Ciertamente, la velocidad de un sitio web puede aumentar o reducir las conversiones de sus páginas. Según un estudio realizado por Amazon, una diferencia de tan solo 100 ms -una unidad de tiempo que una persona no puede percibir en absoluto- puede ser suficiente para reducir las ventas en un 1% en tu tienda online. Mientras que, según un estudio de Google* de 2017, las páginas que se cargan en 10 segundos pueden provocar un promedio de abandonos por parte de los usuarios superior al 100% del promedio de los sitios analizados.

Al considerar comprar un servicio de hosting para su proyecto, es mejor no recortar su presupuesto al máximo. Un mal desempeño puede reducir drásticamente las ganancias.

Speed Host.it, dentro de las herramientas presentes en sus planes de suscripción, ha creado SPEED. Una aplicación capaz de medir la velocidad real de tu sitio web, y revelarte en qué partes hay que intervenir.

Al final de los análisis realizados por SPEED, hay sugerencias creadas específicamente para optimizar mejor el tiempo de carga de su sitio web.

2. Reducir las llamadas HTTP Cada archivo necesario para la visualización y el funcionamiento de una página web, como archivos html, CSS, imágenes y fuentes, afecta el tiempo de carga de la página misma. Cuantas más solicitudes se realicen, más lenta se cargará una página.

Elegir una plantilla o desarrollar un sitio web puede resultar muy engorroso si tenemos en cuenta los archivos CSS y JavaScript que se añaden posteriormente con la instalación de complementos. En algunos casos, es posible tener veinte o más solicitudes http solo desde archivos CSS y JavaScript. Lo que aumenta significativamente el tiempo que lleva abrir una página.

Para optimizar mejor el tiempo de apertura de una página, es bueno seguir algunas prácticas recomendadas:

fusionar archivos JavaScript en un solo archivo;

fusionar archivos CSS en un solo archivo;

reducir la cantidad de complementos cargados pero no utilizados en determinadas páginas;

utilice sprites para las imágenes que se utilizan con mayor frecuencia;

utilice FontAwesone u otras fuentes en lugar de iconos de la interfaz de usuario.

Optimizando y unificando estos recursos, siempre es buena idea comprobar que no surgen problemas una vez finalizada esta operación. Al realizar las optimizaciones en varias sesiones, estará seguro de haber reducido significativamente el número de solicitudes para la generación de cada página html y al mismo tiempo de haber mantenido intactas las funciones de las páginas.

3. Habilitar la compresión Habilitar la compresión Gzip es una característica que puede reducir significativamente la cantidad de tiempo necesario para descargar archivos html, CSS y todos los recursos necesarios para que el sitio web funcione. Esta característica le permite reducir el tamaño de algunos archivos, que luego se descomprimen cuando llegan al navegador.

Esta funcionalidad no afecta en lo más mínimo a la usabilidad del sitio web. Todos los navegadores de Internet modernos admiten Gzip y lo procesan automáticamente cuando se abre la página.

4. Habilitar el almacenamiento en caché del navegador Al habilitar el almacenamiento en caché del navegador, usted permite que los elementos de una página se almacenen dentro del navegador que los usuarios utilizan para navegar por las páginas del sitio. Cuando un usuario visita la primera página de un sitio con el almacenamiento en caché del navegador habilitado, no necesitará enviar solicitudes http adicionales al servidor para los elementos que se almacenaron en caché mientras navegaba por las páginas siguientes.

Gracias a esta funcionalidad, el número de archivos necesarios para abrir la página que se va a recuperar es significativamente menor. Esto le permite reducir significativamente la velocidad de apertura de cada página individual, incluso para usuarios con conexiones muy lentas.

5. Priorice el contenido en la mitad superior de la página

Las páginas del sitio web se pueden generar más rápido si están codificadas para priorizar el contenido en la mitad superior de la página. Este tipo de contenido no es más que información que el visitante puede ver antes de desplazarse por la página.

Este tipo de contenido se encuentra en la parte inicial del código html. La ubicación en el área "arriba de la página" permite a los navegadores modernos descargar y mostrar primero el contenido que se encuentra en esta parte del código. De esta forma, el usuario podrá ver parte del contenido de la página en unos milisegundos.

Es bueno recordar que en el contenido de la mitad superior de la página deberá insertar cualquier CSS y JavaScript necesarios para mostrar el contenido en esta área de la página.

6. Optimizar archivos multimedia Los contenidos de imágenes y vídeos presentes en las páginas de un sitio deben optimizarse para no convertirse en un "obstáculo" al cargar la propia página. Una imagen demasiado grande puede ralentizar significativamente la apertura de una página; particularmente para usuarios que se conectan a través de dispositivos móviles.

Optimizar los archivos multimedia de su sitio web puede mejorar significativamente la velocidad de apertura de una página.

Para optimizar verdaderamente el contenido multimedia para su sitio web de la mejor manera posible, es una buena idea optar por proporcionárselo a sus usuarios en función del tamaño de la pantalla en la que lo ven. Hay dos métodos para manejar estas optimizaciones.

Las imágenes dentro del código HTML de su sitio web se pueden servir usando el conjunto src, que permite al navegador seleccionar, descargar y luego mostrar la imagen apropiada para el dispositivo que está usando el usuario.

Las imágenes colocadas en las páginas del sitio usando CSS, generalmente como fondo o gráfico, se pueden entregar al usuario mediante consultas de medios que se adaptan al tamaño del dispositivo utilizado por el usuario.

Optimización de imagen

Elija el formato que mejor se adapte al tipo de imagen. El formato JPG es ideal para imágenes fotográficas, mientras que GIF y PNG son ideales para imágenes con grandes áreas de color. Los archivos PNG de 8 bits se utilizan para imágenes sin canal alfa (fondo transparente), mientras que los archivos PNG de 24 bits se utilizan para imágenes con canal alfa.

Asegúrese de que sus imágenes tengan el tamaño correcto para su punto de interrupción de referencia. Si una imagen se utiliza para dispositivos móviles, no tiene sentido subirla con un tamaño de 1600 píxeles de ancho.

Utilice un programa de compresión de imágenes. En el mercado se encuentran disponibles una serie de excelentes herramientas, como complementos o como programas en línea, para optimizar y comprimir las imágenes lo mejor posible.

Elija el formato de vídeo más ideal. En la mayoría de los casos, MP4 es el formato que te permite tener el mejor resultado entre compresión/calidad de vídeo.

Ofrece vídeos a los usuarios según el tamaño de su dispositivo.

Elimine la pista de audio, si el video se utiliza como fondo de parte del sitio.

Utilice un programa de video para comprimir archivos de video que se verán en un sitio. Premiere y muchos otros programas le permiten reducir significativamente el tamaño de los archivos de video.

Reduzca la duración del vídeo si no es necesario mostrar el vídeo completo.

Considere subir el vídeo a plataformas externas como Youtube o Vimeo, en lugar de entregárselos a sus usuarios directamente desde su hosting.

7. Utilice un sistema de almacenamiento en caché y un CDN El almacenamiento en caché del navegador le permite almacenar una copia estática de las páginas web que ha visitado, para que puedan verse más rápidamente en vistas posteriores. Un sistema CDN está compuesto por una serie de servidores ubicados en varias ubicaciones y que permiten a los usuarios acceder a un sitio desde la ubicación más cercana a su ubicación. El uso de estas dos tecnologías permite mejorar significativamente el tiempo necesario para cargar una página.

*PDF de Google Research 2017: https://think.storage.googleapis.com/docs/mobile-page-speed-new-industry-benchmarks.pdf