Tutorial ✅ WPO - Optimizando DIVI ✅

Mensajes
123
Puntuación de reacción
0


La mañana del domingo, me encontraba tomando café y echando un vistazo a mi Facebook en mi teléfono móvil, cuando me fijé en un nuevo post generado dentro del grupo de “Tema Divi en español”. En este post preguntaba un usuario sobre los rumores acerca de la lentitud de Divi y si esto iba a ser un problema para el SEO de las páginas web donde estuviera instalado Divi. Seguí de cerca este hilo, incluso comenté varias veces.


Una de las cosas que más me llamó la atención, es que se hablara de optimización de un sitio web, dejando toda la responsabilidad de la optimización al theme activo y no se hiciera mención alguna a otros aspectos también importantes como por ejemplo las características de la máquina donde se aloja la instalación de WordPress, software del servidor, incluso creo que también se debería hacer alusión alguna a los plugins que se utilizan en un sitio web.


Bueno, pues tras intercambiar algunas ideas en este hilo y como me considero un hombre de palabra me comentaron que si podía hacer un post sobre todo lo que en el hilo del grupo comentaba. Lo prometido es deuda, así que aquí está mi pequeño aporte, a pesar de que también soy un hombre ocupado, si se quiere hay tiempo para todo ¿Verdad?



WPO-PARA-DIVI-1024x484.jpg



En un primer lugar, había pensado hacer un pequeño post citando los puntos más importantes para mi, pero pienso que ya que me pongo voy a alargarme un poquito más para hacer un post más detallado ¡Vamos a entrar en materia!




El alojamiento web

En el hilo hice bastante hincapié al respecto sobre este punto. Es la base de todo, la máquina donde voy a alojar un dominio con el que voy a ir montando mi instalación de WordPress con Divi. Yo me he decantado por HostProton, ya no sólo por amistad con el CEO de la empresa, sino porque en cuanto a la relación entre calidad, precio y características está muy bien. He decidido escoger un plan mensual de 4 dólares, entiendo que es un plan más que alcanzable por cualquier usuario que piensa en contratar un plan de hosting.


El dominio que he cogido para hacer esta prueba es adrianguerrero.info y tan sólo lo utilizaré para esto. Lo primero que hago es colocar las DNS a mi dominio, las cuales me han mandado por correo electrónico en un email de de bienvenida, en este caso son; ns1.hostproton.com y ns2.hostproton.com.



Configuración inicial en cPanel

Me gusta hacer una pequeña configuración más específica la primera vez que entro a cPanel. Sé que hostproton.com trabajan con bases de datos MariaDB por lo que van a estar mucho más optimizadas que las famosas MySQL y que sus servidores están equipados con LiteSpeed Web Server, estas son también algunas razones por las que he decidido trabajar con el hosting de Host Proton.

LiteSpeed-Web-Server.svg


Decido trabajar con la versión de PHP 7, instalo a través de la herramienta de Let’s Encrypt que tienen en cPanel, un certificado gratuito de seguridad, ya que pienso que debe ser algo obligatorio a día de hoy cuando es gratuito y porque tiene ventajas como que mi web va a trabajar bajo HTTP2, esta característica no la tienen aún muchas empresas de alojamiento web, porque aunque lleva ya cerca de 1 año en la industria aún es “nueva”. A continuación paso a instalar WordPress con la herramienta que me ofrecen, se trata de Softaculous (puedo decir que es el que más me gusta, incluso mucho más que Installatron).
cpanel-wpo-divi-respondiendo-a-la-comunidad.jpg



Configuraciones generales

Dentro de WordPress me dedico en un primer momento a las configuraciones básicas como configurar una página estática para el index, ajustar la zona horaria y seleccionar el formato de fecha y hora que más me gusta. Hago una instalación personalizada en cuanto a estructura del sitio web y seguridad, aunque estas acciones no interfieren en la optimización.


Como he instalado un certificado SSL, añado unas líneas al htaccess para redireccionar el tráfico de http a https y no servir contenido duplicado ¡Muy importante para el SEO! estos pasos la verdad los hago de una manera muy mecánica, no me extiendo más en ellos porque los considero muy sencillos, no obstante si alguien tiene alguna duda al respecto puede dejarme un comentario o contactar conmigo por redes sociales y estaré encantado de ayudarle.


Posteriormente instalo Divi (versión 3.0.46) junto con su builder, también voy a instalar algunos plugins con la intención de que parezca una instalación real para ponerla en producción como por ejemplo Gravity Form, Yoast, Better Font Awesome, Akismet Anti-Spam y TinyMCE Advanced. Reconozco que no soy muy hábil con Divi ya que como he comentado alguna vez, nosotros en la agencia trabajamos con dos, tres themes que conocemos internamente y los adaptamos en función de las premisas de los proyectos, pero voy a ver que tal se me da Divi, hace mucho tiempo que no lo uso.


Como he dicho un par de líneas más arriba, no uso Divi habitualmente pero me siento cómodo con él, no sé que intenciones ocultas pueden existir hablando mal de Divi. En unos pocos minutos creo dos páginas, una inicial con un slider compuesto por 2 diapositivas, texto y un botón. Acto seguido coloco 8 imágenes, es un escenario perfectamente válido donde se está trabajando con 8 imágenes junto con texto en la parte final. Es una página bastante cargada, he utilizado bastante el ancho completo, incluso para filas donde he utilizado columnas. La otra página, trata de una simple página de contacto donde he pegado el shortcode de Gravity Form, generado previamente en el editor nativo de WordPress. Sé que Divi tiene un módulo especial para formularios, pero he querido usar Gravity Form porque ofrece más posibilidades. El otro elemento del menú, tan sólo es la categoría nativa que genera WordPress.


Primera medición

Tras realizar una página que podría exportarse a un escenario totalmente válido, paso a hacer la primera medición. Cabe destacar que he cuidado la compresión de las imágenes durante el desarrollo. Para las mediciones voy a usar dos herramientas:
Pingdom Tools
Google PageSpeed


1g-1024x654.jpg





1p.jpg






Esta primera toma de contacto con las herramientas de medición, tan sólo me dan una ligera idea de cuanto trabajo voy a tener que hacer después. Ahora paso a instalar el plugin WP Super Cache, además también voy a cachear los archivos estáticos desde htaccess.


Segunda medición

Tras instalar WP Super Cache de forma completa y realizar un poquito de trabajo en el htaccess, veo que si noto una mejora en Pingdom Tools pero en Google tan sólo he subido 2 puntos.


2g-1024x628.jpg





2p.jpg






Me fijo en todos los elementos que me va marcando, es más el mismo Google te permite descargar estos elementos, pero cuidado no siempre funcionan después.


Tercera medición

Antes de valorar si trabajar con una CDN, no quiero perder la ocasión de realizar una tercera medición. Veo que mejora un poquito más, como muestro a continuación en las capturas.


3g-1024x607.jpg





3p.jpg







Cuarta medición

Antes de realizar la medición, añado el dominio adrianguerrero.info a CloudFlare. Realizo una configuración algo más específica y como cuento con un certificado de seguridad SSL, debo esperar unos minutos a que CloudFlare me expenda también uno. Unos 5 minutos más tarde mi web, se sirve a través de CloudFlare con certificado de seguridad SSL incluido.


4g-1024x576.jpg





4p.jpg






Pingdom Tools si muestra unos muy buenos resultados, sin embargo Google PageSpeed me muestra un resultado en móvil que se puede mejorar. Desde luego que se podría valorar el hecho de paralelizar más la carga o realizar la carga de distintos elementos de forma asíncrona, pero requiere de conocimientos avanzados y mucho tiempo para prueba y error. De todas formas, me gustaría aclarar que no hay que obsesionarse únicamente con este punto porque como poder, se podría trabajar en optimizar mucho más el sitio pero te hago una preguntaría ¿Afectarían los cambios a la buena experiencia del usuario?


Una vez realizado este pequeño testeo, paso a hablar brevemente de servidores, tecnologías y software en el servidor. Ya lo he dicho alguna que otra vez, pero lo vuelvo a decir ¡Soy un completo enamorado de LiteSpeed Web Server! no es una mera cuestión de manías sino de calidad, LiteSpeed es mucho más rápido sirviendo contenido estático y dinámico en comparación con sus competidos como Apache o Nginx. Si a esto le sumamos bases de datos MariaDB que trabajan mucho mejor que las MySQL, pues de forma inicial ya empezamos muy bien. Además de que LiteSpeed de forma nativa ya es compatible con HTTP2.


No quiero despedir el artículo sin comentar, que también he utilizado esta herramienta, para verificar que realmente mi página está trabajando bajo el protocolo http2. Una herramienta gratuita, online y muy fácil de usar ya que sólo hay que pegar la URL sobre la barra y presionar sobre el botón TEST. Espero que el artículo sea de ayuda usuarios de Divi y como ya he comentado, quien requiera que le conteste alguna pregunta, puede hacerlo a través de redes sociales o dejando un comentario aquí bajo ¡Gracias!


Actualmente el dominio adrianguerrero.info ya no responde a este test, ya que se a usado para otros fines pero espero que no sea un problema para conseguir optimizar DIVI.
 

Novato

Oro Blanco
Usuario de Bronce
Mensajes
1,239
Puntuación de reacción
3
@Adrian_Guerrero Gran tutorial. Gracias por postear esto.

Tengo una pregunta...

Cuando dices configurar una página estática para el index... ¿a que te refieres? ¿Puedes explicar como hacerlo?

Un saludo y gracias de antemano. :mola:
 
Mensajes
123
Puntuación de reacción
0
@Adrian_Guerrero Gran tutorial. Gracias por postear esto.

Tengo una pregunta...

Cuando dices configurar una página estática para el index... ¿a que te refieres? ¿Puedes explicar como hacerlo?

Un saludo y gracias de antemano. :mola:

a que prefiero una página estática en el index a ver las últimas entradas publicadas.
 

Novato

Oro Blanco
Usuario de Bronce
Mensajes
1,239
Puntuación de reacción
3
a que prefiero una página estática en el index a ver las últimas entradas publicadas.

¿Puedes decir qué debe llevar esta página para tener un óptimo posicionamiento?

¿Cómo puedo hacer esto en Wordpress?

Gracias desde ya por responder.

Saludos :mola:
 

TheGea

Hierro
Usuario de Piedra
Mensajes
117
Puntuación de reacción
0
Buen tutorial compañero, luego lo analizo con mas tiempo, gracias por compartir
 
Mensajes
123
Puntuación de reacción
0
¿Puedes decir qué debe llevar esta página para tener un óptimo posicionamiento?

¿Cómo puedo hacer esto en Wordpress?

Gracias desde ya por responder.

Saludos :mola:

¿A qué página haces referencia? En cuanto a llevar o no llevar... No se trata de ello, ya que si por instalar 3 plugins se posicionara todo el mundo lo haría.
 

Novato

Oro Blanco
Usuario de Bronce
Mensajes
1,239
Puntuación de reacción
3
¿A qué página haces referencia? En cuanto a llevar o no llevar... No se trata de ello, ya que si por instalar 3 plugins se posicionara todo el mundo lo haría.

Me refiero a características SEO.

Y... ¿Como puedo poner una página estática como el index en Wordpress?
 
Mensajes
123
Puntuación de reacción
0
Me refiero a características SEO.

Y... ¿Como puedo poner una página estática como el index en Wordpress?

En cuanto a que tengas una página estática en index se hace desde Ajustes>Lectura.

En cuanto a características SEO, lo mejor es que leas el manual básico de Google, yo no te puedo decir más aquí porque no hablamos de un tema concreto, sino de hacer un estudio y demás...
 

websgp

Moderador
Miembro del equipo
Usuario de Bronce
Mensajes
3,724
Puntuación de reacción
13
Buen aporte, DIVI es uno de los themes y a muchos usuarios les va ser de utilidad
 

Novato

Oro Blanco
Usuario de Bronce
Mensajes
1,239
Puntuación de reacción
3
En cuanto a que tengas una página estática en index se hace desde Ajustes>Lectura.

En cuanto a características SEO, lo mejor es que leas el manual básico de Google, yo no te puedo decir más aquí porque no hablamos de un tema concreto, sino de hacer un estudio y demás...

Hola amigo,

Gracias por responder.

Me surgen algunas preguntas hacia ti y tu experiencia…

¿Es crucial y determinante tener una página estática para mejorar el posicionamiento? ¿Se evidencia la diferencia?

En cuanto a la ruta Ajustes-> para seleccionar la página de inicio estática, salen dos opciones, una que dice página de inicio y otra que dice página de entradas… ¿Cómo debo configurar esto?

Saludos y gracias de antemano.
 
Mensajes
123
Puntuación de reacción
0
Hola amigo,

Gracias por responder.

Me surgen algunas preguntas hacia ti y tu experiencia…

¿Es crucial y determinante tener una página estática para mejorar el posicionamiento? ¿Se evidencia la diferencia?

En cuanto a la ruta Ajustes-> para seleccionar la página de inicio estática, salen dos opciones, una que dice página de inicio y otra que dice página de entradas… ¿Cómo debo configurar esto?

Saludos y gracias de antemano.

No es ni mejor ni peor, todo depende del tipo de proyecto y como vaya a realizarse. He hablado de Divi porque es uno de los themes más usados, sin embargo nosotros usamos 2, 3 themes que sabemos como funcionan internamente porque nosotros mismos hemos hecho cambios en el código y lo adaptamos en función de las premisas del proyecto. Nosotros no usamos ni Divi, ni Avada ni nada por el estilo, sino uno customizado por nosotros. Además usamos WordPress como un framework y no como un CMS.

En cuanto a configurar una página estática como index, te recomiendo que leas bien lo que te dice, ya que lo pone todo bastante claro :)
 
Arriba