Acelera tu WordPress en 30 minutos

acelera tu wordpress en 60 minutos

Te habrás dado cuenta que la mayoría de guías sobre cómo acelerar las páginas web de WordPress no son efectivas. Como quieres hacer que tu sitio web cargue rápido, sigues sus instrucciones, pero te das cuenta que tu página web WordPress sigue cargando lentamente.

Para mejorar los tiempos de carga de tu sitio web necesitas identificar y eliminar lo que no aporta en tu página web, lo que es innecesario y ralentiza, pero en esos tutoriales no te enseñan cómo hacerlo efectivamente.

Con nuestra guía Acelera tu WordPress en 30 minutos tendrás una página web rápida y con una mayor posibilidad de mejorar su SEO sin utilizar código de programación, sin ajustes de parámetros del servidor y sin gastarte un céntimo en comprar plugins caros.

Índice de contenidos

Acelera tu WordPress en 30 minutos - Introducción

En la actualidad, si eres un diseñador web WordPress, sabrás que las páginas en la que estás trabajando deben cargar rápido. Y mucho más si Google dice que la velocidad es un factor importante en relación al posicionamiento. Si tu página web carga lenta, Google la penalizará y no conseguirás los primeros puestos en los resultados de su buscador. Además, según ciertos estudios el 40% de los visitantes abandonan una página web que tarda más de 3 segundos en cargar.

Veamos algunas estadísticas proporcionadas por Google en 2017 respecto a la velocidad de un sitio web.

Si una página web carga entre:

  • 1s y 3s la probabilidad de rebote aumenta un 32%
  • 1s y 5s la probabilidad de rebote aumenta un 90%
  • 1s y 6s la probabilidad de rebote aumenta un 106%
  • 1s y 10s la probabilidad de rebote aumenta un 123%

¿A que es importante la velocidad para tu sitio web? En esta guía seguiremos un método basado en 3 pasos para conseguir tiempos de carga más rápidos.

  1. El primer paso será eliminar elementos innecesarios, plugins, temas, etc.
  2. Reduciremos el tamaño de nuestra pagina web actual.
  3. Y por último nos aseguraremos que nuestra página se muestra al usuario rápidamente empleando un plugin de optimización.

Además, aprenderemos a interpretar el rendimiento de nuestra web empleando un gráfico de cascada para:

  1. Ver cada elemento cargado por nuestra página web.
  2. Ver cuanto tiempo tarda en cargar cada elemento.
  3. Decidir que es lo que necesita ser ajustado.

Así pues, no malgastes tiempo buscando una alta puntuación y acaba con la lentitud de tu página web. Mediante nuestra breve guía Acelera tu WordPress en 30 minutos, invertirás el mínimo tiempo posible y obtendrás una pagina web rápida con poco esfuerzo.

 

Un consejo antes de comenzar

Antes de proceder con nuestra guía te recomendamos que optimices la base de datos de tu WordPress. Puedes seguir los pasos que detallamos en nuestro breve post Optimizar la base de datos de WordPress.

Primer paso, identificar y eliminar los elementos superfluos

Para este primer paso procederemos a eliminar los plugins innecesarios y los elementos de WordPress que no necesitamos. Vamos a identificarlos.

Primero desactivaremos cualquier plugin de optimización o de cache que tengamos instalado, ya que necesitamos conocer la velocidad real de carga de cada elemento en nuestra web mediante un gráfico de cascada. Para ello, una vez desactivada la cache de nuestro WordPress, vamos a la página web gtmetrix.com e introducimos la url de la página web a comprobar finalizando la dirección con una barra /.

En nuestra web de ejemplo comprobamos que el elemento más grande de nuestra página web tarda 7s en cargar y la página completa tarda 7.4s en ser cargada.

Vamos a mejorar estos tiempos de carga de tu WordPress. Para ello hacemos click en la pestaña ‘waterfall‘ y después hacemos scroll hacia abajo. Podemos observar un gráfico de cascada en el que se representan todos los elementos que carga nuestra página web secuencialmente.

Uno de los primeros elementos que vemos que tarda mucho en cargar (184.6ms) es la librería de bloques de Gutenberg.

/wp-includes/css/dist/block-library/style.min.css?ver=5.6.1

En nuestra página de prueba no estamos empleando el editor Gutenberg, por lo que tomamos nota para desactivar este elemento más tarde.

El siguiente elemento que vemos es

wp-content/plugins/revslider/public/assets/css/rs6.css?ver=6.3.9

El cual corresponde al plugin Revolution Slider, el cual es necesario en este proyecto

A continuación encontramos

wp-content/plugins/weglot/dist/css/front-css.css?ver=3.3.1

Que corresponde al plugin traductor Weglot, el cual también empleamos.

A continuación vemos que hay varios elementos que corresponden al uso del tema de WordPress GeneratePress y que en total suman unos 1270ms de tiempo de carga, un tiempo demasiado largo.

acelera tu wordpress en 30 minutos 5

En el caso de este proyecto, el cual se realizó completamente desde cero prescindiendo de la configuración del tema, podemos optar por cambiar el tema actual por uno en blanco el cual no cargará tantas hojas de estilo y acelerará nuestra página web. Se trata de investigar un poco y localizar un tema más sencillo, en nuestro caso vamos a elegir naked theme, pero existen multitud de temas que nos pueden servir como por ejemplo HTML5 Blank WordPress Theme, Genesis Framework, etc.

Una vez realizado el cambio de tema de WordPress y realizando unos mínimos ajustes en la página web (algún color cambiado o tamaño de letra) volvemos a ejecutar el test de velocidad en gtmetrix.com y comparamos los resultados.

acelera tu wordpress en 30 minutos 5

Solamente con el cambio del tema actual a uno que emplea menos hojas de estilos CSS hemos bajado la velocidad de carga 1.4 segundos, de 7 a 5.6 segundos para el elemento más grande. Hemos acelerado nuestra página web WordPress y su velocidad de carga para la página completa es ahora de 5.8 segundos.

En definitiva se trata de ir comprobando línea por línea en el gráfico de cascada los elementos que consideramos no son necesarios para nuestra web y tienen un tiempo de carga elevado. 

Vamos a proceder a suprimir el resto de elementos que hemos localizado en el gráfico y que no empleamos en nuestra página web para liberarla de trabajo.

Para ello instalaremos un plugin llamado Asset CleanUp: Page Speed Booster el cual nos permitirá realizar esa desactivación.

acelera tu wordpress en 30 minutos 3

Terminada la instalación del plugin nos dirigiremos a la página que queremos optimizar y haremos click en el enlace editar página de WordPress. Haremos scroll hacia abajo y veremos una pestaña que corresponde al plugin que acabamos de instalar. 

Ahora es cuestión de ir revisando uno a uno los elementos que está cargando WordPress en nuestra página e ir desactivando (en el selector de la izquierda) aquellos que anteriormente descubrimos eran innecesarios y tardaban mucho tiempo en cargar. No debemos olvidarnos de darle al botón actualizar (arriba a la derecha) una vez seleccionados los elementos a eliminar de la carga.

acelera tu wordpress en 30 minutos 4

A continuación, si queremos desactivar las hojas de estilo de Guttenberg, hemos de ir a los ajustes del plugin Asset CleanUp y en la pestaña Site Wide Common Unloads, activaremos el botón Disable Gutenberg CSS Block Library Site-Wide. Asímismo, como este sitio no emplea emojis ni tiene un blog seleccionaremos las opciones Disable Emojis Site-Wide y Disable Comment Reply Site-Wide, ya que no tiene sentido que se cargue al no tener blog.

acelera tu wordpress en 30 minutos 6

Volvemos a ejecutar el análisis de nuestra página web con gtmetrix.com y ahora obtenemos un tiempo de carga de 4.9s para el elemento más grande. Hemos vuelto a reducir el tiempo de carga en 0.7 segundos.

acelera tu wordpress en 30 minutos 7

Segundo paso, reducir el tamaño de nuestra página web

Los siguientes elementos que vamos a optimizar son nuestras imágenes. Según vemos en la siguiente captura de pantalla, en la página web tenemos archivos jpg que tardan hasta 1,89s en cargar, un tiempo que consideramos elevado y que podemos mejorar fácilmente. 

acelera tu wordpress en 30 minutos 13

Para reducir el tamaño de nuestras imágenes sin que pierdan calidad instalaremos el plugin WP-Optimize el cual incluye además gestión de cache y minimización de javascript y css, lo que nos será de gran utilidad en el paso final de este proceso. 

Una vez instalado y en la sección Medios -> Biblioteca de WordPress localizamos la primera imagen a comprimir, la seleccionamos y en la parte inferior de la ventana nos aparecen nuevas opciones relativas a la compresión de WP-Optimize

Si deslizamos el selector hasta el nivel de compresión que queremos y le damos al botón comprimir, nos mostrará un resumen con el tamaño que tenía la imagen antes, el tamaño al que ha quedado comprimida y el que hemos conseguido ahorrar.

acelera tu wordpress en 30 minutos 8
acelera tu wordpress en 30 minutos 9

En este caso hemos conseguido reducir la imagen en un 68.37%, una compresión excelente que permitirá que nuestra web vaya más fluída.

Después de comprimir cada una de las imágenes que hemos visto en el gráfico de cascada y deseemos reducir de tamaño, hemos de comprobar que nuestra web sigue viéndose bien y sin pérdida de calidad. 

En el caso de que no nos guste el resultado podremos volver atrás haciendo click en el botón restaurar. Para mejorar la calidad de la imagen moveremos hacia la derecha el ajuste deslizante (mejor calidad de imagen) y repetiremos el proceso.

Una vez mas ejecutamos el diagnóstico de gtmetrix.com para ver como avanza la optimización de velocidad de nuestra web y esta vez hemos reducido el tiempo de carga a 3.2s. Hemos conseguido reducir el tiempo de carga en otros 1.7 segundos. Genial!

acelera tu wordpress en 30 minutos 12

Tercer paso, caché y minimización

Vamos a asegurarnos que nuestra página web de ejemplo se muestra a nuestros visitantes de manera rápida. Para ello activaremos las características de cache y minificación del plugin Wp-Optimize como dijimos antes para ver si podemos mejorar aún más la velocidad de nuestro WordPress.

Así pues, nos vamos al Plugin Wp-Optimize y en la sección Caché activamos la opción Activar la caché de páginas

acelera tu wordpress en 30 minutos 10

Y en la sección Minimizar activaremos las opciones indicadas en el recuadro.

  • Activar la minimización
  • Procesar el HTML
  • Procesar los archivos JavaScript
  • Procesar los archivos CSS

Estos son los ajustes básicos y por defecto que trae el plugin. Por el momento no vamos a profundizar en ellos ya que queremos hacer una prueba inicial. Esta configuración avanzada daría para realizar un post completo.

acelera tu wordpress en 30 minutos 11

De nuevo nos dirigimos a gtmetrix.com para comprobar cómo afecta a la velocidad de carga activar la caché de páginas y la minimización de javascript y css y esta vez hemos reducido el tiempo de carga del elemento más grande a 2s, siendo el total de la página de 3,3 segundos.

Con estas acciones hemos conseguido reducir el tiempo de carga total de la página desde los 7.4s de tiempo inicial a sólo 3.3 segundos, un tiempo muy aceptable.

acelera tu wordpress en 30 minutos 13

Como podéis ver se pueden tomar más medidas para acelerar nuestra página web aún más. Ya hemos comprobado que la elección del tema es muy importante, pero disponer de un buen hosting es fundamental.

Un hosting de calidad tiene un TTFB bajo (time to first byte) y en caso del proyecto que nos ocupa es de 1.3s. Los hay con tiempos inferiores pero en esta guía hemos tratado de mejorar la velocidad de WordPress de una forma fácil y rápida con lo que tenemos y un par de plugins gratuitos.

Si quieres profundizar en el tema y mejorar aún más los tiempos de carga de tu página web, te recomiendo nuestro artículo ¿Qué son las Core Web Vitals de Google?

Y esto ha sido todo, esperamos que nuestra guía Acelera tu WordPress en 30 minutos os haya sido de utilidad y consigáis tener una página web rápida con poco esfuerzo.

¿Te ha resultado útil este artículo? Compártelo

El Estudio de Andrés | Diseño Web Zaragoza