Fecha: 09/04/2021

Optimizar velocidad de WordPress: Guía para principiantes

Optimizar tu página web es muy importante no solo porque te da una mejor puntuación SEO sino porque evitas que las personas se vayan de tu página web por tardar en cargar. Además que muchas personas utilizan su móvil para navegar por internet y normalmente una página tiene una peor puntuación en dispositivos móviles.

Por esto es importante hacer que tu página cargue rápido, incluso hay estadísticas que demuestran que la velocidad de una página influye mucho en el tráfico de una página web.

Así que en este artículo te voy a enseñar una optimización básica para tu página web en WordPress sin necesidad de tener conocimientos avanzados. Aún así para algunas cosas requerirá hacer cosas un poco avanzadas para una persona común.

Primero te voy a decir los plugins que usaremos para optimizar tu página web. Y luego te explicaré qué es lo que hace que una página cargue rápido o menos en distintas secciones. En cada sección te daré consejos para mejorar tu página.

Antes de empezar con el artículo decirte que para comprobar la velocidad lo haremos con páginas y extensiones del navegador especializadas en medir el rendimiento de una página web.

Estas páginas son:

Si quieres ver este tutorial en vídeo en breves pondré el enlace a Youtube.

Antes aclaro que lo que uso para verificar el rendimiento de WordPress es una extensión que trae por defecto los navegadores basados en Chromium (Google Chrome, Brave, etc...) llamado Lighthouse. Esta extensión usa el mismo sistema de Google Page Speed Insights por lo que es una buena forma de probar el rendimiento teniendo en cuenta que trabajaré con una página web en WordPress en local

Instalación de plugins para mejorar la velocidad de WordPress

Los plugins que usaremos serán los siguientes:

  • Autoptimize
  • WP Super Cache
  • Lazy Load

Autoptimize es un plugin que nos permitirá optimizar archivos externos de CSS y Javascript lo que aligerará mucho la carga de WordPress

WP Super Cache es un plugin que nos permite configurar la caché de la página web. Más adelante detallaré esto en mayor profundidad

Lazy Load es un plugin que nos permite cargar las imágenes a medida que vayamos viendo las imágenes. Es decir, las imágenes no cargarán hasta que estemos por encima. Si no las llegamos a ver nunca, nunca llegarán a cargar

Estas son los plugins que vamos a necesitar. Obviamente hay otros plugins que podemos usar para optimizar a nuestra página de WordPress pero he decidido usar estos por sus simplicidad.

 

Factores que intervienen en la velocidad de una página web

Para tener una página web que cargue rápido intervienen muchos factores que podemos influenciar para lograr una velocidad envidiable. En esta sección voy a hablar de tres categorías principales que son:

  • Hardware del servidor
  • Software del servidor
  • La página en sí

 

Hardware del servidor

Aquí no hay mucho de que hablar porque esto es algo tan simple como ampliar la capacidad en tu servidor en tu proveedor de hosting o cambiarte de proveedor si no te ofrece un servicio adecuado.

Esto es muy importante a tener en cuenta porque tu servidor puede estar creando cuello de botella y no soporte todo el tráfico que tengas de tu página. O que el internet que tiene asignado no es el mínimo necesario para proporcionar todo su rendimiento.

También puede pasar que tarde mucho en reaccionar porque alguien esté entrando en tu página desde un país y tu servidor se encuentre en la otra punta del mundo. Claro, por mucho que tenga un buen internet si para acceder a la infromación de tu página necesita acceder desde un servidor muy lejano habrá un tiempo mínimo que físicamente tiene que pasar para que carguen los archivos.

Esto contando el mejor de los casos, pero como los datos tienen que ir dirigiéndose nodo por nodo (routers) habrá un tiempo de carga mayor que el mínimo que se pueda conseguir físicamente.

La solución a esto es tener el servidor localizado físicamente en la zona donde se encuentre tu audiencia objetiva o tener la página en varios servidores a lo largo del globo.

 

Software del servidor

El software se refiere a los archivos y programas que esté usando el servidor para mostrar tu página. Si estás usando WordPress probablemente tengas un programa que se encarga de mostrar tu página llamado Apache. Este programa es el que se encarga de recibir las conexiones entrantes de otros usuarios y enviar una respuesta a esos usuarios enviando, por ejemplo, la página web.

Aquí no me voy a poner a explicar todos los detalles porque habrá muchas configuraciones que podremos realizar y requieren tener un conocimiento mínimo para hacerlos funcionar. Así que si tienes a un programador experto puedes pedir que te ayude con eso o usar un proveedor que te de esas características por defecto.

Una mejora que podemos usar en el servidor es la capacidad de recibir y enviar conexiones HTTPS/2. Estas conexiones son mucho más rápidas que una conexión HTTP normal (Una conexión HTTP es un protocolo de envío de datos entre ordenadores). Así que habilitando esto podremos tener mejores velocidades. Si quieres configurar por tu cuenta esto puedes entrar a este tutorial que te explica como habilitarlo.

Aunque si usas un hosting compartido tendrás que verificar con tu proveedor que tenga habilitado HTTP/2.

Otro cambio que podemos hacer a nivel de servidor es habilitar la caché. Esto es algo que podemos hacer a nivel de CMS pero hacerlo a nivel de servidor nos proporciona mayor seguridad y mayor eficiencia que en WordPress.

La caché en el mundo del diseño web consiste en generar unos archivos que se enviarán al usuario sin tener que generar los datos desde cero. Es decir, que si cargamos una página de WordPress sin tener ninguna caché habilitada generará todos los datos desde cero. En cambio si usamos la caché tendrá unos datos generados que nos lo enviará sin tener que generar esos datos.

Hay dos tipos de caché, la caché de servidor que realiza la funcionalidad anterior pero esos archivos están almacenados en el servidor y se envían a cada persona. En cambio el otro tipo es la caché del navegador.

La caché del navegador son archivos de la página que se guardan en el propio navegador.

Esto funciona de la siguiente manera. Al cargar la página por primera vez nos enviará los datos del servidor. Estos datos se guardarán en nuestro navegador en el espacio reservado para la caché. La próxima vez que cargue los datos el navegador en vez de pedirlo al servidor cargará la versión guardada localmente. Antes de cargar los archivos locales revisará si no han cambiado las dos versiones, esto lo hace haciendo una comprobación al servidor. Si ha cambiado volverá a cargar los archivos del servidor.

Si queremos añadir caché del lado del servidor tenemos que añadir el siguiente texto al archivo .htaccess.

<IfModule mod_expires.c>
  ExpiresActive on
  ExpiresDefault "access plus 1 week"
  ExpiresByType text/cache-manifest "access plus 90 seconds"
  ExpiresByType text/html "access plus 90 seconds"
  ExpiresByType text/xml "access plus 90 seconds"
  ExpiresByType application/xml "access plus 90 seconds"
  ExpiresByType application/json "access plus 90 seconds"
  ExpiresByType application/rss+xml "access plus 1 hour"
  ExpiresByType application/atom+xml "access plus 1 hour"
  ExpiresByType image/x-icon "access plus 1 week"
  ExpiresByType image/gif "access plus 1 month"
  ExpiresByType image/png "access plus 1 month"
  ExpiresByType image/jpeg "access plus 1 month"
  ExpiresByType video/ogg "access plus 1 month"
  ExpiresByType audio/ogg "access plus 1 month"
  ExpiresByType video/mp4 "access plus 1 month"
  ExpiresByType video/webm "access plus 1 month"
  ExpiresByType text/x-component "access plus 1 month"
  ExpiresByType application/x-font-ttf "access plus 1 month"
  ExpiresByType font/opentype "access plus 1 month"
  ExpiresByType application/x-font-woff "access plus 1 month"
  ExpiresByType application/font-woff2 "access plus 1 month"
  ExpiresByType image/svg+xml "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
  ExpiresByType text/css "access plus 1 week"
  ExpiresByType application/javascript "access plus 1 week"
  <IfModule mod_headers.c>
    Header append Cache-Control "public"
  </IfModule>
</IfModule>

Esto lo que hace es crear un tiempo para tener guardado en caché el tipo de archivo marcado según la cantidad de tiempo especificado en el archivo .htaccess

Voy último os voy a hablar de la configuración gzip que es una configuración que se añade al archivo .htaccess de nuestro servidor Apache. Esto lo que hace es que todos los archivos (o los archivos especificados en el .htaccess) se envíen al navegador comprimido en la extensión gzip.

Esta compresión puede reducir el tamaño de la página web en un 80% aproximadamente dependiendo del contenido de la página.

Para habilitarlo simplemente pega este ejemplo sacado de RJCardenas en tu archivo .htaccess

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

 

Configuración de WordPress

Ahora vayamos a configurar los plugins de WordPress para optimizar la velocidad de tu página web. A lo largo del tutorial os mostraré capturas de pantalla de todas las opciones que marco de cada plugin y de como puntúa lighthouse nuestra página web. En vuestro caso podéis usar GTMetrix o Google Page Speed Insights.

Lighthouse Movil Wordpress 1
Puntuación: 38. Esta puntuación está capturada antes de configurar el servidor apache para que WordPress cargue más rápido

 

WP Super Cache

Para configurar este plugin nos vamos a los ajustes de Wordpress y ahí pulsamos a WP Super Cache. Dentro del archivo de configuración tenemos varias pestañas que iremos entrando en cada una para configurar el plugin. Las pestañas que nos interesan son:

  • Sencillo
  • Avanzado

En la pestaña de sencillo activamos el almacenamiento en la caché y lo guardamos pulsando en "Actualizar estado".

Ahora nos vamos a la pestaña de avanzado y ahí marcamos las siguientes opciones:

  • Comprimir las páginas para servirlas más rápidamente a los visitantes. (Recomendado)

    Útil para reducir el tamaño descargado de la página

  • Reconstrucción de caché. Servir un archivo de supercaché a usuarios anónimos mientras se está generando un nuevo archivo.

    Proporcionar un archivo caché provisional para un usuario mientras se regeneran los archivos para almacenar en caché

  • Almacenar en la caché las cabeceras HTTP con contenido de página.

  • Borrar todos los archivos de caché cuando se publica o actualiza una entrada o una página.

    Sirve para actualizar la página cuando se añade contenido nuevo a la página de WordPress

  • Comprobaciones adicionales de la página de inicio.

  • Refrescar la página solo cuando haya nuevos comentarios.

    Para mostrar los nuevos comentarios sin tener que esperar a que se acabe el tiempo de vida de los archivos almacenados en la caché

Por último decir que esto son un ejemplo de configuración del plugin WP Super Cache tu página probablemente requerirá otro tipo de configuración y es posible que algunas opciones te den error en la página, así que te tocará experimentar un poco y ver que es lo que te funciona.

Lighthouse Movil Wordpress 2
Puntuación: 35. Puntuación al habilitar la caché. Como ves la puntuación ha empeorado, pero las sugerencias de lighthouse han cambiado por lo que tenemos que solucionar estas cosas con el siguiente plugin

 

Autoptimize

Para configurar este plugin nos vamos a ajustes y ahí pulsamos en Autoptimize. Ahora que estamos aquí en la pestaña "JS, CSS & HTML" pulsamos las siguientes opciones:

Opciones de Javascript

  • Unificar archivos JS
  • Añadir bloques try catch

Opciones de CSS

  • Unificar archivos CSS
  • Incluir CSS incrustados
  • Combinar todos los CSS

Opciones de HTML

  • Optimizar html

En la pestaña Extra selecciona las siguientes opciones:

  • Google Fonts → Combinación y enlazado aplazado en la cabecera (las fuentes cargan tarde pero no bloquean la presentación), incluye display:swap.

No te he explicado lo que hacen algunas opciones porque por su nombre y por las etiquetas de aclaración en el plugin no había necesidad de hacerlo. Ahora vayamos a ver que puntuación nos da Lighthouse al configurar este plugin

Lighthouse Movil Wordpress 3
Puntuación: 72

Como ves hemos mejorado enormemente la velocidad de la página usando solo estos dos plugins. Y no haciendo cosas avanzadas.

 

Eliminar plugins innecesarios

Otro factor importante para acelerar tu página en WordPress es eliminar todos los plugins innecesarios que tengas. Tienes que dejar solo lo absolutamente necesario.

Esto es porque cuando una página de WordPress carga tiene que generar contenido y para eso tiene que hacer distintas comprobaciones de base de datos y si tienes muchos plugins que no usas con datos ya obsoletos lo que harás es ralentizar la página porque WordPress tiene que hacer un esfuerzo en filtrar esos datos.

Además que tener plugins que no utilices y que no estén actualizados es jugársela bastante a posibles ataque de seguridad

 

Lazy load

Este es un plugin muy sencillo de configurar, simplemente lo instalamos y nos vamos a la configuración. En la pantalla de configuración selecciona todas las opciones que aparezcan que son las siguientes.

Ajustes de Lazy Load

Con este habremos mejorado nuestra puntuación en la página principal si tenemos muchas imágenes. Si no tenemos ninguna, o ninguna página o video incrustado no nos ayudará a aumentar la puntuación

Lighthouse Movil Wordpress 4
Puntuación: 78

 

Otras optimizaciones de WordPress

Otras optimizaciones que podemos hacer a nivel de WordPress son optimizar y reducir el tamaño de las imágenes en nuestra página web.

Por último os voy a mostrar de una captura una vez se hacen las optimizaciones de caché en el servidor Apache, añadir gzip y habilitar HTTP/2

Lighthouse Movil Wordpress 5
Puntuación: 93
Lighthouse Movil Wordpress Comparacion
Puntuación: 38.Primer test de velocidad para comparar con el último de arriba.

*Primer test de velocidad para comparar con el último de arriba.

Como ves hemos mejorado la puntuación enormemente.

Si quieres ver más formas de optimizar WordPress te recomiendo esta guía completa (inglés).

 

Conclusión

Ahora ya tienes lo básico para optimizar de gran manera la velocidad de tu página web en WordPress. Como ves es muy fácil mejorar la velocidad de una página web quitando un par de tecnicismos. No obstante, cada página es un mundo y requerirá distintas opciones por lo que tómate este artículo como una guía para crear tu propia optimización o contrata a un programador experto en estos temas.

Si te ha parecido útil el artículo compártelo en redes sociales y etiquétanos en Twitter que es donde nos encontramos principalmente.

Jefferson Valle

Soy el co-fundador de Indicsa, me especializo en diseño, programación y marketing. También llevo el canal de Youtube de Indicsa donde subo vídeos para cada artículo

Mi pasión es el marketing aunque disfruto de aprender sobre programación y diseño. Me encanta escribir sobre todo lo que voy descubriendo y aprendiendo. Me considero un estudiante de por vida y espero que lo que comparta te sirva de ayuda.

Si quieres estar en contacto conmigo puedes hacer en mi cuenta de Twitter: @rjeffvalle