Cómo reducir el impacto de los guiones de terceros en WordPress

Los scripts de terceros agregan una amplia gama de funciones útiles para su sitio, lo que lo hace más interactivo, más dinámico y más interconectado. Funciones como análisis, anuncios, botones para compartir, incorporación de video: todas son posibles debido a los scripts de tercera parte. Algunas de estas funciones pueden ser esenciales para la funcionalidad de su sitio web o para generar dinero. Sin embargo, las escrituras de terceros también son una de las principales causas de rendimiento en los sitios web. Por lo general, estos son el recurso más caro al cargar la página. Algunos de estos scripts también pueden presentar riesgos de seguridad y confidencialidad.
En este artículo, descubrirá los elementos básicos de los scripts de terceros, cómo afectan el rendimiento del sitio web y qué puede hacer para aliviar sus efectos negativos. ¿Suena interesante? ¡Vamos a empezar! ¿Cuáles son los guiones de terceros? “Scripts de terceros” se refiere a cualquier script que pueda incorporar directamente a su sitio web desde un proveedor de terceros. No son creados por usted y no controlados explícitamente por usted y son transmitidos desde una URL externa. ¿Dónde se usan los scripts de terceros? Casi todos los sitios web utilizan scripts de tercera parte para agregar algunas características. Algunos de sus usos más comunes son:
Incorporación de video (por ejemplo, YouTube, Vimeo)
Agregar botones de intercambio en redes sociales
Agregar widgets de chat
Incorporación de sistemas de comentarios (por ejemplo, Disqus)
Activación del análisis web (por ejemplo, Google Analytics)
Incorporación de anuncios
Servir recursos a través de redes de entrega de contenido (CDN) experimentando con scripts de prueba A/B
Agregar bibliotecas de ayuda (por ejemplo, animación, bibliotecas funcionales, etc.)
Los numerosos usos de los desarrolladores de terceros pueden agregar fuertes funcionalidades a los sitios web con solo unas pocas líneas de código utilizando scripts de terceros. P.ej:

Los equipos de marketing pueden usar informes de los scripts de prueba A/B para corroborar sus decisiones comerciales en datos sólidos.
Los usuarios pueden compartir un artículo que les gusta en su red social favorita solo haciendo clic en un botón.
Los clientes potenciales pueden comunicarse con asistencia o personal de ventas a través del widget de chat y pueden obtener respuestas a sus preguntas de inmediato.
Las aplicaciones de los scripts de tercera parte son infinitas, pero simplemente no terminan aquí. Si se usa sin precaución, los scripts de tercera parte pueden ser problemáticos para la privacidad, la seguridad y el rendimiento de la página.
El costo de JavaScript de las escrituras de terceros de terceros está en todas partes. Según el informe del estado de JavaScript de httParchive, el número promedio de scripts externos solicitados por los sitios web es de 20, y su tamaño total es de aproximadamente 449 kb. El 93.59% de las páginas web incluyen al menos un tercer recurso parcial. Las cavas más profundas en los mismos datos muestran que el 76% de los sitios web siguen a los usuarios con scripts de análisis. El peor impacto de los scripts de terceros es el retraso de la ruta de renderizado crítico, además del efecto de sus puntajes centrales de vital web, a partir de la nota de FID.
La ruta de representación crítica es el conjunto de acciones que hace un navegador para ensamblar HTML, CSS y JavaScript en un sitio web vivo y utilizable. Por supuesto, el tamaño de la carga útil de guiones de terceros juega un papel importante aquí, pero hay otro factor importante a considerar. En 2019, los costos dominantes de procesar las Escrituras son ahora el tiempo de alta y ejecución de la CPU. El costo de JavaScript en 2019 JavaScript requiere que se ejecutaran muchos recursos de CPU. Incluso si optimiza los scripts de terceros para reducir el impacto en el tiempo de rango, pueden continuar afectando el valor para interactivos. Mida lo antes posible a los usuarios con una página web. Cuanto más lento, más frustrado estarán sus usuarios y mayores serán las posibilidades de que abandonen su sitio. Puede resumir el costo de usar JavaScript con dos valores principales. Aumentando la página de byte byte, JavaScript es el recurso de tercera parte más caro que ofrece páginas web. Debido a que un navegador tiene que descargar todos los scripts de terceros durante la carga de la página, agregarlos a su sitio puede disminuir.
La dimensión de la cantidad de transferencia de scripts externos en una página web (fuente: httparchive) Cuanto más grandes sean los scripts, más difícil será disminuir el rendimiento de su sitio, mayor es el tamaño de una página web, más lento se cargará.
Reducir el tamaño de los scripts externos es una forma impresionante de acelerar su sitio. Solicitudes de red adicionales Cada vez que un usuario solicita cualquiera de las páginas de su sitio, el navegador debe hacerse cargo de todos los scripts de terceros. Para hacer esto, el navegador llegará a todas las URL externos donde se alojan estos scripts para descargarlas. El número de scripts externos solicitados por una página típica (fuente: httParchive) Por lo general, cada tercera parte en sí no representa demasiado. Pero la carga de cada script de terceros es una solicitud HTTP adicional que el navegador debe hacer para reproducir la página por completo. Estas solicitudes se recopilan para ralentizar el rendimiento de la página.

Además, cuanto más tenga su página web, más tiempo será el valor “tiempo de interacción”.
Chrome Devtools muestra un sitio que realiza 846 solicitudes y transferencias de 12.3 MB (abril de 2020) En el ejemplo anterior, puede ver que la página dura más de 9 segundos para cargarse por completo. El principal culpable aquí es la incorporación de muchos scripts de terceros que reducen la velocidad de carga de la página.

Las solicitudes de terceros de acuerdo con la categoría y el tipo de contenido (Fuente: Web Almanah) Las Escrituras no son los únicos recursos de terceros utilizados por los sitios web, pero son una gran parte de terceros para todas las categorías y tipos de contenido. Por lo tanto, su optimización debería ser su prioridad.
Medición del impacto de la carga de JavaScript de terceros Hay muchas herramientas para probar las páginas web que puede usar para diagnosticar los scripts de terceros y para descubrir cuáles de ellos son los recursos más caros en su sitio. Estas herramientas le muestran el número de scripts de terceros cargados por su sitio y el tiempo requerido para ejecutarlos. Aquí hay algunas herramientas gratuitas que puede usar para evaluar los scripts de terceros: webpagetest.org

Devtools de Chrome

PageSpeed ​​Insights (auditorías del faro)
WebPageTest.org WebPagetest es una herramienta de prueba de fuente de velocidad gratuita, que puede usar para evaluar el rendimiento de su sitio web. Incluye muchas funciones avanzadas, como diagramas de cascada, desglose de contenido según el tipo y el dominio, las páginas web de bandas y videos y comparación de pruebas.
WebPageTest ofrece muchas herramientas avanzadas para probar el rendimiento de su sitio. Pruebo mi sitio de cartera en WebPageTest. A continuación se muestra la visualización de la cascada de las solicitudes realizadas por mi sitio durante la carga de su página. Hay muchas solicitudes, pero no todas provienen de terceras fuentes.
Vista en cascada de todas las solicitudes en el diagrama de Cascade WebPagetest desglosa las solicitudes de acuerdo con el dominio y el tamaño, junto con una cronología que representa la carga de la página. También puede consultar el desglose de contenido escribiendo haciendo clic en la pestaña “Deducción de contenido”. Como puede ver, JS constituye muchas solicitudes y bytes transferidos.
Verifique el número de solicitudes y bytes JS transferidos a WebPageTest haciendo clic en la pestaña “Dominios”, obtendrá una lista completa de todas las áreas accedidas por el navegador durante la carga de la página. Deflexión del contenido dependiendo del campo en WebPageTest, La mayoría de las solicitudes provienen del campo. De origen mismo. También puede hacer clic en el enlace “Solicitud de mapa” para ver todas estas solicitudes.
Vea todas las solicitudes para cargar un sitio web WebPageTest si reconoce un script de problemas que requiere mucho tiempo para cargar o ejecutar, verifique que ese script sea necesario. Elimine tales scripts si no hay daños perceptibles a la funcionalidad de su sitio web o experiencia del usuario. WebPageTest también le brinda una forma de probar la velocidad de su sitio bloqueando las solicitudes de ciertos campos. Esto es útil para medir el impacto en el rendimiento de los terceros terceros scripts angustiantes, dirigiéndolos específicamente.

El script WebPageTest le permite bloquear las solicitudes de ciertas áreas blockdomainsexcept www.domain.com cdn.domain.com La excepción de los CDN importantes) y luego puede dirigir WebPageTest a navegar al sitio para probarlo. Nota: También puede usar la pestaña “Lock” en la sección “Configuración avanzada” de WebPageTest para hacer lo mismo. Aquí hay un flujo de trabajo típico para usar WebPageTest para identificar scripts lentos:

Prueba la página web original.

Pruebe la misma página web nuevamente, pero esta vez con ciertos scripts de tercera parte. Complete los dos resultados utilizando la función “Comparación” de WebPageTest del panel “Historial de pruebas”.

Vaya al panel “Test History” para comparar dos o más pruebas webpageTest no es todo WebPageTest. Puede obtener más información sobre cómo puede usar WebPageTest para probar el impacto de los scripts de terceros. Chrome Devtools Chrome Devtools acepta resaltar a terceros en el panel “Red”. Esta característica le permite obtener información detallada sobre las solicitudes de script de terceros en una página.

Use la etiqueta “Insignias de terceros” para resaltar las solicitudes externas (Fuente: Google) Para usar esta función, presione CTRL/CMD + Shift + P en cualquiera de los paneles Chrome DevTools para mostrar el “Menú de comando”. Luego escriba “Muestra las insignias de tercera parte” y active esta característica.

Pasando con el mouse sobre un script de terceros en Chrome Devtools (Fuente: Google) Nota: Google Chrome versión 80 ha eliminado esta función, anunciando que no será reemplazada. Lo más probable es que sea un error. Por ahora, debe ordenar los scripts externos manualmente hasta que Google aborde este problema. También puede usar el panel “Performance” en Chrome DevTools para identificar cualquier problema de rendimiento en su sitio.
El panel de “rendimiento” en Chrome DevTools Para obtener más información sobre cómo probar el rendimiento de carga de la página con Chrome DevTools, consulte Google sobre este tema. Far audita la herramienta de prueba de velocidad del faro de Google tiene dos auditorías específicas para evaluar el rendimiento de su sitio. La auditoría de tiempo de Javashript de Lighthouse clasifica los scripts de acuerdo con su análisis, compilación y tiempo de evaluación. Estos valores pueden ayudarlo a descubrir scripts de tercera parte que recopilan muchos de los recursos de su servidor su “tiempo de inicio de JavaScript” del faro (Fuente: Google) Lista de auditoría de carga de red de faro todos los scripts de acuerdo con su tamaño total y tiempo de transferencia. Puede usar estos valores para identificar scripts de terceros que pueden ralentizar el tiempo de carga de su sitio.
La auditoría del faro “Cargas de red” (Fuente: Google) El instrumento del faro en Chrome también le muestra recursos costosos de terceros en una página ordenada dependiendo del tamaño y el tiempo de transferencia.
(Fuente: Addy Osmani, Gerente de Ingeniería, equipo de Google Chrome) Ahora que ha aprendido cómo probar el rendimiento de los scripts de tercera parte, es hora de aprender a reducir o cancelar su daño.

Cómo minimizar los efectos de los scripts de terceros en WordPress 1. Retrasar la carga de terceros Si encuentra scripts de terceros que ralentizan su sitio, puede cargarlos utilizando los atributos asíncronos HTML para evitar su impacto negativo en la carga de la página .El atributo asíncrono obliga al navegador a continuar analizando el resto del documento HTML hasta que se descargue el script.Una vez que el script finaliza la descarga, deja de analizar el documento HTML para ejecutar el script.El atributo hace lo mismo hace lo mismo, excepto que el navegador no ejecuta el script hasta que analizó todo el documento HTML.

Los atributos “Async” vs “aplazamiento” (Fuente: Crecimiento con la Web) Es aconsejable cargar todos sus scripts de terceros con atributos asíncronos o posponidos (a menos que sean esenciales para la forma crítica de jugar su web). Puede obtener más información sobre el retraso en JavaScript en el artículo detallado del cohete WP. WP Rocket es la forma más fácil de retrasar los archivos JavaScript y dejar que la página se cargue más rápido. 2. Los archivos de JavaScript de terceros de terceros que alojan escrituras de terceros en su servidor pueden darle más control sobre cómo se cargan. Ayuda a reducir los tiempos de búsqueda de DNS y de ida y vuelta, mejora el caché HTTP y utiliza características avanzadas, como el empuje del servidor HTTP/2. Se recomienda un auto-being para cualquier guión crítico de terceros para la operación de su sitio (por ejemplo, jQuery, Modernizr, Underscore.js). Advertencia: los scripts autoguiados pueden exceder la actualidad y no funcionar según lo dispuesto. Por ejemplo, si organiza un script de anuncio usted mismo y si el editor de anuncios cambia cómo funciona el script, entonces su sitio no transmitirá anuncios hasta que actualice manualmente el script de auto-hambre. 3. Elimine completamente el script de terceros si un script de terceros no agrega ningún valor claro a su sitio o usuarios, entonces considere eliminarlo. Muchos temas y complementos de WordPress cargan muchos scripts innecesarios que nunca puede usar.


WordPress obliga al script jquey que emigró a cargar incluso WordPress obliga a cada sitio a cargar el script scripto migrar (WP-Includes/js/jQuery/jquey-migge.min.js). Esto ayuda a los complementos y temas más antiguos a mantener la compatibilidad con la versión anterior del jQuey. Aunque este no es un script de terceros, debido a que trabaja por cuenta propia, agrega una solicitud HTTP adicional innecesariamente. Consejo: puede usar las opciones de cohetes WP Built -in para eliminar el script jquey migrado de la carga. Pregúntese si su sitio realmente necesita una diapositiva o un script de formato de datos. Si no está seguro, puede realizar una prueba A/B para verificar que eliminar un script afecta el rendimiento de su sitio en comparación con el grado de uso. 4. Implemente las sugerencias de recursos de su navegador que se conectan a campos externos para descargar scripts de tercera parte pueden llevar un tiempo excesivo, especialmente si sus usuarios están en redes lentas. Las búsquedas DNS, las redireccionamientos y cualquier viaje redondo para cargar cada script de terceros pueden conducir a retrasos significativos. Puede usar sugerencias de recursos del navegador para establecer una conexión con el dominio externo que aloja el script de tercera parte al comienzo de la carga de la página. Hay muchas indicaciones de recursos, pero aquellos que son útiles aquí son DNS-prefetch o preconnect. Si el destino final del dominio externo de su tercera parte usa https: //, entonces puede usarlo para evitar viajes de ida y vuelta TCP y para manejar cualquier negociación de TLS de antemano. <

Enlace rel = “preconnect” href = “https://cdn.domain.com”> Para más información, consulte el artículo de WP Rocket sobre sugerencias de recursos del navegador.5. Carga perezosa JavaScript La tercera parte de los terceros elementos incorporados, como anuncios y videos, aporta mucho estrés en su sitio, más si se entrega a través de fuentes mal optimizadas.Puede cargar perezosamente estos recursos construidos para acelerar la carga de la página.Por ejemplo, si transmite anuncios en el sótano de su sitio, puede cargarlos perezosamente para que se carguen solo cuando el usuario ejecuta la página.

Lanzamiento de la carga del contenido a continuación (Fuente: Google) Puede usar WP Rocket para activar la carga perezosa en su sitio web de WordPress. Nota: WordPress 5.5 agregó la funcionalidad nativa de la carga perezosa, lo que hace que esta sea una característica predeterminada para millones de sitios web. Si incorpora comerciales en su sitio, consulte este elemento de Mediavin, donde discuten cómo han mejorado la velocidad de la página en un 200% después de implementar la carga perezosa. Use un administrador de etiquetas para organizar los administradores de etiquetas de terceros JS le permiten agrupar múltiples scripts (o etiquetas) en parte y administrarlos todos desde una sola fuente. El uso de un administrador de etiquetas sabiamente puede ayudarlo a minimizar los toques de rendimiento de la carga de script de tercera parte. Aunque puede cargar la tercera parte de los scripts asíncronos, el navegador aún debe analizarlos y ejecutarlos individualmente. Esto podría significar la solicitud de datos adicionales durante la carga de la página. Los gerentes de etiquetas resuelven este problema reduciendo el número de solicitudes a una. Google Tag Manager (GTM) es la solución de administración de etiquetas más popular. Todas sus etiquetas están cargadas solas, por lo que el navegador juega una página sin descanso. Incluso un script de terceros con carga lenta no bloqueará la carga de ningún otro script. El complemento de Google Tag Manager es una forma simple de integrar GTM en los sitios de WordPress. Otros administradores de etiquetas que puede analizar son el lanzamiento de la plataforma Adobe Experience, Ensighten y Qbit. Advertencia:

Use administradores de etiqueta juiciosamente como GTM. Si bien reduce el costo de cargar los terceros scripts, su simplicidad lo abre al abuso de cualquier persona tiene las credenciales necesarias para agregar etiquetas. Algunas etiquetas también pueden ingresar una cadena de solicitudes que puede llevar su sitio a los rastreadores (Fuente: Harry Roberts, Google, BBC, Kickstarter) Consultor) a su sitio, debe utilizar un presupuesto de rendimiento para asegurarse de que el rendimiento de su sitio no regrese a tiempo. Un presupuesto de rendimiento es un límite autoimpuesto para contar el número total de solicitudes y tamaño de scripts, imágenes, etc. También puede incluir establecer un límite para los valores de rendimiento, como “tiempo de interacción” y “primera pintura significativa”. Para obtener más información, consulte la lista de todos los tipos y valores de recursos aceptados.