Ya se ha hablado en anteriores ocasiones de algunos trucos para SEO, pero hoy, vamos a contaros algunas técnicas para optimizar el rendimiento de una página web, o también conocido como WPO (Web Performance Optimization).
Todos sabemos la importancia que tiene el que una página web cargue lo más rápido posible para mejorar el SEO, pero además también aporta una experiencia positiva al usuario y nos puede ayudar a conseguir mejores porcentajes en conversión, como registros o ventas.
El primer paso, es medir la velocidad de carga de una página web, para ello es necesario utilizar algunas herramientas que nos pueden ayudar a identificar qué aspectos deberíamos mejorar, algunas de las más conocidas son PageSpeed Insights o Pingdom Tools, y una de las más potentes, Chrome DevTools, nos permite medir el rendimiento de la red, analizar las peticiones HTTP, las cabeceras de respuesta, e incluso, el renderizado de la página web en el navegador.
Una vez hayamos obtenido información suficiente, podemos empezar a trabajar en mejoras del front-end, como el código HTML, CSS o JS, o bien, del back-end, a veces la parte más olvidada y una de las que más peso puede tener, como por ejemplo, optimizar las consultas a la base de datos o tener una buena configuración en nuestro servidor web.
Según las estadísticas de HTTP Archive, las imágenes ocupan aproximadamente un 65% del tamaño total de una página, lo que se convierte en uno de los pilares principales en la composición de una página web.
Es imprescindible tener una imagen comprimida a la vez que buscamos un equilibrio entre la calidad y el peso de la imagen, esto nos permitirá reducir el peso total de nuestra página web.
Existen diversas herramientas que nos pueden agilizar esta tarea como son Compressor.io y si utilizamos algún CMS como WordPress, podremos utilizar WP Smush, un plugin que nos permiten automatizar la compresión de imágenes.
Uno de los métodos más sencillos en la optimización de código, consiste en minificar los recursos, es decir, eliminar del código todos aquellos bytes innecesarios, como los comentarios, espacios en blanco o saltos de línea, haciendo esto conseguiremos reducir el tamaño de nuestros archivos, además que también estaremos reduciendo el peso total de la página web.
Ejemplos de código sin minificar:
Ejemplo de código minificado:
Consiste en reducir el número archivos que un usuario necesita descargar para visualizar una página web, si por ejemplo tenemos los siguientes archivos CSS:
Podemos unirlos para que el resultado sea el siguiente:
Al reducir el número de archivos, estaremos reduciendo el número de peticiones que un usuario realiza al servidor y disminuyendo el uso de su ancho de banda. Es importante combinar los archivos respetando el orden del código para evitar errores de carga.
Si movemos todos los scripts antes de la etiqueta </body>, conseguiremos priorizar la carga del contenido visible y además, evitaremos que haya código JS bloqueando la visualización de la página web.
Esto tiene su explicación en que el navegador cuando carga una web, comienza leyendo el código HTML y una vez detecta la etiqueta script, deja de renderizar la página e intenta cargar y ejecutar el código JS, por lo tanto, estaríamos bloqueando la visualización del resto de la página hasta que termine este proceso.
Los atributos async y defer sirven para descargar los archivos JS en segundo plano sin que esto afecte al renderizado de la página, la diferencia entre ambos es que con async, los scripts se ejecutan a medida que están disponibles y con defer, los scripts se ejecutan una vez se termina de analizar el DOM.
Ejemplo de carga síncrona:
Ejemplo de carga asíncrona con async:
Todas las técnicas comentadas en este apartado pueden suponer cierto riesgo, es necesario analizar la estructura de la página web y utilizar aquellos métodos que nos aporten un mayor rendimiento a la vez que controlamos los posibles riesgos.
Cada vez que un usuario accede a nuestra página web, este tiene que descargar una y otra vez los mismos recursos: imágenes, archivos CSS…etc, pero si especificamos la caché del navegador, cuando un usuario acceda por segunda vez a nuestra página web, cargará una copia de los recursos que ya tenga almacenados a nivel local, por lo que notará una velocidad de carga muy superior.
Podemos utilizar Cache-Control, uno de las más utilizadas, con un servidor web Apache serían necesarios los módulos mod_headers o mod_expires, normalmente vienen instalados por defecto, una vez los tengamos instalados, tan sólo tendríamos que modificar el archivo .htaccess según nuestras necesidades.
Al habilitar la compresión GZip en nuestro servidor, podemos llegar a reducir entre un 70 y un 90 por ciento el tamaño de transferencia de los recursos, por tanto, necesitaremos menos tiempo para cargar nuestra página web.
De nuevo, si utilizamos un servidor web Apache, es necesario tener habilitado el módulo mod_deflate y configurar el archivo .htaccess con las diferentes directivas y parámetros.
Si nuestra página web utiliza una base de datos, podemos cachear las consultas a la base de datos para que los usuarios las reciban en menor tiempo, si por ejemplo el usuario B hace la misma consulta que ya ha hecho el usuario A, el usuario B va a recibir el resultado de esa consulta en menor tiempo.
Con MySQL podemos utilizar MySQLTuner, un script en Perl que nos medirá el rendimiento del motor de nuestra base de datos y en función de los resultados, nos indicará diferentes recomendaciones para mejorar su rendimiento.
Aparte de las 5 técnicas comentadas anteriormente, existen otras muchas dependiendo de la tecnología o del servidor que utilicemos, pero como conclusión, debemos elaborar procesos de mejora continua para analizar y mejorar el rendimiento de nuestra página web, al fin y al cabo, todo suma.
Y tú, ¿Ya has probado alguna de estas técnicas? ¡Cuéntanos tu experiencia!