Aumenta la velocidad de carga de tu WordPress (Autoptimize)

Hoy en día es muy importante que un sitio web sea rápido y eficiente a la hora de mostrar el contenido. Si una web es lenta y tarda en cargar reduce el tiempo de permanencia de la visita y afecta negativamente al posicionamiento web. Así que para que no suceda en tu página web, aplica de manera fácil los diferentes métodos que vamos a ofrecer y aumenta la velocidad de carga de tu WordPress.

 

Consejos para aumentar el rendimiento

Lo primero que hay que revisar para saber si una web es lenta es la carga del servidor o si el servidor tiene los recursos mínimos necesarios para poder soportar la web. Para ello puedes mirar en el servidor (si tienes acceso por ssh) la carga con el comando “htop” o “top” en caso de Linux. Si no dispones de acceso deberás consultarlo a tu proveedor de hosting.

Partiendo de la base de que el servidor es el adecuado para el sitio web y que no está sobrecargado, tienes distintas herramientas de análisis web gratuitas que te permiten ver qué es lo que falla o qué es lo que más tarda.

 

Herramientas de análisis

Estas son algunas herramientas de análisis gratuitas que te escanean la página y te indican cómo mejorar el rendimiento:

Con el puedes identificar cuál es el problema de carga de tu web.

 

¿Cuáles son los problemas más comunes?

Los problemas más comunes que se suelen encontrar en las páginas web suelen ser:

  • Errores de carga de archivos: Estos errores suelen aparecer porque se están cargando archivos que no existen o hay un error de programación en alguno de ellos.
  • Cargas de URL de archivos externos: Muchas veces los servicios externos o librerías externas que se cargan para no ocupar espacio en el servidor pueden ralentizar la carga de la web, ya que dependen de la respuesta del servidor en el que se encuentran alojados. Hay que minimizar al máximo las consultas a archivos externos al servidor.
  • Tener muchas peticiones de archivos javascript y CSS: éste puede aparecer en la mayoría de casos y es debido a que se están cargando muchos archivos distintos de estilos o librerías de Javascript. Aunque estén en el mismo servidor es necesario minimizar la carga de éstos.
  • Evitar el bloqueo de página con Javascript: Este aviso indica que hay ciertos scripts que pueden cargar en el footer de tu web para evitar que no se muestre nada mientras se cargan dichos archivos.

Para poder aplicar estos últimos cambios existen varios plugins en WordPress que permiten de manera fácil solucionar los problemas.

 

Aumenta la velocidad de carga de tu WordPress (Autoptimize)

Uno de los plugins es Autoptimize. Un plugin para WordPress que permite “cachear” y minimizar la carga de archivos en la web. Puedes descargarlo de forma gratuita desde este enlace o bien instalarlo desde el repositorio de plugins de WordPress.

Una vez instalado ves a configurarlo:

Dirígete al menú lateral del admin de WordPress, a la sección “Ajustes>Autoptimize”. Allí observarás la siguiente pantalla:

Verás las siguientes opciones:

  • Opciones de HTML
  • Opciones de Javascript
  • Opciones de CSS
  • Opciones de la CDN

Es recomendable marcar los checkboxes de todos los que ofrece optimizar, tal y como se ve en la captura anterior.

En “Opciones CDN” incluirás la url base de tu CDN (en caso de que tengas alguno). El CDN es importante si la web tiene un target de público a nivel internacional.

En la parte superior derecha pulsa sobre el botón “Mostrar opciones Avanzadas” y se te desplegarán todas las opciones:

Sección Opciones HTML

  • ¿Optimizar el código HTML?: Esta opción debe estar marcada. Lo que hace es minimizar el HTML eliminando comentarios y espacios.
  • ¿Mantener comentarios HTML?: Esta opción no recomendamos que se marque ya que incluye texto en el HTML que no es necesario para la ejecución.

 

Sección Opciones Javascript

  • ¿Optimizar el código JavaScript?: Esta opción debe estar marcada. Lo que hace es minimizar el JavaScript eliminando comentarios y espacios, creando un “MIN”.
  • ¿Forzar Javascript en <head>?: No recomendamos marcar esta opción. Carga rápido el JavaScript, pudiendo solucionar potencialmente algunos errores de JS, pero bloqueando la carga de JS.
  • ¿Incluir JS incrustados?: Esta opción debe estar marcada ya que incluye en un mismo archivo todos los scripts “inline” que hayan podido añadir los programadores fuera de librerías.
  • Scripts a excluir de Autoptimize: Aquí debes añadir los scripts que deseas que no se incluyan en el caché ni en el archivo comprimido que éste crea. (“Una lista separada por comas de los scripts que desees excluir de la optimización, por ejemplo, ‘loquesea.js, otro.js’ (sin las comillas) para que los scripts no los agregue y minimize Autoptimize”).
  • ¿Añadir bloques try-catch?: Esta opción es recomendable ya que capturará los errores de programación de las funciones de Javascript y te indicará dichos errores por consola.

 

Sección Opciones CSS

  • ¿Optimizar el código CSS?: Esta opción debe estar marcada. Lo que hace es comprimir todos los CSS cargados en un solo archivo cacheado, lo que aumenta la velocidad de carga.
  • ¿Crear data:URIs de imágenes?: Es recomendable marcar esta opción. Incluye las imágenes de fondo pequeñas en el propio CSS en vez de ser descargadas separadas.
  • ¿Quitar las Google Fonts?: Si tu sito web no usa Google Fonts puedes marcar esta casilla.
  • ¿Incluir CSS incrustada?: Al igual que en la sección de JavaScript, esta opción lo que hace es comprimir en el archivo cacheado todos los CSS “inline” que pueda haber dentro del cuerpo de la web.
  • ¿Incrustar y retrasar CSS?: No recomendamos marcar esta opción a no ser que tengas un servidor muy acotado a los mínimos requeridos por WordPress, ya que lo que hace es cargar la web sin estilos, los cuales se cargan después.
  • ¿Combinar todos los CSS?: Esta opción debe estar marcada. Combina todas las librerías y CSS en un solo archivo para poder minimizar las peticiones CSS a 1.
  • CSS a excluir de Autoptimize: en esta sección debes escribir los CSS que no quieras que se cacheen o que se minimicen por incompatibilidades o por dependencias externas.

 

Otras opciones

  • ¿Guardar los scripts y el CSS unificados como ficheros estáticos?: Crea los archivos MIN en el caché. Por defecto los archivos JS y CSS se guardan como estáticos. Desactiva esta opción si tu servidor no realiza correctamente la compresión y la caducidad de los mismos.
  • ¿También optimizar para usuarios conectados?: Por defecto Autoptimize también está activo para los usuarios conectados. Desmarca esta opción para no optimizar cuando un usuario conectado, por ejemplo, usa un maquetador visual.

Finalmente debes guardar los cambios y vaciar caché para que se aplique todo correctamente. Para comprobar que funciona puedes volver a las herramientas de análisis y ver cómo disminuye el tiempo de carga de la web.

Ejemplo:

Sin Autoptimize:

Con Autoptimize:


Puedes observar el cambio significativo en el recuadro “Load Time”. Una web debe cargar por completo antes de los 4 segundos, ya que a partir de estos 4 segundos la probabilidad de rebote aumenta exponencialmente.

Tu sitio web depende de sus visitantes así que sigue los consejos que te hemos dado en este artículo y aumenta la velocidad de carga de tu WordPress. Ayudará a mejorar la experiencia de tus usuarios y a impulsar el posicionamiento de tu página web.r

 

¿Quieres aprender más?

  • hola@infoticstudio.com
  • 977 077 011
  • Edifici Baix Ebre Innova, oficina 4
  • 43894 - Camarles (Tarragona)
Ir arriba