Temas y velocidad WordPress, Gutenberg, Automattic, FaceApp y privacidad – Crónicas WordPress Intensas #9

En este último episodio de las crónicas WordPress intensas antes del verano, daremos un repaso a temas tan interesantes como:

  • ¿Cuáles son los 100 temas WordPress más rápidos.
  • ¿Es de verdad WordPress más lento cada vez?
  • ¿Quién toma las decisiones sobre WordPress?
  • FaceApp y privacidad

No te pierdas el 9º episodio de las Crónicas WordPress Intensas en este vídeo…

Si prefieres simplemente  escuchar las Crónicas WordPress intensas como podcast puedes suscribirte en iVooxSpotify o Apple Podcasts.

La entrada Temas y velocidad WordPress, Gutenberg, Automattic, FaceApp y privacidad – Crónicas WordPress Intensas #9 la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

¿Es verdad que las webs WordPress son cada vez más pesadas y lentas?

Últimamente veo muchos acalorados debates en Twitter acerca de que si WordPress es muy lento, o que cada vez es más pesado, que carga demasiadas cosas, y así todo.

Vamos, que hay gente por ahí que viene a decir que WordPress es una pesadilla para la optimización web, el WPO.

Imagen encontrada en pablomonteserin.com

Eso sí, nunca se aporta ningún dato, solo declaraciones tajantes, percepciones, sensaciones, o «es algo que se nota, negarse es de estúpidos«, como he llegado a leer.

Pero ¿es verdad?, y si es así ¿hasta qué punto? ¿es cierto que WordPress es cada vez más pesado y lento?

¿Qué dice el archivo de Internet sobre WordPress?

El archivo de Internet en httparchive.org, lugar de referencia para cualquier consulta o curiosidad acerca de cómo era una web hace años y como es ahora, tiene varios posibles informes, y uno de ellos es medir el peso de las páginas web a lo largo de su historia.

Y lo mejor es que puedes medir el peso de las páginas web creadas con WordPress, como también lo puedes hacer de otros CMS o en general.

Datos, datos, datos

En concreto, si generamos el informe del peso de las páginas web creadas con WordPress desde el registro más antiguo (desde enero de 2016, nada menos que 3 años, que en Internet son un todo) hasta el más reciente a la fecha, nos muestra información muy interesante, a la par de curiosa, que te resumo en esta tabla:

Nota: La tabla completa está en este enlace

Evidencias basadas en los datos

Simplemente describiendo lo que reflejan los datos, se puede afirmar que las webs creadas con WordPress

  • Utilizan aproximadamente el doble de CSS propio que hace 3 años.
  • Casi realizan las mismas solicitudes de CSS externo que hace 3 años.
  • No hay una gran diferencia entre la carga de fuentes, ni alojadas ni externas.
  • Cargan y solicitan la mitad de HTML que hace 3 años.
  • Utilizan casi un 50% más de imágenes alojadas que hace 3 años. Pero han reducido las peticiones de imágenes externas en torno al 35%.
  • La diferencia en lo relativo al JavaScript utilizado, tanto alojado como externo no es representativo. No hay grandes diferencias.
  • Ha aumentado enormemente la carga de vídeo, especialmente el alojado. Este es el dato más significativo.
  • Las diferencias en la carga de otros recursos, aunque porcentualmente existen, no son significativas.
  • El peso total de las páginas WordPress en 3 años se ha incrementado en un 16% en escritorio y un 29% en móvil.

¿Es WordPress más lento que hace años? Interpretando – ahora sí – los datos

Visto lo anterior, mi valoración de lo que reflejan los datos del archivo de Internet sobre la evolución del peso de página de las webs creadas con WordPress, y siempre recordando que estamos hablando de medias, de una estadística, pero que al menos son datos, es la siguiente…

WordPress utiliza actualmente el doble de CSS que hace años

Creo que es por la evolución de los diseños, cada vez más competitivos, pues con la democratización, abaratamiento, de la creación web, los temas WordPress cada vez compiten más entre sí, ofreciendo diseños vistosos, que entren por la vista.

La parte buena es que no cargan más CSS externo que hace años, esto prácticamente no ha cambiado.

¿Es malo este dato?

Al menos no es enormemente significativo, pues no supone en peso de bytes un aumento importante aunque el porcentaje sí lo sea. No supone un problema insalvable para WordPress.

WordPress carga actualmente la mitad de HTML que hace años

Curioso que, en el desglose de tecnologías utilizadas, el peso del HTML es la mitad que hace años, y aquí entran dos posibles factores importantes:

  • Estrategias de caché
  • Estrategias de minimizado

Con el mismo HTML, actualmente prácticamente toda web WordPress aplica estrategias de caché y minimizado de código. Pero vamos, que esto es suposición, el dato de que WordPress carga menos HTML es el que es, ahí está, sea por el motivo que sea.

¿Tú a qué piensas que se debe?

WordPress carga actualmente casi un 50% más de imágenes propias que hace años

Aquí se une este incremento en la carga de imágenes alojadas por uno mismo, junto al curioso dato de que se ha reducido la carga de imágenes externas en torno a un 35%.

En mi opinión esto se debe a varios motivos, a saber…

  • Cada vez es más barato el hosting, con lo que hemos ido abandonando tácticas antiguas como las de cargar fotos desde Flickr o el hotlinking.
  • Vivimos en una cultura de la imagen, en la que desde nuestros teléfonos móviles subimos fotos propias a nuestros sitios, cada vez más. Así que subimos más fotos que nunca, pero las alojamos en nuestro (barato) hosting, en vez de recurrir a servicios externos de alojamiento de imágenes.
  • Los temas WordPress cada vez son más atractivos visualmente, y compiten por ello como comentaba en el caso del CSS, muy enfocados en el uso de imágenes de fondo, carruseles de fotos, etc.

WordPress carga muchísimo más vídeo propio que nunca

¿A alguien le ha extrañado este dato? ¿A que no?

Vivimos en la era audiovisual. Cada vez nos informamos más en YouTube que en blogs, y también las webs cada vez ofrecen, en consecuencia lógica, más contenido propio en vídeo.

Ahora bien, esto sí que es un problema, porque lo que dicen los datos es que cargamos muchísimo vídeo alojado en nuestra propia web, y esto es un error enorme, pues es uno de los elementos que más peso supone y más consumo de recursos del servidor, batería y conectividad en los móviles, etc.

Aquí, además de lo que he comentado de nuestra actual cultura audiovisual creciente, sí que recurro de nuevo a los temas como unos de los principales culpables.

Y es que también hay cada vez más temas WordPress con fondos de vídeo, carruseles de vídeo, hasta el editor de bloques Gutenberg propio de WordPress ofrece bloques para poner fondos de vídeo alojado en tu propia web.

Hay que evitar esta práctica totalmente, y si se quiere poner un fondo de vídeo hacerlo mediante la carga de vídeos alojados externamente, entregados desde servicios externos, como YouTube o Vimeo, para no sobrecargar el peso de la página en exceso, especialmente en dispositivos móviles.

Además de que es una pésima práctica en cuanto a la gestión de recursos del servidor, pues servir vídeo es lo más caro y consumidor de recursos del hosting.

Así que, aceptamos que los temas tienen parte de culpa, pero la responsabilidad es nuestra.

¡Oye! ¿Y cómo ha evolucionado el peso de las webs WordPress comparado con el resto?

Bien visto, porque hasta ahora solo he comparado a WordPress consigo mismo hace unos años, pero ¿ha crecido el peso de las páginas WordPress más que las webs en general? ¿se ha convertido WordPress en un monstruo mientras el resto de webs son más óptimas?

Pues mira tú por dónde los datos dicen que no:

Si comparamos el informe de evolución de peso de las páginas web creadas con WordPress frente al informe de la evolución del peso de página web general en el mismo periodo resulta que WordPress ha tenido un aumento de peso de página más suave, y las páginas webs creadas con WordPress han evolucionado de manera más óptima que la media.

En general todas las páginas web, creadas o no con WordPress, han ido creciendo en peso, pero WordPress menos que la media.

Nota: La tabla completa está en este enlace

Y sí, una página web creada con WordPress pesa de media más que una que no, pero también ofrece unas prestaciones incomparablemente mayores generalmente, y de costes ya ni hablamos ¿verdad?

¿Qué pasa con la conectividad?

Luego, no se nos olvide, no son lo mismo las velocidades de conexión a Internet, tanto residencial como móvil, de hace años que las de ahora.

Así que si quieres realmente comparar tendrías que visitar una misma web con la conexión de hace años y con las de ahora.

Está claro que una web actual hace años sería un horror visitarla con las conexiones de antaño, pero, en proporción, ¿qué ha crecido más, la velocidad de conexión o el peso de las páginas web?

Pues en 2016, España estaba en el número 13 mundial de velocidad de conexión a Internet, con una media de 20 Mbps, y actualmente se pueden contratar por precios mucho más bajos velocidades estables de más de 300 Mbps, y cada vez más de 600 Mbps en conexión residencial y de más de 100 Mbps en móvil, y eso que aún no ha llegado la red 5G.

Una cuenta simple nos da que si el peso de una página web media ha crecido un 31% en escritorio y un 87% en móvil, o que una página web creada con WordPress ha incrementado su peso en escritorio un 16% y en móvil un 29%, en contrapartida, las velocidades de conexión a Internet han aumentado su velocidad de manera exponencial, porcentualmente inmensamente más que los pesos de página, con lo que la experiencia de navegación actual, en estas webs más pesadas, es claramente mucho mejor que la de hace unos pocos años.

Así que los mensajes apocalípticos sobre lo lentas que son las webs actuales no tienen ningún sentido. Las páginas web en general, y las hechas con WordPress en particular, cargan más rápido que nunca, porque tenemos conexiones exponencialmente mucho más rápidas que lo que han crecido en peso las webs.

A partir de aquí, no hay que venirse arriba, hay que usar WordPress con sentido común, y aplicar las estrategias básicas para mejorar los tiempos de carga, evitar consumos y uso de recursos innecesarios, y ofrecer páginas web lo más rápidas posibles.

¿Ya está? ¿Nos podemos echar ya a dormir tranquilos?

Claro que no, por mucho que los datos entierren esos debates estériles y bobos que hay a veces en Twitter, eso no quita para que, como administrador responsable de tu web o las de tus clientes, debas siempre ofrecer los mejores tiempos de carga posibles y las páginas web menos pesadas.

Debes aplicar siempre el sentido común, y estrategias de WPO adaptadas a cada tipo de web, encontrando siempre el equilibrio perfecto entre funcionalidades, usabilidad, experiencia de usuario y velocidad de carga.

Y esto pasa por …

  1. No hacer caso a rajatabla las indicaciones de los servicios de análisis de velocidad web, de ninguno, sino ayudarte de ellos para mejorar parámetros que, mejorando la velocidad de tu web, no comprometan su usabilidad.
  2. Usar siempre el archivo más pequeño posible (imágenes, vídeo, etc.) y aprovechando los servicios externos que nos ofrezcan una mejor relación coste/rendimiento.
  3. Realizar mantenimiento y actualizaciones de manera constante para que tu web esté siempre al día, segura y rápida.
  4. Mide siempre después de cada cambio que realices en tu web.
  5. Suscribirte ya a Ayuda WordPress para no perderte artículos tan molones y prácticos como este y otros muchos 😉

¡Queda abierto el debate!

Te toca. Creo que a todos nos encantará leer tu opinión al respecto de todo este asunto en los comentarios, así que siéntete libre de dar tu punto de vista.

La entrada ¿Es verdad que las webs WordPress son cada vez más pesadas y lentas? la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.

Tutorial Divi: Carga diferida (lazy) en imágenes de fondo de secciones y carruseles

Por si no conoces el concepto de carga diferida, o lazy loading en inglés, es la característica que verás en muchas webs por la que las imágenes de una página no se cargan todas nada más visitarla, sino que se van mostrando a medida que haces scroll, navegas, por la misma.

Es una estrategia que hace que la percepción de velocidad de carga sea más rápida, pues solo cargará los recursos necesarios que está viendo el usuario, y solo carga las imágenes a medida que el usuario navega hacia ellas.

Como contrapartida, que todo hay que decirlo, este proceso se realiza mediante JavaScript, lo que puede aumentar el consumo de recursos de tu servidor.

Te digo esto porque estas cosas de la optimización web o WPO, no son una máxima, hay que probar siempre todas las posibilidades y opciones, y no siempre una técnica o estrategia de optimización, como la carga diferida, será una buena decisión en todas las webs.

De este modo, una web con pocas imágenes, todas muy optimizadas previamente, si se le añade la carga diferida de imágenes, puede que no solo no vaya más rápida y sea más óptima en el consumo de recursos, sino menos.

Dicho esto, y si tu web cualifica para aplicar la técnica de carga diferida de imágenes, vamos al tema de hoy…

Ya tengo un plugin que hace lazy loading, ¿por qué habría de aplicar carga diferida en carruseles y fondos de sección de Divi?

Bien dicho, y justo esa es la cuestión, pues la inmensa mayoría de plugins que – entre otras cosas – hacen carga diferida de imágenes, no suelen aplicar esta técnica, el JavaScript, a las imágenes de los fondos de los carruseles y de las secciones del constructor Divi.

Y esto es así porque aplican la carga diferida a los elementos con la etiqueta HTML , pero resulta que los fondos de Divi no llevan esa etiqueta, porque se aplican mediante CSS, así que no suelen reconocer las imágenes de fondo de Divi, que curiosamente suelen ser de gran tamaño, y en ocasiones de bastante peso comparadas con otras que podamos mostrar en otros elementos.

¡Muy bien explicado Fernando, sí señor! Venga, dale ¿cómo lo hago?

Vayamos por partes, porque el código no es el mismo, ya sea un fondo de sección o de un carrusel (o control deslizante como se llama en la horrible traducción de Divi).

Pero antes una información/advertencia:

Estos códigos funcionan con el constructor Divi, el plugin, pero NO con el tema Divi.

Carga diferida en fondos de sección de Divi

El siguiente código aplicará lazy loading a las imágenes de fondo de secciones creadas con el constructor Divi  (plugin, acuérdate):

// Primero se comprueba si hay secciones del constructor Divi en la página
function lazy_load_section_bg_check_if_needed() {
    global $post;
    $regex = '/[et_pb_section[^]]*background_image[^]].*?]/';
    if ( preg_match( $regex, $post->post_content ) ) {
        add_action( 'wp_print_styles', 'lazy_load_section_bg_add_header_css' );
        add_action( 'wp_print_footer_scripts', 'lazy_load_section_bg_add_footer_js' );
    }
}
// Inicialmente se imprime el CSS en  para ocultar todos los fondos de las secciones
function lazy_load_section_bg_add_header_css() {
    $css_selector = 'html.js #et-boc .et_builder_inner_content .et_pb_section.et_pb_with_background:not(.lazy-loaded-background)';
    echo '';
}
// Ahora añadimos el JS que cargará las imágenes al hacer scroll, el lazy loading de marras
function lazy_load_section_bg_add_footer_js() {
    $css_selector = 'html.js #et-boc .et_builder_inner_content .et_pb_section.et_pb_with_background:not(.lazy-loaded-background)';
?>


Este código tendrás que copiarlo en un plugin de personalizaciones, como el que expliqué cómo hacerlo en esta entrada.

Carga diferida en fondos de carruseles de Divi

El código para hacer la carga diferida de las imágenes de fondo de un carrusel creado con el constructor Divi es este otro:

// Primero se comprueba si hay carruseles del constructor Divi en la página
function lazy_load_slider_bg_check_if_needed() {
    global $post;
    $regex = '/[et_pb_slide[^]]*background_image[^]].*?]/';
    if ( preg_match( $regex, $post->post_content ) ) {
        add_action( 'wp_print_styles', 'lazy_load_slider_bg_add_header_css' );
        add_action( 'wp_print_footer_scripts', 'lazy_load_slider_bg_add_footer_js' );
    }
}
// Inicialmente se imprime el CSS en  para ocultar todos los fondos de carruseles
function lazy_load_slider_bg_add_header_css() {
    
    $css_selector = 'html.js #et-boc .et_builder_inner_content .et_pb_slide:not(.et-pb-active-slide):not(.lazy-loaded-slide)';
    
    echo '';
}

// Ahora añadimos el JS que cargará las imágenes al hacer scroll, el lazy loading de marras
function lazy_load_slider_bg_add_footer_js() {
?>


Y como antes lo copias y pegas en tu plugin de funciones útiles, o si lo prefieres en un mu-plugin.

¡Precioso! Ahora, en serio ¿no hay algún plugin para hacer lo mismo?

Vaaaale, sí, los hay, estos:

Pero ¿no es mejor tener más controlada la cosa con tu propio plugin donde metes todos tus apaños?

De paso le pierdes el miedo al código, y ¿quién sabe? quizás en unos meses o años terminas siendo un crack de la programación, que muchos, sino la mayoría, empezaron/mos copiando códigos de otros.

Bueno, tú decides.

La entrada Tutorial Divi: Carga diferida (lazy) en imágenes de fondo de secciones y carruseles la publicó primero Fernando Tellado en Ayuda WordPress. No copies contenido, no dice nada bueno de ti a tus lectores.