En esta clase os vamos a explicar cómo mejorar la velocidad de vuestra web y pasar de tener estas métricas en PageSpeed a estas otras.
La velocidad web es uno de los factores de los que depende el SEO y mejora la experiencia del usuario enormemente. Una web lenta es super aburrida para los usuarios, no digamos para aquellos que llegan a nuestra página web desde teléfonos móviles. Si aún no lo habéis hecho y todo esto os suena raro os recomendamos que repaséis el curso completo de SEO, ya que hemos introducido estos conceptos varias veces. En especial, la clase de Diseñar una web para SEO.
Si ya tenéis claro todo esto ¡Empezamos!
¿De qué depende la velocidad de vuestra página web?
Recordad que tal y como comentamos en la clase de selección de hosting y dominio un hosting es un espacio que alquilamos en un ordenador y que guardará todos los archivos necesarios para que los usuarios vean nuestra Web. WordPress es un programa que instalamos en ese ordenador y que nos ayuda a gestionar de manera más eficiente nuestra página. Por lo tanto, la velocidad de vuestra página web depende de la relación que haya entre ese ordenador y ese programa.
Si el ordenador es lento, el programa irá lento y, por lo tanto, la web irá lenta. Si el programa está desactualizado, la web también irá lenta. ¿Qué tenemos que conseguir entonces? Que el ordenador vaya rápido y el programa también. Las métricas de velocidad dependen tanto de vuestra configuración de WordPress como de la velocidad de vuestro servidor. También dependen del dispositivo desde el que esté accediendo el usuario pero eso no lo podemos controlar.
Pagespeed Insights y sus movidas
El año pasado nos pusimos a explicar el tema de las Web Vitals pero este año han cambiado Pagespeed (otra vez) y han añadido otros temas de rendimiento web un poco distintos que nos parecen bastante más interesantes: Rendimiento, Accesibilidad, Prácticas recomendadas y SEO. Explicaremos primero qué es cada cosa y luego como crear una instalación que cumpla con todas las movidas que pide Google.
¿Qué es el rendimiento?
El rendimiento mide varios conceptos como el rendimiento de carga o la estabilidad visual. Esta auditoría te sugerirá temas bastante técnicos como posponer la carga de imágenes, minificar CSS y Javascript, codificar imágenes, utilizar webp, evitar redirecciones, utilizar vídeo para contenidos animados y un largo etcétera.
¿Qué es la accesibilidad?
Google opina que cualquier usuario o usuaria debe poder acceder a su contenido. Es decir, que quiere que tu web proporcione una experiencia sólida, teniendo en cuenta cualquier contexto y situación de discapacidad, temporal o permanente. Va a pedir temas como que los botones contengan nombres accesibles, que haya etiquetas alt en las imágenes, que las webs cuenten con la etiqueta title, que haya atributos de lenguaje, listas, etc.
¿Cuáles son las prácticas recomendadas por Google?
En esta sección te encontrarás temas más básicos como utilizar Https, evitar solicitar permisos de geolocalización, evitar APIs obsoletas, etc.
Métricas SEO
En el apartado de SEO encontrarás algunas recomendaciones básicas para la búsqueda de Google, como la utilización de meta título y meta descripción, evitar bloqueos de indexación, tener un archivo de robots.txt válido, utilizar tamaños de fuente legibles, etc.
Esto en WordPress ya no es tanto drama, porque los desarrolladores de temas y plugins ya han tenido tiempo de mirar las movidas para que no lo tengamos que revisar nosotras. No os desesperéis si tenéis malas notas si vuestra web tiene más de 2 años, recordemos que lo más importante es tener unos buenos contenidos que respondan a lo que los usuarios están buscando. No obstante, en esta clase os vamos a explicar algunos consejos actualizados para que sepáis cómo mejorarlo todo.
Metodología para mejorar la velocidad de una web
El truco para crear una web SEO competitiva es sencillo: ensayo y error.
- Probar configuración.
- Medir con las herramientas de medición de velocidad web.
- ¿Vuestros tiempos de carga mejoran? Perfecto. ¿No? Volved al primer punto.
Si tenéis un WordPress antiguo, con una plantilla de hace varios años y muchos plugins, es posible que para mejorar la velocidad de dicha Web tengáis que crear un proyecto de 0. Para depende qué proyectos, esto puede ser un absoluto drama pero es posible que no quede otra. Los años 2018 y 2019 trajeron importantes cambios en WordPress y proyectos anteriores a esas fechas seguramente hay que re-hacerlos enteros. Si queréis conseguir una instalación rápida y sencilla os recomendamos repasar nuestro curso completo de SEO, donde encontraréis toda la información sobre cómo hacerlo.
Si el proyecto que estáis realizando es nuevo, aquí ya tenéis más margen de maniobra. Tendréis que estudiar qué funcionalidades de WordPress necesitáis e ir probando combinaciones de hosting + WordPress + plantillas + plugins. Os recomendamos empezar con pocas páginas hasta conseguir la velocidad web deseada y luego ya ir maquetando el contenido cuando hayáis conseguido buenos resultados. Seguid con la clase para encontrar nuestra combinación de tema + plugins preferida para cumplir con todo lo que nos pide Google.
Herramientas de medición de velocidad
Lo primero que tenemos que tener en cuenta es que para realizar esta acción vamos a tener que probar configuraciones todo el rato. Para comprobar los tiempos de carga hay varias herramientas que podemos utilizar.
Desde seosve os recomendamos tener las 3 primeras abiertas y conforme vayáis probando cambios ir comprobado qué os dice cada una. Es importante comentaros que no váis a poder realizar las pruebas en entorno test, sino que tendréis que realizar estos cambios una vez la web haya sido publicada en un hosting y dominio real y definitivo. Aunque no estéis preparados para publicar, siempre podéis encontrar un servicio que os permita hacer pruebas gratis.
Las herramientas que nos recomendamos son las siguientes.
- PageSpeed Insights de Google
- Pingdom Tools
- GTmetrix
- Informe de Seach Console
- Google Ads si hacéis campañas
Lo que suelen hacer nuestros alumnos nada más conocerlas es medir la velocidad de sus páginas web. Los resultados suelen ser desastrosos. ¡Que no cunda el pánico! Ahora os explicamos cómo mejorar todo esto.
¿Qué métricas queremos conseguir?
Lo ideal sería un +90 en pagespeed insights (móvil) y que cargue en menos de un segundo en Pingdom. Conseguir esto a veces no es posible en todas las instalaciones.
En Google Search Console han implementado también un informe de velocidad de URL y Google Ads cuenta con otro (que os saldrá como aviso si hacéis campañas). Recordad que siempre tenemos que hacerle caso a Google así que si os salen páginas lentas tendréis que intentar ponerle remedio.
Mejorando la velocidad web en WordPress
¡Manos a la obra! Ahora toca mejorar la velocidad web en nuestro WordPress y para hacerlo vamos a cumplir con los 4 ingredientes secretos de Noe para no tener que programar nada y cumplir con toda esta vaina rápido: Seleccionar un buen hosting, seleccionar un buen tema, crear una instalación lo más ligera posible e instalar algunos plugins extra para terminar de mejorar la velocidad de la web.
Seleccionar un buen hosting
Si una vez probáis las herramientas de medición os encontráis con el siguiente aviso, es que el servidor va lento o tiene una mala relación con vuestra instalación de WordPress:
En este enlace, podéis ver las recomendaciones que os hace Google al respecto.
Para solucionar este problema deberéis o bien llamar a vuestro proveedor para ver si hay algún problema con la instalación o con el hosting, o si el servidor es vuestro, hacer los cambios necesarios. Al realizar las mejoras el mensaje que debería salir sería el siguiente:
Seleccionar un buen tema
Selección de tema
Encontraréis por Internet multitud de temas tanto gratuitos como premium. Un tema gratuito puede ser rápido y un tema de pago puede ser lento. No queda otra que instalarlos y probarlos con las herramientas mencionadas anteriormente. Para comparar un tema con otro deberéis maquetar la misma URL con los mismos contenidos y ver cómo se comporta con las distintas herramientas de medición. Este año os hemos enseñado GeneratePress porque a nosotras nos ahorra muchísimo tiempo.
Evitad editores visuales
Lo hemos comentado varias veces en el canal. Utilizar un editor visual que no sea Gutenberg significará añadir un plugin extra y, por lo tanto, ralentizar la web. Con Gutenberg se puede hacer ya casi de todo a nivel de diseño por lo que os recomendamos evitar utilizar Elementor, Divi, WPBackery composer, el editor de Avada o cualquier otro, nos da igual cual.
Si tenéis una web antigua esto es un auténtico drama ya que tendréis que remaquetar todos los contenidos que tengáis en vuestro editor visual y pasarlos a Gutenberg. Nosotros hicimos el cambio y este es el resultado a nivel de SEO:
Entendemos que es un cambio drástico y empeñativo pero tarde o temprano tendréis que hacerlo.
Crear una instalación lo más ligera posible
Un WordPress con muchos plugin y una configuración complicada será más lento. Lo hemos comentado anteriormente, WordPress es un programa. Si voy metiendo plugins, estoy añadiendo funcionalidades a ese programa, haciéndolo más lento.
Cuantos menos plugins, mejor
Pensad en las funcionalidades que necesitáis y eliminad todo aquello que no sea absolutamente imprescindible.
Si habéis dejado la instalación más básica que podéis y aun así los tiempos de carga no mejoran, desactivar plugins por un momento y probar de nuevo. Es posible que haya 1 o 2 que verdaderamente os estén fastidiando las métricas. Cuando descubráis cuales son, buscad una alternativa y volver a medir.
Por ejemplo: Nosotros utilizábamos un plugin anti-spam. Tras desactivarlo mejoramos 20 puntos en PageSpeed Insights, por lo que tuvimos que buscar una alternativa que hiciera lo mismo y pesara menos.
Mantened la instalación actualizada
Normalmente, las últimas actualizaciones tanto de WordPress como de plugins y plantillas incluyen mejoras en los tiempos de carga. Igual que tenéis que ir actualizando Apps en vuestro teléfono móvil y programas en vuestro ordenador, también tenéis que mantened vuestra web actualizada.
Además de mejorar los tiempos de carga, esta acción hará que la instalación sea también más segura.
Métricas a mejorar
Antes de continuar con esta sección, analicemos algunos conceptos que nos pide PageSpeed insights.
Utilizar una política de caché eficaz
Si aplicamos este concepto a páginas web, la caché se usa para almacenar las distintas páginas para que cuando los usuarios tengan que volver a utilizarlas, no las tengan que cargar de nuevo. Google nos explica que tenemos que publicar los recursos de nuestra web con una política de caché eficaz.
Optimización de imágenes
¡Importante! Esta acción requiere la realización de varias acciones:
- Que las imágenes se guarden al tamaño que las va a ver el usuario. Normalmente dichos tamaños van en píxeles y no suelen superar los 1200 por alguno de sus lados. Depende también del diseño del tema.
- Hay que guardar para web en Photoshop pero no es suficiente, se debe utilizar un optimizador externo o algún plugin de optimización.
Minificar HTML, CSS y JavaScript
También conocido como minifying, es un término de programación que se refiere al proceso de eliminar caracteres que no se necesitan para que el código se ejecute. Os dejamos la explicación de Google al respecto por si queréis saber más.
Lazyload
La carga diferida es una técnica que retrasa la carga de imágenes y vídeos mientras no se muestran en la pantalla. Cuando el usuario hace scroll, es entonces cuando los recursos se cargan. De este modo nos “ahorramos” la carga de imágenes y vídeos al cargar la página. Aquí de nuevo nos lo explica Google.
Limpieza de bases de datos
Cuando hacemos cambios en entradas o páginas, modificaciones, activamos y desactivamos plugins… Todo eso deja códigos sueltos por ahí que no hacen nada de provecho en nuestra instalación.
CDN
Un CDN es un tipo de infraestructura en la que hay varios ordenadores distribuidos geográficamente en distintos lugares. Los CND mejoran los tiempos de carga ya que almacenan parte de la información y del contenido en copias disponibles distribuidas geográficamente en varios puntos del planeta. El usuario verá la copia de la web que le quede más cerca físicamente.
Para poder instalarlo hay que registrarse en una plataforma de CDN e instalar algún plugin que nos conecte a dicha plataforma.
Plugins extra para mejorar la velocidad web
Para solucionar todo esto, podemos utilizar los siguientes plugins gratuitos. Estos pueden cubrir todas las necesidades que aparezcan en el PageSpeed Insights. No obstante, es posible que vuestro proveedor de hosting os recomiende algún otro plugin que funcione mejor. Antes de comprarlo, investigad.
El siguiente plugin es de pago. Es muy sencillo de configurar y realmente merece la pena. Os recordamos que somos autónomos y que para nosotros el tiempo es oro. Es por esto que hemos utilizado este plugin: para ahorrarnos horas y horas de configuración.
Estos plugins os ayudarán con las imágenes webp:
Y estos os servirán para limpiar la base de datos:
Gracias por compartir
¡A ti por el comentario!