Carga el JavaScript de terceros de manera eficiente
Evita los errores comunes de usar scripts de terceros para mejorar los tiempos de carga y la experiencia del usuario.
Si un script de terceros está ralentizando la carga de tu página, tienes dos opciones para mejorar el rendimiento:
Eliminarlo si no agrega algún valor claro a tu sitio.
Optimiza el proceso de carga.
Esta publicación explica cómo optimizar el proceso de carga de scripts de terceros con las siguientes técnicas:
Usar el atributo de
asynco dedeferen etiquetas<script>Establecer conexiones tempranas con los orígenes requeridos
Carga diferida
Optimización de la forma en que se sirven los scripts de terceros
Usar async o defer #
Debido a que los scripts síncronos retrasan la construcción y la representación del DOM, siempre debes de cargar scripts de terceros de forma asincrónica a menos que el script tenga que ejecutarse antes de que se pueda procesar la página.
Los atributos de async y defer le dicen al navegador que puede seguir analizando el HTML mientras carga el script en segundo plano y que luego ejecute el script después de que se cargue. De esta forma, las descargas de scripts no bloquean la construcción del DOM ni la representación de la página. El resultado es que el usuario puede ver la página antes de que todos los scripts hayan terminado de cargarse.
<script async src="script.js">
<script defer src="script.js">La diferencia entre async y defer recae en cuando se comienzan a ejecutar los scripts.
async #
Los scripts con el atributo de async se ejecutan en la primera oportunidad después de que terminan de descargarse y antes del evento de carga de la ventana. Esto significa que es posible (y probable) que los scripts de async no se ejecuten en el orden en que aparecen en el HTML. También significa que pueden interrumpir la construcción del DOM si terminan de descargar mientras el analizador todavía está en funcionamiento.
defer #
Los scripts con el atributo de defer se ejecutan después de que el análisis de HTML esté completamente terminado, pero antes del evento de DOMContentLoaded. defer garantiza que los scripts se ejecutarán en el orden en que aparecen en el HTML y no bloquearán el analizador.
Utiliza
asyncsi es importante que la secuencia de comandos se ejecute antes en el proceso de carga.Utiliza
deferpara recursos menos críticos. Un reproductor de video que se encuentra en la mitad inferior de la página, por ejemplo.
El uso de estos atributos puede acelerar significativamente la carga de la página. Por ejemplo, Telegraph recientemente aplazó todos sus scripts, incluyendo los anuncios y análisis, y mejoró el tiempo de carga de anuncios en un promedio de cuatro segundos.
Establecer conexiones tempranas con los orígenes requeridos #
Puedes ahorrar entre 100 y 500 ms si estableces conexiones tempranas con importantes orígenes de terceros.
Dos tipos de <link> pueden ayudar aquí:
preconnectdns-prefetch
preconnect #
<link rel="preconnect"> le informa al navegador que tu página tiene la intención de establecer una conexión con otro origen y que desea que el proceso comience lo antes posible. Cuando se realiza la consulta de un recurso desde el origen preconectado, la descarga comienza inmediatamente.
<link rel="preconnect" href="https://cdn.example.com">dns-prefetch #
El <link rel="dns-prefetch> maneja un pequeño subconjunto de lo que maneja <link rel="preconnect">. El establecimiento de una conexión implica la búsqueda de DNS y el protocolo de enlace de TCP, y para orígenes seguros, negociaciones de TLS. dns-prefetch instruye al navegador solo resolver el DNS de un dominio específico antes de que se haya llamado explícitamente.
La sugerencia de preconnect se utiliza mejor solo para las conexiones más críticas; para dominios de terceros menos críticos, utiliza <link rel=dns-prefetch>.
<link rel="dns-prefetch" href="http://example.com">La compatibilidad del navegador con dns-prefetch es ligeramente diferente a la compatibilidad con preconnect, por lo que dns-prefetch puede servir como respaldo para los navegadores que no sean compatibles con preconnect. Utiliza etiquetas de enlace independientes para implementar esto de forma segura:
<link rel="preconnect" href="http://example.com">
<link rel="dns-prefetch" href="http://example.com">Recursos de terceros de carga diferida #
Los recursos de terceros integrados pueden contribuir en gran medida a reducir la velocidad de la página cuando se construyen de una forma deficiente. Si no son críticos o están en la mitad inferior de la página (es decir, si los usuarios tienen que desplazarse para verlos), la carga diferida es una buena manera de mejorar la velocidad de la página y las métricas de contenido. De esta manera, los usuarios obtendrán el contenido de la página principal más rápido y tendrán una mejor experiencia.
Un enfoque eficaz es cargar contenido de terceros de forma diferida después de que se cargue el contenido de la página principal. Los anuncios son un buen candidato para este enfoque.
Los anuncios son una fuente importante de ingresos para muchos sitios, pero los usuarios vienen por el contenido. Al cargar anuncios de forma diferida y entregar el contenido principal más rápido, puedes aumentar el porcentaje de visibilidad general de un anuncio. Por ejemplo, MediaVine cambió a anuncios de carga diferida y vio una mejora del 200% en la velocidad de carga de la página. DoubleClick tiene orientación sobre cómo cargar anuncios en forma diferida en su documentación oficial.
Un enfoque alternativo es cargar contenido de terceros solo cuando los usuarios se desplazan hacia abajo en dirección hacia sección de la página.
Intersection Observer es una API de navegador que detecta de manera eficiente cuando un elemento entra o sale de la ventana gráfica del navegador y se puede utilizar para implementar esta técnica. lazysizes es una biblioteca popular de JavaScript cargar imágenes y iframes de manera diferida. Es compatible con incrustaciones y widgets de YouTube. También tiene compatibilidad opcional para IntersectionObserver.
El uso del atributo de loading para imágenes de carga diferida e iframes es una excelente alternativa a las técnicas de JavaScript, ¡y recientemente ya se encuentra disponible en Chrome 76!
Optimiza la forma en que sirves scripts de terceros #
Alojamiento en CDN de terceros #
Es común que terceros proporcionen URL de archivos de JavaScript que ellos alojan, los cuales generalmente se encuentran en una red de entrega de contenido (CDN). Los beneficios de este enfoque son que puedes comenzar rápidamente, simplemente es copiar y pegar la URL, y no hay gastos de mantenimiento. El proveedor externo maneja la configuración del servidor y las actualizaciones de secuencias de comandos.
Pero debido a que no están en el mismo origen que el resto de tus recursos, cargar archivos desde una CDN pública tiene un costo de red. El navegador debe realizar una búsqueda de DNS, establecer una nueva conexión HTTP y, en orígenes seguros, realizar un protocolo de enlace SSL con el servidor del proveedor.
Cuando utilizas archivos desde servidores de terceros, rara vez tienes control sobre el almacenamiento en caché. Depender de la estrategia de almacenamiento en caché de otra persona podría provocar que los scripts se recuperen innecesariamente de la red con demasiada frecuencia.
Auto-hospedaje de scripts de terceros #
Los scripts de terceros auto-hospedados es una opción que te da más control sobre el proceso de carga de un script. Al auto-hospedarse, puede:
- Reducir los tiempos de búsqueda de DNS y de ida y vuelta.
- Mejora las cabeceras de almacenamiento en caché HTTP.
- Aprovechar HTTP/2 server push.
Por ejemplo, Casper se las arregló para reducir en 1,7 segundos el tiempo de carga al autohospedar un script de Prueba A/B.
Sin embargo, el auto-hospedaje tiene una gran desventaja: los scripts pueden quedar desactualizados y no recibirán actualizaciones automáticas cuando haya un cambio de API o una solución y cambio de seguridad.
Utiliza los service workers para almacenar en caché los scripts de los servidores de terceros #
Una alternativa al auto-hospedaje que te permite un mayor control sobre el almacenamiento en caché al mismo tiempo que obtienes los beneficios de CDN de terceros es utilizar los service workers para almacenar en caché los scripts de servidores de terceros. Esto te da control sobre la frecuencia con la que se recuperan los scripts de la red y hace posible crear una estrategia de carga que limita las solicitudes de recursos de terceros no esenciales hasta que la página llega a un momento clave para el usuario. El uso de preconnect para establecer conexiones tempranas en este caso también puede mitigar los costos de la red hasta cierto punto.