• Ir al contenido
  • Ir a la navegación
  • Ir al buscador
 
Portada Boludo
ING English  |  ES Spanish
Directorio WAP para móvil, Tablet, iPhone o Smartphone

Centro de Noticias de la Universidad de Oriente

Categorías

 

Inicio  |  Contacto  |  Posts  |  TIENDA PUBLISHOP  |  Sobre nosotros  |  Registro y Planes  |  Pagos  |  Donaciones

Ver Código QR de esta página



Campaña #AyudemosaYuli  |  Campaña #AyudemosaStephany.  |  ¿Interesado(a) en cursos y resolución de ejercicios de materias prácticas? Para más información, contáctenos por: Teléfono: +58 (412) - 8226575. WhatsApp y Telegram: +58 (412) - 8226575 o escriba al correo: [email protected]. Únete al grupo: SISTEMAS (UDOMO).

[»] **Musica para tu celular

WEB TRANSLATOR

LINK for English Language

Use this link for translate into English


+ Buscar en BolUDO

 

Como cargar los scripts del modo asíncrono en WordPress

Tweet
 

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.
Como cargar los scripts del modo asíncrono en WordPress
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
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.
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.
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 JavaScript

Para 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.
– El modo defer indica que el archivo se debe cargar solo después de concluir la carga de los restantes elementos.
Ejemplo de un script con la propiedad async:
<script async src="https://libreria-externa/archivo.js"></script>
Todos los navegadores modernos son compatibles con estos modos.

Agregar automáticamente el modo async a todos los scripts

Las 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.
// Agregar async a todos los scripts
function js_async_attr($tag){
 return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Como excluir scripts del modo async

No 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.
// Agregar async a los scripts, pero excluyendo tres de ellos
function js_async_attr($tag){
$scripts_to_exclude = array('script-name1.js', 'script-name2.js', 'script-name3.js'); 
foreach($scripts_to_exclude as $exclude_script){
	if(true == strpos($tag, $exclude_script ) )
	return $tag;	
}
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Comprobar la mejoría en la optimización

Despué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.
Nota
Actualmente 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 5

Despué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ón

Analizar y optimizar una página con PageSpeed
Tiempo 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

— Síguenos en Twitter@SergioAleman1

— @bolUDOoficial

— Síguenos en Twitter@bolUDOoficial

Categorías: #WordPress, #


[0] Atrás | Directorio
« Inicio

Apps Boludo
Apps Boludo ¡Descarga el icono directo en el menú de tu equipo!
[»] Las mejores Apps para tu celular
[»] Imágenes Gratis


Comenta o lee lo que otros opinan

COMPÁRTELO:

Indica que te gusta y comparte

Me Gusta :)Facebook Tuiteame :)Twitter .WhatsApp .Telegram . LinkedIn


También te puede interesar:

Agregar anuncios de AdSense en páginas normales y AMP de WordPress
Errores de permisos al instalar WordPress
Cambiar con CSS el estilo del tema Twenty Seventeen de WordPress
Como usar y configurar WordPress sin plugins
Como crear y usar shortcodes en las publicaciones de WordPress
Agregar en WordPress scripts, código y elementos adicionales
Como modificar y personalizar mi tema de WordPress
Los plugins de WordPress que uso en mi blog
Como optimizar y afinar el funcionamiento de un blog en WordPress
Como deshabilitar los comentarios de WordPress

Ver Todas Las Páginas Relacionadas

« Como proteger y asegurar mi blog de WordPress  |  Como deshabilitar los comentarios de WordPress »
 
Apps Boludo
 
Buscador:
Powered by Google:


Web móvil
Imágenes
La Web

 

Síguenos por RSS


Puedes leerlos mediante el navegador Firefox, lectores de noticias en la computadora o el móvil o usando el servicio de Feedburner de Google para recibir las notificaciones por correo electrónico.
RSS - Suscribirse usando Feedburner de Google

email Recibir las nuevas publicaciones de Boludo por email

Atom


»Ir a URL
.....
Registra Gratis Tu Negocio
....
Sugerir un nuevo sitio WAP

...
¡Bloguea Ya!

..
Registro de Profesionales(Abogados, escritores, doctores, licenciados, ingenieros, etc.)
.
Soporte

Síguenos en las redes sociales

Síguenos en Facebook facebook.com/boludooficial Síguenos en Twitter @bolUDOoficial Síguenos en Instagram @boludooficial Síguenos en Telegram t.me/Boludooficial
Síguenos en WhatsApp BolUDOoficial Síguenos en YouTube youtube.com/@boludo.oficial
Síguenos en Facebook facebook.com/SergioAlemanOficial Síguenos en Twitter @SergioAleman1 Síguenos en Instagram @alemansergio
Síguenos en Threads @alemansergio
Síguenos en WhatsApp wa.me/qr/Y7Q232VLZPR5O1 Síguenos en Tiktok @alemansergio
Síguenos en Telegram t.me/SergioAlemanOficial Síguenos en YouTube youtube.com/@sergioaleman
Síguenos en Facebook facebook.com/INFOUDO.OFICIAL Síguenos en Twitter @infoudomon Síguenos en Instagram @infoudooficial Síguenos en Telegram t.me/Infoudooficial
Síguenos en Facebook facebook.com/tuinfou Síguenos en Twitter @infoudomonagas
Síguenos en WhatsApp INFO UDO Síguenos en YouTube youtube.com/@infoudooficial

Mis cuentas sociales

FB
Twitter
Pinterest
Instagram
Canales RSS con las últimas publicaciones
Otras  |  Linktree

Móvil: 0412 8226575 - E-mail: [email protected] - [email protected] - WhatsApp: +58 (0412) 822.65.75


Copyscape
Volver arriba

Protocolo  |  Mapa del Sitio  |  Report Abuse - DMCA  |  Términos y Condiciones  |  Ayuda  |  Privacidad de Datos  |  Política de Cookies  |  Reportar un bug  |  Licencia: CC BY-NC-ND 3.0

Copyright ©2023 Boludo. Todos los derechos reservados. Diseñado, desarrollado, administrado y mantenido por Sergio Alemán Mi perfil en GitHub


SUBIR