OdooWiki OCA HUB

Website Critical CSS

website_critical_css folder_open OCA/website open_in_new
Website Licencia: AGPL-3

Este módulo puede mejorar la puntuación de Google PageSpeed de páginas individuales del sitio web.

En particular, mejora la puntuación de First Contentful Paint (FCP). Lo hace permitiendo configurar un bloque de 'Critical CSS' para cada página, que es el único CSS que se cargará antes del primer renderizado. Cualquier otro CSS se retrasa.

Traducción automática al español (DeepSeek) de la descripción original de OCA, que está en inglés.

auto_awesome Qué hace este módulo

Generado por IA a partir del código · Odoo 13.0

Te permite añadir un pequeño bloque de CSS crítico a cada página del sitio web para que la página se pinte más rápido y obtenga una mejor puntuación en Google PageSpeed. El resto del CSS se carga después, tras el primer pintado.

Este módulo añade un nuevo campo llamado Critical CSS a cada página del sitio web. Puedes rellenarlo desde el diálogo de propiedades de la página en el editor del sitio web (una nueva pestaña Critical CSS) o desde el formulario de backend de las páginas del sitio web.

Cuando una página tiene critical CSS y el visitante no es diseñador de sitios web, Odoo coloca ese CSS directamente en el head de la página para que se aplique antes del primer renderizado. Todas las demás hojas de estilo se difieren: se cargan con un truco de media print y se cambian a normal una vez cargadas, de modo que ya no bloquean el primer renderizado.

Reglas de negocio y comportamiento automático: - El critical CSS solo se inyecta para páginas publicadas del sitio web que realmente tienen contenido en el campo. - Los diseñadores de sitios web (usuarios del grupo Website Designer) siguen viendo el CSS normal, no diferido, por lo que la edición del sitio no se ve afectada. - Al guardar el campo, cualquier etiqueta <style> circundante se elimina automáticamente y los valores vacíos se almacenan como nada.

El módulo toca el modelo de página del sitio web (website.page) y el motor de renderizado (ir.qweb). Añade una pestaña en el diálogo de propiedades de la página del sitio web y un campo en el formulario de página del backend.

Depende de

website
Modelos y campos (2)
  • ir.qweb · amplía un modelo existente
  • website.page · amplía un modelo existentecritical_css (Critical CSS)

Texto generado por IA (DeepSeek) al leer el código de la versión 13.0 en GitHub; puede contener errores, así que verifícalo en el código antes de decidir. Ver el código en GitHub

Disponibilidad por versión

Revisado: 2026-11-03
Confirmado (verificado en repositorio y rama) Estimado (sin verificar) Sin información

Estado de confirmación: 1 confirmada, 8 sin información de 9 versiones.

terminal Instalación y uso

Documentación de OCA · Odoo 13.0

Uso

Fuente · Odoo 13.0

Para usar este módulo:

  • Vaya a Website -> Pages y seleccione una página para optimizar
  • Borre cualquier contenido actual del campo 'Critical CSS'
  • Averigüe la URL pública de esta página
  • Genere el Critical CSS para esta URL mientras selecciona los anchos correctos para las vistas de escritorio y móvil
  • Pegue el blob en el campo 'Critical CSS'.

Para generar critical CSS tiene un par de opciones:

  • Use un generador de Critical CSS en línea gratuito. En el momento de escribir esto hay: Sitelocity, Pegasaas, web.dev, Corewebvitals.io, ...
  • Instale el paquete npm critical y genérelo en su local.

Para probar la mejora de la puntuación FCP, use por ejemplo Lighthouse, que está integrado en el navegador Chrome.

Traducción automática al español (DeepSeek) de la documentación original de OCA; los comandos y el código no se traducen. Sin información verificada en OCA: Instalación, Configuración.

info

Datos importados de GitHub: esta ficha refleja la última revisión del catálogo, no una consulta en directo. Verifica siempre en la documentación del módulo y en staging antes de instalar en producción.