Cuando hablamos de optimización web, solemos pensar en editar imágenes para subirlas con el menor peso posible, no llenar de mucho código «basura» nuestro proyecto para que no se haga un lío el navegador a la hora de interpretar nuestra página, en el caso de webs corporativas, y los que lleven años en el negocio como yo lo entenderán, lleguen a cualquier parte de la web en menos de 3 clics, etc.
Introducción
Lo cierto es que, más o menos, por ahí van los tiros, pero, además de crear un código limpio y también escalable, lo cierto es que con el término optimización web me quiero ir a otra parte del proyecto que no se suele tener mucho en cuenta hasta que ya estamos en mitad del problema: el mantenimiento.
Y sí, es cierto, cuanto mejor se haga en el desarrollo, menos trabajo se hará en el mantenimiento, pero, si hablamos de páginas web con mucha presencia y que no paran de actualizarse, el concepto cambia, ya que todo flujo de información nueva que se añada tiene que ir acompañada de unos parámetros de estructura ya que de ello depende, sin duda, la buena experiencia de una web y la velocidad de la misma.
Datos a tener en cuenta
Vamos, con esto y para no liarnos más en esta introducción, lo que quiero decir es que, por lo general, una web hecha a medida no tendrá problemas de rendimiento a no ser que se plague de librerías de terceros que suelen sobrar a la hora de desarrollar algo decente y que, en el caso de WordPress, como no, tendrás que atajar mediante un puñado de trucos que te voy a redactar a continuación, ya que la mitad de las veces, los plugins y nuestras necesidades suelen ser completamente antagonistas y plagan nuestras webs de basura de mil formas diferentes.
Según un estudio reciente:
«Un segundo de retraso reduce las visitas a la página en un 11%»
Cuando hablamos de rendimiento en tu sitio, estamos considerando mucho más que si tu usuario utiliza Windows, Mac o Linux. También estamos pensando en si tus usuarios utilizan tabletas, dispositivos móviles o incluso redes de bajo rendimiento, por eso la optimización web es algo sumamente importante.
Este rendimiento afecta directamente a tu producto/sitio web. Algunos ejemplos de esto podrían ser:
- Yelp redujo el primer cuadro de contenido (percentil 75) en un 45%, y la página completa de Yelp (percentil 75) en un 25%. Como resultado, vieron una mejora del 15% en su tasa de conversión.
- SportsShoes.com descubrió que las visitas móviles más rápidas que la media tenían un 41% más de posibilidades de conversión que las visitas más lentas que la media.
1. Utiliza un formato de imagen de última generación como .WebP o .AVIF
Utilizar un formato de imagen de última generación, como WebP, AVIF o JPeg XR, ayuda a reducir el tamaño de las imágenes en un 20-40% sin comprometer la calidad, es uno de los elementos clave en una operación de optimización web.
Esto mejorará la carga de las imágenes, especialmente si tu sitio utiliza demasiadas imágenes o las que utiliza son pesadas.
2. Minimiza el HTML/CSS tanto como sea posible
Minificar tu código es un proceso en el que eliminas todos los caracteres innecesarios en tu código fuente. Estos caracteres pueden ser espacios en blanco, comentarios, saltos de línea, etc. Aunque tener espacios en blanco o comentarios puede ser útil durante el desarrollo, al cargar tu sitio, pueden hacer que tu archivo fuente sea más pesado de lo que debería.
Es importante saber que este proceso no cambia la funcionalidad de tu código, sino que reduce el tamaño y permite una carga más eficiente de tu sitio.
3. Utiliza una CDN adecuada
Una CDN (Content Delivery Network) es una red distribuida geográficamente que entrega a los usuarios el sitio web y cualquier otro recurso utilizado en él.
Básicamente, hace la entrega de HTML, CSS, imágenes y también Javascript a través de servidores físicamente cercanos al usuario.
Este tipo de optimización web se utiliza especialmente en aquellos sitios que tienen visitas de todos los lugares del mundo.
Resumido en pocas palabras, si tu web, que está en un servidor de Madrid, tiene que entregar información a un usuario de Canadá, siempre tardará más que si estuviese en Toledo, por eso los CDN nos «alquilan» puntos de acceso en todos los lugares del planeta, generando copias caché de nuestra web para poder entregarlo en el menor tiempo posible a cualquier usuario.
4. Utiliza las fuentes de reserva
Otro los puntos clave en la optimización web es respaldar nuestros recursos y, en este caso, las fuentes que usamos. Si utilizas una fuente personalizada, es posible que no se pueda descargar o que tarde en cargarse. El sitio utilizará este recurso para mostrarlo correctamente.
5. Eliminar el código no utilizado de las dependencias
El mejor lugar donde se puede hacer la mejor optimización web es en las dependencias. Algunas de ellas, como React.js, incluyen propTypes incluso en el paquete de producción, donde no son necesarios.
Lodash incluye métodos que tal vez no utilices, pero que siguen aumentando el tamaño del paquete. Este tip, es más para proyectos a medida y no tanto para WordPress, pero más o menos, ya sabrás por dónde van los tiros.
Existen herramientas para eliminar este código no utilizado de las dependencias.
Puedes verlos aquí: GoogleChromeLabs/webpack-libs-optimizations
Conclusión
Con algunos cambios, podemos hacer una optimización web de nuestros proyectos de primera categoría. Independientemente del framework o cms que utilices en el tuyo, estos consejos pueden ayudarte y ofrecer una experiencia de usuario mucho mejor.
