Carga asincrónica de plugins para WordPress: La guía definitiva para mejorar la velocidad y el rendimiento del sitio web

¿Qué es el carga asincrónica y por qué es importante?

En el desarrollo de sitios web modernos, la velocidad de carga de las páginas es un indicador clave para medir la experiencia del usuario y el posicionamiento en los motores de búsqueda (SEO). El método tradicional de carga de scripts es conocido como “bloqueo de la renderización”, lo que significa que el navegador debe detener el análisis del HTML hasta que se descargue y ejecute completamente un archivo de script antes de poder continuar con la renderización de la página. Cuando su sitio WordPress integra múltiples plugins, cada uno de ellos puede introducir sus propios archivos de JavaScript (JS) y CSS, que se cargan de forma simultánea en la parte superior o en el cuerpo de la página, lo que ralentiza significativamente los tiempos de “primer dibujo de contenido” (First Content Paint, FCP) y “dibujo máximo de contenido” (Last Content Paint, LCP) del sitio web.

El carga asincrónica (Asynchronous Loading) es una técnica de carga de scripts que no bloquea el proceso de ejecución del navegador. Cuando el navegador se encuentra con un elemento web que contiene scripts, estos se cargan en segundo plano, sin interrumpir la navegación del usuario.asyncodeferCuando se utiliza la etiqueta de script para un atributo, el documento HTML continúa siendo procesado mientras que el archivo de script se descarga de forma simultánea. La principal diferencia entre ambos métodos radica en el momento en que se ejecuta el script.
* asyncUna vez que el script se descargue, se ejecutará inmediatamente, lo que podría interrumpir el proceso de análisis del HTML.
* deferEl script esperará a que se complete el análisis de todo el documento HTML (es decir, a que el DOM esté listo) para luego ejecutar las instrucciones en el orden en que aparecen dentro del documento.

En el caso del CSS, también es posible reducir la prioridad de carga de las hojas de estilo no esenciales (como las que se utilizan para el contenido que se muestra después de la pantalla inicial) mediante técnicas de “carga asincrónica” o eliminando los recursos que bloquean el proceso de renderizado.

Lecturas recomendadas Guía definitiva para optimizar la velocidad de sitios web WordPress: desde la configuración básica hasta estrategias avanzadas de caché。

Al adoptar una estrategia de carga asincrónica, se pueden eliminar los recursos de plugins que no son esenciales (como botones para compartir en redes sociales, cuadros de comentarios, código de análisis estadístico, etc.) del camino de renderizado principal de la página. Esto conlleva dos beneficios principales: mejora el rendimiento del sitio web, lo que permite que los usuarios vean y interactúen con el contenido de la página de manera más rápida; y optimiza el rendimiento en buscadores (SEO), ya que la velocidad de la página es uno de los factores clave para el posicionamiento en motores de búsqueda como Google.

Servidor de WordPress de UltaHost

Garantía de reembolso en 30 días, ancho de banda ilimitado y bases de datos, protección gratuita contra ataques DDoS; descuento del 50% al comprar por 3 años (versiones de 4 TB y 5 TB).

página de acceso

¿Cómo identificar los recursos de los plugins que necesitan cargarse de manera asincrónica?

Antes de comenzar la optimización, es necesario identificar con precisión qué recursos de los plugins son los que bloquean el proceso de renderizado y decidir cuáles son adecuados para su carga de forma asincrónica o retardada.

Utilizar herramientas de análisis del rendimiento

En primer lugar, utiliza herramientas profesionales de prueba de rendimiento para generar informes. Google PageSpeed Insights, GTmetrix y WebPageTest son opciones excelentes. Estas herramientas proporcionan una lista detallada de los recursos que bloquean el rendimiento de la página, indicando el URL, el tamaño de cada archivo JS y CSS, así como el tiempo estimado de mejora en el rendimiento. Por lo general, estos recursos provienen del directorio de plugins (como…)./wp-content/plugins/Los recursos de mayor tamaño que no son esenciales para la pantalla principal son el objetivo principal de la optimización.

Evaluar la importancia de un recurso

No todos los recursos son adecuados para el procesamiento asincrónico. Es necesario evaluarlo en función de la función de cada recurso.
Recursos clave: recursos que afectan directamente la visualización y la funcionalidad de la primera pantalla. Por ejemplo, el JS utilizado para la interacción del menú de navegación y las hojas de estilo del contenido de la primera pantalla. Estos generalmente deben cargarse de forma sincronizada o estar integrados en el código fuente.
Recursos no críticos: funciones que se encuentran en la parte inferior de la página o que solo se necesitan después de la interacción del usuario. Ejemplos típicos incluyen:
Plugins para compartir en redes sociales (como AddToAny, ShareThis)
JS de la sección de comentarios (por ejemplo, Disqus, Mejoras de comentarios por defecto)
Código de análisis estadístico de sitios web (como Google Analytics), aunque su empresa oficial recomienda el uso de scripts asincrónos.
Formularios que no se muestran en la primera pantalla del complemento de formulario de contacto
Diapositivas que no son de la primera pantalla en el plugin de presentación de diapositivas.

Una regla de oro sencilla es: si la funcionalidad de un plugin no necesita estar completamente lista en el primer segundo que el usuario abre la página, entonces sus recursos son candidatos para ser cargados de forma asincrónica.

Lecturas recomendadas Análisis en profundidad de la tecnología CDN: Desde los principios hasta la maestría, para construir un doble escudo de protección para el rendimiento y la seguridad de los sitios web。

Métodos prácticos para implementar la carga asincrónica

Existen varias formas de convertir los recursos de los plugins de WordPress para que se carguen de manera asincrónica. Puede elegir el método que mejor se adapte a sus habilidades técnicas.

Utilizar plugins de optimización (soluciones sin código).

Para la mayoría de los usuarios, utilizar plugins de optimización especializados es la forma más segura y conveniente. Estos plugins ofrecen una interfaz gráfica que permite gestionar de manera sencilla el modo en que se cargan los recursos.

Plugins recomendados: WP Rocket y Async JavaScript.

hosting.com Alojamiento compartido

Alto rendimiento con CPU AMD EPYC, almacenamiento SSD NVMe y LiteSpeed, asistencia interna de expertos 24 horas al día, 7 días a la semana, medidas de seguridad avanzadas como SSL, fuerza bruta, protección contra malware y DDoS, ahorro de hasta 73%.

página de acceso

WP Rocket es un potente plugin de caché que ofrece, en la pestaña “Optimización de archivos”, la opción de cargar JavaScript de manera retardada, así como la posibilidad de excluir ciertos scripts. Por su parte, el plugin Async JavaScript se centra específicamente en este aspecto, permitiéndote configurar el comportamiento de carga de casi cualquier script.asyncodeferPropiedades, y se proporciona una lista detallada de exclusiones.

Los pasos generales para utilizar este tipo de plugins son los siguientes: después de instalar y activar el plugin, busque en las opciones de configuración las opciones relacionadas con la optimización de JS/CSS. Active funciones como “carga diferida de JavaScript” o similares. Luego, según los informes previos del herramienta, añada los scripts clave (como la biblioteca principal de jQuery o aquellos que están estrechamente relacionados con el eventoDOMContentLoaded) a la lista de exclusiones para evitar que sus funciones se vean afectadas.

Edición manual del archivo de tema (solución basada en código)

Si deseas un control más preciso, puedes hacerlo editando el tema correspondiente.functions.phpSe puede implementar mediante archivos. WordPress proporciona los recursos necesarios para ello. script_loader_tag Y style_loader_tag Se utilizan filtros para modificar la salida HTML de los scripts y las hojas de estilo.

Lecturas recomendadas Guía completa para optimizar la velocidad de los sitios web de WordPress: estrategias fundamentales para mejorar los Core Web Vitals.。

A continuación se muestra un ejemplo de código que añade funcionalidades al script objetivo.deferPropiedades. Necesitas modificar el código para incluir estas propiedades.plugin-script-handleReemplácelo por el handle del script que realmente necesitas procesar.

function add_async_defer_attribute($tag, $handle) {
    // 将要延迟加载的脚本句柄添加到这个数组
    $scripts_to_defer = array('plugin-script-handle', 'another-plugin-script');

foreach($scripts_to_defer as $defer_script) {
        if ($defer_script === $handle) {
            // 使用 defer， 如需 async 则替换为 async='async'
            return str_replace(' src', ' defer="defer" src', $tag);
        }
    }
    return $tag;
}
add_filter('script_loader_tag', 'add_async_defer_attribute', 10, 2);

Para encontrar los manejadores de scripts de los plugins, se puede revisar el código fuente HTML generado por los plugins, o examinar el código fuente de los propios plugins.wp_enqueue_script()El primer parámetro de la llamada a una función.

Alojamiento compartido InterServer

Alojamiento compartido $2.50 USD al mes , primer mes $0.1 USD código promocional tryinterserver, 461 scripts de aplicaciones en la nube, instalación en un clic.

página de acceso

Tratar el carga asincrónica de CSS

En cuanto al CSS, se puede utilizar el “cargado previo” (preloading) en combinación con otras técnicas para mejorar el rendimiento del sitio web.onloadEl evento lo convierte en un recurso no bloqueante. A continuación, se muestra un ejemplo de código para cargar de forma asincrónica un estilo específico:

function async_load_stylesheets() {
    ?>
    <link rel="preload" href="<?php echo get_stylesheet_directory_uri(); ?>/path/to/plugin-style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
    <noscript><link rel="stylesheet" href="<?php echo get_stylesheet_directory_uri(); ?>/path/to/plugin-style.css"></noscript>
    <?php
}
// 根据需求，将其挂载到 wp_head 或其它钩子上
add_action('wp_head', 'async_load_stylesheets', 1);

Este método funciona de la siguiente manera:rel=”preload”Indica al navegador que obtenga los recursos lo antes posible, pero que no los aplique de inmediato. Una vez que los recursos hayan sido cargados con éxito, se procederá a su aplicación mediante JavaScript.relCambia el atributo a…stylesheet, de modo que se puedan aplicar los estilos correspondientes.Se proporciona una solución de respaldo para los usuarios cuyas opciones de configuración indican que el JavaScript está desactivado.

Pruebas y solución de problemas después del carga asincrónica

Después de implementar el carga asincrónica, es de vital importancia realizar pruebas exhaustivas para asegurarse de que el sitio web mantenga todas sus funciones intactas, a la vez que mejora su velocidad.

Prueba de funcionalidad y compatibilidad.

Es necesario realizar pruebas manuales en diferentes páginas del sitio web (página principal, página de artículos, página individual, etc.), prestando especial atención a las funciones de los plugins que se cargan de forma asincrónica. Por ejemplo:
Probar si el botón de redes sociales con carga asíncrona puede abrir correctamente la ventana de compartir.
Compruebe si la sección de comentarios cargada de forma diferida se muestra correctamente cuando se desplaza la página hasta la posición correspondiente.
Verificar si todos los elementos interactivos (como el envío de formularios, los clics en botones y los menús desplegables) funcionan correctamente.

Es especialmente importante prestar atención a aquellos que dependen de…DOMContentLoadedSon scripts que asumen que jQuery ya está listo para ser utilizado en la parte superior del documento (es decir, en la cabecera del HTML). Si su ejecución se retrasa, pueden generar errores debido a la imposibilidad de encontrar los elementos del DOM. Por eso es tan importante configurar una “lista de exclusiones” al optimizar los plugins; es posible que sea necesario inhabilitar la carga de jQuery en ciertas situaciones.jquery-coreLos módulos principales («core modules») y sus dependencias directas se excluyen del proceso de carga asincrónica.

Comparación del rendimiento antes y después

Repruebe su sitio web utilizando las herramientas de análisis de rendimiento mencionadas anteriormente (PageSpeed Insights, GTmetrix). Compare los informes antes y después de las optimizaciones, y preste atención a los cambios en los siguientes indicadores clave:
Primera creación de contenido (FCP): ¿Es evidente que se adelantó demasiado?
Dibujo de contenido máximo (LCP): ¿Se muestran los elementos de contenido más grandes con mayor rapidez?
Índice de velocidad: ¿Se acelera la velocidad de carga visual del contenido de la página?
Tiempo total de bloqueo (TBT): ¿Se ha reducido el tiempo en el que el hilo principal está bloqueado?
*Sugerencia para “eliminar los recursos que bloquean el renderizado”: ¿Han disminuido o desaparecido los problemas mencionados en el informe?*

Una optimización exitosa debería conllevar una mejora significativa en estos indicadores, así como una reducción en las advertencias relacionadas con bloqueos de rendimiento que aparecen en la sección de “Oportunidades” o “Diagnóstico”.

Si se detecta que alguna función no funciona correctamente, regrese a la configuración del plugin de optimización o a su código y elimine la instrucción de script que causa el problema de la lista de cargas asincrónicas/retrasadas. La resolución de problemas es un proceso iterativo que puede requerir varias ajustes para encontrar el equilibrio óptimo entre el funcionamiento de las funciones y el rendimiento del sistema.

resúmenes

La carga asincrónica de recursos de plugins para WordPress es una técnica de optimización de rendimiento del lado del cliente comprobada y de efectos significativos. Consiste en desplazar los archivos JavaScript y CSS no esenciales fuera de la ruta de renderizado principal, lo que permite al navegador procesar y renderizar primero el contenido central de la página, mejorando así considerablemente la velocidad de carga del sitio web y la experiencia del usuario. Su implementación es sencilla: se puede hacer rápidamente con plugins como WP Rocket o mediante el desarrollo de código para lograr un control altamente personalizado. Lo esencial es identificar con precisión los recursos no esenciales, llevar a cabo el proceso con cuidado y realizar pruebas exhaustivas de funcionalidad y rendimiento después de la optimización. Incorporar esta estrategia de carga asincrónica a su proceso de mantenimiento de WordPress es una medida efectiva para afrontar los desafíos actuales de rendimiento en la red y mejorar las posiciones en los motores de búsqueda (SEO).

FAQ Preguntas más frecuentes

¿Qué debería elegir: carga asincrónica (async) o carga diferida (defer)?

Para los scripts de plugins, generalmente se recomienda utilizar…deferPorquedeferEs esencial garantizar que los scripts se ejecuten en el orden en que aparecen en el HTML, especialmente en el caso de aquellos que dependen de otros scripts (por ejemplo, un plugin que requiere jQuery). Esto evita errores que podrían surgir debido a un orden de ejecución incorrecto.asyncEs más adecuado para fragmentos de código que son completamente independientes, que no dependen de ningún otro script y que, a su vez, no dependen de ningún otro script; por ejemplo, algunos módulos de análisis estadístico independientes.

¿El carga asincrónica de recursos de plugins puede causar que las funciones dejen de funcionar?

Es posible. Si la ejecución del script del plugin depende en gran medida del estado del DOM en un momento específico (por ejemplo, durante la carga de la página o al realizar alguna operación en el documento), entonces cualquier cambio en ese estado del DOM puede afectar negativamente el funcionamiento del plugin.DOMContentLoadedCuando un evento se dispara, se deben realizar operaciones en el DOM de inmediato; sin embargo, si ese código depende de otros scripts sincrónicos, su carga asincrónica puede provocar que se ejecute antes de tiempo o demasiado tarde, lo que puede generar errores. Por eso es esencial realizar pruebas exhaustivas después de la optimización y estar preparado para agregar los scripts problemáticos a una lista de exclusión.

¿Son todos los plugins adecuados para su carga asincrónica?

No. Los recursos de los plugins que afectan directamente la renderización de la pantalla principal y las interacciones esenciales no deben cargarse de forma asincrónica. Por ejemplo, una biblioteca de animaciones utilizada para crear efectos visuales en la pantalla principal, un script para la respuesta del menú de navegación, o un código CSS clave para optimizar la visualización de los fuentes en la página deben cargarse de manera sincrónica o estar incrustados en el código fuente, a fin de garantizar la coherencia y la inmediatez de la experiencia del usuario. La optimización siempre debe realizarse sin afectar las funciones esenciales del sitio web.

Además del carga asincrónica, ¿qué otros métodos existen para optimizar el rendimiento de los plugins?

La carga asíncrona es un aspecto importante, pero también puedes implementar otras estrategias combinadas: 1. Combinar y minimizar archivos: usar complementos para combinar varios archivos pequeños de JS/CSS y eliminar los comentarios en blanco. 2. Carga a demanda: para complementos complejos (como los creadores de páginas), asegúrate de que sus recursos solo se carguen en las páginas que lo necesiten. 3. Elegir complementos ligeros: al seleccionar nuevos complementos, prioriza las alternativas con buena reputación en cuanto al rendimiento y código simplificado. 4. Utilizar caché: asegúrate de que todos los recursos estáticos tengan un tiempo de vencimiento de caché prolongado y se distribuyan a través de una CDN. Estos métodos, combinados con la carga asíncrona, pueden generar el mejor rendimiento compuesto posible.