Mejorar la velocidad web

Si queréis mejorar vuestro SEO y vuestra UX deberéis forzosamente mejorar la velocidad de vuestra página web ¿Queréis saber como? Os lo explicamos todo.

En la clase de hoy os explicaremos cómo mejorar la velocidad de una web en WordPress.

La velocidad web es uno de los factores de los que depende el SEO y que 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. Es por esto que hemos preparado esta clase para que sepáis cómo mejorar de manera sencilla la velocidad de vuestra web en WordPress.

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.

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.

Los Web Vitals

Cuando probáis vuestra web en pagespeed os habréis dado cuenta de que hablan de “Métricas web principales”. Según el propio Google:
Los Core Web Vitals son el subconjunto de Web Vitals que se aplica a todas las páginas web, todos los propietarios de sitios deben medirlos y aparecerán en todas las herramientas de Google. Cada uno de los Core Web Vitals representa una faceta distinta de la experiencia del usuario, se puede medir en el campo y refleja la experiencia en el mundo real de un resultado indispensable centrado en el usuario.

¡Señor de Google! si nos estás leyendo que sepas qué nos puedes para escribir textos ya que todo esto no se termina de entender. Resumo: Haced que la web sea rápida y mejorar la UX.

  • Largest Contentful Paint (LCP): Se refiere al tiempo para el despliegue del contenido más extenso, LCP por sus siglas en inglés, mide el rendimiento de carga. Para proporcionar una buena experiencia de usuario, el LCP debe producirse dentro de los 2,5 segundos desde que la página comienza a cargarse.
  • First Input Delay (FID): Se refiere a la demora para la primera entrada, FID por sus siglas en inglés, mide la interactividad. Para proporcionar una buena experiencia de usuario, las páginas deben tener un FID de menos de 100 milisegundos.
  • Cumulative Layout Shift (CLS): Se refiere a el cambio acumulativo en el diseño CLS por sus siglás en inglés, mide la estabilidad visual. Para proporcionar una buena experiencia de usuario, las páginas deben mantener un CLS de menos de 0,1.

Para más información sobre estos términos podéis visitar el enlace oficial de Google que explica los Web Vitals. Podéis medir los core web vitals tanto desde pagespeed insights como desde este nuevo report de search console (lo seguimos explicando en esta clase).

Esto en WordPress es un poco drama, porque al ser todo tan nuevo los desarrolladores están intentando aportar nuevas soluciones. No os desesperéis si tenéis malas notas, 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

Aquí no queda otra: es ensayo y error.

  1. Probar configuración.
  2. Medir con las herramientas de medición de velocidad web.
  3. ¿Vuestros tiempos de carga mejoran? Perfecto. ¿No? Volved al punto 1.

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 WordPress, 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.

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:

Mejorar la velocidad de una web
Una web más o menos bien optimizada

¿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.

Velocidad web Pingdom
Métricas en Pingdom Tools

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.

Informe de velocidad de Search Console
Informe de velocidad de Search Console
Aviso de Velocidad Google Ads
Aviso de Velocidad Google Ads

Selección de 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:

Velocidad web: Reduce los tiempos de respuesta del servidor

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:

Velocidad web: Los tiempos de respuesta del servidor son rápidos

Instalación de wordpress

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 Page Speed 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.

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.

Evitad editores visuales

Lo hemos comentado en la clase de editores visuales. 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 o el editor de Avada.

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:

Mejoras SEO de velocidad
Mejoras SEO de velocidad

Entendemos que es un cambio drástico y empeñativo pero tarde o temprano tendréis que hacerlo.

¿Cómo mejorar los tiempos de carga en WordPress?

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.

Velocidad Web: Caché
Velocidad Web: Caché

Optimización de imágenes

¡Importante! Esta acción requiere la realización de varias acciones:

  1. 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.
  2. 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 que podéis testear

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:

Trabaja en el sector del Marketing Digital desde 2007 y cuenta con estudios reglados de marketing digital, educación, diseño gráfico-web y branding. Actualmente se dedica a gestionar proyectos, dar clases y estudiar un Doctorado en Tecnologías de la Información.

Deja un comentario

Nuestra Newsletter mola