Revisa una página de builder para el rendimiento
Los componentes de POM solicitan sus estilos y scripts declarados cuando se renderizan. La composición de la página sigue determinando cuánto contenido multimedia, código de terceros y trabajo dinámico recibe un visitante.
Empieza por el propósito de la página
Elimina las secciones y los componentes que no ayudan al visitante a completar el objetivo de la página. Una jerarquía más corta reduce el trabajo de renderizado y es más fácil de mantener.
Revisa las imágenes y los fondos
- Selecciona imágenes acordes a su propósito de visualización en lugar de subir originales innecesariamente grandes.
- Usa el soporte de imágenes adaptables del componente donde esté disponible.
- Mantén la carga del fondo en Lazy (default) a menos que la imagen forme parte de la vista crítica inicial.
- Proporciona un fondo móvil cuando evite descargar o recortar una composición de escritorio inadecuada.
- No uses una imagen para reproducir texto que el HTML puede proporcionar.
La carga diferida del fondo requiere Advanced → Performance → Lazy loading (recommended) en los ajustes del tema.
Ese ajuste global también se aplica a los fondos guardados dentro de filas y columnas estáticas de Gutenberg. Desactivarlo hace que sus imágenes de fondo estén disponibles sin esperar al cargador diferido; no necesitas volver a guardar cada bloque. Borra cualquier caché de página completa después de cambiar el ajuste global.
En una presentación de fondo de una fila del Page Builder o de una sección de Gutenberg, la carga diferida sigue las diapositivas visibles, incluidas las diapositivas parcialmente visibles en los laterales. Con la carga diferida del tema activada, elegir la carga de fondo «eager» adelanta solo la primera imagen de la presentación; las imágenes posteriores esperan hasta que aparezcan sus diapositivas. Precarga solo el primer fondo crítico. Precargar otra diapositiva inicia su descarga inmediatamente.
Las imágenes dentro de los carruseles y deslizadores de POM también esperan hasta que aparezca su área visible, incluidas las diapositivas laterales parcialmente visibles. Esto funciona con los bloques Gutenberg Image y POM Image, así como con el contenido heredado, y conserva la selección de imágenes adaptables. Las imágenes fuera de estos componentes conservan la carga diferida nativa del navegador. Mantén dimensiones de imagen precisas para reservar espacio antes de que termine una descarga.
Una diapositiva recién revelada puede mostrar brevemente un espacio vacío en una conexión lenta mientras se descarga su imagen. Si la primera diapositiva proporciona la imagen visible principal de la página, precarga esa única imagen para que el aplazamiento estricto no la retrase detrás de JavaScript. Reducir las descargas de imágenes ocultas suele ayudar a la carga inicial, pero una puntuación de rendimiento sigue dependiendo de la página completa, el dispositivo y la conexión.
Revisa el vídeo y el movimiento
Usa fondos de vídeo solo cuando mejoren materialmente la página. En los ajustes de fila, fila interna, columna, columna interna y vídeo compatibles, Start after first interaction pospone el trabajo de reproducción hasta que el visitante interactúa.
Los reproductores de fondo MP4, YouTube y Vimeo se pausan fuera del área de visualización y mientras la pestaña del navegador está oculta. Se reanudan al volver solo cuando la reproducción automática controlada por el tema era responsable de la reproducción; la pausa de un visitante se sigue respetando. Esto limita la transferencia innecesaria de contenido multimedia en páginas largas y pestañas que se dejan abiertas.
Conserva siempre una miniatura o un fondo legibles y una página utilizable cuando la reproducción no se inicie.
Revisa los componentes interactivos y externos
Los mapas, feeds, galerías, carruseles, incrustaciones sociales y otros componentes interactivos añaden más trabajo que el texto plano. Conserva solo las instancias que la página necesita. El cargador de Google Maps de POM realiza una única solicitud asíncrona compartida de la API cuando una función compatible la solicita y hay una clave configurada.
Los bloques estructurales de Gutenberg y las filas/columnas equivalentes del Page Builder usan las mismas dependencias condicionales:
| Opción activada | Dependencia adicional |
|---|---|
| Parallax con una imagen de fondo, o un fondo de vídeo | Tiempo de ejecución compartido de Jarallax |
| Presentación de fondo de sección | Tiempo de ejecución compartido de Carousel y estilos de Flickity |
| Fondo de sección animado, o fondo de imagen de fila animado | Tiempo de ejecución de bucle de fondo |
| Flecha de siguiente sección | Tiempo de ejecución de navegación con flecha |
| Desplazamiento horizontal de fila en modo de scroll/hover mejorado | Tiempo de ejecución de fila horizontal; el desplazamiento nativo no necesita tiempo de ejecución adicional |
| Ocultar/revelar fila con la función de contenido largo del tema activada | Tiempo de ejecución de revelado de contenido largo |
Los colores de paleta, colores hover, bordes, espaciados y anchos de cuadrícula no añaden un paquete de frontend específico del bloque. Desactivar la interfaz de administración del Page Builder no desactiva el renderizado de shortcodes existente ni sus dependencias condicionales.
Revisa el contenido dinámico
Para listados y componentes basados en consultas:
- solicita solo el contenido necesario para la sección;
- limita el número de resultados;
- evita repetir la misma consulta en varios componentes;
- usa la paginación o una revelación progresiva intencionada para conjuntos de resultados largos.
Verifica como visitante
Abre la página pública en una ventana privada y prueba áreas de visualización anchas y estrechas. Confirma que el primer contenido útil aparece con prontitud, que el contenido multimedia diferido no provoca movimientos de diseño disruptivos y que la página sigue siendo utilizable si una incrustación externa es lenta.