Evitar los errores comunes de usar secuencias de comandos de terceros para mejorar los tiempos de carga y la experiencia del usuario
Si una secuencia de comandos de terceros demora la carga de la página, tienes dos opciones para mejorar el rendimiento:
Quítala si no agrega un valor claro a tu sitio.
Optimiza el proceso de carga.
En esta publicación, se explica cómo optimizar el proceso de carga de secuencias de comandos de terceros con las siguientes técnicas:
Cómo usar los atributos
asyncodeferen etiquetas<script>Establece conexiones tempranas con los orígenes necesarios
Carga diferida
Cómo optimizar la publicación de secuencias de comandos de terceros
Usa async o defer
Dado que las secuencias de comandos síncronas retrasan la construcción y el renderizado del DOM, siempre debes cargar secuencias de comandos de terceros de forma asíncrona, a menos que la secuencia de comandos deba ejecutarse antes de que se pueda renderizar la página.
Los atributos async y defer le indican al navegador que puede seguir analizando el HTML mientras se carga la secuencia de comandos en segundo plano y, luego, ejecutarla después de que se cargue. De esta manera, las descargas de secuencias de comandos 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 se terminen de cargar todas las secuencias de comandos.
<script async src="script.js">
<script defer src="script.js">
La diferencia entre async y defer es cuando comienzan a ejecutar las secuencias de comandos.
async
Las secuencias de comandos con el atributo async se ejecutan en la primera oportunidad después de que terminan de descargarse y antes del evento load de la ventana. Esto significa que es posible (y muy probable) que las secuencias de comandos de async no se ejecuten en el orden en que aparecen en el código HTML. También significa que pueden interrumpir la compilación del DOM si finalizan la descarga mientras el analizador aún está en funcionamiento.
defer
Las secuencias de comandos con el atributo defer se ejecutan una vez que finaliza el análisis de HTML, pero antes del evento DOMContentLoaded. defer garantiza que las secuencias de comandos se ejecutarán en el orden en que aparecen en HTML y no bloqueará el analizador.
Usa
asyncsi es importante que la secuencia de comandos se ejecute antes durante el proceso de carga.Usar
deferpara recursos menos críticos Por ejemplo, un reproductor de video que se encuentra en la mitad inferior de la página.
El uso de estos atributos puede acelerar significativamente la carga de la página. Por ejemplo, Telegraph recientemente postergó todas sus secuencias de comandos, incluidos los anuncios y las estadísticas, y mejoró el tiempo de carga de los anuncios en un promedio de cuatro segundos.
Establece conexiones tempranas con los orígenes necesarios
Puedes establecer conexiones tempranas con orígenes externos importantes para ahorrar entre 100 y 500 ms.
Dos tipos de <link> pueden ser útiles en este caso:
preconnectdns-prefetch
preconnect
<link rel="preconnect"> informa al navegador que tu página pretende establecer una conexión con otro origen y que deseas que el proceso se inicie lo antes posible. Cuando se realiza la solicitud de un recurso desde el origen preconectado, la descarga comienza de inmediato.
<link rel="preconnect" href="https://cdn.example.com">
dns-prefetch
<link rel="dns-prefetch> controla un pequeño subconjunto de lo que controla <link rel="preconnect">. Establecer una conexión implica la búsqueda de DNS y el protocolo de enlace TCP. Además, para orígenes seguros, las negociaciones de TLS. dns-prefetch indica al navegador que solo resuelva el DNS de un dominio específico antes de que se lo llame de forma explícita.
La sugerencia preconnect se usa mejor solo para las conexiones más críticas. Para dominios de terceros menos críticos, usa <link rel=dns-prefetch>.
<link rel="dns-prefetch" href="http://example.com">
La compatibilidad de los navegadores con dns-prefetch es ligeramente diferente de la compatibilidad con preconnect, por lo que dns-prefetch puede servir como resguardo en navegadores que no admiten preconnect. Usa etiquetas de vínculo separadas para implementarla 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 incorporados de terceros pueden contribuir en gran medida a que la velocidad de la página sea lenta cuando se estructuran de manera deficiente. Si no son fundamentales o están en la mitad inferior de la página (es decir, si los usuarios tienen que desplazarse para verlas), la carga diferida es una buena manera de mejorar la velocidad de la página y las métricas de procesamiento de imagen. De esta manera, los usuarios verán el contenido de la página principal más rápido y tendrán una mejor experiencia.
Un enfoque efectivo es hacer una carga diferida de contenido de terceros después de que se carga el contenido de la página principal. Los anuncios son una buena opción para este enfoque.
Los anuncios son una importante fuente de ingresos para muchos sitios, pero los usuarios vienen por el contenido. Mediante la carga diferida de anuncios y la publicación del contenido principal más rápido, puede aumentar el porcentaje de visibilidad general de un anuncio. Por ejemplo, MediaVine cambió a los anuncios de carga diferida y observó una mejora del 200% en la velocidad de carga de la página. DoubleClick puede encontrar orientación sobre la carga diferida de anuncios en su documentación oficial.
Un enfoque alternativo es cargar contenido de terceros solo cuando los usuarios se desplazan hacia abajo a esa sección de la página.
Intersection Observer es una API de navegador que detecta de manera eficiente cuándo un elemento entra en el viewport del navegador o sale de él, y se puede usar para implementar esta técnica. lazysizes es una biblioteca de JavaScript popular para la carga diferida de imágenes y iframes. Es compatible con las incorporaciones y los widgets de YouTube. También tiene compatibilidad opcional con IntersectionObserver.
El uso del atributo loading para la carga diferida de imágenes e iframes es una excelente alternativa a las técnicas de JavaScript y, recientemente, está disponible en Chrome 76.
Optimice la forma en que publica secuencias de comandos de terceros
Hosting CDN de terceros
Es común que los proveedores externos proporcionen las URLs de los archivos JavaScript que alojan, generalmente, en una red de distribución de contenidos (CDN). Los beneficios de este enfoque son que puedes comenzar rápidamente (solo copia y pega la URL) y no hay sobrecarga de mantenimiento. El proveedor externo controla la configuración del servidor y las actualizaciones de secuencias de comandos.
Sin embargo, como 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 usas archivos de 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 hacer que las secuencias de comandos se vuelvan a recuperar innecesariamente de la red con demasiada frecuencia.
Aloja por cuenta propia las secuencias de comandos de terceros
El alojamiento autónomo de secuencias de comandos de terceros es una opción que le brinda más control sobre el proceso de carga de una secuencia de comandos. Con el hosting propio, puedes hacer lo siguiente:
- Reduce los tiempos de ida y vuelta y la búsqueda de DNS.
- Mejora los encabezados de almacenamiento en caché HTTP.
- Aprovecha HTTP/2 o el HTTP/3 más reciente.
Por ejemplo, Casper logró reducir 1.7 segundos del tiempo de carga al alojar por cuenta propia una secuencia de comandos de pruebas A/B.
Sin embargo, el hosting propio tiene una gran desventaja: las secuencias de comandos pueden quedar desactualizadas y no recibirán actualizaciones automáticas cuando haya un cambio en la API o una corrección de seguridad.
Usa service workers para almacenar en caché secuencias de comandos de servidores de terceros
Una alternativa al hosting propio que le da un mayor control sobre el almacenamiento en caché sin dejar de obtener los beneficios de la CDN de terceros es usar service worker para almacenar en caché secuencias de comandos de servidores de terceros. De este modo, puedes controlar la frecuencia con la que se vuelven a recuperar las secuencias de comandos de la red y puedes crear una estrategia de carga que limite las solicitudes de recursos externos no esenciales hasta que la página llegue a un momento clave para el usuario. En este caso, usar preconnect para establecer conexiones tempranas también puede mitigar los costos de red en cierta medida.