Puedo hacer que recaptcha se cargue en un sitio web, con la etiqueta asíncrona y diferida.
Sin embargo, cuando comparo Pagespeed Insights con él, veo dos problemas:
El script se carga justo antes de la etiqueta </body> y se ve así:
<script src="https://www.google.com/recaptcha/api.js?render=xxxxmykeyxxxx&theme=light" async defer></script>¿Cómo cargo esta versión de recaptcha sin que me penalicen con PageSpeed Insights?
Con respecto al primer problema: reCaptcha se sirve con compresión de Google. Si pagespeed se queja de la compresión, es probable que algún otro recurso de su servidor web no esté comprimido.
Con respecto al segundo problema: si ha configurado el atributo diferido o asíncrono, no necesita colocar la etiqueta antes de </body> . Ambos atributos no impedirán la representación de la página web, incluso si están cargados en el encabezado. No creo que su código actual deba activar esa verificación, pero debido a que usa los atributos asíncrono y diferido al mismo tiempo (solo necesita usar asíncrono y está bien ponerlo en el encabezado) tal vez confunda la velocidad de la página pero yo encuentra eso improbable también.
En primer lugar, no es posible que la carga de solo reCaptcha haga que todo su sitio web obtenga una puntuación de velocidad de página de 49, lo más probable es que haya otros problemas en su sitio web.
Para resolver la oportunidad de "Reducir JavaScript no utilizado", debe asegurarse de que la etiqueta del script que carga reCaptcha solo tenga el atributo defer (esto evitará que se evalúe el script hasta que se haya analizado toda la página). Esto mejorará el rendimiento del renderizado.
Para reducir realmente el tamaño, normalmente dividiría el código js para cargar solo lo que se necesita para que se ejecute la página web, pero dado que es una biblioteca de terceros, esto no es posible.
La otra opción es cargar las bibliotecas de terceros usando otro hilo. Esto no afectará el rendimiento del procesamiento, como lo hace normalmente la carga de js en el subproceso principal. Esto es útil para cosas como reCaptcha o Google Tag Manager, es decir, bibliotecas que son aceptables para cargar asíncronamente y no interactúan con otros elementos en la página web. Esto se hace más fácilmente con una biblioteca como partytown .