+34 644 28 26 26
 

DIVI de Elegant Themes, WordPress y Google PageSpeed

ACTUALIZACIÓN: El dominio vapeo.top del  ejemplo, lo he reutilizado en otro proyecto, no obstante queda el testimonio y el ejemplo del vídeo tutorial (al final del post).

Últimas Optimizaciones conseguidas:

 

En primer lugar, optimizar DIVI de Elegant Themes, como con cualquier Theme de WordPress, es una tarea necesaria, además de importante y prioritaria. Para analizar la optimización, también utilizaremos dos herramientas gratuitas en línea:

Porque con ellas, veremos el antes y el después, mediante unos valores porcentuales, por lo tanto, cuanto más cerca del 100, mejor optimizada tendremos nuestra página web y por tanto, además de favorecernos en el posicionamiento de los principales buscadores, mejorará notablemente la velocidad de carga y sobre todo, la experiencia de usuario, que es lo que finalmente, más debe de importarnos, independientemente del tipo o temática del sitio web.

 

Optimizar DIVI pagespeed-bajo

Optimizar DIVI es Necesario

 

Para este tutorial, utilizaremos una instalación nueva de WordPress con el creador visual de diseños web “DIVI”, en el que cargaremos una plantilla de las que trae por defecto en su biblioteca “Agencia Creativa”.

En esta imagen, podemos ver los resultados obtenidos nada más instalar WordPress y DIVI con la plantilla mencionada.

Estos valores, especialmente relevantes, que nos muestran, mucho más allá de un ranking numérico a superar, son indicadores de una serie de características, que como resultado, toda página web bien diseñada y optimizada, debe tener finalmente superadas para una experiencia de usuario óptima.

Plugins Utilizados en la Optimización

 

Únicamente y por motivos de seguridad, ya tenemos instalados también WordFence Security y WPS Hide Login, dos plugins muy recomendables y especialmente relevantes.

Por lo tanto, descargamos e instalamos los siguientes tres plugins que además, también son gratuitos y por lo tanto disponible en WordPress, (click en la imagen para descargar) y una vez activados, finalmente procederemos a su configuración, que les mostraremos en forma de capturas de pantalla y además con un vídeo:

wp-super-cache

a) WP Super Cache Configuración

Una vez instalado el plugin de caché para Optimizar DIVI, accedemos a su configuración donde tenemos 7 pestañas:

Easy: Únicamente activamos Caching On.

Avanzado: Ver primera y segunda captura.

CDN: En este momento no lo estamos utilizando.

Contents: Lo dejamos como está.

Preload: Ver tercera captura.

Plugins: Dejamos todo como está.

Debug: No tocamos nada.

Captura 1 (avanzado)

Captura 2 (avanzado)

Captura 3 (preload)

autoptimize-wordpress-plugin

b) Autoptimize Configuración

Activamos las tres opciones HTML, JavaScript y CSS, y en esa misma pantalla de configuración, arriba a la derecha está el botón para activar las opciones Avanzadas, marcamos según la segunda captura Avanzadas Primer Paso y guardamos borrando la caché, después activamos y configuramos el tercer plugin: Above The Fold Optimization y regresamos, desactivamos según la tercera captura Avanzadas FINAL y guardamos nuevamente eliminando la caché par Optimizar DIVI.

Finalmente, en esta optimización que es la más alta que conseguí, en un principio carga la página con un salto sin estilos, se soluciona marcando la casilla ¿Combinar todos los CSS? baja un poco la puntuación final pero como resultado merece la pena y es muy recomendable activarla sobre todo, de cara a mejorar además la experiencia del usuario.

Captura 1 (principal)

Captura 2 (avanzadas)

Captura 3 (avanzadas FINAL)

above-the-fold

c) Above The Fold Opt. Configuración

En primer lugar pra Optimizar DIVI y una vez dentro de la configuración del plugin, nos encontramos con 5 pestañas en el siguiente orden:

Critical CSS: dejamos todo sin marcar.

CSS: ver primera captura.

JavaScript: Lazy Load Script habilitado.

Proxy: ver segunda captura.

Setting: admin bar habilitado.

Captura 1 (CSS)

Captura 2 (PROXY)

Características del Servidor

Esta parte es muy importante para conseguir resultados óptimos para Optimizar DIVI, en esta prueba, usamos un VPS compartido, con 4 cores y 4 GB de Ram, EasyApache 4, All PHP Options + OpCache, ubicación e IP en España, SSL Let’s Encrypt Authority X3,

Captura 1 (VPS settings)

 

Otras Páginas web en las que finalmente pudimos Optimizar DIVI

 

¡Conseguidos Resultados Excelentes!

En conclusión,como puedes ver en la imagen y en el siguiente vídeo, es posible Optimizar DIVI y finalmente los resultados son excelentes con esta configuración, ¡PERO! y sin embargo, pueden variar de una instalación a otra debido a una serie de varios factores y tendríamos que modificar tambien la configuración según la necesidad, los principales son entre otros:

  • Configuración del Servidor o Web Hosting
  • Diseño
  • Plugins
  • Optimización de Imágenes
  • Configuración de .htaccess

Vídeo de la Configuración para Optimizar DIVI

optimizar-divi-pagespeed-optimized
Pedro Luis Cuevas Villarrubia

Banner para adquirir DIVI, al comprar a través de esta imagen, recibo una comisión de afiliado en elegant Themes, lo cual te agradezco.
elegant-themes-banner

IMPORTANTE: No te olvides de tener una copia de seguridad antes de tocar nada.

Además, sería genial, si también, te animas a comentar tus opiniones y / o dudas,  y si además, finalmente lo probaste y conseguiste Optimizar DIVI, posteanos sobre todo, ¡tus resultados!.

Salu2, Pedro Luis Cuevas Villarrrubia

AsturWebs.ES

Pin It on Pinterest

Shares
Share This
Esta web utiliza cookies puedes ver aquí la política de cookies. Si continuas navegando estás aceptándola
A %d blogueros les gusta esto: