Cómo optimizar mi web para conseguir la mejor puntuación en Google Page Speed
Muchas veces me he encontrado con páginas web que cumplen con los requisitos de carga de Google y que, aun así, no pasan el examen de Google Page Speed. En estos casos, lo habitual es que nos encontremos con dos situaciones:
- Algunas imágenes se nos han escapado y tienen más peso de lo imaginado.
- Tenemos algunos «recursos de bloqueo de renderizado» que no dejan «leer» la web fluidamente.
El tema de las imágenes es muy habitual y existen varios métodos para conseguir reducir el peso. Si nunca has reducido una imagen o la has reducido mediante algún programa online, ten cuidado, ya que hay factores que pueden quedar afectados y dañar nuestro SEO sin que nos demos cuenta.
En el segundo punto nos encontramos con un problema de bloqueo de renderizado. Si no te suena este término, en los próximos puntos te explico qué es y cómo solucionarlo.
Sal de dudas y resuelve estos pequeños errores de velocidad que pueden estar afectando a tu web. ¡Vamos a por ello!
Contenido del artículo
Cómo reducir al máximo el peso de las imágenes de mi web
Antes de subir una imagen tenemos dos opciones para reducir el peso de esta sin que quede afectada su calidad. Por un lado, podemos utilizar compresores de imágenes online. Ten cuidado con esto, ya que algunos pueden cambiar o eliminar los metadatos de tus imágenes. Aquí te dejo algunas páginas gratuitas: Optimizilla, Compressjpeg y TinyPNG.
Por otro lado, podemos utilizar Adobe Photoshop o Illustrator para reducir el peso y optimizar el formato las imágenes. En este caso, también podemos reducir la escala, ya que imágenes de más de 2048 píxeles no tienen excesivo sentido.
Para poder obtener una imagen optimizada para web, iremos a «Archivo» > «Exportar» > «Guardar para web (heredado)». Antes de guardar la imagen, recuerda elegir la opción de metadatos que más te convenga.
Si la web que estás trabajando está hecha con un CMS como WordPress y ya hay imágenes subidas, hay un plugin que te vendrá genial. El plugin se llama Smush y te permite comprimir, optimizar y cargar de forma diferida las imágenes, esto hace que se vayan cargando a medida que vas desplazándote por la web.
Este plugin se entiende perfectamente con Google Page Speed, por lo que no tendrás ningún problema. Los pasos a seguir son muy sencillos y solo tendrás que seguirlos para configurarlo correctamente. Ten más cuidado sobretodo con la configuración manual de la pestaña «Reducir por lotes», ya que tendrás que decidir si quieres o no mantener los metadatos y el redimensionado de imágenes.
Qué son los recursos de bloqueo de renderizado y cómo eliminarlos en WordPress
Cuando entras en una web por primera vez o accedes tras borrar todos los datos de navegación, el navegador que estemos utilizando para ello hará una lectura del código de arriba a abajo.
Si en ese proceso se encuentra un archivo JavaScript o CSS, se parará para poder descargarlo. El tiempo que tarda el navegador en descargar esos archivos, es lo que hace que el renderizado o «lectura» de la web se bloquee.
Aun así, hay que tener claro que no todos los archivos CSS o JavaScript son considerados bloqueadores. Hay archivos «críticos» necesarios para que, cuando los usuarios carguen tu página, no experimenten un cambio repentino en el estilo o funcionalidad.
Por si caben dudas, las imágenes tampoco bloquean el renderizado, aunque sigue siendo importante mantenerlas optimizadas como hemos comentado en el punto anterior.
Estrategias para evitar el bloqueo de renderizado de JavaScript
En términos generales, para evitar el bloqueo que puede causar un archivo JavaScript hay dos métodos:
- Async: Mientras se hace el análisis del código HMTL, el archivo JS se descargará al mismo tiempo, haciendo una pequeña pausa en el análisis cuando se ejecute el script.
- Defer: El análisis del código HTML y la descarga del archivo JS se harán al mismo tiempo, dejando la ejecución del script para cuando termine el análisis.
Al utilizar «Defer» nos beneficiamos de que se sigan los guiones establecidos para su ejecución. En cambio, si utilizamos «Async» para todos los archivos JavaScript, los archivos principales podrían no ejecutarse antes que los que los demás, haciendo que se rompa la cadena.
Cómo eliminar los recursos que bloquean el renderizado con el plugin Autoptimize
Para poder configurar correctamente el plugin «Autoptimize» y solucionar el problema de renderizado en WordPress, también instalaremos el plugin del mismo desarrollador llamado «Async JavaScript«. Los puedes configurar por separado, pero lo ideal sería combinarlos, ya que están pensados para entenderse entre ellos.
Primero configuraremos el plugin «Async JavaScript», lo encontraremos dentro del menú en «Ajustes», haremos clic en la pestaña «Settings»:
- Hacemos clic para marcar la casilla de la parte superior que permite activar las funciones del plugin.
- En «Ajustes rápidos» elegiremos entre «Aplicar Async» o «Aplicar Defer». Ten en cuenta lo que hemos comentado en el punto anterior.
Ahora iremos al plugin «Autoptimize» para terminar de configurarlo todo. Lo encontraremos en «Herramientas» y, dentro de este, haremos clic en «JS, CSS y HTML»:
- En el primer apartado «Opciones de JavaScript» marcaremos la casilla de la pregunta «¿Optimizar el código JavaScript?».
- En el segundo apartado «Opciones de CSS» marcaremos la casilla de la pregunta «¿Optimizar el código CSS?».
No hace falta configurar nada más. Si tienes conocimientos para poder configurar los ajustes avanzados, podrás eliminar más archivos o alinear de forma manual los archivos críticos del CSS.
En el caso de que no seas desarrollador, esta configuración es más que suficiente para evitar problemas de velocidad. Testea tu página web en Google Page Speed para ver los resultados. Espero que te haya servido de ayuda.
