Acelerar los tiempos de carga de nuestra página web es clave para mejorar su usabilidad y, por tanto, influyen en su Posicionamiento SEO. Son muchos los factores que influyen, como el hosting, pero también hay una serie de buenas prácticas y recomendaciones de desarrollo web que mejorarán el rendimiento y la velocidad de un sitio web, algo que repasamos en este artículo.
Antes de empezar y obsesionarnos en alcanzar la puntuación más alta de test sobre velocidad web en aplicaciones como PageSpeed Insights, recuerda que lo que realmente importa es encontrar los puntos problemáticos de nuestro sitio, optimizarlos y corregirlos. Esta es la mejor manera de acelerar la velocidad de tu site y si lo haces en WordPress, te damos el nombre de algunos plugins que te ayudarán a conseguirlo.
Elimina los recursos de bloqueo de renderizado
Existen algunos scripts de JavaScript y CSS que impiden que nuestra página se cargue rápidamente, puesto que el navegador tiene antes que descargarlos y procesarlos para mostrar el resto de la página. Si no tenemos mucho código JavaScript o CSS podemos juntarlos en nuestro archivo HTML.
Evita encadenar las solicitudes críticas
Algunos elementos como el JavaScript y las CSS deben ser cargados en su totalidad antes de que nuestra su página sea visible. Lo mejor es reducir su tamaño y las solicitudes al mínimo, pero existen recomendaciones como:
- Eliminar los recursos que bloquean el renderizado.
- Aplazar las imágenes fuera de pantalla.
- Minimizar CSS y JavaScript.
Mantén los recuentos de solicitudes bajos y transfiere los tamaños pequeños
No existe un número perfecto de solicitudes o tamaños máximos, pero se pueden trazar algunos objetivos:
- Tamaño máximo de la imagen.
- Número de fuentes Web a utilizar.
- El tamaño de los scripts y marcos.
Minimiza CSS y JavaScript
Es importante la minificación de estos archivos para mejorar la velocidad de carga. Si nuestra página está desarrollada en WordPress, hay dos plugins que nos pueden facilitar el trabajo: Autoptimize y WP Rocket.
Elimina el CSS no utilizado
El uso de hojas de estilo sobrecargadas de contenido que no se utiliza pueden afectar al rendimiento. La solución pasa por eliminar cualquier CSS redundante o que no se utilice y aplicar lo mismo que hicimos al eliminar los recursos de bloqueo de renderizado.
Minimiza el trabajo del hilo principal
Fundamentalmente es ponérselo fácil al navegador y que pueda mostrar con rapidez la Web. Para ello podemos hacer lo siguiente:
- Minimizar el código.
- Eliminar código que no utilicemos .
- Aplicar caching.
Reduce el tiempo de ejecución de JavaScript
El tiempo de ejecución de algunas tareas de JavaScript podría tener un impacto directo en el rendimiento y PageSpeed nos avisará para que, con los métodos sugeridos anteriormente, podamos reducirlo y corregir la advertencia.
Reduce los tiempos de respuesta del servidor
Los tiempos de respuesta del servidor (Time To First Byte o TTFB) pueden influir en la carga. Aquí algunas sugerencias para reducirlos:
- Elige un proveedor de alojamiento web y dominios de calidad.
- Si usamos WordPress o cualquier otro CMS (Joomla, PrestaShop…), selecciona plugins, plantillas y temas que no pesen mucho.
- Solo utilizar los plugins necesarios.
- Usar una red de entrega de contenido (CDN).
- Incluir cacheo del navegador.
Tamaño adecuado de las imágenes
El peso de las imágenes debe ser el adecuado. Para reducir los tiempos de carga, debemos dimensionarlas y optimizarlas de forma correcta.
Carga diferida de imágenes
Carga diferida de imágenes o “carga perezosa”, es decirle al navegador que retrase la carga de una imagen hasta el momento de su uso. Cuando el usuario hace scroll, si hay imágenes, se mostrarán las reales, sustituyendo a la imagen por defecto y sin que los usuarios lo noten. Google recomienda para un mejor rendimiento, una menor carga antes de que la página sea visible.
Codificar eficientemente las imágenes y vídeos
Comprimir adecuadamente las imágenes ayudará a reducir el tamaño de los archivos y que carguen mucho más rápido. Algunas recomendaciones serían las siguientes:
- Imágenes con el tamaño adecuado.
- Carga diferida de imágenes.
- Convertir las imágenes a formato WebP.
- Usar vídeos en formato GIF, MP4 o WebM.
Asegurar que el texto permanezca visible durante la carga de la fuente Web
Algunas fuentes pueden contener archivos pesados. PageSpeed recomienda ocultar el texto hasta que la fuente esté cargada por completo y que se resuelva aplicando la directiva de intercambio de la API de visualización de fuentes en nuestro estilo @font-face.
Para conseguir esto, accederemos a nuestra hoja de estilos (style.css) y añadiremos lo siguiente después del atributo src en @font-face:
font-display: swap
Habilita la compresión de texto
Google Page Speed Insights recomienda habilitar la compresión GZIP de texto, que puede hacerse de forma automática en el servidor o manualmente. Una de las opciones para habilitarlo de manera manual es instalar un plugin con función de compresión GZIP, como WP Rocket.
Otra alternativa consiste en comprimir el texto manualmente, editando el archivo .htaccess. Por precaución, se recomienda tener una copia de seguridad reciente, ya que el proceso puede ser complicado.
Preconecta a los orígenes requeridos
En ocasiones, la velocidad de carga de un sitio se ve reducida por recursos de terceros, como Google Analytics. Para evitarlo, es interesante el uso de atributos pre-conexión, cuya función es indicar a los navegadores qué scripts de terceros deben cargarse, optimizando las cargas. De hecho, el propio Google puede sugerir “preconectar a los orígenes requeridos”, si lo considera beneficioso para un determinado sitio Web.
Entre los diferentes modos de implementar esta estrategia, está la edición de los archivos de los temas de WordPress, con etiquetas que enlacen al archivo header.php, como la siguiente:
<link rel=“preconnect” href=“example.com”>
Precarga de solicitudes de claves
Del mismo modo, es posible reducir al mínimo las solicitudes que realizan al sitio Web los navegadores acerca de la carga de activos críticos en el servidor.
Al igual que en el ejemplo anterior, es posible añadir etiquetas de enlace que detallen los recursos listados en PageSpeed Insights con el archivo header.php, utilizando por ejemplo:
<link rel=“preload” href=“example.com”>
Evita las redirecciones de múltiples páginas
Las redirecciones son un reenvío automático del lado del servidor o del cliente de una URL a otra. Su uso es muy común cuando se mueve una página a otro sitio o cuando las páginas cambian de nombre. Esto provoca retrasos en el tiempo de carga, por lo que evitarlo es una recomendación a tener en cuenta.
El uso de «caching» es un recurso que utilizan los navegadores para guardar copias de las páginas y que éstas puedan ser cargadas más rápido en futuras visitas. En WordPress, podemos utilizar complementos como WP Rocket y W3 Total Cache que implementan esta funcionalidad.
Reduce el impacto del código de terceros
Un uso excesivo de scripts de terceros impactará, en muchos casos, negativamente en el rendimiento de nuestro sitio, por lo que limitar esa dependencia hará que la auditoria arroje mejores valores. Sin embargo, habrá scripts de terceros que tengamos que introducir sí o sí. Google Analytics es un ejemplo perfecto, pero hay otros:
- Botones y fuentes para compartir RRSS.
- Vídeos en YouTube incrustados en nuestra página.
- Anuncios u otros contenidos con iFrames.
- Otros elementos y bibliotecas JavaScript.
Reducir DOM
Un DOM con un tamaño más grande de lo normal afecta a la velocidad del sitio Web porque tardará más tiempo en cargarse. Si nuestra página excede ciertos estándares deberemos eliminar todos los elementos HTML que no sean necesarios.
Por ejemplo, si tenemos este código:
<div id = ”navigation-main”> <ul> etc .. </ul> </div>
Lo ideal es que fuese así:
<ul id = ”navigation-main”> etc .. </ul>