¿Cómo optimizar un sitio web?

Una de las tareas más cruciales de los operadores de sitios web es asegurarse de que la experiencia del usuario que visita un sitio sea lo más fluida posible. Factores como el tiempo que tardan en cargarse las páginas son muy importantes, sobre todo teniendo en cuenta que cada vez hay más tráfico procedente de dispositivos móviles. Si el tiempo de carga tarda demasiado, tu sitio web perderá muchos visitantes rápidamente. Para optimizar la velocidad, debes tener en cuenta el rendimiento de tu sitio web.

Puedes medir la velocidad actual de tu sitio web con pruebas de velocidad en Google PageSpeed Insights. Esta herramienta mide y evalúa el rendimiento de las páginas web. Además, pueden ser útiles a la hora de tener en cuenta aspectos independientes de la red, como el contenido multimedia o las estructuras del código HTML. La herramienta de Google, por ejemplo, analiza tanto la versión de escritorio como la versión móvil de tu sitio web, proporcionándote una visión general de lo que debes mejorar.

Si te preguntas qué aspectos afectan al tiempo de carga de un sitio web, has llegado al lugar adecuado. En este artículo, te revelaremos qué factores suelen ralentizar un sitio web y repasaremos posibles soluciones para mejorarla.

Hosting

Lo primero que debes preguntarte es si tu actual plataforma de alojamiento cumple los requisitos de tu proyecto web. La mayoría de los operadores de sitios web quieren ahorrar dinero al elegir un alojamiento y tienden a seleccionar la opción más barata disponible. Pero esto se hace a expensas del rendimiento y la capacidad del servidor. Y la frugalidad tiene su lado negativo: por ejemplo, la plataforma podría carecer del ancho de banda necesario para atender todas las peticiones de los usuarios. Con soluciones de alojamiento baratas, varias partes comparten un servidor, lo que no permite crecer mucho ni aumentar el número de visitantes a un sitio web concreto. Otro error típico es alojar su sitio web en un servidor situado en el extranjero, lo que en realidad aumenta los tiempos de carga de su sitio web.

HTML, CSS y JavaScript

Cuando los visitantes hacen clic en tu sitio web, su navegador solicita el archivo HTML de tu servidor y lo muestra de acuerdo con las hojas de estilos CSS. Lo mismo ocurre con los elementos JavaScript integrados, como banners o noticias. El proceso de carga puede durar mucho, dependiendo del tamaño de los archivos y de la cantidad de código que haya que leer y convertir. La inclusión de hojas de estilo y scripts es esencial para los sitios dinámicos: renunciar a CSS y JavaScript en favor de una mayor velocidad del sitio web no es una opción. Por eso, hay que centrarse sobre todo en optimizar el código del sitio web.

Recomendaciones para optimizar el código:

• Reducir el número de solicitudes al servidor, evitando por ejemplo tener el CSS de una página dividido en diferentes archivos, siempre que sea posible será mejor tener todo el CSS de una página en un mismo archivo.
• Minimizar el JavaScript / CSS. La minimificación se basa en quitar todo lo que resulta superfluo en un código CSS o JavaScript (se puede aplicar incluso al HTML). Así quitamos comentarios, espacios en blanco innecesarios, etc. Eso hace que los archivos tengan menos peso en bytes y por lo tanto se transfieran más rápidamente.
• Colocar el CSS en la cabecera. Esto permite que la renderización de los documentos HTML sea más rápida.
• Colocar el JS antes de la etiqueta </body>. En general, conviene situar los scripts antes de cerrar la etiqueta </body>. Así, el contenido de la página se carga antes y el usuario puede empezar leyendo la web y el navegador no se «entretiene» bajando código de librerías JavaScript que solo necesita cuando la página ha terminado de cargarse.

Imágenes y contenidos externos

El contenido multimedia es un componente esencial de un buen sitio web. Al igual que el diseño y la maquetación, domina la apariencia de su sitio web y ayuda a enmarcar y contextualizar el cuerpo del texto. En el comercio electrónico, en particular, es importante presentar los productos con imágenes de alta calidad. El tiempo de carga aumenta con cada imagen o foto adicional, sobre todo si se almacenan en un servidor remoto y no en el propio. Lo mismo ocurre con otros archivos multimedia como música, vídeos o PDF.

Recomendaciones:

• Cargue el menor número posible de elementos de sitios externos.
• Evite imágenes, vídeos, etc. innecesarios.
• Comprima las imágenes con herramientas.
• Especifique la anchura y la altura de las imágenes (de lo contrario, el navegador calculará las dimensiones por sí mismo).
• Utilice iconos SVG (gráficos vectoriales escalables).
• Utilizar el plugin jQuery Lazy Load, que impide que las imágenes se carguen si están fuera del rango de visualización (sólo empezarán a cargarse cuando el visitante se desplace hasta ellas).
• Utilice el formato de imagen WebP, más eficiente.

Almacenamiento en caché

Muchos sitios web son lentos porque renuncian al almacenamiento en caché. Pero lo que algunos propietarios de sitios web no saben es que una caché bien configurada puede ayudar a optimizar su sitio web, con muy poco esfuerzo. Esto se debe a que el contenido almacenado en caché no necesita ser llamado por el servidor web cada vez que se hace clic en él, lo que significa que la página se carga considerablemente más rápido. También alivia la carga del servidor web, que tiene que procesar menos peticiones. Todos los elementos estáticos, como archivos JavaScript y CSS, imágenes o documentos, pueden almacenarse en caché.

También se puede definir el tiempo que los elementos deben permanecer en caché y utilizar el navegador del visitante como caché, activando el módulo "mod_expires" en el servidor web Apache y definir cuánto tiempo deben permanecer en la caché los tipos de archivo correspondientes; el resto lo hace el navegador del usuario correspondiente.

Más consejos y trucos para optimizar un sitio web

Además de las formas mencionadas anteriormente para optimizar el rendimiento de un sitio web, hay muchas pequwñas medidas que puedes realizar para ayudar a minimizar los tiempos de carga. Entre ellas están:

• Reducir al mínimo las redirecciones.
• Declarar la codificación de caracteres en el documento HTML.
• Eliminar cualquier contenido defectuoso.
• Evitar el uso excesivo de plugins en el CMS.
• Limitar la información recogida en las cookies.
• Usar favicons (ya que los navegadores siempre buscan el archivo favicon.ico en el servidor web).