A nadie se le escapa que la velocidad de carga de un sitio web sigue siendo uno de los aspectos cruciales para un buen posicionamiento. Sin embargo, son pocas las personas que saben optimizar esta parte del On Page. Hoy, te doy unos consejos para mejorar la velocidad de carga de tu web.
¿Por qué es importante mejorar la velocidad de carga de tu web?
Antes de entrar a los trucos para mejorar la velocidad de carga de tu sitio web, puede ser una buena idea hablar de por qué es tan importante hacer que tu web vaya más rápido. Seguro que ya sabes lo que vamos a comentar, pero no está de más recordarlo:
Google lo premia
La primera de las razones es que Google premia a las webs que cagan rápido. La velocidad de carga es un factor de posicionamiento y, en consecuencia, a mayor velocidad de carga, mejor posicionamiento (asumiendo que todo lo demás permanece igual, claro).
Esto es debido a dos grandes razones:
- Experiencia de usuario: En primer lugar, tenemos la razón evidente, que es que una buena velocidad de carga mejora la experiencia de usuario. Es lógico. El usuario prefiere las webs que cargan rápido, y Google premia a aquellas webs que satisfacen al usuario. No hay mucho más que rascar aquí.
- Más barato para Google: En segundo lugar, una web que carga rápidamente es una web que reduce el coste de funcionamiento de Google. Esto quizá se sepa menos, pero también es clave. Google funciona descargando versiones de todas las páginas que visita, y eso implica un consumo de recursos enorme. Si todas las páginas del mundo pasan a pesar un 10% menos y a ir un 10% más rápido, Google reduce en un 10% el coste de rastrear la web.
Así que una web rápida es buena para el usuario y para Google. Como es lógico, a Google le interesa incentivar las webs rápidas, y una forma muy sencilla que tiene de hacerlo es mejorando el posicionamiento de las webs que cargan rápido.
El usuario lo premia
En segundo lugar, el usuario premia las webs que cargan rápido. Esto es positivo en sí mismo, incluso si recibieras 0 visitas desde Google y todo tu tráfico lo obtuvieras, por ejemplo, de redes sociales.
Está más que estudiado: El usuario no espera. Si tu web tarda en cargar, se va y busca una alternativa. Cada segundo adicional en la velocidad de carga de tu web te hace perder un porcentaje (variable, pero no pequeño) de usuarios.
Esto es muy importante, porque perder usuarios implica perder dinero. Así que te interesa optimizar la velocidad de carga incluso sin tener en cuenta lo bueno que es hacerlo para mejorar el posicionamiento.
Dos claves antes de entrar en harina
Antes de ir a los trucos, comentemos un par de claves que debemos comprender para sacar el máximo partido a los consejos de optimización y, en general, a nuestro tiempo, dinero y recursos disponibles para SEO:
Escalabilidad
No obstante, hay que mencionar que la mejora en el posicionamiento derivada de la mejora de la velocidad de carga no escala bien.
Es decir, si tu web tarda 4 segundos en cargar y reduces esa velocidad de carga a 2 segundos, vas a notar una gran mejora. Bajar de 2 segundos a 1 también te va a aportar una mejora, pero no tan grande. Bajar de 1 a 0.5 segundos apenas se va a notar.
Por lo tanto, una vez nos hemos colocado por debajo de los 2 segundos de tiempo de carga, no es necesario seguir trabajando en ello.
Si tienes algún arreglo adicional que no exija mucho tiempo o esfuerzo, hazlo. Pero si, para mejorar un poco más, necesitas mucho tiempo o esfuerzo, olvídate. Ese tiempo y esfuerzo estará mejor invertido en creación de contenido, CRO o linkbuilding.
WPO no es velocidad de carga y velocidad de carga no es WPO
Otra cosita que tenemos que entender antes de pasar a hablar de los trucos para mejorar la velocidad de carga de una web es que no es lo mismo velocidad de carga que WPO y WPO no es lo mismo que velocidad de carga.
Cuando hablamos de WPO, hablamos de Web Performance Optimization. Es decir, optimización del performance de la web. La diferencia es sutil, pero es relevante.
La velocidad de carga hace referencia a cuánto tarda en cargar una página entera. Toda la página, del primero al último de los recursos.
En cambio, el performance hace referencia a cómo se cargan los diferentes elementos de la página, y su optimización tiene como objetivo satisfacer al usuario, no hacer que todo vaya rápido.
Es decir, quizá nos interese que haya ciertos recursos que tarden un rato en cargar porque no son importantes para el usuario (por ejemplo, algunos JavaScripts), pero es fundamental que el usuario vea texto cuanto antes.
En este sentido, una web que tarda 3 segundos en cargar completamente, pero que tiene lo necesario para el usuario en 0.5 segundos, es una web con una mejor optimización en lo relativo a WPO y velocidades de carga que una web que lo tiene todo listo en 2 segundos, pero que no muestra nada hasta que transcurren esos dos segundos.
Para terminar de explicar esto, debemos abordar dos conceptos propuestos por el propio Google en sus Core Web Vitals, (en realidad, Google propone cuatro, pero estos dos son los más importantes):
First Contentful Paint (FCP)
En primer lugar, tenemos el First Contentful Paint o FCP, que hace referencia al tiempo que tarda en aparecer el primer elemento de una web.
El peso que tiene nuestro servidor, las redirecciones y otros aspectos técnicos es muy alto en cuánto FCP tenemos.
Por supuesto, nos interesa tener el menor FCP posible.
Largest Contentful Paint (LCP)
En segundo lugar, tenemos el Largest Contentful Paint o LCP, que hace referencia al tiempo que tarda en aparecer el elemento más grande de la página.
El LCP suele ser un poco menos importante, aunque también deberíamos trabajar por que la velocidad fuese lo más rápida posible. Además, el peso del hosting y otros aspectos técnicos no es tan acusado.
Como puedes suponer, el LCP guarda relación directa con el FCP. Cuanto mayor sea el FCP, mayor será el LCP necesariamente.
Centrados en el WPO
Sea como sea, nos interesa optimizar los dos aspectos que acabamos de ver y lograr un buen ritmo de carga, una buena performance, un buen WPO.
Y de eso vamos a hablar en los siguientes apartados.
Trucos para mejorar el WPO y la velocidad de carga de tu web
A continuación, te menciono los trucos que debes seguir para mejorar el WPO de tu web (están ordenados de más importantes a menos importantes, así que empieza por el principio):
Midiendo tu velocidad de carga y WPO
Lo primero que tienes que hacer a la hora de optimizar el WPO de una web es, por supuesto, saber en qué situación está. Para ello, tendremos que hacer mediciones precisas.
Esto es bastante sencillo, la verdad. Lo único que necesitas es utilizar algunas herramientas. Estas, en concreto:
- GTMetrix
- Google PageSpeed Insights
Lo que tienes que hacer es tomar algunas páginas importantes de tu sitio web (por ejemplo, la portada y las dos o tres páginas más visitadas) y pasarlas por esas herramientas.
Una vez lo hayas hecho, lo que tienes que hacer es anotar los resultados en un Excel para tenerlo todo controlado.
Más adelante, cuando hayas hecho todas las optimizaciones, tendrás que volver a pasar esas mismas páginas por las herramientas y anotar los resultados para ver la mejora obtenida.
Una vez tenemos esto, podemos pasar a aplicar los trucos concretos para mejorar la velocidad de carga y el WPO de la web.
Usa un buen hosting
El primerísimo truco es usar un buen hosting. No necesitas un hosting espectacular. Hay hostings especialmente pensados para que tu web VUELE, pero no es necesario que te vayas a por ellos (entre otras cosas, porque son bastante caros). Pero tienes que tener un buen hosting.
Si estás en un plan compartido de un hosting de baja calidad por ahorrarte unos eurillos, mi recomendación es que cambies el chip. Si quieres que tu proyecto web funcione, necesitas un hosting aceptable, no uno compartido.
La diferencia en velocidad de carga entre un buen hosting y un hosting excelente no es brutal, pero la diferencia entre un mal hosting y un buen hosting sí lo es. Además, un buen hosting evitará que tu web se caiga (o, al menos, reducirá la cantidad de veces que tu web se cae).
Así que esto es lo primero que debes hacer.
Puedes tener un buen hosting para ti solo por apenas 10 o 15€ al mes, así que no hay excusa.
Activando de la compresión GZip
El siguiente paso será activar la compresión GZip. Esto se puede hacer de muchas formas, pero lo más sencillo es utilizar un plugin de caché que lo permita (porque, después, tendremos que darle más usos).
Hoy en día casi todos los plugins de caché permiten activar la compresión GZip, así que no tiene pérdida. Puedes usar Fastest Caché, W3 Total Cache o el que más te guste.
En el caso de que, por cualquier motivo, no quieras utilizar un plugin de caché, tendrás que ir al .htaccess y añadir este código:
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript
</ifmodule>
No obstante, recuerda que, cada vez que se actualice el .htaccess (y hay mil y un plugins que pueden hacer esto automáticamente), puedes perder esa modificación.
Es por ello que es más recomendable automatizarlo a través de un plugin.
Cacheando
El mismo plugin de caché que hayas utilizado para activar GZip te permitirá cachear diferentes tipos de archivos.
Es recomendable que lo hagas, porque el caché del navegador es lo que hará que la web cargue más rápido a los visitantes recurrentes (o a los que, simplemente, pasen de una página a otra dentro de tu web, puesto que los elementos de ambas son los mismos en un 90%).
De nuevo, en el caso de que no quieras utilizar un plugin de caché, puedes forzar los cacheos desde .htaccess. Para ello, puedes utilizar este código:
ExpiresActive On
ExpiresDefault A0
<FilesMatch «\.(pdf|ppt|doc)$»>
ExpiresDefault A9030400
</FilesMatch>
<FilesMatch «\.(jpg|jpeg|png|gif)$»>
ExpiresDefault A2592000
</FilesMatch>
<FilesMatch «\.(txt|xml|js|css|htm|html|php)$»>
ExpiresDefault A604800
</FilesMatch>
No obstante, de nuevo, lo mejor es que lo hagas a través del plugin de caché, porque te permite mantener actualizado el .htaccess de forma constante y, además, es más fácil de configurar y cambiar cuando sea necesario.
Reducir molestias de JavaScript
El siguiente paso es hacer que JavaScript moleste menos. JavaScript es fundamental para la interactividad de nuestra web, pero tarda mucho en cargar y, hasta que no se ha cargado, no permite cargar otras cosas.
Esto implica que, si JavaScript es lo primero que se carga en nuestra web, todo lo demás no cargará hasta que los scripts se hayan cargado totalmente. Es por ello que es más conveniente hacer que JavaScript sea lo último que cargue.
O cargar los JavaScript asíncronamente. Esa es otra opción.
Para hacer que los scripts de JavaScript sean lo último en cargar tienes muchas opciones. La más sencilla es utilizar un plugin como WP Deferred Javascripts.
Y para que carguen asíncronamente, también tienes plugins. En este caso, podríamos utilizar el Asynchronous Javascript.
Personalmente, prefiero hacer que estos códigos sean lo último en cargar en lugar de hacerlo cargar asíncronamente, pero tú puedes utilizar lo que más te convenga (simplemente, pruebas ambas opciones y valora qué opción te permite mejorar más la velocidad de carga).
Una última cosa: Aplazar la carga de scripts de JavaScript puede romper tu web. Hay ciertos scripts que se necesitan desde el primer momento para que la web funcione correctamente. Es decir, que no todos los scripts se pueden cargar al final.
Lo único que puedes hacer aquí es revisar que scripts cargas y determinar cuáles sí puedes mover y cuáles no. Si puedes mover 6 de 7, pues bueno es. Notarás una gran mejora en la velocidad de carga, aunque no puedas mover el 100% de tus scripts.
Usando CDNs
Ahora vamos con un paso mágico. Y es mágico porque mejora tu velocidad de carga a unos niveles espectaculares y no tiene prácticamente ninguna dificultad. De hecho, es súper fácil. Por eso es tan llamativo que tan poca gente lo aproveche. Se trata de usar un CDN.
Un CDN es una red de servidores en diferentes partes del mundo que guardan una copia de tu web. Cuando un usuario accede a tu web, el CDN le sirve el contenido que desea desde el servidor más cercano. De esta forma, la información viaja mucho más rápido a su destino.
Y, además, tiene la ventaja de que no sobrecargas el servidor, lo cual siempre está bien, claro.
Para empezar, un CDN como CloudFlare es más que suficiente. Configurarlo no tiene pérdida, así que no vamos a dedicarnos a explicarlo aquí. Entras, te registras, aplicas la configuración básica (no hagas más virguerías si no sabes qué estás haciendo) y ya está.
Lo más difícil es cambiar los DNS, y cambiar DNS es algo sencillísimo, así que imagínate lo fácil que es empezar a usar un CDN. Y te aseguro que el cambio se nota (y mucho).
Cargando imágenes con Lazy Loading
El siguiente paso es utilizar el Lazy Load para las imágenes. Este punto es VITAL. Y, de nuevo, se nota mucho a cambio de una carga de trabajo prácticamente nula (hoy en día, con instalar un plugin vas sobrado).
Para entender un poco el asunto: Cuando el navegador llega a una página, carga todo lo que hay en la página, tanto lo que está a la vista como lo que no está a la vista (deberías hacer scroll para que apareciera en pantalla).
Esto implica que, si tienes una guía de 3000 palabras y 10 imágenes, lo que hace el navegador es cargar esas 10 imágenes desde el primer momento. Tal y como el usuario aterriza en tu web. Y, como bien sabes, las imágenes son recursos que pesan mucho y tardan en cargar.
En cambio, si utilizas Lazy Loading, las imágenes no se cargan hasta que el usuario no llega a ellas. Así que, en el ejemplo anterior, si en la parte superior de la página sólo hay una imagen, esa será la única imagen que cargue el navegador. Las otras 9, las ignorará.
Esto puede hacer que, en lugar de cargar 300kb de imágenes, cargue 30. La reducción es de 10 a 1. Es mucho. No digamos ya si hablamos de imágenes que pesan más.
Con Lazy Load, la web carga rápido y, cuando el usuario hace scroll, la web sólo tiene que cargar las siguientes imágenes según van apareciendo. Y, como todos los demás elementos de la web ya están cargados, esto es algo que se hace muy rápidamente.
Así que Lazy Load es algo obligatorio. Para aplicarlo, basta con usar el plugin Image Lazy Load. Lo instalas, lo activas y te olvidas.
Comprimiendo CSS, JS y HTML
El siguiente paso es comprimir CSS, JS y HTML. Esto es algo que te permiten hacer la inmensa mayoría de plugins de caché, así que, si ya tienes uno instalado, lo único que tienes que hacer es configurar las opciones al respecto.
Es muy fácil y no te rompe nada de la web (o no debería), porque lo único que hace es eliminar los comentarios, los espacios en blanco y demás basurilla en los archivos con código.
Si quieres hacerlo manualmente, puedes utilizar alguna herramienta (como esta), pero yo te recomiendo hacerlo vía plugin. Si no, cada vez que se te actualice un plugin, tendrás que volver a comprimir los archivos.
No esperes un aumento de la velocidad de carga espectacular con este truquito, pero es muy fácil de aplicar y es tontería no aprovecharlo.
Combinando archivos
El mismo plugin de caché te servirá para combinar archivos. El problema de combinar archivos es que sí se pueden romper cosas, especialmente con los archivos de JavaScript.
En este caso, lo más recomendable es hacer un backup de la web antes de tocar nada, por si la web revienta.
Una vez lo hayamos hecho, activamos las opciones respectivas en el plugin. Una por una. Primero, HTML. Comprobamos si hemos roto algo. Luego, CSS. Comprobamos. Por último, JavaScript. Y comprobamos.
Así sabremos qué es lo que ha reventado la web (en caso de que algo la reviente).
No obstante, lo normal es que no se te rompa la web, así que tampoco te preocupes (además, si se rompe se puede arreglar fácilmente).
Comprimiendo imágenes
Este es un truco que deberías aplicar siempre, aunque sólo te servirá para las nuevas imágenes que utilices en tu web, no para las que ya hayas publicado (salvo que las vuelvas a subir, claro).
El truco consiste en comprimir las imágenes. Esto lo puedes hacer con muchas herramientas, como Smush.it o Kraken.io (a mí me gusta, particularmente, esta última).
También hay plugins que optimizan las imágenes al subirlas, pero, personalmente, prefiero hacerlo manualmente con herramientas de este tipo.
Hay que señalar que la reducción que puedes llegar a obtener con estas herramientas es bastante bestia. He visto imágenes que pasaban de pesar 1MB a 100KB o menos sin perder NADA de calidad. Así que hay que aprovechar.
Reduciendo imágenes
Al hilo de lo anterior, otro truco que podemos utilizar es el de la reducción de imágenes. No su compresión, no. Su reducción. Es decir, que una imagen de 1000×1000 píxeles pase a ser de, por ejemplo, 300×300.
Piensa que las imágenes que utilizamos en nuestras webs rara vez se muestran a un tamaño enorme. De hecho, salvo que tengas un eCommerce o una web donde la fotografía sea importante, al usuario le da completamente igual la imagen en gran tamaño.
Por tanto, lo mejor es que comprendas cuál es el tamaño más grande al que se muestran las imágenes en tu web y cada vez que subas una imagen redimensionarla para que se ajuste a ese tamaño.
Redimensionas la imagen, la pasas por Kraken.io y la subes. Puedes obtener una reducción de más del 90% del peso de la imagen.
No hace falta que te diga que, si publicas artículos con bastantes imágenes, esto es fundamental (como lo es LazyLoad).
Optimizando las bases de datos
Otra cosa que puedes hacer es optimizar las bases de datos que utilices en tu web. Generalmente, en tus webs (en WordPress) sólo utilizarás una base de datos. Pero, aunque sólo sea una, la puedes optimizar.
Optimizar una base de datos consiste, fundamentalmente, en eliminar registros innecesarios. Y no te recomiendo que te metas en más allá de eso porque puedes cargarte la web.
También es importante señalar que optimizar tu base de datos no va a cambiar muchísimo la velocidad de carga. De hecho, va a notarse muy poco. Pero, como en algunos de los casos anteriores, lo único que tienes que hacer es instalar un plugin, así que no cuesta nada hacerlo.
Comprobando los cambios
Y ya está. Con los trucos anteriores habrás mejorado notablemente la velocidad de carga de tu web y el WPO en general.
Ahora, lo que tienes que hacer es acudir a las herramientas que vimos al principio (GTMetrix y Google PageSpeed) y comprobar qué tal han ido los cambios y cuánto ha mejorado la velocidad de carga de tu web.
Como puedes ver, estos consejos para mejorar la velocidad de carga de tu web son muy fáciles de aplicar y te permitirán tener una web que vaya a la velocidad del rayo. Y, gracias a ello, podrás posicionar mejor… ¡Que es lo que importa!
4 comentarios
Hola, recomendas algun plugin para imagenes webp? porque yo uso en una web webp expres pero en otro wordpress me dice que no ha sido probado y no me deja instalarlo
y otro plugin que probe recien no me las convierte solamente genera el webp de nombre pero si la descargo es un jpg
Y vi que vos tampoco usas las webp las de este post son jpg, no te parece relevante?
gracias !
En la última ponencia de mi amigo Alvaro Fontela, recomienda imagify, que creo que es de los mismos que el plugin de cache Wp Rocket
Excelente guía, pienso guardarla para revisarla después, es una excelente información aplicable. Por cierto, ¿qué opinas sobre los plugins de caché de pago? ¿valen la pena?
Gracias por compartir
Rosana, no te puedo hablar en general, pero por ejemplo uno de los mejores plugins de cache que conozco el WP-Rocket es de pago y es muy superior a la mayoría de los gratuitos, también es mucho más complicado de configurar al 100 por 100. Saludos