Optimización de incrustaciones en redes sociales

En este artículo, veremos específicamente lo que podemos hacer para reducir el impacto de las incrustaciones en las redes sociales y los widgets para compartir en redes sociales, o incluso algunas estrategias para evitarlos por completo. Si bien la atención se centra en la reducción del impacto ambiental, muchos de estos consejos también serán excelentes para el rendimiento.

El COP26 La conferencia sobre el clima ha puesto de relieve la importancia de reducir las emisiones de carbono en todos los ámbitos de nuestra vida. Todos pueden desempeñar un papel en esto, incluidos los que trabajamos en la web.

Medir la huella de carbono de la web no es una ciencia exacta, sino una reportaje de la bbc en 2020 estima que toda la actividad de Internet representa alrededor del 3,7% de las emisiones globales (similar a la industria de las aerolíneas), y sigue aumentando. El tamaño medio de una página web ha ido aumentando constantemente durante años y actualmente es de poco más de 2 MB (según Archivo HTTP), y gran parte de ese aumento se puede atribuir a Javascript. Claramente, esto no solo es malo para el medio ambiente, es malo para el rendimiento y también perjudica a nuestros usuarios. Pero el cálculo de las emisiones de carbono tiene en cuenta mucho más que bytes por cable: está la energía utilizada en el desarrollo, los centros de datos que alojan nuestros archivos, la energía consumida por los dispositivos de los usuarios finales y más.

Hay mucho que podemos hacer para mitigar el impacto ambiental de los sitios que construimos. Verificar Este artículo por Eric Bailey para algunas ideas. Para este artículo, vamos a profundizar más en un área en particular.

Javascript de terceros representa una gran cantidad de información en los sitios web, con análisis, chatbots y widgets integrados como contribuyentes comunes. Mientras trabajaba en un sitio recientemente, noté que un video incrustado de YouTube cargaba alrededor de 600kB de JS para cualquier visitante independientemente de si ese usuario eligió ver el video. Esto parece un desperdicio. También me interesé este análisis del sitio web de la COP26 por Fershad Irani, que muestra muchas cosas que podrían mejorarse para reducir la huella de carbono (relativamente grande) del sitio.

El rediseño de la cobertura de las redes sociales se menciona brevemente como una forma de ahorrar aproximadamente 1,4 MB. Sin embargo, cuando visité el sitio, la cantidad de JS aparentemente cargada desde la sección de noticias de Twitter fue aún mayor. En una inspección más cercana, parecía que otro contenido incrustado dentro tweets (video en particular) estaba contribuyendo a esto.

Para analizar el impacto de varios tipos de inserción, he medido el JS cargado y tiempo total de bloqueo (TBT) en una conexión móvil para una página HTML simple con algunas incrustaciones comunes. El impacto en el rendimiento se mide con Perspectivas de PageSpeed. También está la cantidad de solicitudes a considerar, que para una sola inserción de Twitter es mucho.

Gorjeo

Instagram

Youtube

Estos números se basan en la carga de la primera página: el almacenamiento en caché parece muy eficiente para las cargas de página posteriores. Podemos ver que algunos tipos de incrustaciones son más eficientes que otros: las incrustaciones de Instagram se cargan de forma asíncrona de forma predeterminada, por lo que no bloquean el hilo principal. Sin embargo, está claro que una sola página que contiene varias incrustaciones puede resultar bastante pesada. Con eso en mente, veamos algunas de las formas en que podemos reducir su impacto.

¿Realmente necesita una inserción?

La forma más obvia de reducir el impacto de estas incrustaciones es no incluirlas en absoluto. Muchos CMS hacen que sea muy fácil para los clientes incluir tantas incrustaciones como deseen. Pero eso no significa que ellos deberían. Idealmente, el proceso de diseño debería tener en cuenta las formas en que los clientes podrían desear compartir contenido de las redes sociales. ¿Cuáles son los objetivos del cliente? ¿Un feed de Twitter incrustado realmente agrega algún valor, o de hecho es una distracción del contenido importante de la página?

Debemos concienciar a los clientes sobre las ventajas y desventajas en el rendimiento y el impacto ambiental si eligen incluir incrustaciones. Vale la pena considerar si otras opciones de diseño podrían proporcionar el mismo (o mejor) valor. Algunas opciones alternativas podrían incluir:

• Testimonios seleccionados
  ¿El cliente simplemente quiere mostrar comentarios de clientes satisfechos? Una selección de testimonios bien diseñados podría ser una mejor alternativa.
• Enlaces
  Un resumen de texto simple y un enlace a la publicación original en las redes sociales podría ser una opción viable.
• Webmenciones
  La implementación de Webmentions en un sitio le permite mostrar datos cuando alguien menciona su URL en línea.

Usando una API

Si necesita mostrar (por ejemplo) los últimos cinco tweets de su perfil, podría valer la pena considerar usar la API de Twitter. Significará que también tendrá control total sobre cómo se muestran, por lo que puede optar por mostrar solo el contenido de texto de un tweet, en lugar de imágenes y videos asociados, por ejemplo. Esta es una opción de gran esfuerzo y está más allá del alcance de este artículo.

Video

Si su video es corto y agradable, podría considerar usar un video HTML nativo en lugar de una inserción de YouTube. Esta podría ser una opción especialmente buena para videos de fondo, que a menudo necesitan reproducirse en bucle y permitir un control total sobre la reproducción con solo una pizca de JS. Un video de YouTube, por el contrario, no le permitirá eliminar o personalizar los controles predeterminados del reproductor.

Esto podría no ser adecuado para videos más largos. YouTube optimiza mucho, además de ofrecer contenido desde una CDN, lo que reduce la distancia que deben recorrer los datos, lo que, a su vez, reduce las emisiones de carbono.

Carga lenta

Si concluimos que sí, las incrustaciones de redes sociales son esenciales para nuestro sitio, lo menos que podemos hacer es cargarlas de forma diferida. Esto significa que los recursos no se solicitan hasta que el usuario se desplaza a ese punto de la página. Si nunca llegan allí, entonces el recurso no se carga en absoluto.

Carga lenta un video incrustado de YouTube ahora es trivialmente fácil para los navegadores que lo admiten: simplemente agregue el loading="lazy" atributo. Desafortunadamente, aún no es compatible universalmente: en el momento de escribir este artículo, Firefox solo admite la carga diferida para imágenes, y Safari no lo admite en absoluto. agregando loading="lazy" en Twitter las incrustaciones en el HTML no son posibles, ya que el iframe se adjunta al script incrustado.

bibliotecas como Lozad.js permitirnos cargar contenido de forma diferida con compatibilidad entre navegadores. Esta demostración de Codepen demuestra cómo se puede utilizar para cargar de forma diferida una serie de tweets.

WordPress

Si usa WordPress, hay muchos complementos de carga diferida para videos incrustados para elegir. El Carga lenta El complemento de WP Rocket es muy recomendable, y Este artículo de Sabrina Zeidan demuestra la gran diferencia que puede marcar en el rendimiento. Desafortunadamente, no puedo encontrar ningún complemento de WordPress para incrustaciones de carga diferida de Twitter, Instagram y otros.

Fachadas / Importación en interacción

Una alternativa a una publicación incrustada es mostrar una vista previa de imagen estática o una captura de pantalla, conocida como «fachada». Las capturas de pantalla se pueden capturar manualmente, o puede usar un servicio como Selección de tuits, que crea capturas de pantalla a partir de las URL de los tweets (y tiene una API). No olvides incluir alt texto, para que los usuarios de tecnologías de asistencia puedan acceder al contenido de la imagen.

Para contenido interactivo de terceros, como videos, podemos usar el Import on interaction patrón (detallado en Este artículo por Addy Osmani). La idea es similar a la carga diferida: los recursos no críticos solo se cargan cuando el usuario interactúa con el componente de la interfaz de usuario. Significa que los usuarios que no interactúan con el contenido nunca tienen que pagar el costo adicional de cargar el script de terceros. Aquí hay una demostración muy básica de cómo podemos hacer esto usando Vanilla JS:

La técnica también se puede aplicar a otros tipos de scripts de terceros, como widgets de chat e incrustaciones de mapas. Lo usamos con éxito en Golpe atómico para mejorar enormemente el rendimiento de un sitio con un chatbot. Sin embargo, tiene algunas limitaciones claras: una vez que se carga el video, el usuario debe hacer clic por segunda vez para reproducirlo. Hay algunos paquetes que manejan esto de una manera mucho más elegante para incrustaciones de YouTube y Vimeo:

En muchos sitios web, verá íconos de redes sociales de «hacer clic para compartir» que, cuando se hace clic, invitan al usuario a compartir la página en la aplicación de redes sociales que elija. Desafortunadamente, al igual que las incrustaciones de redes sociales, a menudo vienen con una tonelada de JS para que los usuarios pobres y desprevenidos los descarguen. Si le preocupa el rendimiento o el impacto ambiental de su sitio, vale la pena explorar alternativas.

¿Qué tan útiles son?

Los botones para compartir en redes sociales a menudo son solicitados por clientes deseosos de aumentar el compromiso. Es posible que los hayan notado en los sitios web de sus competidores, pero lo más probable es que no se den cuenta del impacto en el rendimiento. Estos widgets son muy comercializados por las empresas que los proporcionan, y es sorprendentemente difícil encontrar estadísticas concretas sobre la frecuencia con la que los usuarios realmente los usan. Pero de las estadísticas que pude encontrar, la mayoría de ellas indican que el uso general es muy bajo. El consenso parece ser que es mucho más probable que los usuarios compartan contenido de otras maneras (es decir, copiando la URL y compartiendo en la aplicación de su elección) que haciendo clic en los botones para compartir en redes sociales. (Esta publicación de 2017 describe algunas estadísticas y algunas razones posibles). Estos factores combinados pueden de alguna manera disuadir a los clientes de agregarlos a un sitio.

La API para compartir en la Web

Si desea agregar un botón para compartir, pero quiere evitar cualquier JS innecesario, una forma más sencilla de hacerlo es con el API para compartir en la web. Tiene un soporte razonablemente bueno en los navegadores móviles, pero aún no tiene un soporte de escritorio generalizado.

Podemos usar el navigator.share() método para compartir una URL o archivos, como imágenes, videos o archivos PDF.

navigator.share({
  title: 'Smashing Magazine',
  text: 'Web development news and tutorials',
  url: 'https://www.smashingmagazine.com/'
})

Esta demostración proporciona un botón para compartir en redes sociales para los navegadores que lo admiten (y lo oculta para aquellos que no lo hacen) llamando al método al hacer clic. Primero podemos probar el soporte usando navigator.canShare():

Podemos ver que la API de Web Share no proporciona la mismo experiencia como widgets para compartir en redes sociales, pero permite al usuario elegir entre sus aplicaciones instaladas para compartir el contenido.

Paquetes NPM

Si necesita botones para compartir que se comporten más como los widgets para compartir mencionados anteriormente y tengan compatibilidad entre navegadores, una mejor opción es usar un paquete NPM. share-buttons es uno de esos paquetes. Proporciona 19 opciones diferentes para compartir y carga mucho menos JS. Otra ventaja es que puedes personalizar completamente tus botones para compartir.

Botones sin JS

Puede ser una sorpresa que en realidad no necesite JS en absoluto para ofrecer enlaces para compartir en redes sociales: todo lo que necesita es una URL de enlace. Conocer la URL correcta para implementar esto no es exactamente intuitivo, pero hay varios sitios de ayuda disponibles que crean el enlace para usted: compartirbotones.io y simpleshare.io son dos de ellos. El primero proporciona un fragmento de CSS para darles estilo como si fueran reales también, aunque puedes personalizarlos libremente. Como afirma el sitio Sharing Buttons de Max Stoiber:

«Se cargan increíblemente rápido (solo usan una única solicitud HTTP), no bloquean el procesamiento de su sitio web, son accesibles y no rastrean al usuario».

¿Que es no gustar?

Realmente no puedo encontrar ninguna desventaja en este enfoque, parece un claro ganador. creo quizás en el futuro, es posible que el URI utilizado para compartir por cualquiera de los sitios de redes sociales cambie, lo que significa que tendrá que actualizar manualmente (en lugar de actualizar un paquete o complemento). Pero no sé qué tan probable es este escenario, y parece que vale la pena por los beneficios.