Esta semana voy a ponerme un poco más técnico de lo normal. Toca hablar de WordPress y cómo optimizar la velocidad de carga de Divi, la plantilla que se esconde detrás de este blog.

Hace unas semanas decidimos marcar un día en la agenda para pasarle la ITV al blog de Ensalza. Ya sabéis que uno de nuestros fuertes es el desarrollo web, pero cada vez tengo más claro que el refrán de “en casa del herrero, cuchillo de palo” le va al pelo a nuestro sector. Nunca tienes tiempo de trabajar en tus proyectos internos.

Así que nos pusimos un reto: teníamos un día para optimizar Divi y conseguir que nuestro WordPress cargara en menos de un segundo desde el ordenador. Y conseguir, además, que el tiempo de carga desde el móvil fuera lo mínimo posible.

Entre tarea y tarea fuimos haciendo capturas de pantalla y tomando notas para poder prepararos este artículo contando nuestra experiencia.

Y para que te pique la curiosidad y quieras leer hasta el final, esto fue lo que conseguimos:

optimizar Divi movil

Optimizar Divi en el móvil era nuestro objetivo principal

Estoy seguro que alguno ha salido corriendo ya a pasarle un test de velocidad al blog. Y tiene la escopeta cargada para atacarnos.

Tranquilos, haters, que al final del artículo os desvelamos alguna de nuestras vergüenzas. Que aquí lo de los gurús no nos va mucho…

No tengo la varita mágica para optimizar Divi, pero te voy a contar nuestra historia #Wordpress #Divi Clic para tuitear

Vamos a ir de menos a más, así que no me enfadaré si alguno de los puntos del post te lo saltas porque ya te lo sabes todo; pero si me lo dejas puesto en un comentario te lo agradeceré infinito.

¡Empezamos!

¿Qué es Divi?

Para el que no lo conozca, Divi es una plantilla premium para WordPress desarrollada por Elegant Themes. Aunque nació como un tema más dentro del catálogo de esta empresa, poco a poco Divi empezó a tomar una dimensión muy grande.

Tanto, que a día de hoy prácticamente todo el trabajo lo dedican a Divi y casi cada semana están metiendo novedades.

Divi es una plantilla siempre rodeada de polémica. Existen multitud de desarrolladores wordpress que la odian por diversos motivos. Creo que la comunidad que odia a Divi es casi tan grande como la que adora esta plantilla.

Y aunque en las últimas actualizaciones del theme se han corregido muchas de las quejas recurrentes (comprimir JS y CSS, mejorar la velocidad…), el discurso sigue siendo el mismo.

Como no me quiero desviar del tema de la optimización para WordPress te invito a que le eches un ojo/oído a este podcast de Juanma Aranda de WPNovatos en el que ahondan más en el tema.

¿Por qué nos gusta Divi?

Nosotros la consideramos una herramienta más a la hora de trabajar proyectos en WordPress. Durante los últimos años habremos desarrollado cerca de 100 páginas web con Divi y no me arrepiento de ninguna de ellas.

Si tuviera que quedarme con solo 2 ventajas de Divi, serían:

  1. Agiliza el proceso de trabajo: desarrollar una web corporativa con Divi te permite recortar mucho los tiempos de maquetación. Esto se traduce en un ahorro en costes para el cliente y en poder dedicarle el tiempo del proyecto a otras áreas (textos, copys, llamadas a la acción…).
  2. La curva de aprendizaje (sobre todo para un cliente) es muy rápida: en muy poco tiempo, casi cualquier cliente con unas nociones mínimas puede manejar su web corporativa y retocar información sin depender de la agencia. Aportar libertad al cliente es una ventaja muy positiva desde nuestro punto de vista.

Aunque a los haters de Divi les tengo que comprar un argumento: la ****** plantilla se pone bastante pesada y consume muchos recursos si no se utiliza con cuidado.

Y si además le añades plugins como WPML, se pone espesa y difícil de trabajar. Aquí es donde entra a jugar un trabajo profesional.

Si un cliente puede hacer la misma web que tú con Divi, deberías darle una vuelta a lo que ofreces a tus clientes

Por muy buena que sea una herramienta, no hace el trabajo solo.

Pero trabajando sobre Divi y sabiendo dónde tocar se puede mejorar muchísimo su rendimiento. Porque, si fuera perfecta desde su instalación a ti no te interesaría este artículo y no creo que yo estuviera escribiéndolo, la verdad.

Creo que este tuit de José Conti resume a la perfección qué supone utilizar Divi en un proyecto con WordPress:

opinión Divi

Como no creo que ningún detractor de Divi haya llegado hasta aquí, te cuento un secreto. Aunque Divi me gusta mucho, he conseguido mejores velocidades de carga y una optimización “más limpia” y menos traumática con otras plantillas.

La combinación de GeneratePress+Elementor, por ejemplo, me está atrayendo muchísimo en los últimos meses.

¿Por qué es importante la velocidad de carga?

Respuesta paleta: porque Google quiere.

Respuesta razonada: en un mundo en el que queremos todo inmediato, la velocidad de carga es un parámetro muy importante de cara a mejorar la experiencia de usuario en nuestra página web.

Además, cada día utilizamos menos el ordenador para navegar (tenemos clientes con más de 80% de tráfico desde tablets y smartphones) y las conexiones móviles a veces dejan bastante que desear.

Pónselo fácil y rápido al cliente. Si tu web no carga en menos de 4 segundos por una mala conexión… ¿a quién crees que va a culpar el usuario?

Y sí, porque a Google le gusta que tu web sea rápida y te va a posicionar mejor. Que hay que decírtelo todo…

Herramientas para optimizar la velocidad de WordPress

Antes de meternos en profundidad a hablar de cómo conseguir mejorar los tiempos de carga de Divi, os voy a contar qué herramientas vamos a utilizar:

  1. Pagespeed de Googleesta herramienta de Google analiza varios parámetros de optimización de nuestra web y nos muestra sugerencias de mejora. Además, divide las sugerencias entre dispositivos móviles y escritorio, algo que otras no hacen. Aporta mucha info pero NO MIDE TIEMPOS DE CARGA. He visto sobresalientes en webs que tardaban 6 segundos en cargar…
  2. Gtmetrix: esta herramienta la conocimos este mismo año, en una ponencia del PROMarketing Day de Ernesto G. Bustamante y Alejandro Serrano de AulaCM. Gtmetrix hace un mix con el pagespeed y el índice de optimización de Yahoo (Yslow) para darnos una nota de nuestra página web. Además, muestra sugerencias y añade nuevos valores a la ecuación: tiempo de carga, número de peticiones y “peso” total de la web.
  3. Pingdom tools: es la herramienta gratuita más certera que he localizado para medir tiempos de carga. Puedes elegir la localización del nodo (yo suelo elegir el que aparece en Europa por cercanía a nuestro público objetivo).
  4. Prueba de optimización para móviles: el último arma diabólica de Google. Se trata de una evolución del pagespeed enfocada 100% en móviles. Analiza los parámetros de optimización de wordpress y mide el tiempo de carga de la web desde una conexión 3G. Los primeros resultados con este test son dolorosos. Úsalo con moderación.

Es importante no obsesionarse con los valores que aporten estas herramientas. En muchos casos tener una buena nota no supone necesariamente un tiempo rápido de carga

Recuerda: buscamos un tiempo de carga óptimo, no medallitas por optimizar todo muy bien.

Ahora que ya tenemos las herramientas, vamos al lío: cómo conseguir que Divi cargue en menos de un segundo.

Estado inicial: Autooptimize + lazy load

Cuando llegó el día de la optimización del blog, lo primero que hicimos fue tomar muestras iniciales del estado del proyecto.

Obviamente cuando lanzamos el nuevo blog no lo dejamos “tirado” a su suerte. Ya habíamos trabajado un poco la optimización, tanto a nivel de servidor como a través de plugins de optimización en WordPress.

¿Cuál era el resultado? Pues que, si le preguntabas a GtMetrix, nuestra web se graduaba con nota:

optimizar Divi gtmetrix (v0)

Optimizar WordPress no es solo tener buenas notas

¿Qué teníamos implementado en este momento?

  • Autoptimize: un plugin de wordpress para unificar y minificar los archivos de estilo (CSS) y los javascript (JS) de nuestro wordpress.
  • Lazy load: otro plugin que se ocupa de cargar “en diferido” las imágenes del sitio web. En lugar de cargarlas al inicio junto al texto, lazy load espera a que el usuario esté pasando por esa zona para enseñar la imagen. Así se reduce drásticamente el número de peticiones y se mejora el tiempo de carga. Aunque luego veremos que no siempre es así.
  • Caché de ficheros CSS, JS y demás ficheros estáticos. Lo implementamos a través del fichero htaccess con un tiempo de vida de 30 días.
  • Hojas de estilo innecesarias eliminadas: luego entro en detalle sobre qué significa esto.
  • Compresión de scripts de Divi DESACTIVADA: en ese momento, Divi y Autoptimize no se llevaban bien y si aplicábamos las mejoras a la vez, la página no cargaba con fluidez.

Los datos de optimización según pingdom también eran bastante buenos:

optimizar Divi con pingdom (v0)

el grado de optimización es muy alto, pero los tiempos de carga… ayyy

Pero si entrabas un poquito más a fondo en PageSpeed… le sacabas los colores a Divi y afloraba su fama de “perezosa”. Desastroso 61/100 en móviles y poco más de 70/100 en escritorio.

PageSpeed mobile con Divi

Igual los deberes de optimizar Divi no los teníamos superados…

Volvemos al origen: wordpress sin plugins de caché

Ya sabéis esa cita célebre de “Si buscas resultados diferentes no hagas siempre lo mismo”. Como nosotros queríamos buscar un camino alternativo, optamos por volver a los inicios.

Desactivamos Autoptimize y Lazy-load. Borramos los ficheros de caché y revertimos algunas configuraciones del servidor. Actualizamos todas las versiones de WordPress pendientes y volvimos a medir el estado del proyecto.

¿Qué teníamos implementado en el blog en este momento?

  • las optimizaciones de caché vía htaccess
  • Todas las Imágenes optimizadas en tamaño y peso gracias a Compressor.io (adoro esta herramienta)
  • WP-Smush, un plugin que se encarga de comprimir aún más las fotos que subimos a WordPress manteniendo la calidad de la imagen.

Primera sorpresa del día. Con todos los plugin de caché desactivados los tiempos de carga mejoran notablemente (aunque empeoren las notas de optimización) e incluso el pagespeed de móviles pasaba a un tono anaranjado…

Divi más rápido. Gtmetrix

¿Divi menos optimizado pero más rápido?

Como veis en la captura de GtMetrix, al eliminar el plugin de Lazy Load el número de peticiones de ficheros (requests) se duplica. Pero el tiempo de carga vuelve a reducirse.

En Pingdom habíamos bajado más de 1 segundo los tiempos de carga solamente quitando los plugins de caché. Nuestra sospecha aquí es el que el cuello de botella estaba en el rendimiento del servidor. Le costaba procesar y servir los ficheros que Autoptimize generaba. Y por eso se alargaban los tiempos de carga.

resultados WP pingdom

Menos optimizado pero 1 segundo más rápido

¡Ojo! Un buen PageSpeed no es siempre mejor para el tiempo de carga de tu WordPress #consejos #WPO Clic para tuitear

 

 

La novedad: WP-rocket para optimizar WordPress

Empiezan las novedades. Llevábamos un tiempo escuchando hablar de WP-Rocket, un plugin premium de caché para WordPress del que todo el mundo hablaba buenas palabras.

En el último congreso que estuvimos, Álvaro Fontela (fundador de RaiolaNetworks y un auténtico crack de la optimización de WordPress) también nos contó que es su plugin de caché imprescindible a día de hoy. Así que nos decidimos por él.

alvaro fontela experto WPO

Álvaro Fontela en #DSMValencia. Fotografía de mrkii.es

Lo bueno de este plugin es que unifica las soluciones que antes teníamos con varios gratuitos: caché, minificar ficheros JS y CSS y Lazy Load en un único plugin. Fabuloso.

Lo único que le falta a WP-Rocket es implementar también una caché de objetos y de base de datos. Tiempo al tiempo.

No voy a meterme en una guía detallada de cómo configurar WP-Rocket porque entonces sí que sí voy a tener que encuadernar este post y vais a empezar a odiarme. Os dejo qué configuración tenemos nosotros ahora mismo:

Optimizar Divi con WP-Rocket

Algunos ajustes de WP-Rocket para optimizar Divi

Entre las configuraciones que tenemos, destacamos:

  • Básicos:
    • Caché para móviles en archivos separados: Divi hace ajustes distintos en dispositivos móviles. Si no cargamos las cachés separadas se visualizará mal en el segundo dispositivo. Ocuparán más los ficheros de caché pero todos estaremos más contentos.
    • Lazyload activo para videos e iframes (por ejemplo, los gifs que tanto nos gustan) pero desactivado para imágenes. Aún quiero trastear un poco más aquí, pero de momento lo dejo desactivado para mejorar la nota en pagespeed para móviles.
    • Emojis por defecto del navegador.
    • 30 días de caché para los ficheros
  • Archivos estáticos:
    • Todo minificado: hojas de estilo CSS, ficheros JS y el propio HTML bien comprimido para reducir el tamaño de los ficheros.
    • CSS y JS combinados. Dejamos de lado las Google fonts porque luego os cuento lo que hicimos con ellas.
    • En las exclusiones de JS añadimos este fichero:wp-content/themes/Divi/includes/builder/scripts/salvattore.min.js”. Es un fichero que Divi utiliza en las páginas de blog en cuadrícula y que se pone rebelde en ocasiones al cargar con la caché.
    • Suprimir los query string: así el navegador también cacheará los ficheros y nuestros usuarios recurrentes lo agradecerán.

¡OJO! Aquí hay un punto importante: cada proyecto es un mundo. No os toméis estas configuración al pie de la letra porque creo que aún no he repetido la misma configuración en dos proyectos. Incluso proyectos con Divi he aplicado otras configuraciones y han dado mejor resultado.

Por ejemplo, para este servidor hemos optado por no reducir al mínimo el número de ficheros CSS y JS. Sí, tendremos peor nota en PageSpeed pero ganamos casi 300ms de carga porque nuestro servidor se pone tonto y tarda en servir ficheros tan grandes.

Y después de meter WP-Rocket, ¿en qué punto estábamos? Pues más o menos así:

gtmetrix empezaba a querer a nuestra Divi

gtmetrix empezaba a querer a nuestra Divi

Volvemos a valores verdes en todos los indicadores. Mejoramos los tiempos de carga y el número de peticiones se reduce notablemente. Al unificar todos los plugins en 1 WP-Rocket es más fácil reducir el número de ficheros que sirve WordPress

¿Qué decía Pingdom de todo esto?

cargar Divi en menos de 1 segundo

Objetivo cumplido: cargamos Divi en 0,6 segundos

¡BOOM! Objetivo conseguido. Según Pingdom ya estamos por debajo de 1 segundo en tiempo de carga desde escritorio… pero queríamos ir un poquito más allá.

Optimizar estilos CSS en Divi

Aunque ya habíamos llegado al objetivo marcado, se nos empezó a nublar la vista con la nota de PageSpeed y fuimos a intentar mejorarla.

Como ya hemos comentado, este blog funciona con WordPress y Divi como tema principal. Además, estamos muy locos y utilizamos también el constructor visual para maquetar algunos posts. Sí, no deberíamos hacerlo pero los problemas que genere los solucionará nuestro yo del futuro…

Vamos a ponernos un poco más técnicos aún:

Hojas de estilo vía functions.php

En realidad no trabajamos directamente con Divi en el blog: tenemos un Child Theme de WordPress basado en Divi.

Resumiendo muchísimo, un Child Theme (tema hijo) es como una carcasa que te permite sobre-escribir funcionalidades de una plantilla de WordPress sin alterar el tema inicial.

Así tienes una copia por si la lías y además puedes actualizar cuando el desarrollador del tema original meta nuevas funcionalidades.

¿Estáis un poco perdidos con los Child Theme?

Si queréis ampliar un poco la info de los temas hijos, podéis empezar con este post de Fernando Tellado.

El caso es que al pasarle el PageSpeed vimos que había 2 hojas de estilo que se cargaban directamente y no se habían metido en la hoja comprimida de WP-Rocket; se trataba del CSS de Google Fonts y el de la base de Divi, que se añadía mediante un @import en el style.css de nuestro tema hijo.

Así que decidimos saltarnos un poco la estructura de los child theme de WordPress y hacer lo siguiente:

  1. Eliminar los @import del fichero style.css.
  2. Vaciar el style.css dejando solo los comentarios iniciales.
  3. Llevar todos los estilos personalizados a un nuevo fichero .css
  4. Incluir a través del fichero functions.php todos los ficheros de estilos según la prioridad que necesitábamos. Primero Divi y después las personalizaciones.

cargar estilos WP por PHP

Cómo cargar estilos en WP vía PHP

Después, toca borrar caché y volver a precargarla para comprobar el impacto de cambio.

El resultado de esto es que todos los CSS se incluyen en el minificado y comprimido y mejoramos algunos puntos en el PageSpeed.

Eliminar CSS de WordPress innecesarios

Seguimos trabajando con el fichero functions.php. Aunque se minificaran, detectamos muchas hojas de estilo CSS bastante inútiles. Bien porque se repetían o porque eran demasiado pequeñas (no merecía la pena abrir una conexión con el servidor para descargar 1 línea de CSS).

La mayoría eran de plugins o pequeñas funcionalidades de Divi.

El proceso que seguimos fue el siguiente:

  1. Desactivar la caché.
  2. Revisar todos los ficheros CSS que se cargaban.
  3. Trasladar los ficheros pequeños al fichero personalizado que hemos visto en el punto anterior.
  4. Apuntar el nombre del fichero que no queríamos.
  5. Implementar una función en el functions.php que se encargara de eliminar estas hojas de la lista de estilos CSS que se cargaban en el head.
  6. En total nos quitamos de encima 6 hojas de estilo. Menos ficheros, menos problemas.
//eliminamos los CSS no necesarios (WPO)
function remove_css_wpo( $src, $handle){
  $eliminar = array('wp-pagenavi-css','yarppRelatedCss-css','lp-ert-css-css','et-gf-open-sans-css','divi-fonts-css','et-gf-lato-css','iworks_position-css','yarppWidgetCss-css','et-builder-googlefonts-css');
  if(in_array($handle.'-css',$eliminar)){
    $src = '';
  }
  return $src;

}
add_filter( 'style_loader_src', 'remove_css_wpo', 9,2);

 

Cargar las tipografías de Google Fonts desde tu servidor

Siguiente punto peliagudo: las dichosas tipografías de Google Fonts.

Bueno, en realidad el problema no era tanto las tipografías en sí. El problema venía con el número de peticiones que se hacían a Google. Teníamos varias tipografías en uso, se llamaban en varias peticiones diferentes y además la caché de Google Fonts era muy corta (se tenían que pedir más veces de las necesarias).

¿Cómo lo solucionamos?

  1. Analizar las tipografías y reducirlo a solamente 2: Open Sans y Lato.
  2. Buscar la petición al CSS de Google y abrirlo en el navegador. Algo así como esto: https://fonts.googleapis.com/css?family=Lato
  3. Copiar el contenido de la hoja de estilos en un fichero dentro de nuestro tema hijo (nosotros lo llamamos fonts.css)
  4. Eliminar la llamada a Google Fonts (ver el punto anterior)
  5. Añadir en las peticiones de estilos la llamada a fonts.css (ver dos puntos anteriores), entre los estilos de Divi y los personalizados.

¿Qué conseguimos en este paso?

Pues además de perder un buen rato en analizar los estilos, con este punto ganamos unos puntitos muy majos en PageSpeed, redujimos el número de peticiones externas e internas y además nos comimos algunas décimas de segundo muy interesantes:

Divi carga en menos de 2 segundos

Verde que te quiero verde para Divi

Ya estábamos en los 2 segundos en ordenador según Gtmetrix (que desde Canadá siempre marca mucho más que Pingdom) y en 3 segundos con la prueba de Google para conexiones 3G.

Tiempos de carga excelentes en Divi con conexión 3G

Tiempos de carga excelentes en Divi con conexión 3G

Llegado a este punto los tiempos de carga empezaron a ser menos prioritarios (ya cargábamos en 800ms según Pingdom), así que pasamos a intentar mejorar la puntuación en PageSpeed sin empeorar la experiencia de los usuarios.

Solucionar el error de “Prioriza el contenido visible” en PageSpeed

Si has trabajado un poco con el PageSpeed de Google, seguro que tú también odias el dichoso mensaje de “Prioriza el contenido visible”. Creo que va a ser mi próximo disfraz de Halloween para dar miedo…

Odio este error porque es una especie de nudo magnífico que genera el propio Google con sus explicaciones: en estado normal suele decirte que necesita cargar los estilos para enseñar el contenido; pero si haces una carga diferida de los estilos (te los llevas al final de la página, por ejemplo), ocurren dos cosas:

  1. Los usuarios se encuentran durante unas décimas de segundo tu página web sin estilos y ven una especie de flashazo cuando cargan.
  2. Google te muestra un mensaje diciéndote que lo que se carga antes de estilos no es lo mismo que se carga después… que lo soluciones.

Con WP-Rocket puedes activar la carga asíncrona de los estilos CSS y así salvar el primer escollo de Google. Dejarás de ver el mensaje (o al menos saldrá para menos ficheros) de “Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página”.

Pero si no solucionas el contenido visible, empeorarás la nota de PageSpeed.

Cómo cargar los estilos indispensables para WordPress

Este es un punto delicado. Si no consigues solucionar esto (yo en algún proyecto no he sido capaz de salvarlo), es mejor desactivar el punto anterior y cargar los CSS de manera síncrona.

El asunto es el siguiente: necesitas generar un puñado de estilos CSS que sean indispensables para cargar el primer pantallazo de tu web (en móvil y en escritorio). Y según la complejidad de diseño que tengas en tu web, Divi puede ponerse puñetera y necesitar demasiados estilos para conseguirlo.

¿Cómo conseguimos generar esos estilos críticos/indispensables?

  1. Desactivar WP-Rocket
  2. Abrir esta página web: https://www.sitelocity.com/critical-path-css-generator y meter tu url.
  3. Copiar el contenido y pegarlo en el cajetín de Ruta crítica de CSS que encontramos en las configuraciones de WP-Rocket

Con esto debería estar todo. Pero lo cierto es que esa web no es del todo infalible y siempre hay que hacer ajustes adicionales.

Aquí ya depende de hasta qué punto quieres mejorar la carga. Nosotros estuvimos un buen rato analizando que estilos queríamos aplicar.

Para ello cargábamos la página cacheada y eliminábamos la hoja de estilos principal para analizar qué veíamos solo con los estilos indispensables. Sobre ello, íbamos añadiendo y quitando estilos.

Además, una vez estuvimos contentos con los estilos generados, implementamos una función en javascript que se encarga de desactivar los estilos críticos después de cargar la hoja de estilos principal.

eliminar estilos por JS

Función JS para desactivar el CSS crítico

Así, no había que reescribir ciertas partes de código que habíamos ocultado en los indispensables (el menú móvil o la barra superior fija, por ejemplo).

Aún queremos mejorar un poco más este último punto, pero ahora mismo estamos satisfechos con el resultado.

¿Qué conseguimos en este paso?

El paso más importante aquí era de satisfacción personal. porque la verdad que a nivel de números ya no se podía mejorar mucho más.

Aún así, el PageSpeed sí que nos reconoció el esfuerzo. Un 83/100 en Mobile y un 92/100 en escritorio:

Divi sobresaliente PageSpeed

 

Buscando el sobresaliente en mobile

Llegado este punto ya se nos empezaba a ir un poco la cabeza y nos entró la obsesión de llegar al sobresaliente en Mobile según PageSpeed. Sí, ya habíamos caído en las garras de Google y de algunos habitantes del mundo “SEO” actual: buscar el 100/100 en PageSpeed.

Para conseguirlo, optamos por eliminar los avatares de gravatar (que consumían una barbaridad de peticiones y décimas de segundo muy valiosas) y también algunos plugins y cookies que no eran vitales.

No optimices sin cabeza: busca el equilibrio entre tiempo de carga y experiencia de usuario #Wordpress #WPO Clic para tuitear

El resultado fue mejor de lo esperado: 92/100 en móviles para PageSpeed (creo que hubiéramos llegado al 100 quitando el código de Google Tag Manager y Analytics), 2 segundos de carga en 3G y menos de medio segundo de carga según Pingdom para el detalle de un artículo.

Sí, el resultado de carga era magnífico, pero decidimos priorizar y mejorar un poco la experiencia de usuario. Además, si le quito los botones sociales a Yanira me lanza por la ventana.

¿Qué mejoras hemos notado cargando Divi en menos de un segundo?

Todas las mejoras las llevamos a cabo hace menos de un mes. Aún es pronto para evaluarlo y sobre todo para saber si las mejoras que estamos notando son por reducir el tiempo de carga de Divi.

De todos modos, hemos comprobado algunas cosas:

  • Google ya está notando la carga más rápida: desde Google Search Console comprobamos que el valor más lento desde la implementación es aún más bajo que el más rápido de los 2 meses anteriores. Un lujo.
  • El primer día con WP-Rocket marcó récord de páginas analizadas: el robot se vino arriba y al día siguiente analizó más páginas que nunca en el blog.
  • Aumento de visitas de un 11% desde Google.
  • Un 10% más de impresiones según Search Console durante este periodo
  • El aumento en la posición media y el CTR aún es testimonial

¿Se podría optimizar más?

¡Toma claro! Creo que siempre se puede mejorar y como hemos comentado al principio del artículo no tenemos la varita mágica de la optimización. Ni la optimización de Divi ni de WordPress en general.

Si tengo que escribir nuestra lista de próximos deseos, tenemos:

  • Actualizar el servidor o migrar a un nuevo servidor más potente. ODIO las migraciones y siempre las termino alargando. Pero al final toca migrar y será nuestro siguiente paso. Actualmente estamos en un servidor que aún no tiene PHP7 (¿Ya os he dicho lo de en casa del herrero…?)
  • Instalar un certificado SSL. Supongo que lo haremos durante la migración, para “tocar las narices” a Google solo una vez más.
  • Contratar un CDN: tal vez con el lanzamiento de la nueva web de Ensalza nos planteemos integrar un CDN para servir las imágenes y contenidos estáticos.
  • Migrar comentarios a Disqus y optimizar su carga
  • Lanzarnos al mundo AMP: aquí estamos muuuuuuy poco convencidos del cambio. Y más aún viendo que no somos los únicos que pensamos que AMP no es el futuro.

Gráfica de tiempos de carga con Divi después de la optimización

Gráfica de tiempos de carga con Divi después de la optimización

[Actualizado] Migración a PHP7 + SSL

Como bien anticipaba en puntos anteriores, aún nos quedamos a medio camino de la optimización. Así que nos pusimos manos a la obra e implementamos estas mejoras:

  • Migración a un servidor con PHP 7 + Litespeed (aún estamos en proceso de mejoras y optimización aquí)
  • Instalación de certificado SSL para caerle bien a Google y quitar posibles avisos de página no segura
  • Nuevo plugin de optimización de imágenes: cuando publicamos el post, los chicos de shortpixel nos invitaron a probar su plugin para optimizar imágenes. El resultado es bastante bueno. Han detectado muchas imágenes (principalmente de posts antiguos) que estaban poco optimizadas y las han comprimido en más de un 50% de media. Podéis descargar el plugin de shortpixel para wordpress desde el repositorio oficial.

Si somos sinceros, no hemos notado una mejora brutal de los tiempos de carga con estos últimos cambios. Aunque tiene una explicación: el nuevo servidor tiene la última versión de PHP pero es algo menos potente que el servidor antiguo.

Además, el certificado SSL siempre suma algunos ms extra a la hora de cargar. Entre 0,1 y 0,2 segundos más de carga que, cuando estamos trabajando al segundo, pueden notarse bastante.

GRA-CI-AS: creo que optimizo mejor WordPress que mis palabras

Esto… ¿has llegado hasta aquí? ¿del tirón? Por favor, déjame un comentario para que vaya encargándote un monumento de agradecimiento. Creo que acabo de batir mi record de longitud de artículo, porque me he pasado de las 4.000 palabras casi sin enterarme.

Espero que te haya resultado interesante nuestra experiencia. Y dejamos los comentarios abiertos a cualquier pregunta que os pueda surgir sobre el proceso, porque tal vez he pasado muy de puntillas por algunas partes para no liarme mucho más.

¡Hasta el próximo post!

¡Hola! Soy Santy y por aquí seguramente me veáis hablando de desarrollo web, Google Ads, emprendedores y productividad, principalmente. Hasta 2018 estuve trabajando en el área de analítica y desarrollo de Ensalza, por eso verás algunos artículos míos por el blog. Ahora puedes localizarme en Twitter 😉.

Soy zurdo, (muy) cabezota, omnívoro, ingenier-[o/ucho/ito] informático y marketero,así de raro.

[Total:4    Promedio:4.8/5]
Share This