Cómo retrasar la carga del script en WordPress
Publicado: 2022-05-02¿Está buscando una forma de retrasar la carga del script en WordPress?
Los usuarios de WordPress siempre están al acecho de técnicas de vanguardia para mejorar el tiempo de carga de su sitio web. La velocidad es increíblemente importante para muchos factores que crean una presencia en línea exitosa. Dos de los elementos principales cuando se trata de la velocidad de WordPress es la experiencia del visitante y la clasificación en los motores de búsqueda.
Hay muchas herramientas de terceros que mejoran la funcionalidad o la visibilidad de un sitio web de WordPress. Estas herramientas de terceros usan JavaScript para agregar su funcionalidad a un sitio web de WordPress.
La desventaja de este JavaScript de terceros agregado es que, en la mayoría de los casos, aumentará el tiempo de carga de la página de cada URL en la que existe el script.
Esto significa que siempre que tenga la secuencia de comandos en su página y un visitante intente acceder a esa página, el tiempo que lleva cargar completamente la página aumentará debido a la secuencia de comandos.
Quizás ni siquiera esté seguro de si su sitio web es más rápido o lento. Eche un vistazo al siguiente enlace para obtener información sobre algunas herramientas gratuitas de prueba de velocidad de sitios web que puede usar para identificar la velocidad de su sitio.
https://www.wpfixit.com/free-website-speed-testing-tools/
No parece justo que tengas que cambiar la funcionalidad por la velocidad, ¿verdad?
Los scripts externos son costosos en la carga de la página de su sitio
Los scripts de terceros están en todas partes. Según el informe State of JavaScript de HTTP Archive, la mediana de scripts externos solicitados por los sitios web es de 20 y su tamaño total ronda los 449 KB .
La friolera de 93,59% de las páginas web incluyen al menos un recurso de terceros. Profundizar en los mismos datos muestra que el 76% de los sitios web rastrean a los usuarios con scripts de análisis.
El peor impacto de los scripts de terceros es retrasar la ruta de representación crítica, además de afectar sus puntajes Core Web Vitals, comenzando desde el grado FID.
La ruta de representación crítica es el conjunto de acciones que realiza un navegador para ensamblar HTML, CSS y JavaScript en un sitio web vivo y utilizable.
Naturalmente, el tamaño de la carga útil de los scripts de terceros juega un papel importante aquí, pero hay otro factor importante a considerar.
JavaScript requiere muchos recursos de la CPU para ejecutarse. Incluso si optimiza las secuencias de comandos de terceros para reducir el impacto en el tiempo de procesamiento, aún pueden afectar la métrica de tiempo de interacción. Mide la rapidez con la que los usuarios pueden interactuar con una página web.
Cuanto más lento sea, más frustrados estarán sus usuarios y mayores serán las posibilidades de que abandonen su sitio web.
Scripts externos más utilizados en WordPress
A continuación se muestra una lista de algunos de los scripts externos más utilizados en un sitio web de WordPress. Muchos de estos los reconocerá porque probablemente los esté usando en su sitio web.
- Google analitico
- Código de píxel de Facebook
- Widgets de chat en vivo
- incrustaciones de video
- Formularios incrustados
- Widgets de redes sociales
- Formularios incrustados
Logre la grandeza cuando retrase la carga del script en WordPress
No hay ninguna razón por la que deba sacrificar la velocidad por la funcionalidad.
¿Y si te dijéramos que puedes tener ambos?
Mejore la funcionalidad y la visibilidad de su sitio web de WordPress utilizando scripts de terceros y también asegúrese de que cada página de su sitio web se cargue lo más rápido posible para sus visitantes.
Es posible y se realiza a través de un proceso en el que retrasa la carga del script en WordPress.
En circunstancias normales, cuando utiliza un script interno en su sitio web, se cargará con la página cuando un visitante acceda a una de las URL de su sitio.
Cuando retrasa la carga de la secuencia de comandos en WordPress, la secuencia de comandos externa no comenzará a cargarse hasta que haya expirado el período de tiempo de demora establecido.
Por ejemplo, si establece el tiempo de demora en 4 segundos, esto significa que el script no se ejecutará hasta 4 segundos después de que la página se haya cargado por completo.
Esto es extremadamente poderoso porque significa que la carga de la página no está esperando que se complete el script. Su experiencia de visitante mejorará porque las páginas se cargan más rápido y cualquier herramienta de prueba de velocidad que use para probar una de las URL en su sitio web arrojará mejores resultados.
Echemos un vistazo a la diferencia entre una carga de secuencia de comandos externa regular y una carga de secuencia de comandos de retraso a continuación.
Carga de secuencias de comandos externas regulares
La siguiente imagen muestra la carga en cascada de una URL que tiene un widget de testimonios de TrustPilot incrustado.
Como puede ver en la imagen, hay 5 solicitudes externas que se están cargando con esta página. Estas solicitudes provienen del script externo incrustado.
Retrasar la carga del script externo
Ahora echemos un vistazo a la misma página cargada con la carga del script de retraso en WordPress.
Este widget de testimonios de TrustPilot todavía está incrustado en la página, pero hemos establecido un tiempo de retraso para que se cargue 2,5 segundos después de que se cargue la página.
No solo disminuyó el monto de la solicitud, sino que también disminuyó el tiempo de carga completa y el tiempo de carga.
Es como si el script ni siquiera estuviera en la página durante el tiempo de carga.
Entonces, ahora que hemos explicado el alto costo del tiempo de carga de los scripts externos y la forma en que puede usarlos sin sacrificar la velocidad, permítanos mostrarle el código exacto que necesita implementar para lograr la grandeza.
Carga original del script de carga en WordPress
El siguiente código es el script incrustado predeterminado para este widget de TrustPilot que usamos en las pruebas de velocidad anteriores.
<!-- TrustBox script --> <script type="text/javascript" src="//widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js" async=""></script> <!-- End TrustBox script --> <!-- TrustBox widget - Carousel --> <div class="trustpilot-widget" data-locale="en-US" data-template- data-businessunit- data-style-height="140px" data-style-width="100%" data-theme="light" data-stars="1,2,3,4,5" data-review-languages="en"> <a href="https://www.trustpilot.com/review/wpfixit.com" target="_blank" rel="noopener">Trustpilot</a> </div> <!-- End TrustBox widget -->Retrasar la carga del script en WordPress
El siguiente código es la secuencia de comandos retrasada incrustada para este widget de TrustPilot que usamos en las pruebas de velocidad anteriores.
<!-- TrustBox script --> <script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' https://widget.trustpilot.com/bootstrap/v5/tp.widget.bootstrap.min.js ';
head_ID.appendChild(script_element);
}, 2500 ); // TIEMPO DE RETRASO QUE PUEDES AJUSTAR
</script>
<!-- Fin del script TrustBox -->
<!-- Widget TrustBox - Carrusel -->
<div class="trustpilot-widget" data-locale="en-US" data-template-data-businessunit- data-style-height="140px" data-style-width="100%" data-theme=" light" data-stars="1,2,3,4,5" data-review-languages="es">
</div>
<!-- Fin del widget TrustBox -->Cualquier uso de carga de secuencia de comandos de retraso en WordPress
El siguiente código es la plantilla predeterminada que puede usar para retrasar la carga del script en WordPress.
Solo hay dos elementos dentro de esta plantilla que deben cambiarse.
- La URL de la secuencia de comandos externa que desea utilizar
- El tiempo de retraso cuando desea que se ejecute el script
<script> setTimeout(function() { var head_ID = document.getElementsByTagName("head")[0]; var script_element = document.createElement('script'); script_element.type = 'text/javascript'; // SET EXTERNAL SCRIPT PATH BELOW script_element.src = ' URL_FOR_EXTERNAL_SCRIPT ';
head_ID.appendChild(script_element);
}, 2500 ); // TIEMPO DE RETRASO QUE PUEDES AJUSTAR
</script>En conclusión
Realmente esperamos que esta publicación haya sido útil y comprenda cómo retrasar la carga del script en WordPress.
Realmente debería usar esto para cualquier script externo de terceros que esté usando en su sitio web de WordPress y verá una disminución inmediata en el tiempo de carga de la página que beneficiará su clasificación en los motores de búsqueda y la experiencia general de los visitantes.
Si tiene algún problema para implementar cualquier cosa que haya leído en esta publicación, comente a continuación y podemos ver dónde está atascado.