El WordPress Core Performance Team lanzó dos complementos que aceleran las páginas web con nuevas tecnologías que preprocesan las URL antes de que un usuario haga clic en un enlace y aceleran las imágenes cargadas de forma diferida.
Equipo de rendimiento central de WordPress
El equipo de rendimiento central de WordPress es responsable de coordinar con los diferentes equipos de desarrollo central de WordPress con el fin de mejorar el rendimiento y también de trabajar en proyectos que impacten directamente en la mejora del rendimiento central de WordPress.
El plan inicial para el Performance Team consistió en:
- liderar la formación de grupos de trabajo
- Coordinar las tareas administrativas iniciales (canal slack, reuniones semanales, programar nominaciones de representantes de los grupos de trabajo, etc.)
- crear una declaración de misión para el equipo
- coordinar las áreas a abordar
- describir el alcance y la hoja de ruta
Complementos de rendimiento de WordPress
Algunas de las mejoras de rendimiento de WordPress se prueban primero en complementos antes de integrarse posteriormente en una versión futura de WordPress.
Los usuarios que descargan los complementos pueden ser los primeros en el mundo en usar y beneficiarse de las mejoras en la velocidad de la página web y se espera (esperamos) que aquellos que usan los complementos también proporcionen comentarios sobre sus experiencias, tanto positivas como negativas.
El primer y más popular complemento lanzado por Performance Team es el complemento Performance Lab que presenta cinco módulos que se pueden activar o desactivar según las necesidades del usuario.
Los módulos actuales del complemento Performance Lab son:
- Imágenes de colores dominantes:
Agrega soporte para almacenar el color dominante de las imágenes recién cargadas y crear un fondo de marcador de posición de ese color. - Comprobación del estado del soporte WebP:
Agrega una verificación de soporte WebP en el estado de salud del sitio. - Cargas WebP:
Crea versiones WebP para nuevas cargas de imágenes JPEG si el servidor lo admite. - Comprobación del estado de los activos en cola:
Agrega una verificación de recursos CSS y JS en el estado de salud del sitio. - Comprobación de estado de opciones cargadas automáticamente:
Agrega una verificación de opciones cargadas automáticamente en el estado de salud del sitio.
Dos nuevos complementos de rendimiento
Los dos nuevos complementos que se anunciaron hoy son:
- Tamaños automáticos para imágenes cargadas de forma diferida
- Reglas de especulación
Los dos complementos mejoran el rendimiento de dos maneras diferentes, lo que significa que ambos pueden usarse para obtener la mayor cantidad de mejoras.
Nuevo complemento de tamaños automáticos de WordPress
La carga diferida es una técnica de optimización del rendimiento que pospone (pausa) la carga de imágenes no críticas para mejorar los tiempos de carga de las páginas. Las imágenes que son necesarias para representar la parte visible de la página web se cargan primero, mientras que las que no son necesarias se aplazan hasta que el usuario se desplaza y las imágenes son necesarias.
Lo que hace este complemento es integrar un nuevo atributo HTML de carga diferida llamado tamaños = “auto” que establece el atributo “tamaños” en “auto” para imágenes cargadas de forma diferida usando ‘srcset’ y acelera la descarga de las imágenes que serán necesarias cuando el usuario se desplaza hacia abajo en la página.
El atributo size=”auto” para imágenes es parte de la especificación de imágenes responsivas en HTML, pero no está específicamente relacionado con la carga diferida. En cambio, el atributo de tamaños se usa con srcset para proporcionar al navegador las dimensiones de tamaño de imagen necesarias para mostrar la imagen en diferentes tamaños de ventana gráfica. Luego, el navegador puede seleccionar la fuente de imagen más apropiada del srcset.
Nuevo complemento de reglas de especulación de WordPress
El complemento Speculation Rules aprovecha la API de Speculation Rules para descargar los recursos de las páginas web que un usuario probablemente solicite. El complemento Speculation Rules esencialmente predice que se solicitará una página y comenzará a renderizar previamente la página web antes de que un usuario haga clic en un enlace.
La descripción oficial del complemento explica:
“Utiliza la API de reglas de especulación para prepresentar las URL vinculadas al pasar el mouse de forma predeterminada”.
La API de reglas de especulación es una característica diseñada para mejorar el rendimiento de la navegación web al permitir que las páginas web proporcionen sugerencias al navegador sobre enlaces potenciales en los que un usuario podría hacer clic para navegar a una página web diferente. Luego, el navegador puede buscar o renderizar previamente recursos en función de la probabilidad de que un visitante del sitio haga clic en un enlace para navegar a una nueva página web.
La página de desarrollador de Mozilla para la API de reglas de especulación explica:
“La API de reglas de especulación está diseñada para mejorar el rendimiento para futuras navegaciones. Se dirige a URL de documentos en lugar de archivos de recursos específicos, por lo que tiene sentido para aplicaciones de varias páginas (MPA) en lugar de aplicaciones de una sola página (SPA).
La API de reglas de especulación proporciona una alternativa a la característica ampliamente disponible y está diseñada para reemplazar la característica obsoleta solo para Chrome. Proporciona muchas mejoras con respecto a estas tecnologías, junto con una sintaxis más expresiva y configurable para especificar qué documentos deben recuperarse o renderizarse previamente”.
La implementación del complemento requiere el uso de al menos Chrome 121. Los usuarios que visitan un sitio mientras usan un navegador diferente que no admite la API de reglas de especulación no se verán afectados de ninguna manera, la página web se mostrará como lo haría normalmente.
Según la documentación del complemento:
“De forma predeterminada, el complemento está configurado para presentar previamente las URL de la interfaz de WordPress cuando el usuario pasa el cursor sobre un enlace relevante. Esto se puede personalizar a través de la sección “Reglas de especulación” en Configuración > Lectura.
Se puede utilizar un filtro para excluir determinadas rutas URL para que no sean elegibles para la captación previa y la representación previa (consulte la sección de preguntas frecuentes). Alternativamente, puede agregar la clase CSS ‘sin prerenderización’ a cualquier enlace (
<a>etiqueta) que no debe prerenderizarse”.
Lea más sobre los nuevos complementos de rendimiento de WordPress y descárguelos aquí:
Complemento de tamaños automáticos de WordPress para imágenes cargadas de forma diferida
Complemento de reglas de especulación de WordPress
Imagen destacada de Shutterstock/Haali
