La guía máxima de como optimizar tu página web y alcanzar puntuación verde en Page Speed Insights

La guía máxima de como optimizar tu página web y alcanzar puntuación verde en Page Speed Insights

Joward Guzmán

Joward Guzmán

Tabla de contenido

Icono de velocidad de web

No es una bonita experiencia que tu web sea lenta, y lo digo por experiencia, Ver ese número rojo en page speed significa sudor, frustración y lagrimas. Pero para eso yo estoy aquí, con mi experiencia tras haber pasado por ese infierno incontables veces te daré los trucos definitivos para optimizar tu página web.

Y te prometo que después de salir de este post tu página subirá al dulce color verde, o mínimo a 80 puntos.

Page Speed Insights

Logo de Page Speed

Antes que nada entraremos a Page Speed Insights, esta herramienta mide la velocidad de tu web, muy importante que la tengas abierta para ir analizando tras cada cambio que hagas en el proceso.

Otra cosa muy importante es tener tu página principal abierta, esto para que también pruebes que la página no se rompa, para comprobar que las funciones de Javascript funcionen en tu página.

Optimizar las imágenes para tu página web

Lo primero que haremos es optimizar las imágenes, siempre cometemos el error de subir imágenes con una resolución muy alta, con esto pesa más y tarda más en cargar. O la subimos con un formato obsoleto.

Que es la carga diferida y para que te servirá

La carga diferida (o lazy load) es una técnica de optimización para cargar un objeto hasta que el usuario lo utilice.

En otras palabras si tienes una imagen al final de tu página, hasta que el usuario no baje hasta ahí, no le va a cargar la imagen.

Esto ayudara a tu página en la carga porque dará prioridad a lo más importante y te evitaras segundos de carga en las imágenes.

Como instalar Smush para compresión y carga diferida de imágenes

Logo de Smush

Smush es un plugin para WordPress que en su versión gratuita nos deja comprimir imágenes y colocar carga diferida de manera muy fácil.

Solo entramos a el apartado de Plugins > Añadir Nuevo y en la barra de búsqueda escribimos «Smush»

Los instalamos y activamos y nos aparecerá una interfaz como está:

Interfaz de Smush en el apartado de Carga diferida, señalando el botón de activar

En Reducción por lotes nos dará está opción le damos Bulk Smush y nos procesara todas las imágenes que necesiten optimización.

Luego nos vamos al apartado de «Carga Diferida» la activamos y configuramos a nuestra preferencia dependiendo de lo que tengamos en nuestra página.

Que es WebP y porque debes usarlo

Logo del formato WEBP

Con esto tendremos las imágenes optimizadas y con carga diferida, pero nos falta una cosa y es tener un formato de próxima generación.

WebP es un nuevo formato que nos da Google, aumenta la velocidad de carga en los navegadores compatibles.

Como instalar WebP Converter

Al igual que con Smush nos vamos Plugins > Añadir Nuevo y en la barra de búsqueda escribimos «WebP»

Nos saldrán varias opciones entre ellas estará está:

Apartado de añadir plugin nuevo de wordpress, instalando "WebP Converter fot Media"

Está opción que te doy es gratis, sin embargo Smush PRO tiene su propio convertidor a WebP por si quieres ahorrarte un plugin.

Luego de instalarlo y activarlo nos en el apartado de Ajustes > WebP Converter, nos metemos.

Interfaz de WEBP señalando el botón "Guardar Cambios"

Dejamos todo como está, si quieres puedes modificar el apartado de calidad de imagen, para ajustar a que calidad quieres que se vean.

Apartado del plugin para la calidad.

Yo te recomiendo que lo dejes en 85% o máximo 100%, le damos en Guardar cambios.

Cuando termine de cargar nuestras imágenes ya estarían 100% optimizadas, ahora recuerda analizar con Page Speed y probar las imágenes y comprueba que todas se vean bien.

Como optimizar tus archivos HTML, CSS y JS

Logos de HTML, CSS 3 y JavaScript juntos

Estos archivos son todo lo que hace que tu web funcione, esto es lo que hace WordPress, el lo modifica por ti sin que tu tengas que tocarlo o pagar mucho dinero por un experto que lo maneje (Programador). magnifico ¿verdad?

Solo un problema, no tienes control del código, lo que puede causar que haya código innecesario que se este cargando. Lo que le quita valiosos segundos a tu página web.

Pero no pierdas la calma aquí te traigo nuestros heroes; Existen plugins que nos optimizan esto muy bien, te daré las opciones que yo uso.

Autoptimize VS WP-Optimize

Aquí te traigo mis titanes de la optimización, (Claro existen muchas más), pero estás son las opciones gratis que más me gustan.

Yo dependiendo de lo que necesite uso uno o otro.

Lo bueno de Autoptimize

Logo de Autoptimize
  • Lo recomiendo 100% si no conoces nada previo sobre configurar tu optimización.
  • Si tienes un error es muy fácil desmarcar casillas para buscar la falla, no entres en pánico si esto te sucede,
  • Mejora increíble en la optimización de tu web, tiene suficientes opciones en su versión gratuita para optimizar al máximo tu sitio web.

¿Quieres saber como configurar este plugin?, aquí te dejo está guía para configurar Autoptimize en tu sitio de WordPress

Lo bueno de WP-Optimize

Logo de WP-Optimize
  • Muchas más opciones mas detalladas y algunas avanzadas.
  • Interfaz practica y fácil de entender.
  • Excelente compresión de los archivos de código.

¡Cuidado con el Jquery!

Cuando optimizamos el Javascript lo que más nos puede dar problemas es el Jquery, una librería que se encarga de funcionamiento de la web.

Es importante no tocarlo en muchos casos.

¿Sigues en rojo? No te rindas!, te presento mi arma secreta de la optimización

Antes de conocer este plugin pasaba horas tratando de llegar una web al puntaje verde en móvil, al final solo era frustración porque no tenia éxito.

Después de conocer este plugin ahora llego a verde todas mis páginas webs tanto en Ordenadores como en teléfonos.

Que son las Páginas Móviles Aceleradas (AMP)

Es un proyecto de Google, en el que mejora la velocidad y la adaptabilidad de tu página web en los dispositivos móviles.

Puede llegar a crearte una página en tu web especifica para los móviles, o igual volver toda tu web AMP sin tener que dividirla.

Como optimizar tu página web con el plugin AMP para WordPress

Teléfono con el logo de AMP

La instalación es sencilla, en el apartado de Plugins > Añadir nuevo, buscamos AMP, nos aparecerá este plugin que instalamos y activamos.

Instalación de AMP en el escritorio de WordPress

Podrás notar una nueva opción en las herramientas justo al fondo «AMP». Das click en ella y te enviara a el asistente de configuración.

En AMP tenemos tres opciones a elegir.

Escritorio del Plugin AMP en WordPress
  • Configuración Estándar: Es un único tema, es decir que toda tu web tanto en ordenador como en móvil se aplicara a optimización AMP.
  • Configuración Transicional: Son dos versiones de la web por separado, uno para ordenadores y otro para usuarios móviles, esto puede causarte algunos bugs en tu tema, por lo que si no sabes solucionarlos te recomiendo no usarlo.
  • Configuración Lector: Son dos versiones de la web igual que la Configuración transicional, pero en este caso puedes elegir dos temas diferentes para cada versión.

Si después de seleccionar tu configuración notas algunos bugs como por ejemplo algunas partes no cargan, no hacen animaciones o la página quedo en blanco, es probable que se deban a estas opciones:

Apartado de "Plantillas compatibles"

Podemos ir desactivando donde quieres que se apliquen la optimización. También con los plugin podemos hacerlos, desactivar plugins en la versión AMP para evitar que se rompa la página.

Apartado del plugin "Supresión de plugins"

¿Qué tal los resultados?

¿Cómo te fue?, espero que con esto hayas podido llegar a ese bonito color verde que a todos nos encanta.

Coméntanos tus resultados y si conoces a alguien que tenga problemas con el rendimiento de su web compártele este post, ¡te lo agradecería muchísimo!

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *