Existe una idea, infundada claro, en el ambiente general de los diseñadores y desarrolladores que utilizan WordPress de que Divi es un tema lento que añade mucho bloatware y código basura.

Cada vez que leo eso solo puedo pensar en lo mediocres que son estos personajes que no se toman el tiempo, siquiera, de investigar una buena estrategia de optimización aunque sea basada en plugins.

Divi no es lento y esta web es uno de los ejemplos con tiempos de carga de 2 segundos o menos.

Luego de un par de años de utilizar Divi como mi herramienta de trabajo principal, he desarrollado una estrategia de optimización que funciona a la perfección.

Aunque de vez en cuando necesita actualización, a día de hoy ha logrado que mis páginas carguen todas en menos de 2 segundos y me de buenos resultados incluso con el PageSpeed Insights.

Además, es una estrategia que cualquiera puede implementar por no hace falta tener conocimientos de programación. Literalmente es solo tener en cuenta algunas cosas y configurar algunos plugins.

Te la comparto porque te quiero mucho, vamos a darle!

Hosting

Empezamos con los básico.

El hosting donde almacenas tu website es literalmente tu casa o en este caso, tu carro. La rapidez con la que llegas a tus clientes no va a ser la misma si vas en un chevette destruido que en un ferrari.

¿Qué velocidad esperas conseguir si contratas un proveedor de hosting de mierda? (Hostgator, Godaddy, 1and1).

Lo mejor es que inviertas en un hosting que valga la pena y mis dos recomendaciones son Siteground y Kinsta. Ambos en rangos de precios diferentes pero con una calidad muy parecida (el segundo es mejor que el primero).

Siteground es el único hosting que recomiendo a mis clientes, es el que uso para esta web y todos mis proyectos personales. La velocidad, seguridad y, sobre todo, la atención al cliente son increíbles así que te recomiendo les eches un ojo.

(Los enlaces son links de afiliados, si contratas con ellos me ayudas mucho).

Optimización de imágenes

Este es el punto más descuidado por la mayoría de las personas que no se dedican a crear websites profesionalmente.

No es lo mismo mover 1000 kg a 1 kg. Es el mismo principio que se aplica aquí.

Puedes reducir todo el código y mejorar la forma de procesar la información pero si es demasiado pesada, no hay optimización que valga.

Claro no tenemos que preocuparnos porque el texto vaya a excederse de peso pero con las imágenes si debemos estar muy pendientes.

Mis recomendaciones son las siguientes:

1. Imágenes de menos de 100 Kb
2. Formato webg o jpg
3. Tamaños ajustados al sitio donde se va a usar

Lo que sucede casi siempre es que subimos las imágenes tal cual las conseguimos. Entonces en un espacio de 540px ponemos una imagen de 1920px en png. Lo que podría fácilmente pesar 50 Kb, realmente pesa 3mb y eso hace mucha diferencia en los tiempos de carga.

Para ajustar los tamaños de la imagen puedes usar Photoshop.

Guardas la imagen con optimización para web en formato jpg y seguramente vas a tener menos de 100 Kb o algo cercano a eso.

De vez en cuando, especialmente para imágenes con formato grande 16:9, es muy probable que te pases ese número y llegues a un peso de 300 - 500 Kb pero eso todavía es mucho mejor que 3 mb o más.

Para tener un extra de optimización, instalo un plugin llamado Optimus que hasta ahora es el que mejor me ha funcionado.

Instalamos y activamos. Si ya tenemos imágenes subidas las optimizamos en bulk dando clic en Herramientas > Optimizar todas las imágenes. Luego de esta acción, el plugin optimizará automáticamente cualquier imagen que subas a la web.

Caché

El caché es una herramienta muy importante porque permite a los usuarios no tener que recargar todo el contenido de tu web una y otra vez si no hay nada nuevo en ella.

Hay una cantidad de plugins que pueden hacer esto por ti pero gracias a esta guía de Kinsta sobre optimización web, descubrí Cache Enabler.

Funciona con solo activarlo, viene preconfigurado y no tiene tantas funciones innecesarias, por lo cual es muy ligero (muy importante si queremos mejorar la velocidad del sitio).

Reducir los request y minimizar el código

Esta es la parte más fastidiosa y requiere que seamos específicos porque los plugins que vamos a utilizar pueden mandar todo a la puta (aunque se arregla fácil, desactivando el plugin en cuestión).

Nuestras herramientas en esta ocasión serán: Autoptimize y Async Javascript (de la misma gente que creó Autoptimize)

Lo que haré será indicarte la forma correcta de configurar estos plugins para que le saques todo el provecho y tu web no se rompa en el camino.

Autoptimize:

Este es el plugin más agresivo de minificación de código y el que mejor funciona también pero, por esa misma razón es muy fácil que rompa nuestro sitio.

Yo lo he configurado de muchas maneras y esta es la que mejor ha funcionado hasta ahora, en términos de eficiencia y estabilidad. A fin de cuentas queremos que nuestra página cargue rápido pero no queremos estar preocupados con cada nueva actualización de Divi.

Nos vamos a la pestaña principal de autoptimize y chequeamos las siguientes opciones:

1. Opciones de Java Script
   • Unificar archivos JS
   • Incluir JS incrustados
   • Borramos todo lo que aparece en la barra de scripts a excluir de autoptimize
2. Opciones de CSS
   • Unificar archivos CSS
   • Incluir CSS incrustados
   • Borramos todo lo que aparece en la barra de CSS a excluir de autoptimize
3. Opciones de HTML
   • Optimizar el código HTML
4. Otras opciones
   • Marca todas las opciones

Pasamos a la pestaña de imágenes y chequeamos la opción de carga diferida de imágenes.

En la pestaña Extra vamos a marcar las siguientes casillas:

• Google Fonts: Combinar y cargar las fuentes asíncronamente con webfont.js
• Quitar cadenas de peticiones de recursos estáticos.
• Quitar emojis (opcional)

Guardamos y pasamos al siguiente plugin.

Async JavaScript

Async lo que va a hacer es decirle al navegador que cargue primero los recursos HTML y CSS, luego el JavaScript que es, usualmente, más complejo y pesado.

Configurarlo es super fácil.

Vamos a la pestaña de Async JavaScript en ajustes. Bajamos hasta la sección de ajustes rápidos y seleccionamos Defer. Hacemos clic en guardar.

Por último bajamos al final y en la pestaña Async JavaScript para plugins activamos la compatibilidad con Autoptimize, seleccionamos Defer, guardamos y listo.

Desactivar elementos que no usas de WordPress

WordPress es un framework creado principalmente para la creación de blogs. Su desarrollo y adopción durante los años es lo que lo ha transformado en el CMS más popular para cualquier tipo de web.

Eso no quita que tenga muchas cosas que quizás no vayamos a utilizar y en ese caso, para mejorar nuestros tiempos de carga, será mejor que las desactivemos.

Esto lo podemos lograr con un plugin llamado Asset CleanUp.

Esta herramienta es bastante poderosa así que vamos a dividir este capítulo en 2 partes: configuración general y configuración individual.

Configuración General

Lo 1ero que haremos es ir a la pestaña de Ajustes > Asset CleanUp.

Veremos un disclaimer indicándonos cómo funciona el plugin, bajamos y aceptamos la pestaña.

Seguimos a la siguiente pestaña, Plugin Usage y nos aseguramos que se encuentra marcado:

• Manage in the dashboard
• Hide WordPress Core Files From The Assets List?

Nos vamos a saltar unas cuantas pestañas: Test Mode, Optimize CSS, Optimize JavaScript y CDN. El CSS y JavaScript ya están siendo manejados por Autoptimize. En cuanto al CDN, nunca he usado esta funcionalidad porque no utilizo CDN pero, si en tu caso sí, quizás quieras echarle un ojo a esta sección.

Pasamos a la pestaña de Site-wide common unloads. Aquí debes decidir que deseas desactivar de tu web, por ejemplo: emojis, los Oembeds (la funcionalidad que permite a wordpress cargar los tweets directamente con la url por ejemplo), los dashicons, etc.

Como norma general siempre desactivo los dashicons, los comentarios de WordPress (siempre uso Disqus) y el Jquery Migrate que es completamente inútil en la actualidad.

En la pestaña de HTML Source CleanUp activo todas las pestañas con excepción del Remove Main RSS Feed Link?. Aunque es una funcionalidad que se ha perdido mucho actualmente, siempre es bueno mantener la url rss activa.

Saltamos la pestaña Local Fonts y vamos a Google Fonts, que son las que usamos normalmente con Divi porque vienen pre-integradas. Seleccionamos las siguientes casillas:

• Combine Multiple Requests Into Fewer Ones
  • Render-blocking (default)
• Preconnect?

Por último en la pestaña Disable XML-RPC, seleccionamos la opción disable XML-RPC completely. A menos que por alguna extraña razón estés utilizando Jetpack, esta funcionalidad no es necesaria en lo absoluto.

Guardamos y ya tenemos la configuración inicial de nuestro plugin.

Configuración Individual

Una vez configurado nuestro plugin de forma global, tenemos la opción de desactivar recursos en las páginas individuales.

La forma es muy sencilla, vamos al apartado de páginas > seleccionamos una página (ejemplo: la página que usas como Inicio).

Una vez en el editor nos desplazamos hacia abajo y veremos que hay un apartado de Asset CleanUp y veremos cuadros que representan recursos específicos que podemos desactivar para esa página individual.

Por ejemplo: si no queremos que Disqus se cargue en esta página (porque no hay comentarios allí), entonces clicamos en Unload on this page, actualizamos la página y listo.

De esta forma tenemos un mayor un control sobre los recursos que se cargan en cada página y aumentar los tiempos de carga al desactivar recursos innecesarios individualmente.

Optimizar el tamaño de la Base de Datos

Por último pero no menos importante se encuentra mantener nuestra base de datos siempre con el menor tamaño posible.

WordPress almacena muchos datos que en la mayoría de los casos son innecesarios como: revisiones de entradas, tablas de plugins eliminados, comentarios en spam, etc.

Lo que debemos hacer es asegurarnos que nuestra base de datos almacene la menor cantidad de basura posible y para ello vamos a utilizar un plugin llamado Optimize Database after Deleting Revisions.

Hay muchos plugins de optimización de base de datos por ahí pero este es el que más me gusta porque hace lo que promete y solo eso, es decir, no tiene más funcionalidades por lo que lo hace ligero.

Para configurarlo iremos a ajustes > Optimizar la base de datos y chequeamos las siguientes opciones:

• post
• page
• user_request
• wp_block
• project
• amn_mi-lite
• et_theme_builder
• et_template
• et_header_layout
• et_body_layout
• et_footer_layout
• Borrar elementos de la papelera
• Borrar elementos spammed
• Borrar las etiquetas sin usar
• Clear oEmbed cache
• Clear orphans
• Optimize InnoDB tables too

En programar ejecución podemos configurar para que se optimice la base de datos automáticamente. Yo te recomiendo que lo configures para una vez por semana.

Guardamos y hacemos clic en ir al optimizador. Allí podemos correr un análisis del peso de la base de datos y cuanto puede optimizar, lo corremos y el plugin queda listo.

Conclusión

Al finalizar todas estas optimizaciones y dependiendo de qué tan complejas sean tus construcciones, llegaremos al sweet spot: tiempos de carga de menos de 3 segundos.

¿Por qué esto importa tanto?

Te respondo con una pregunta: ¿Te gusta esperar mucho tiempo a que una página web se cargue? ¿O más bien te aburres rápido y te vas?

Exactamente, lo mismo le pasa al 99% de las personas, entonces es mejor cuidar estos pequeños pero importantes detalles.

El contenido es el rey, eso no quiere decir que otros aspectos no importen.