penthouse
2.3.3
Generador CSS de ruta crítica
Penthouse es el generador CSS de ruta crítica original, que le ayuda a acelerar la representación de páginas para sus sitios web. Proporcione el CSS completo de su sitio y la página para la que desea crear el CSS crítico, y Penthouse devolverá el CSS crítico necesario para representar perfectamente el contenido de la página en la mitad superior de la página. Lea más sobre CSS de ruta crítica aquí.
El proceso es automático y el CSS generado está listo para producción tal como está. Detrás de escena, Penthouse está utilizando titiritero para generar el CSS crítico a través de chromium:headless.
(Si no desea escribir código, puede utilizar la versión alojada en línea).
yarn add --dev penthouse
(o npm install , si no usa hilo)
penthouse ( {
url : 'http://google.com' ,
cssString : 'body { color: red }'
} )
. then ( criticalCss => {
// use the critical css
fs . writeFileSync ( 'outfile.css' , criticalCss ) ;
} )https://github.com/pocketjoso/penthouse/tree/master/examples
Penthouse está optimizado para ejecutar muchos trabajos en paralelo. Se reutiliza una instancia de navegador compartida y cada trabajo se ejecuta en su propia pestaña del navegador. Hay un número limitado de trabajos que puede ejecutar en paralelo antes de que su máquina comience a quedarse sin recursos. Para ejecutar muchos trabajos de forma eficaz, consulte el ejemplo de muchas URL.
Solo se requieren url y cssString ; todas las demás opciones son opcionales. Tenga en cuenta que se espera que el archivo html encontrado a través de url tenga estilo; penthouse no inyecta ningún estilo, solo usa cssString (o css ) para podar en CSS crítico.
| Nombre | Tipo | Por defecto | Descripción |
|---|---|---|---|
| URL | string | URL accesible. Utilice el protocolo file:/// para archivos html locales. | |
| cssCadena | string | CSS original para extraer CSS crítico de | |
| CSS | string | Ruta al archivo css original en el disco (si se usa en lugar de cssString ) | |
| ancho | integer | 1300 | Ancho para ventana gráfica crítica |
| altura | integer | 900 | Altura de la ventana gráfica crítica |
| capturas de pantalla | object | Configuración para capturas de pantalla (no se utiliza por defecto). Ver ejemplo de captura de pantalla | |
| mantener consultas de medios más grandes | boolean | false | Mantenga las consultas de medios incluso para valores de ancho/alto mayores que la ventana gráfica crítica. |
| fuerzaIncluir | array | [] | Conjunto de selectores de CSS para mantener el CSS crítico, incluso si no aparece en la ventana gráfica crítica. Cadenas o expresiones regulares (fe ['.keepMeEvenIfNotSeenInDom', /^.button/] ) |
| fuerzaExcluir | array | [] | Matriz de selectores CSS para eliminar en CSS crítico, incluso si aparecen en la ventana gráfica crítica. Cadenas o expresiones regulares (fe ['.doNotKeepMeEvenIfNotSeenInDom', /^.button/] ) |
| propiedades para eliminar | array | ['(.*)transition(.*)', 'cursor', 'pointer-events', '(-webkit-)?tap-highlight-color', '(.*)user-select'] ] | Propiedades CSS para filtrar CSS críticos |
| se acabó el tiempo | integer | 30000 | EM; cancelar la generación de CSS crítico después de este tiempo |
| titiritero | object | Ajustes para titiritero. Ver ejemplo de navegador titiritero personalizado | |
| páginaLoadSkipTimeout | integer | 0 | EM; dejar de esperar a que se cargue la página después de este tiempo (para sitios en los que el evento de carga de la página no es confiable) |
| renderizarTiempo de espera | integer | 100 | EM; tiempo de espera después de cargar la página antes de que comience la extracción crítica de CSS (también antes de tomar la captura de pantalla "antes", si se usa) |
| blockJSSolicitudes | boolean | true | establecido en falso para cargar JS (no recomendado) |
| maxEmbeddedBase64Longitud | integer | 1000 | personajes; elimine los recursos codificados en base64 en línea más grandes que este |
| maxElementsToCheckPerSelector | integer | undefined | Se puede especificar para limitar el número de elementos a inspeccionar por selector CSS, lo que reduce el tiempo de ejecución. |
| agente de usuario | string | 'Penthouse Critical Path CSS Generator' | especificar qué cadena de agente de usuario al cargar la página |
| encabezados de página personalizados | object | Configure encabezados http adicionales que se enviarán con la solicitud de la URL. | |
| galletas | array | [] | Para conocer el formato de cada cookie, consulte los documentos de Puppeteer setCookie |
| estricto | boolean | false | Haga que Penthouse elimine los errores al analizar el CSS original. Opción heredada, no recomendada. |
| código de respuesta permitido | number|regex|function | Deje que Penthouse se detenga si el código de respuesta del servidor no coincide con este valor. Los tipos number y regex se prueban con Response.status(). También se permite una function y obtiene Respuesta como argumento. La función debería devolver un boolean . |
El registro se realiza a través del módulo debug en el espacio de nombres penthouse . Puede ver más sobre el inicio de sesión en su documentación.
# Basic verbose logging for all components
env DEBUG= " penthouse,penthouse:* " node script.jsInstale las dependencias que faltan para que Chrome sin cabeza se ejecute:
sudo apt-get install libnss3
Es posible que necesite una lista aún más larga de departamentos, dependiendo de su distrito, consulte esta respuesta
Un buen primer paso puede ser probar su url + css en el generador de css de ruta crítica alojado, para determinar si el problema está en la entrada que pasa (css + url) o en su configuración local: https://jonassebastianohlsson.com /generadorderutacritica
Si ve destellos de contenido sin estilo después de aplicar su CSS crítico, entonces algo anda mal. A continuación se detallan las causas más comunes y algunos consejos generales relacionados:
Generalmente, debe asegurarse de que todos los elementos a los que desea aplicarles estilo en el CSS crítico aparezcan (visibles) en el HTML de su página (con Javascript deshabilitado). La primera representación de su página, el CSS crítico que ayuda a hacer mucho más rápido, ocurre antes de que JS se haya cargado, razón por la cual Penthouse se ejecuta con JavaScript deshabilitado. Entonces, si su html está esencialmente vacío, o su contenido real está oculto antes de un control giratorio de carga o similar, debe abordar esto antes de poder obtener los beneficios de rendimiento del uso de CSS crítico.
Si su html está bien, pero varía según cosas como el usuario que inició sesión, publicidad de terceros, etc., entonces puede usar el parámetro forceInclude para forzar que estilos adicionales específicos permanezcan en el CSS crítico, incluso si Penthouse no los ve. en la página durante la generación crítica de CSS.
Este problema puede ocurrir si tiene un elemento que aparece temprano en el DOM, pero con estilos aplicados para moverse fuera de la ventana gráfica crítica (usando posición absoluta o transformaciones). Penthouse no mira la posición absoluta ni los valores de transformación y simplemente verá el elemento como no parte de la ventana gráfica crítica y, por lo tanto, Penthouse no considerará sus estilos críticos (por lo que el elemento sin estilo se mostrará cuando se use el CSS crítico). Solución: considere si realmente debería aparecer tan temprano en el DOM, o use la propiedad forceInclude para asegurarse de que los estilos para "ocultarlo"/mover se dejen en el CSS crítico.
¿Problemas con caracteres especiales como → después de la conversión? Asegúrese de utilizar el formato hexadecimal correcto en su CSS. Siempre puedes obtener este formato desde la consola de tu navegador, ingresando '→' .charCodeAt(0).toString(16) (la respuesta para este glifo de flecha es 2192 ). Cuando se utiliza formato hexadecimal en CSS, es necesario anteponerle una barra invertida, así: 2192 ( content: '2192'; )
