Ya sabes que el posicionamiento de una web o un blog depende de muuuuchos factores, pero uno que va teniendo cada vez más importancia es el de la «experiencia en página», que lógicamente está relacionado con la velocidad de carga.
¿Sabías que un 25% de los visitantes de tu web la abandonarán si tarda más de 4 segundos en cargar? Y lo peor de todo es que seguramente no vuelvan más…
Así que, ¡más vale que tu sitio vaya como las balas! 😊
🤔 La velocidad de carga web, ¿tan importante es?
Rotundamente SÍ.
No se trata de un simple detalle para mejorar tu web o blog, no. Hay 3 razones principales para tomarte esto muy en serio:
- Google posiciona mejor a las webs más rápidas, así de sencillo. No es que sea en lo primero que se fija, pero que sepas que también lo tiene muy en cuenta como «experiencia en la página». De hecho en este mes de febrero de 2022 Google empezará a hacerlo también para los usuarios de escritorio/PC (desde el 2021 ya lo tiene en cuenta para usuarios móviles). Es lógico que si al usuario no le gusta esperar, Google modifique sus algoritmos para encontrar primero las páginas más rápidas, ¿no crees?
- Al hilo del punto anterior, tendrás menos visitas cuanto más tarde en cargarse la web. Y no sólo se va el usuario que se cansa de esperar al entrar en tu sitio, si no que aumenta el porcentaje de usuarios que lo van abandonando según visitan el resto de páginas.
- Y a causa de los puntos anteriores, te puedes imaginar lo que esto significa para las tiendas o negocios online: menos ingresos. Un estudio de Amazon decía que un retardo de 0,1 segundos en su web implicaba una pérdida del 1% en el total de sus ventas, que como imaginarás es un «poquito» de dinero… 😲
🔹 Cómo medir la velocidad de carga
Pues la forma más sencilla es usar alguna herramienta web de medición de velocidad. Hay varias páginas o herramientas que hacen un análisis de la carga total de tu web y de cada uno de sus elementos.
🔸 Herramientas para medir el tiempo de carga de la web
En la mayoría de estas herramientas nos darán una nota (de 0 a 100, de F a A, etc.), como en el colegio; y está claro que cuanto más alta mucho mejor 😊.
- gtmetrix
- pingdom
- webpagetest (mi favorita)
- pagespeed
- Herramientas para desarrolladores de Chrome (pestaña Network)
Lo importante no es tanto conseguir que todo esté a la perfección, porque es casi imposible si no tienes una web o blog profesional de «alta» gama o que esté casi vacío. La clave está en encontrar qué elementos están ralentizando nuestra web: plugins, imágenes, hojas de estilo, etc.
De hecho, se puede tener peor nota en algunos aspectos y sin embargo el usuario puede tener la sensación de que la velocidad con la que se muestra el sitio es mucho mayor.
Nota
Para comprobar la velocidad de tu web como si fueras cualquier otro usuario y no el administrador (que suele tardar más en cargar), entra en modo privado o incógnito con el navegador que uses:
- Chrome -> Ctrl+Mayúscula+N
- Firefox -> Ctrl+Mayúscula+P
- Internet Explorer -> Ctrl+Mayúscula+P.
🔹 ¿Porqué mi web carga tan lento con WordPress y cómo mejorarlo?
Aquí ya estamos tocando hueso…
Existen muuuuchas razones por las que la velocidad de carga de tu blog o web creada con WordPress sea tan lenta, pero te voy a dar las razones principales y cómo puedes solucionarlo.
🔸 El alojamiento web es vital
Cuando vayas a crear una página web o un blog huye de los alojamientos ultra baratos porque suelen ser sinónimo de un mal servicio.
Tu web puede acabar en unos servidores lentos compartidos por muchos otros usuarios (hosting compartido), lo que puede provocar un alto consumo de recursos y que las webs que haya en ese servidor vayan más lentas que un caracol con asma.
Lógicamente lo ideal son los servidores privados, pero te puedes imaginar que eso se traduce en pagar muuucho dinero al mes.
Y otra opción que empieza a estar de moda son los VPS (Servidor Virtual Privado), que se basa en gestionar los recursos de un servidor físico como si tuviera varios servidores dentro de él.
Después de probarlo y analizarlo bien, puedes ver que yo ya elegí lo que para mí es el mejor hosting. Pero en general, y teniendo en cuenta la velocidad de carga, calidad y precio te recomiendo estas 3 opciones de hosting compartido de calidad donde usan discos SSD NVMe (que son +rápidos):
* Por supuesto soy afiliado de los 3, porque si no fueran realmente buenos no los recomendaría, así de sencillo. 🤷♂️
🔸 La plantilla que usas importa
Hace tiempo cambié la plantilla que usaba en mi blog y lo noté en el tiempo de carga. Porque la plantilla se compone de una serie de ficheros (código PHP, hojas de estilo CSS, funciones JavaScript, etc.) que pueden ralentizar la web si no están bien optimizados.
Además es importante que sea Responsive para que el diseño se ajuste al dispositivo desde el que se está visitando la web. Por eso siempre hablo de la importancia que tiene contar con un buen profesional que te oriente en el diseño de tu web o blog, porque en verdad se trata de un inversión.
El tema que estoy usando ahora en mi blog es Metro Pro Theme + Genesis Framework, una opción buenísima a la hora de querer mejorar el rendimiento de un sitio web porque optimiza al máximo el código y los recursos de la plantilla.
Pero lo mejor es que lo veas tú mismo con esta imagen:
Mejora en la velocidad de carga
Como ves, algunos artículos han tenido una optimización brutal en más del 53% de su velocidad de carga, lo que a su vez mejora mucho la experiencia de usuario (que es importantísimo para el SEO). 🙂
La verdad es que estoy muy contento con el cambio que hice en su día a esta plantilla.
Y no sólo lo digo por la mejora en la velocidad, también por el soporte técnico que ofrecen (resuelven dudas y problemas) y que actualiza el theme cada cierto tiempo para mantenerlo optimizado.
¡Sin tener que pagar un duro más!
Aun así, puedes empezar si quieres con un tema gratuito o barato que sea actual y lo más optimizado posible. Si tu blog empieza a ser algo «serio», te recomiendo que te gastes un poco más de dinero al comprar un tema que sea óptimo y que ofrezca buen soporte al cliente.
Y si tu blog es más profesional y se trata de la herramienta de trabajo con la que te ganas la vida, ni te lo pienses: invierte en un buen tema como los de Genesis.
🔸 Comprime tus imágenes
Puede que una sola imagen no sea importante en el tiempo de carga de tu web, pero muchas sí.
Como ves, a mí me gustan mucho, porque creo que son el complemento perfecto para diseñar un buen artículo. Por eso es vital que te ayudes de algún programa o herramienta para reducir el tamaño y el peso de las imágenes, como por ejemplo tinyPNG, que es gratis y está muy bien. 👌
Claves a tener en cuenta a la hora de tratar y retocar imágenes:
- Usa formatos que compriman la imagen: JPG (para fotos o imágenes complejas), PNG (para imágenes más simples o con transparencia) o WEBP (más moderno y recomendado por Google).
- Si usas JPG, guárdalas como «progresivas».
- Usa la opción de Lazy Load o «carga diferida» siempre que puedas (por ejemplo con el plugin de WP Rocket).
- Intenta reducir las dimensiones de la imagen hasta lo necesario para evitar que sea WordPress quien las redimensione automáticamente.
🔸 WordPress es más lento cuantos más plugins use
Esto no tiene más vuelta de hoja, por eso es muy recomendable usar sólo los más necesarios, y sobre todo si no tienes un buen hosting que los «aguante»…
Una forma de analizar esto mismo, es usando el plugin P3 Plugin Performance Profiler, con el que te puedes hacer una idea de lo que tarda en ejecutarse cada plugin y si te merece la pena quitar alguno.
Como ves, en mi caso el plugin WP Socializer para compartir en las redes sociales se llevaba la palma, y por eso finalmente me acabé cambiando de plugin. 😊
Otros plugins sólo te harán falta de vez en cuando, como el P3 Plugin Performance Profiler precisamente, así que puedes desactivarlos cuando no los vayas a usar.
🔸 También hay plugins que mejoran la velocidad de carga
Y los plugins de caché son mano de santo la verdad. En este mismo blog he probado y reprobado combinaciones de distintos plugins para conseguir que cargue los más rápido posible, y éste es el mejor consejo que te voy a dar: prueba, prueba y prueba.
Cada web es un mundo y cada plugin puede afectarle de distinta forma. Pero si te sirve de referencia, aquí van los que he probado yo:
⭐ – WP Rocket: para mí el mejor plugin de caché que existe hoy en día para WordPress (y por eso uso mi enlace de afiliado), ¡así de claro! 😊
– Swift Performance: uno de los más nuevos y que empieza a despuntar con resultados muy muy buenos en muchos casos. A tener en cuenta.
– WP-Optimize: limpia la «basura» que puede haber en la base de datos para que vaya más rápida.
– WP Smush: reduce el tamaño de las imágenes y mejorar su rendimiento. Es muy bueno, pero aun así te aconsejo que antes de subir las imágenes a WordPress las comprimas tú mismo.
– WP Super Cache: este es el plugin más importante, porque cachea todas tus páginas y tus artículos. Es el que mejor me ha funcionado comparado con W3 Total Cache, pero te aconsejo que pruebes ambos para que uses el que funcione mejor en tu web.
– WP Minify: combina y comprime los ficheros de JavaScript y las hojas de estilo CSS para ahorrar tiempo y y ancho de banda. Si finalmente usas W3 Total Cache, este plugin no te hará falta porque ya lleva esta opción.
– Perfmatters: no es un plugin de caché pero sí que ayuda (y mucho) a optimizar un WordPress para dejarlo volando. Échale un vistazo a este vídeo de Paul Benítez donde explica cómo lo hace paso a paso. 👌
Importante: recuerda probar en el modo privado o de incógnito de tu navegador como te indiqué antes, porque así tendrás una prueba «real» de cómo cambia la rapidez con la que carga tu web.
🔹El antes y el después de la optimización
Después de llevar a cabo todos los cambios y hacer todas las pruebas que se me han ocurrido en este mismo blog, he analizado los resultados del antes y el después.
Para ello he usado la herramienta webpagetest; no por nada en especial, pero dado el nivel de detalle que ofrece me parece de las mejores.
Como las páginas más visitadas de este blog suelen ser sus artículos y no la página de inicio, he medido los tiempos con otro artículo del blog. Me he puesto en el peor de los casos, es decir, que las pruebas están hechas desde una máquina en EEUU (que está un rato lejos) y con Internet Explorer (que es de los más lentos); así que los tiempos son más altos de lo «normal».
Haz click sobre la imagen para verla mejor
Como ves, he señalado los 2 aspectos que me parecen más importantes: el tiempo o velocidad de carga y el primer «pintado» de la web. Éste último de hecho para mí es fundamental, porque será el que cambie la sensación que tenga el usuario sobre la velocidad de tu web. Y los resultados no pueden ser mejores:
– Antes: la primera visita tardaba en cargar 11,6 sg y la segunda visita (donde actuaría el caché) 5,553 sg.
– Después: la primera visita tarda en cargar 6,479 sg y la segunda visita (donde actuaría el caché) 3,674 sg.
El tiempo de carga ha mejorado 5,121 sg y 1,879 sg respectivamente.
– Antes: la primera visita empezaba a «pintar» a los 2,611 sg y la segunda visita (donde actuaría el caché) a los 1,53 sg.
– Después: la primera visita empieza a «pintar» a los 1,327 sg y la segunda visita (donde actuaría el caché) a los 0,837 sg.
El primer «pintado» ha mejorado 1,284 sg y 0,693 sg respectivamente.
Así que no lo pienses más, hazle un lavado de cara a tu web o blog para optimizar su velocidad de carga y mejorar así tu posicionamiento web. A Google le gustará, tus visitantes lo agradecerán y tú más feliz que un regaliz: todos saldréis ganando.
¡Nos leemos!