Mejorar la velocidad web

Mejorar la velocidad web en Wordpress

Mejorar la velocidad web

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 un poco a chino, os recomendamos que repaséis la clase anterior, donde explicamos la importancia de realizar estas acciones:

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.

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 tengais 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 han traído importantes cambios en Wordpress y proyectos anteriores a esas fechas seguramente hay que re-hacerlos enteros.

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 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 realizar estas acciones en un entorno de pruebas dentro del servidor donde vayáis a alojar la página web definitivamente.

Las herramientas que nos recomendamos son las siguientes.

https://developers.google.com/speed/pagespeed/insights/?hl=es
https://tools.pingdom.com/
https://gtmetrix.com/

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.

Velocidad web: Mal optimizada
Ejemplo de Web mal optimizada
Velocidad web: Una web bien optimizada
Ejemplo de web bien optimizada

¿Qué métricas queremos conseguir?

Lo ideal sería un +70 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 Tools

En Google Search console están implementando 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.

Velocidad web: Informe experimental de Search Console
Informe experimental de Search Console
Velocidad web: Aviso de Google Ads
Aviso de 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: https://web.dev/time-to-first-byte/

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.

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

Opción 1: Combinación de plugins gratis, pero difícil de configurar

Instalar plugins para mejorar los tiempos de carga: forma complicada, pero gratuita

Se pueden conseguir los mismos resultados que con el plugin anterior de manera gratuita. Pero tendréis que instalar y “pelearos” con estos 3 plugins:

https://es.wordpress.org/plugins/autoptimize/
https://es.wordpress.org/plugins/lazy-load-for-videos/
https://es.wordpress.org/plugins/w3-total-cache/

Opción 2: Plugin de pago pero rápido, que el tiempo es oro

Tras un arduo trabajo de investigación, desde seosve hemos llegado a la conclusión de que este plugin es el mejor para mejorar los tiempos de carga. 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.

https://wp-rocket.me/es/

Plugin de mejoras y optimizaciones WPO

Combinado con el plugin anterior utilizamos también este: https://es.wordpress.org/plugins/wpo-tweaks/

Hace algunas mejoras extra que realmente hemos notado. El autor es Fernando Tellado, al que llevamos siguiendo años en su blog: https://ayudawp.com/. Si os interesa el tema Wordpress os recomendamos echarle un ojo.

Explicación de elementos a mejorar

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.

Plugins de optimización de imágenes:
https://wordpress.org/plugins/wp-smushit/
https://es.wordpress.org/plugins/imagify/

Caché
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.

Velocidad web: Aviso de caché
Aviso de caché

Plugins gratuitos:
https://wordpress.org/plugins/w3-total-cache/
https://wordpress.org/plugins/wp-super-cache/
https://wordpress.org/plugins/wp-fastest-cache/

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 innecesarios que no se necesitan para que el código se ejecute.

Explicación de Google:
https://developers.google.com/speed/docs/insights/MinifyResources?hl=es

Plugins gratuitos:
https://wordpress.org/plugins/w3-total-cache/
https://wordpress.org/plugins/wp-fastest-cache/
https://es.wordpress.org/plugins/autoptimize/

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.

Explicación de Google:
https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video?hl=es

Plugins gratuitos:
https://es.wordpress.org/plugins/lazy-load-for-videos/
https://wordpress.org/plugins/amp/
https://wordpress.org/plugins/wp-smushit/

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.

Plugins gratuitos:
https://es.wordpress.org/plugins/wp-optimize/
https://es.wordpress.org/plugins/wp-sweep/

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.

Una de las plataformas más populares es:
https://www.cloudflare.com/es-es/

Conclusiones

Para páginas web antiguas

Mejorar la velocidad de vuestra web va a ser sí o sí un drama, sobretodo si tenéis el proyecto desde hace más de dos años. En muchas ocasiones, os tendréis que plantear si merece la pena aprovechar la instalación actual o si es mejor crear una desde 0.

Para páginas web creadas desde 0

Si estáis empezando un proyecto desde 0, hacer pruebas con todos los contenidos por cada tipo de URL. Por ejemplo: 1 página de servicio, 1 entrada, 1 categoría, 1 producto… hasta dar con la configuración adecuada. No os pongáis a maquetar todas las URL de vuestra web sin tener esto solucionado o puede ser que tengáis que empezar desde 0

Testead de manera constante

Además, las exigencias de velocidad de Google cambian muy rápidamente. Por lo tanto, tendréis que estar testeando constantemente con las herramientas de medición que os hemos explicado en esta formación.

Mejoras en el ranking de todas vuestras palabras clave

Si conseguís mejorar dicha velocidad y vuestra página web tiene ya algunos resultados conseguidos, estos cambios pueden llegar a traer subidas espectaculares de tráfico. Lo hemos comprobado en varias ocasiones, así que sabemos que la velocidad de vuestra página web es un elemento crucial para el SEO y la experiencia del usuario.

Siguiente clase de SEO

¿Ha sido útil esta clase? ¿Tenéis alguna duda? ¡Escribidnos en los comentarios cualquier pregunta que tengáis!

Sin comentarios

Contadnos qué os parece todo esto: