![]() Directorio WAP para móvil, Tablet, iPhone o Smartphone Centro de Noticias de la Universidad de Oriente |
|
|
||
miércoles agosto 24, 2022
Como agregar la propiedad async a las etiquetas de todos los scripts, para que carguen gradualmente y no afecten la estabilidad y optimización del sitio.
![]() Todos los que han chequeado su blog de WordPress en la herramienta de Google Speed, para comprobar su velocidad y optimización, habrán recibido el mensaje similar al siguiente: Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página
Se debe a que WordPress no incluye la propiedad necesaria en los
scripts, para que estos carguen sin bloquear, ni perjudicar el
rendimiento de las páginas.Tu página tiene 7 recursos de secuencias de comandos y 2 recursos CSS que provocan un bloqueo. Ello causa un retraso en el procesamiento de la página. No se ha podido visualizar el contenido de la mitad superior de la página sin tener que esperar a que se cargara alguno de los recursos. Intenta aplazar o cargar de forma asíncrona los recursos que bloquean la visualización. En este artículo explico cómo solucionarlo, sin instalar plugins, solo con un sencillo script, que agrega auténticamente la propiedad necesaria a todos los scripts. ¿Por qué es importante el modo asíncrono en los scripts?Unas de las principales recomendaciones en la web moderna, es usar el modo asíncrono para cargar los elementos externos necesario.Prácticamente todas las páginas de internet actualmente usan diferentes librerías de JavaScript para ejecutar infinidad de funciones. Estos archivos con la extensión JS, generalmente se cargan desde sitios externos y pueden afectar el rendimiento Un script puede bloquear completamente la carga de una página en el navegador y provocar que esta no se muestre, si esta inaccesible por algún problema en el servidor de origen o en la red. Modos async y defer para cargar JavaScriptPara evitarlo se introdujeron dos propiedades que se agregan en la etiqueta del script.Son “async” y “defer”. Le indican al navegador que el script se puede cargar de dos modos diferentes. – El modo async indica que el archivo se debe cargar de forma asíncrona o paralela a otros recursos de la página.
Ejemplo de un script con la propiedad async:– El modo defer indica que el archivo se debe cargar solo después de concluir la carga de los restantes elementos.
Todos los navegadores modernos son compatibles con estos modos.Agregar automáticamente el modo async a todos los scriptsLas siguientes instrucciones detectan los scripts insertados en la página y le agregan el modo async a la etiqueta,Se debe introducir en el interior del archivo de configuración “functions.php”, situado en nuestro tema Child o en un plugin personal. Lee más información en los enlaces anteriores.
Como excluir scripts del modo asyncNo todos los scripts admiten los modos async o defer.Algunos de ellos pueden dejar de funcionar, si lo aplicamos globalmente. Se puede implementar el método anterior y probar todas las funcionalidades de las páginas. Obtenemos resultados más precisos abriendo en el navegador la consola o herramienta de desarrolladores y caso de que recibamos algún mensaje de error, porque algún script deje de funcionar, podemos usar el siguiente método. Es similar al anterior, pero en este podemos especificar que a uno o varios scripts no se les debe agregar el modo async. Usa el siguiente código para implementarlo.
Comprobar la mejoría en la optimizaciónDespués de implementar el script, cargar cualquier página del blog en el navegador, usa las teclas Control +U para ver el código fuente y comprueba que ahora todos los scripts usan la propiedad necesaria.Adicionalmente accede a Google Speed y haz una prueba, para comprobar la mejora en el índice del resultado. La implementación de este método no promete más
velocidad ni rendimiento, pero si asegura mayor estabilidad y por lo
tanto una mejor optimización del sitio.
NotaActualmente la gran mayoría de scripts que proporciona las redes sociales y otros sitios de internet ya incluyen el modo asíncrono. Errores del modo async en WordPress 5Después de actualizar a WordPress 5 el script que recomiendo en esta página no se puede emplear.Impide el funcionamiento de Tinymce, el software que utiliza el editor de las entradas. Esto se aplica a los que instalamos el plugin “Classic Editor” para usar el editor anterior de WordPress y no el Gutemberg (editor de bloques) incluido en esta nueva versión. Más informaciónAnalizar y optimizar una página con PageSpeedTiempo de respuesta del servidor y velocidad de las páginas Otras páginas relacionadas✓ Como modificar y personalizar mi tema de WordPress✓ Como usar y configurar WordPress sin plugins ✓ Convertir los enlaces externos en NoFollow en WordPress |
||
— @SergioAleman1
— @bolUDOoficial
Comenta o lee lo que otros opinan |
||
COMPÁRTELO:Indica que te gusta y comparte |
||
![]() ![]() ![]() ![]() ![]() |
||
También te puede interesar: Agregar anuncios de AdSense en páginas normales y AMP de WordPress |
||
« Como proteger y asegurar mi blog de WordPress | Como deshabilitar los comentarios de WordPress » |
||
![]() |
||
Buscador:
|
||
Síguenos en las redes sociales![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() ![]() Mis cuentas socialesOtras | LinktreeMóvil: 0412 8226575 - E-mail: [email protected] - [email protected] - WhatsApp: +58 (0412) 822.65.75 ![]() |
||
|
||
|