Recomendaciones para mejorar la velocidad de tu web
La velocidad de carga de un sitio es un factor muy importante para la mejora de la experiencia de usuario. No se trata solamente que una página lenta produzca cierta frustración entre tus usuarios, incluso si la web no carga en unos pocos segundos puede provocar una pérdida sensible del tráfico.
Paralelamente, desde hace tiempo sabemos que Google toma en cuenta la velocidad de carga de la web para posicionarla entre los resultados de búsqueda, por lo que resulta extremadamente importante conseguir optimizar la velocidad de tu página. En este post vamos a dar algunas recomendaciones importantes para optimizar tu site.
Principales áreas para la optimización de la web
A la hora de optimizar una página web nos podemos centrar en diversas áreas de trabajo, en las que vamos a clasificar el contenido de este artículo:
- Programación y desarrollo: mediante sistemas que permiten, vía programación, realizar optimizaciones que afectan a la velocidad de carga.
- Assets: mediante la creación de un conjunto de archivos externos optimizados y cargados correctamente.
- Herramientas: que nos permiten analizar los sitios y saber dónde hay margen de mejora para su optimización.
- Sistemas: por medio de la configuración del servidor donde se va a desplegar el sitio o aplicación web.
Ninguna de las áreas mencionadas es menos importante que la anterior. En realidad todas nos ofrecen posibilidades de mejora más o menos relevantes y la estrategia más recomendable es un «suma y sigue», ya que cualquier pequeña acción de optimización va contando.
Optimizar una web mediante un desarrollo correcto
Como desarrolladores tenemos estupendas oportunidades de optimización de una web. Dependiendo del tipo de web podremos hacer unas cosas u otras. De hecho, las posibilidades son muy variables atendiendo a las distintas tecnologías y frameworks que podemos usar.
Páginas estáticas
Las páginas estáticas consisten en archivos de texto plano, con el HTML ya generado, que no requieren acceso a sistemas como las bases de datos. En este tipo de páginas ofrece una tecnología simple pero muy rápida, ya que no requiere ejecutar nada en el lado del servidor para procesarse la página. A pesar de ser estático el sitio, en local el desarrollador puede contar con herramientas muy potentes para administrar el contenido y generar la web usando sistemas de templates, gestores de contenido, etc. Puedes encontrar más información en este post: qué es JAMstakc.
Tanto para las páginas estáticas como para otros tipos de tecnologías importa mucho cómo está desarrollado el HTML y el CSS y qué archivos podemos diferir la carga y realizarla más adelante, cuando el usuario ya ha visto parte del contenido. En este sentido son útiles recomendaciones como colocar los scripts Javascript antes de cerrar la etiqueta body o diferir su carga con el atributo async o defer.
<script defer src='script.js'>
Optimización en WordPress
Una de las alternativas más comunes como herramientas de desarrollo es el CMS WordPress. Si estamos usando este popular CMS tenemos a mano decenas de plugins para mejorar la optimización de la página. Es un tema que hemos tratado en diversos post anteriormente. Por ejemplo, te recomendamos leer sobre los mejores plugins para optimizar WordPress.
Frameworks
Si nuestra aplicación está desarrollada mediante un framework, conviene leer la documentación del mismo para ver qué opciones de optimización nos ofrece. Lo más común será usar algún sistema de caché web, como los que hemos abordado en el artículo de Qué es la caché web.
Optimizar una web mejorando los assets
Los assets son los archivos externos que se cargan al acceder a una página web, aparte del propio código HTML. Son muy importantes estos archivos porque representan un porcentaje muy grande del peso total de una página web y, por tanto, cualquier optimización impactará sensiblemente en la velocidad de carga. A veces es algo tan simple como reducir el peso de las imágenes, pero en otras ocasiones es necesario realizar tareas más complejas como el compactado y minimizado de los archivos Javascript, así como los archivos CSS. Sobre este tema hemos escrito bastante a lo largo del tiempo en nuestro blog. Te pasamos alguna recomendación:
Herramientas para optimización web
Sea cual sea tu tecnología ten muy presentes las herramientas que el mercado nos ofrece para poder analizar y optimizar una web. Una cosa muy interesante de estas herramientas es que no se limitan a dar una puntuación del rendimiento y optimización de la página, sino que además te ofrecen multitud de consejos para mejorarla. Una alternativa muy recomendable es Lighthouse, que está creada por el mismo Google.
Cómo optimizar el servidor
Por último, pero no menos importante, vamos a dar algunas recomendaciones sobre la parte de optimización del servidor. La primera sería mantener todo el software actualizado. Esto nos ahorrará muchos problemas en el área de la seguridad, pero también impactará en la optimización del sitio. Sobre todo en lo que respecta a los lenguajes de programación, mantener las versiones más nuevas asegura siempre un mejor rendimiento.
Por ejemplo, de PHP 5 a PHP 7 se duplicó e incluso triplicó el rendimiento de los sitios web. A lo largo de las versiones de PHP 7 y PHP 8 las mejoras han ido incrementando todavía más la potencia del lenguaje. En este punto, sin embargo debemos de tener presente que el aumento de las versiones del lenguaje pueden afectar al funcionamiento de la web, tal como explicamos anteriormente en el post Qué debes tener en cuenta cuando actualizas PHP.
Hablando de servidores también es importante contar con HTTP/2, ya que esta versión del protocolo mejoró mucho las comunicaciones de múltiples archivos. A través de la configuración del servidor podemos además hacer uso de módulos de Apache para optimizar el cacheo de la página como en Apache con mod_expires.
Tampoco debemos olvidar que no siempre las optimizaciones de un sitio web pueden venir por la programación o los lenguajes, sino que también es importante optimizar las bases de datos.
Desarrollador web, crea y mantiene los sitios web de Arsys. También idea herramientas internas que facilitan y mejoran los procesos. Es experto en desarrollo FrontEnd y en la optimización del rendimiento web, áreas en las que constantemente busca innovar para ofrecer la mejor experiencia online.