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
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
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á:
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
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á:
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.
Dejamos todo como está, si quieres puedes modificar el apartado de calidad de imagen, para ajustar a que calidad quieres que se vean.
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
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
- 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
- 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
La instalación es sencilla, en el apartado de Plugins > Añadir nuevo, buscamos AMP, nos aparecerá este plugin que instalamos y activamos.
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.
- 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:
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.
¿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!