AdrianGuerrero
Épsilon
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Hoy comienzo lo que espero que sea una pequeña serie de artículos en relación a la optimización de Divi, no lo sé aún con total certeza pero es posible que esta idea de paso a un nuevo proyecto que si tengo tiempo estaré encantado de desarrollar y/o colaborar, todo puede ser hasta el momento. Como ya sabéis (los que me conocéis) soy una persona bastante activa en redes sociales y como ya dije en un artículo pasado, aunque parezca que pase tiempo alejado de ellas, las sigo de cerca como si fuera Batman jaja. Llevo un tiempo, viendo grandes detractores y defensores de varios themes y builders y parece ser que esto se acentúa aún más cuando entra al juego Divi y su builder.
Ya he declarado alguna que otra vez, que yo respeto a todos aquellos usuarios que usan Divi, porque si está a la venta es para comprarlo y usarlo. No obstante como he declarado también muchas veces, yo no uso Divi, porque lo veo un theme y builder muy limitado (algo que sigo manteniendo). Algo que está muy candente es todo lo relacionado con Divi y su optimización, aquí es donde viene controversia. Yo no tengo pelos en la lengua y al igual que digo que Divi está para comprarse y ser usado, también digo que no lo considero el mejor tema para WordPress y el usuario que así lo considera una de dos, o bien sus conocimientos son esenciales o sólo decirle que “no hay más ciego que aquel que no quiere ver”.
Por otro lado, están las comisiones de Elegant Themes que son bastante generosas por lo que es una de las cosas por las que se habla tan bien de Divi y se recomienda, porque como diría un buen catalán “la pela es la pela” (con todos los respetos del mundo por mi parte hacia los catalanes). Divi ha apostado por hacer un constructor muy sencillo de cara al usuario final y ello conlleva algunos malos planteamientos como un exceso de JS y CSS.
Es de un tema del que he hablado ya muchísimas veces en este blog, pero parece ser que la gente sigue haciendo oídos sordos a un tema tan importante como es el software y máquina donde se aloja la página web. Ya sabéis que me decanto por una configuración de LiteSpeed Web Server, LsCache, http2 (y QUIC si es posible) y para las bases de datos MariaDB. Como he dicho ya no sé cuántas veces, para mí esto es importante y es que no es lo mismo trabajar con Apache, con Nginx o LiteSpeed (el servidor web más rápido y seguro del mercado). Cada vez más es mayor el número de empresas que ofrecen LiteSpeed Web Server, bajo mi opinión es el futuro del mundillo del hosting.
Voy a entrar en materia que me lío y no puede ser. He empezado alojando la web en Host Proton no por nada en especial Host Proton está primero, tan sólo porque yo actualmente alojo allí. Es cierto que me gusta cómo va, pero posiblemente más adelante lleve Divi a otros proveedores de hosting, tales como Nicalia o Host Fusion (todo puede ser) y estoy más que seguro de que las empresas de hosting que recomendé los artículos pasados van a estar a la altura en todos los sentidos ¿Qué os parece esta idea? si tienes una empresa de hosting y quieres saber si “da el callo” ponte en contacto conmigo, es posible que consiga las mismas optimizaciones en tu hosting.
¿Qué tipo de proyecto he montado con Divi en WordPress?
Mucha gente me dice que si sacrifico mucho el diseño de la página web para conseguir los niveles de optimización que conseguimos, pero cuando estas personas ven nuestros proyectos pueden ver que en ningún caso he sacrificado el diseño para conseguir un extra en la optimización jaja no sé qué clase de profesional o enfermo mental si esto fuese así. Como ya sé que más de uno me saldrá por estos derroteros, decirle que en esta web de pruebas con Divi, he instalado varias cosas;Better Font Awesome
Gravity Forms
Cloudflare
LiteSpeed Cache
Redirection
Regenerate Thumbnails
Slider Revolution
SVG Support
TinyMCE Advanced
WooCommerce
Yoast SEO
Además he estado usando la versión de 3.0.87. No sé si es la última o no, ya que tengo que decir que me lo ha dejado un buen amigo para realizar este experimento. Si volvéis a la lista de plugins seguro que os resulta chocante que haya instalado Slider Revolution siendo que Divi trae un módulo para sliders, pero que al final a mí me limita bastante así que he decidido implementar a Divi Revolution Slider.
Optimizando Divi para WordPress
Como he dicho, en el ejemplo uso la versión de Divi 3.0.87. En cPanel lo único que he hecho ha sido ajustar la versión de PHP a la versión 7.0 y a través de Let’s Encrypt solicitar el certificado SSL para mi dominio. He instalado WordPress por medio del instalado Softaculous así que no me he calentado mucho la cabeza en este aspecto. El dominio sobre el que estoy trabajando es adriang.info.
Al entrar he configurado un poco lo que es la página principal de WordPress, he cambiado la zona horaria y he instalado Divi. He instalado todos los plugins, he configurado WooCommerce de una forma muy básica para este ejemplo y he creado tres productos con distintas fotografías, para buscar un escenario real en este ejemplo.
He creado el slider en Revolution Slider, con fotografías de mi propia cosecha que he optimizado previamente antes de subir a WordPress. Obviamente sé que hay muchos plugins, para optimizar fotografías pero prefiero hacerlo de forma manual, aunque más adelante entraré un poco más en detalle al tema de las imágenes.
En la página principal, he seleccionado una fila de ancho completo y me he limitado a pegar el shortcode generado por Revolution Slider. Luego he creado una segunda fila donde he colocado los 3 productos que tengo creados y finalmente he creado otra fila con algunos iconos de interés para motivar la compra. Es un ejemplo de un ecommerce sencillo pero que es perfectamente válido para un escenario real de una página web.
El plugin de Cloudflare sólo lo he instalado para controlar la caché de la CDN sin salir de WordPress. Host Proton además de darme Cloudflare en cPanel, me están ofreciendo Railgun y la verdad que me está gustando muchísimo los resultados obtenidos con este complemento que me están dando de forma gratuita y que parece que está valorado en una pasta mensual. Aunque tengo pendiente probar Argo en Cloudflare.
A continuación voy a dejar imágenes de la configuración aplicada en el plugin de LsCache, que tan sólo van a poder usar usuarios que trabajan ya no sólo de LiteSpeed Web Server, sino que también deberán tener activo como mínimo LsCache… lo digo porque he visto de todo por ahí jajaja.
En la primera pestaña, habilito la caché de LiteSpeed.
En la segunda pestaña (Caché) dejo todo por defecto, excepto el último punto en el cual habilito la caché del navegador.
En la tercera pestaña (Purgar) no he tocado nada, así como tampoco en la pestaña de Excluir, por lo que paso directamente a la pestaña 5 Optimizar. Aquí van a surgir bastante controversias, pero al final esta es la mejor configuración que he conseguido para que Divi funcione bien y esté lo más optimizado posible.
En la pestaña 6 lo que he hecho es ajustar algunos parámetros para que Divi cargue lo más rápido posible. Por ejemplo aquí tendría en cuenta si usas fuentes de Google, para quitarlo o no. Yo estoy usando una Open Sans y funciona perfectamente.
En la pestaña 7 (medios) bueno… para gustos colores, a mi es que no me gusta nada el efecto lazy load o la carga retrasada de medios, pero quien lo quiera activar libre es de ello.
Hasta aquí la configuración de LiteSpeed Cache para WordPress. Pero si me fijo en el menú de mi panel de control de WordPress, en el ítem de LiteSpeed Caché ahora también hay una opción que se llama “Optimización de imágenes” es por eso, que he dicho antes que más adelante iba a detallar más el punto de la optimización de imágenes.
¡Me mola esto que ha hecho LiteSpeed Web Server! El hecho de que desde el servidor se optimicen las imágenes en un pack completo. Para aquella persona que esté imaginando que el servidor se vaya a saturar, decirle que NO, porque deja mandar un pack de imágenes cada 24 horas parece ser (tendré que investigar más sobre esto para enterarme mejor).
El Crawler de LiteSpeed, lo que hace es generar un mapa de recorrido en la web, que hará que cada cierto tiempo pase por la web para ver si está todo optimizado o debe pararse en algún sitio nuevo que encuentra.
Cloudflare en WordPress
He instalado el plugin de Cloudflare para tener un mejor acceso a la plataforma a través de WordPress y esto me permite no tener que estar entrando si quiero limpiar le caché. Para quien crea que Cloudflare hace milagros, como dicen aquí en España “Los milagros a Lourdes”. Básicamente lo que va a hacer, es que cuando la web se analice desde una plataforma como www.webpagetest.org la comprobación que hace sobre CDN será buena, pero vamos que yo he hecho pruebas y los resultados son prácticamente los mismos por no decir que son un calco.
Como siempre digo, un desarrollo web cuidado desde el principio hace que una página web de ese punto de más que al final todo usuario busca… pero que a veces es demasiado tarde ya. Por otro lado decir, que he aplicado una configuración a la instalación de WordPress similar a la que aplicamos a cada uno de nuestros clientes (esta algo más sencilla porque era para pruebas). Como ya es costumbre en nosotros tanto aquí el Bull como en VS, ciclamos la instalación de WordPress y más cuando pasamos a trabajar con WordPress como un “marco de trabajo” jajaja por lo que solucionamos bugs nativos de seguridad así como también eliminamos todo aquello que es innecesario. Ya os digo, esta instalación no la he “pinchado demasiado para ciclarla” pero os invito a ver un poco la estructura de la web.
Voy a dejar unas capturas de las métricas conseguidas después de realizar este experimento. Ya os digo que estoy usando el plugin de LiteSpeed Caché por lo que sólo los usuarios de LiteSpeed van a sacar el máximo provecho a este plugin. Además, como he dicho antes… también deberá estar cargada la extensión en el servidor de LsCache, porque también he visto empresas de hosting que utilizan LiteSpeed y luego no tienen activado LsCache. Si esto es así, al instalar el plugin, lanzará un mensaje indicando que la extensión LSCache patatin, patatan y que no está instalada en el servidor. Así que vuelvo a hacer hincapié en las empresas de hosting que os aconsejé en un artículo pasado… sé que no os van a fallar o por lo menos a mí y a las personas que allí he mandado no nos han fallado nunca. Después de leer este artículo, te puedo decir que si quieres decir que vas de mi parte a las empresas que aconsejo, libre eres de ello (a mí no me va a molestar) pero como he predicado en otros artículos no voy a poner enlaces de afiliación ni nada.
Este caso de Divi se puede extrapolar a un escenario real, ya que tiene instalado Woocommerce, la web cuenta con sliders (sé que os molan mazo), también he creado una página de contacto con un formulario hecho con Gravity Form y me creado un sub-header personalizado donde se alojará el título de cada página, mira la imagen que dejo aquí (la zona roja).
Hasta aquí mi artículo de hoy. También voy a dejar aquí abajo unos enlaces que también aconsejo leer para llegar a una buena optimización de Divi.
Fotografía de producto para webs una parte importante del ecommerce
Cómo optimizar imágenes para sitios web
¿Qué está pasando en el mundo del hosting? ¡La verdad sobre las mejores empresas de hosting!
Un abrazo a todos tunantes y si tenéis alguna pregunta ya sabéis que soy un tío al que le gusta la docencia… pero por favor si podéis venir con una base mínima mucho mejor ¡Cuidado! no digo que seáis expertos, ni gurús de WordPress, pero hasta el día de hoy “las casas se empiezan por los cimientos, no por el tejado“. Yo no soy ningún gurú, ni mucho menos un experto… o por lo menos yo no me veo así, si me tuviera que definir con una frase diría que “soy un profesional, pero antes de ser profesional ya era un enfermo” jajaja. Ya sabéis estoy accesible a través de redes sociales o si te es más cómodo déjame un comentario, suelo contestar a todos ¡Abrazos tunantes gambiteros y ser buenos!
Ya he declarado alguna que otra vez, que yo respeto a todos aquellos usuarios que usan Divi, porque si está a la venta es para comprarlo y usarlo. No obstante como he declarado también muchas veces, yo no uso Divi, porque lo veo un theme y builder muy limitado (algo que sigo manteniendo). Algo que está muy candente es todo lo relacionado con Divi y su optimización, aquí es donde viene controversia. Yo no tengo pelos en la lengua y al igual que digo que Divi está para comprarse y ser usado, también digo que no lo considero el mejor tema para WordPress y el usuario que así lo considera una de dos, o bien sus conocimientos son esenciales o sólo decirle que “no hay más ciego que aquel que no quiere ver”.
Por otro lado, están las comisiones de Elegant Themes que son bastante generosas por lo que es una de las cosas por las que se habla tan bien de Divi y se recomienda, porque como diría un buen catalán “la pela es la pela” (con todos los respetos del mundo por mi parte hacia los catalanes). Divi ha apostado por hacer un constructor muy sencillo de cara al usuario final y ello conlleva algunos malos planteamientos como un exceso de JS y CSS.
Es de un tema del que he hablado ya muchísimas veces en este blog, pero parece ser que la gente sigue haciendo oídos sordos a un tema tan importante como es el software y máquina donde se aloja la página web. Ya sabéis que me decanto por una configuración de LiteSpeed Web Server, LsCache, http2 (y QUIC si es posible) y para las bases de datos MariaDB. Como he dicho ya no sé cuántas veces, para mí esto es importante y es que no es lo mismo trabajar con Apache, con Nginx o LiteSpeed (el servidor web más rápido y seguro del mercado). Cada vez más es mayor el número de empresas que ofrecen LiteSpeed Web Server, bajo mi opinión es el futuro del mundillo del hosting.
Voy a entrar en materia que me lío y no puede ser. He empezado alojando la web en Host Proton no por nada en especial Host Proton está primero, tan sólo porque yo actualmente alojo allí. Es cierto que me gusta cómo va, pero posiblemente más adelante lleve Divi a otros proveedores de hosting, tales como Nicalia o Host Fusion (todo puede ser) y estoy más que seguro de que las empresas de hosting que recomendé los artículos pasados van a estar a la altura en todos los sentidos ¿Qué os parece esta idea? si tienes una empresa de hosting y quieres saber si “da el callo” ponte en contacto conmigo, es posible que consiga las mismas optimizaciones en tu hosting.
¿Qué tipo de proyecto he montado con Divi en WordPress?
Mucha gente me dice que si sacrifico mucho el diseño de la página web para conseguir los niveles de optimización que conseguimos, pero cuando estas personas ven nuestros proyectos pueden ver que en ningún caso he sacrificado el diseño para conseguir un extra en la optimización jaja no sé qué clase de profesional o enfermo mental si esto fuese así. Como ya sé que más de uno me saldrá por estos derroteros, decirle que en esta web de pruebas con Divi, he instalado varias cosas;Better Font Awesome
Gravity Forms
Cloudflare
LiteSpeed Cache
Redirection
Regenerate Thumbnails
Slider Revolution
SVG Support
TinyMCE Advanced
WooCommerce
Yoast SEO
Además he estado usando la versión de 3.0.87. No sé si es la última o no, ya que tengo que decir que me lo ha dejado un buen amigo para realizar este experimento. Si volvéis a la lista de plugins seguro que os resulta chocante que haya instalado Slider Revolution siendo que Divi trae un módulo para sliders, pero que al final a mí me limita bastante así que he decidido implementar a Divi Revolution Slider.
Optimizando Divi para WordPress
Como he dicho, en el ejemplo uso la versión de Divi 3.0.87. En cPanel lo único que he hecho ha sido ajustar la versión de PHP a la versión 7.0 y a través de Let’s Encrypt solicitar el certificado SSL para mi dominio. He instalado WordPress por medio del instalado Softaculous así que no me he calentado mucho la cabeza en este aspecto. El dominio sobre el que estoy trabajando es adriang.info.
Al entrar he configurado un poco lo que es la página principal de WordPress, he cambiado la zona horaria y he instalado Divi. He instalado todos los plugins, he configurado WooCommerce de una forma muy básica para este ejemplo y he creado tres productos con distintas fotografías, para buscar un escenario real en este ejemplo.
He creado el slider en Revolution Slider, con fotografías de mi propia cosecha que he optimizado previamente antes de subir a WordPress. Obviamente sé que hay muchos plugins, para optimizar fotografías pero prefiero hacerlo de forma manual, aunque más adelante entraré un poco más en detalle al tema de las imágenes.
En la página principal, he seleccionado una fila de ancho completo y me he limitado a pegar el shortcode generado por Revolution Slider. Luego he creado una segunda fila donde he colocado los 3 productos que tengo creados y finalmente he creado otra fila con algunos iconos de interés para motivar la compra. Es un ejemplo de un ecommerce sencillo pero que es perfectamente válido para un escenario real de una página web.
El plugin de Cloudflare sólo lo he instalado para controlar la caché de la CDN sin salir de WordPress. Host Proton además de darme Cloudflare en cPanel, me están ofreciendo Railgun y la verdad que me está gustando muchísimo los resultados obtenidos con este complemento que me están dando de forma gratuita y que parece que está valorado en una pasta mensual. Aunque tengo pendiente probar Argo en Cloudflare.
A continuación voy a dejar imágenes de la configuración aplicada en el plugin de LsCache, que tan sólo van a poder usar usuarios que trabajan ya no sólo de LiteSpeed Web Server, sino que también deberán tener activo como mínimo LsCache… lo digo porque he visto de todo por ahí jajaja.
En la primera pestaña, habilito la caché de LiteSpeed.
En la segunda pestaña (Caché) dejo todo por defecto, excepto el último punto en el cual habilito la caché del navegador.
En la tercera pestaña (Purgar) no he tocado nada, así como tampoco en la pestaña de Excluir, por lo que paso directamente a la pestaña 5 Optimizar. Aquí van a surgir bastante controversias, pero al final esta es la mejor configuración que he conseguido para que Divi funcione bien y esté lo más optimizado posible.
En la pestaña 6 lo que he hecho es ajustar algunos parámetros para que Divi cargue lo más rápido posible. Por ejemplo aquí tendría en cuenta si usas fuentes de Google, para quitarlo o no. Yo estoy usando una Open Sans y funciona perfectamente.
En la pestaña 7 (medios) bueno… para gustos colores, a mi es que no me gusta nada el efecto lazy load o la carga retrasada de medios, pero quien lo quiera activar libre es de ello.
Hasta aquí la configuración de LiteSpeed Cache para WordPress. Pero si me fijo en el menú de mi panel de control de WordPress, en el ítem de LiteSpeed Caché ahora también hay una opción que se llama “Optimización de imágenes” es por eso, que he dicho antes que más adelante iba a detallar más el punto de la optimización de imágenes.
¡Me mola esto que ha hecho LiteSpeed Web Server! El hecho de que desde el servidor se optimicen las imágenes en un pack completo. Para aquella persona que esté imaginando que el servidor se vaya a saturar, decirle que NO, porque deja mandar un pack de imágenes cada 24 horas parece ser (tendré que investigar más sobre esto para enterarme mejor).
El Crawler de LiteSpeed, lo que hace es generar un mapa de recorrido en la web, que hará que cada cierto tiempo pase por la web para ver si está todo optimizado o debe pararse en algún sitio nuevo que encuentra.
Cloudflare en WordPress
He instalado el plugin de Cloudflare para tener un mejor acceso a la plataforma a través de WordPress y esto me permite no tener que estar entrando si quiero limpiar le caché. Para quien crea que Cloudflare hace milagros, como dicen aquí en España “Los milagros a Lourdes”. Básicamente lo que va a hacer, es que cuando la web se analice desde una plataforma como www.webpagetest.org la comprobación que hace sobre CDN será buena, pero vamos que yo he hecho pruebas y los resultados son prácticamente los mismos por no decir que son un calco.
Como siempre digo, un desarrollo web cuidado desde el principio hace que una página web de ese punto de más que al final todo usuario busca… pero que a veces es demasiado tarde ya. Por otro lado decir, que he aplicado una configuración a la instalación de WordPress similar a la que aplicamos a cada uno de nuestros clientes (esta algo más sencilla porque era para pruebas). Como ya es costumbre en nosotros tanto aquí el Bull como en VS, ciclamos la instalación de WordPress y más cuando pasamos a trabajar con WordPress como un “marco de trabajo” jajaja por lo que solucionamos bugs nativos de seguridad así como también eliminamos todo aquello que es innecesario. Ya os digo, esta instalación no la he “pinchado demasiado para ciclarla” pero os invito a ver un poco la estructura de la web.
Voy a dejar unas capturas de las métricas conseguidas después de realizar este experimento. Ya os digo que estoy usando el plugin de LiteSpeed Caché por lo que sólo los usuarios de LiteSpeed van a sacar el máximo provecho a este plugin. Además, como he dicho antes… también deberá estar cargada la extensión en el servidor de LsCache, porque también he visto empresas de hosting que utilizan LiteSpeed y luego no tienen activado LsCache. Si esto es así, al instalar el plugin, lanzará un mensaje indicando que la extensión LSCache patatin, patatan y que no está instalada en el servidor. Así que vuelvo a hacer hincapié en las empresas de hosting que os aconsejé en un artículo pasado… sé que no os van a fallar o por lo menos a mí y a las personas que allí he mandado no nos han fallado nunca. Después de leer este artículo, te puedo decir que si quieres decir que vas de mi parte a las empresas que aconsejo, libre eres de ello (a mí no me va a molestar) pero como he predicado en otros artículos no voy a poner enlaces de afiliación ni nada.
Este caso de Divi se puede extrapolar a un escenario real, ya que tiene instalado Woocommerce, la web cuenta con sliders (sé que os molan mazo), también he creado una página de contacto con un formulario hecho con Gravity Form y me creado un sub-header personalizado donde se alojará el título de cada página, mira la imagen que dejo aquí (la zona roja).
Hasta aquí mi artículo de hoy. También voy a dejar aquí abajo unos enlaces que también aconsejo leer para llegar a una buena optimización de Divi.
Fotografía de producto para webs una parte importante del ecommerce
Cómo optimizar imágenes para sitios web
¿Qué está pasando en el mundo del hosting? ¡La verdad sobre las mejores empresas de hosting!
Un abrazo a todos tunantes y si tenéis alguna pregunta ya sabéis que soy un tío al que le gusta la docencia… pero por favor si podéis venir con una base mínima mucho mejor ¡Cuidado! no digo que seáis expertos, ni gurús de WordPress, pero hasta el día de hoy “las casas se empiezan por los cimientos, no por el tejado“. Yo no soy ningún gurú, ni mucho menos un experto… o por lo menos yo no me veo así, si me tuviera que definir con una frase diría que “soy un profesional, pero antes de ser profesional ya era un enfermo” jajaja. Ya sabéis estoy accesible a través de redes sociales o si te es más cómodo déjame un comentario, suelo contestar a todos ¡Abrazos tunantes gambiteros y ser buenos!
