La velocidad con la que carga tu página es muy importante, no solo por la experiencia del usuario que la visita, si no también para el posicionamiento de tu página en Google.
Hay muchas opciones y formas de mejorar la velocidad de una web, pero aquí te voy a explicar de manera clara, directa y sencilla, lo que tienes que hacer para mejorar la velocidad de una hecha con Wordpress en menos de 10 minutos.
Te invito a que pongas los resultados obtenidos en los comentarios, así como cualquier otro consejos que tú sepas, como por ejemplo otros plugins que creas que son más efectivos.
[toc]
Herramientas para ver la velocidad de tu página
Hay varias herramientas que te permiten ver la velocidad de tu página y que te muestran los tiempos de carga de cada una de sus partes, además de los errores que tiene.
Antes de ponerte a hacer nada en tu web, mira qué velocidad tiene en este momento y haz un segundo test cuando apliques todos los consejos que te voy a dar. Así me podrás contar en los comentarios cómo ha mejorado la velocidad de tu página.
Para hacer un test de velocidad a tu WordPress puedes usar:
PageSpeed Insights
Es la herramienta gratuita que pone Google a disposición de todos para poder mirar la velocidad de cualquier página web.
Muy útil para saber muchos de los fallos que tienes que cualquier página web tiene que corregir.
GTmetrix
De las más completas. Para mí, lo mejor de esta herramienta es su sección donde pone Waterfall, en la que puedes ver cada una de las llamadas (requests) que hace tu web para cargar todo su contenido y funcionalidades, además del tiempo de carga de cada una de ellas. Así puede localizar fácilmente qué elementos están ralentizando más tu página.
Pingdom
Parecida a la anterior, aunque con un diseño algo más sencillo.
Velocidad de mi página
He medido la velocidad de mi página antes de aplicar los consejos que te voy a dar aquí y éstos han sido los resultados.
Velocidad de mi página en dispositivos móviles
En dispositivos móviles en el momento previo de aplicar estos cambios que aquí te voy a explicar, mi página tiene una puntuación en PageSpeed de Google de solo 14 sobre 100, ¡lentísima!
Velocidad de mi página en ordenadores
En ordenadores la cosa mejora considerablemente y consigo una puntuación de 62 sobre 100.
Estos resultados son lamentables e indignos en un blog que te trata de ayudar a hacer uno… 😅
Al final del artículo te digo el cambio que he conseguido.
Trucos y consejos para mejorar la velocidad de tu página
Esto es algo que de lo que nadie te habla a la hora de mejorar la velocidad de tu página y que puede ser una de las soluciones más sencillas y eficientes: actualizar, actualizar y actualizar.
Actualiza WordPress
Es lo primero que tienes que hacer, comprueba qué versión tienes de WordPess en la sección de Escritorio (la tienes en el menú lateral derecho) y si hay disponible una nueva versión, ¡actualiza!
Actualiza tu tema
Normalmente los desarrolladores de temas de WordPress, sobre todo los de pago, los van actualizando constantemente, corrigen fallos y muchos de éstos tienen que ver con la velocidad de carga. Por lo que las últimas versiones siempre suelen ser más rápidas.
Sin ir más lejos, yo es lo primero que he hecho y según PageSpeed, la velocidad en dispositivos móviles me ha aumentado al doble.
Así que, vete a Apariencia/Temas y comprueba si puedes actualizar el tema que tienes activo.
Si el tema lo has comprado a un desarrollador, vete al sitio donde lo compraste y comprueba la versión disponible. Si hay un versión superior a la que tienes instalada, pero desde tu panel de WordPress no puedes actualizar, descarga el tema e instálalo de nuevo.
Actualiza la versión de PHP de tu hosting
Con Webempresa (es el hosting que yo siempre recomiendo) esto es muy sencillo, tan solo accede al cPanel de tu hosting y ahí selecciona Configurar PHP.
Selecciona tu dominio y actualiza a la última versión.
Si tienes otro servicio de hosting y no lo encuentras, abre un ticket para que te ayuden.
Actualiza y revisa tus plugins
Pásate por la sección de plugins de tu panel de administración de WordPress y actualiza todos los plugins que estés utilizando. Los que no uses, bórralos.
Los plugins son muchas veces, de los elementos que más ralentizan la velocidad de tu página, así que deja solo los que creas imprescindibles.
En mi caso, por ejemplo, me decidí por eliminar el plugin de SUMO que me mostraba botones para compartir mis entradas en redes sociales y ¡sorpresa!, mi puntuación en PageSpeed subió más de 30 puntos en móviles y unos 15 en ordenadores.
También he quitado Jetpack ya que es un plugin muy pesado y solo lo utilizaba para ver las estadísticas, algo que también puedo hacer en Google Analytics.
Otro plugin que es muy pesado y que te viene de serie es Akisment, para controlar el SPAM en tus comentarios. Te recomiendo cambiarlo por Antispam Bee, es más ligero y tiene un mejor rendimiento.
También ten cuidado de no tener varios plugins que hagan lo mismo. Esto a veces te puede pasar con plugins que tengan muchas funciones y puede ser que ni siquiera sepas las que tienes activadas en cada uno de ellos. Revisa eso bien.
Por ejemplo, el plugin de Yoast SEO tiene la opción de crear mapas del sitio XML (muy útil para que Google te indexe en sus resultados de búsqueda). En este caso si además tienes instalado el plugin Google XML Sitemaps, al final tendrás a dos plugins rastreándote la página y consumiendo recursos para hacer la misma función.
Optimiza tus imágenes
Ten en cuenta el tamaño que usa el tu plantilla de WordPress para mostrar imágenes.
Este blog está hecho con el tema Newsmax y las imágenes que ilustran los artículos como éste, tienen un tamaño de 750×460 píxeles.
Cada imagen que descargo de bancos de imágenes gratuitos las adapto con Photoshop a ese tamaño y las guardo en formato JPGE con resolución progresiva.
Lo mismo hago con las imágenes que están dentro de los artículos, siempre las adapto a una anchura máxima de 750 píxeles, porque es para lo que está preparado mi tema.
Si no sabes cómo hacerlo, aprende, hay muchos programas gratis de tratamiento de imágenes con los que puedes recortar y escalar tus imágenes.
Para saber el tamaño de imágenes que utiliza tu plantilla de WordPress puedes descargarte una de la demo que tenga y mirarlo en cualquier editor de imágenes.
Si no tienes esto en cuenta, las imágenes te tardarán más en cargar y estarás obligando a WordPress a escalar las imágenes, cada vez que las quiera mostrar.
Aparte de eso, también utilizo el optimizador de imágenes que me trae Webempresa. Si tu hosting no tiene uno, hay muchos plugins que te ayudan con esto, como por ejemplo Smush o Imagify.
Ten cuidado con los plugins de compresión de imágenes, los hay muy pesados y que al final te pueden hacer la página hasta más lenta, yo por eso prefiero hacerlo con la herramienta que me proporciona mi hosting.
Plugins de WordPress para mejorar la velocidad de tu página
Hay varios plugins en WordPress que te pueden ayudar a cargar tu página de forma más rápida, pero aquí tienes que tener cuidado y seleccionar bien, una vez más, no puedes instalar varios plugins que hagan la misma función, ya que esto puede generar incompatibilidades entre ellos.
El mejor plugin para mejorar la velocidad de tu sitio web es WP Rocket, pero es de pago. Su versión más barata (para un solo sitio web) vale 49$. No es mucho para lo que ofrece y más contando que tienes 1 años de soporte.
Pero hay otros gratis con los que podemos hacer la mayoría de cosas que hace WP Rocket.
WP Super Cache
Este es uno de los plugins gratis de caché más sencillos de configurar y más efectivos. Está desarrollado por Automaticc, empresa encargada del desarrollo y mantenimiento de WordPress.
Los plugins de caché ordenan tanto al servidor como a los navegadores guardar cierta información de tu página, para que ante próximas visitas no tengan que hacer tantas llamadas a tu servidor y mandar de nuevo toda la información que necesitan para mostrar todos los elementos de ésta.
Por contra, esto a veces te puede dar algunos quebraderos de cabeza a la hora de actualizar tu página, como por ejemplo que hagas un cambio y no lo veas por más que refresques la página. Pero para eso, tanto éste como la mayor parte de plugins de caché, tienen la opción de borrar la caché almacenada de forma manual.
Hay otros plugins de caché más completos como por ejemplo W3 Total Cache, pero ánimo si te decides por él y consigues rellenar sus 13 páginas de configuración.
Con WP Super Cache tan solo debes de seleccionar las opciones que ponen Recomendado. El resto de funciones, actívalas solo si sabes lo que haces.
Autoptimize
Autoptimze te corrige muchos de los fallos que te suele mostrar PageSpeed Insights, como por ejemplo los relacionados con limpiar, minimizar y combinar elementos de tu web.
Aunque también trabaja con la caché, es perfectamente compatible con WP Super Cache.
Async JavaScript
De los creadores de Autoptimize, Async JavaScript elimina los Recursos que Bloquean el Renderizado, uno de los fallos típicos que te suele dar PageSpeed Insights.
a3 Lazy Load
Este plugin es de los que más puede aumentar la velocidad de carga de tu página y su función es no cargar las imágenes de tu web hasta que el usuario llegue a ellas.
Por ejemplo, si tienes una imagen al final de un artículo, no se va a poner a cargarla si el lector está al principio de éste y ni siquiera ha llegado a esa parte.
CDN
Y todavía nos queda una de las cosas más importantes para mejorar la rapidez tu web, habilitar servidores CDN.
Si no tienes un CDN, tu página estará en el servidor del hosting que hayas contratado, por ejemplo en España y desde ahí la sirve a usuarios de todo el mundo, por ejemplo México, España, Filipinas…
Un CDN son servidores repartidos por todo el mundo con una copia de tu página y cuando un usuario accede a ella, se le sirve desde el servidor más cercano.
Por ejemplo, si tu usuario está en Argentina y uno de los servidores CDN está en México será ese el que le sirva tu página y no tu servidor en España que está mucho más lejos.
Esto, aunque parezca complejo y caro, lo tienes gratis con Cloudfare y es muy fácil de configurar.
Tan solo tienes que registrarte en Cloudfare, le das a Add a Site y ahí pones el dominio de tu página. En mi caso sería: comovivirdetublog.com.
Luego, seleccionas el plan que quieres (con el gratuito te valdrá) y aparecerá una tabla con dominios e información. Le das a continuar y ya te tendrás dos nuevos Nameservers.
Ahora tienes que ir a tu plan de hosting y cambiar los que hay por estos nuevos.
En el caso de Webempresa tan solo tienes que ir a Dominios Activos/Mis Dominios, en el menú superior y ahí le das a la rueda dentada que hay a la derecha del dominio deseado.
Abajo del todo te aparecerá la opción para cambiarlos. Borra los que hay y pon los nuevos.
Si no encuentras cómo se hace en tu plan de hosting , abre un ticket para que te ayuden.
AMP
Y por último os tengo que hablar de AMP, Acelarated Mobile Pages, algo que yo de momento no he puesto, pero que debes conocer.
AMP es una tecnología avalada e impulsada por Google, que optimiza las páginas web para dispositivos móviles. Básicamente lo que hace es que quita muchas de las funciones que tiene una página y las muestra en un formato HTML de toda la vida.
Esto, aparte de acelerar tu página en dispositivos móviles también hace que se posicione mucho mejor ya que Google da prioridad en sus resultados de búsqueda en dispositivos móviles, a las páginas que tienen esta tecnología integrada.
Si haces una búsqueda en Google en un móvil de cualquier término, las páginas desarrolladas con AMP se muestran con un símbolo de un rayo al lado.
El rayo que se ve en los resultados de búsqueda de Google en dispositivos móviles, indica que la página está desarrollada con AMP.
Y que Google le dé prioridad a estas páginas en dispositivos móviles es muy importante, más teniendo en cuenta que hoy día hay más visitas a través de móviles que de ordenadores. Para que te hagas un idea, en mi caso, el 65% de las visitas que tengo son a través de teléfonos.
Implantar esto en tu blog es muy sencillo, tan solo tienes que instalar el plugin oficial de AMP y en cuestión de horas tu página estará adaptada a esta tecnología. Pero eso sí, su aspecto seguramente pierda muchas o la mayoría de funcionalidades que tenía.
En mi caso, se dejó de mostrar el sidebar, que en móviles se mostraba debajo de los artículos, en la cabecera ya no tenía mi logo y aparecía un código, las cajas de comentarios desaparecieron, etc.
Resumen, implantarlo es sencillo, pero configurarlo para que quede a tu gusto puede ser algo más complicado. Hay otro plugin que no es el oficial pero que te da más opciones de configuración y que es el que yo te recomiendo, AMP for WP
Te hablaré de todo esto en un otro artículo próximamente. Suscríbete a mi newsletter para enterarte.
¿Cómo ha mejorado la velocidad de mi blog después de implementar estos consejos?
Y ahora, el resultado que ha obtenido mi blog después de seguir todas estas indicaciones que te he puesto…
En móviles
En móviles es muy complicado obtener una puntuación de 100, pero a partir de 50 tu página cargará sin ningún tipo de problema en la mayoría de smartphones actuales.
¡Mi puntuación ha sido de 85! Nada más y nada menos que 71 puntos más.
En ordenadores
¡Y en ordenadores casi rozo matrícula de honor, con 36 puntos más, llegando así a los 98!
¿Nada mal eh?
¿Y tú, has conseguido mejorar la velocidad de tu página web? ¡Deja tu experiencia en los comentarios y acepto consejos para poner la puntuación en 100!
1 comment
El problema principal mío antes era el hosting pasé por varios sombreros que intentaban todas sus funciones BlueHost para Hostgator, pero sin duda la mejor opción de calidad/precio es FastCompet: https://bit.ly/3mICLKZ
Al ser más reciente de lo que otros usan los procesadores más jóvenes en el mercado y creo que cuando es más joven, desea atraer a más clientes a un precio súper bajo (teniendo en cuenta las características que ofrece). Puedes mirar esto aquí https://bit.ly/3mICLKZ 🔥