penthouse
2.3.3
Générateur CSS de chemin critique
Penthouse est le générateur CSS de chemin critique original, vous aidant à accélérer le rendu des pages de vos sites Web. Fournissez le CSS complet de votre site et la page pour laquelle vous souhaitez créer le CSS critique, et Penthouse renverra le CSS critique nécessaire pour restituer parfaitement le contenu au-dessus du pli de la page. En savoir plus sur le chemin critique CSS ici.
Le processus est automatique et le CSS généré est prêt pour la production tel quel. Dans les coulisses, Penthouse utilise Puppeteer pour générer le CSS critique via Chrome:Headless.
(Si vous ne souhaitez pas écrire de code, vous pouvez utiliser la version hébergée en ligne.)
yarn add --dev penthouse
(ou npm install , si vous n'utilisez pas de fil)
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 optimisé pour exécuter de nombreuses tâches en parallèle. Une instance de navigateur partagée est réutilisée et chaque tâche s'exécute dans son propre onglet de navigateur. Le nombre de tâches que vous pouvez exécuter en parallèle est limité avant que votre machine ne commence à manquer de ressources. Pour exécuter efficacement de nombreuses tâches, consultez l'exemple de nombreuses URL.
Seules url et cssString sont requis - toutes les autres options sont facultatives. Notez que le fichier HTML trouvé via url devrait être stylisé ; penthouse n'injecte aucun style, il utilise simplement cssString (ou css ) pour élaguer les CSS critiques.
| Nom | Taper | Défaut | Description |
|---|---|---|---|
| URL | string | URL accessible. Utilisez le protocole file:/// pour les fichiers HTML locaux. | |
| cssChaîne | string | CSS original pour extraire les CSS critiques | |
| css | string | Chemin d'accès au fichier CSS d'origine sur le disque (si vous l'utilisez à la place de cssString ) | |
| largeur | integer | 1300 | Largeur pour la fenêtre critique |
| hauteur | integer | 900 | Hauteur pour la fenêtre critique |
| captures d'écran | object | Configuration pour les captures d'écran (non utilisée par défaut). Voir exemple de capture d'écran | |
| keepLargerMediaQueries | boolean | false | Conservez les requêtes multimédias même pour les valeurs de largeur/hauteur supérieures à la fenêtre d'affichage critique. |
| forceInclure | array | [] | Tableau de sélecteurs CSS à conserver dans le CSS critique, même s'il n'apparaît pas dans la fenêtre critique. Chaînes ou regex (fe ['.keepMeEvenIfNotSeenInDom', /^.button/] ) |
| forceExclure | array | [] | Tableau de sélecteurs CSS à supprimer dans les CSS critiques, même s'ils apparaissent dans la fenêtre d'affichage critique. Chaînes ou regex (fe ['.doNotKeepMeEvenIfNotSeenInDom', /^.button/] ) |
| propriétésÀSupprimer | array | ['(.*)transition(.*)', 'cursor', 'pointer-events', '(-webkit-)?tap-highlight-color', '(.*)user-select'] ] | Propriétés CSS à filtrer des CSS critiques |
| temps mort | integer | 30000 | MS; abandonner la génération CSS critique après cette heure |
| marionnettiste | object | Paramètres pour marionnettiste. Voir Exemple de navigateur de marionnettiste personnalisé | |
| pageLoadSkipTimeout | integer | 0 | MS; arrêtez d'attendre le chargement de la page après ce délai (pour les sites où l'événement de chargement de page n'est pas fiable) |
| rendutemps d'attente | integer | 100 | MS; temps d'attente après le chargement de la page avant le début de l'extraction critique du CSS (également avant la capture d'écran "avant", si utilisée) |
| blockJSRequests | boolean | true | défini sur false pour charger JS (non recommandé) |
| maxEmbeddedBase64Longueur | integer | 1000 | personnages; supprimer les ressources codées en base64 en ligne plus grandes que cela |
| maxElementsToCheckPerSelector | integer | undefined | Peut être spécifié pour limiter le nombre d'éléments à inspecter par sélecteur CSS, réduisant ainsi le temps d'exécution. |
| agentutilisateur | string | 'Penthouse Critical Path CSS Generator' | spécifier quelle chaîne d'agent utilisateur lors du chargement de la page |
| en-têtes de page personnalisés | object | Définissez des en-têtes http supplémentaires à envoyer avec la demande d'URL. | |
| cookies | array | [] | Pour le formatage de chaque cookie, voir la documentation setCookie de Puppeteer |
| strict | boolean | false | Faites en sorte que Penthouse génère des erreurs lors de l'analyse du CSS d'origine. Option héritée, non recommandée. |
| autoriséResponseCode | number|regex|function | Laissez Penthouse s'arrêter si le code de réponse du serveur ne correspond pas à cette valeur. Les types number et regex sont testés par rapport à response.status(). Une function est également autorisée et obtient une réponse comme argument. La fonction doit renvoyer un boolean . |
La journalisation est effectuée via le module debug sous l'espace de noms penthouse . Vous pouvez en savoir plus sur la journalisation dans leur documentation.
# Basic verbose logging for all components
env DEBUG= " penthouse,penthouse:* " node script.jsInstallez les dépendances manquantes pour que Chrome sans interface utilisateur s'exécute :
sudo apt-get install libnss3
Vous pourriez éventuellement avoir besoin d'une liste de services encore plus longue, en fonction de votre distribution, voir cette réponse
Une bonne première étape peut être de tester votre URL + CSS dans le générateur de chemin critique hébergé, pour déterminer si le problème vient de l'entrée que vous transmettez (css + url) ou de votre configuration locale : https://jonassebastianohlsson.com /générateur de chemin critiquecss
Si vous voyez des flashs de contenu sans style s'afficher après l'application de votre CSS critique, alors quelque chose ne va pas. Vous trouverez ci-dessous les causes les plus courantes et quelques conseils généraux associés :
Généralement, vous devez vous assurer que tous les éléments que vous souhaitez styliser dans le CSS critique apparaissent (visibles) dans le HTML de votre page (avec Javascript désactivé). Le premier rendu de votre page, celui que CSS permet de rendre beaucoup plus rapide, se produit avant le chargement de JS, c'est pourquoi Penthouse s'exécute avec JavaScript désactivé. Ainsi, si votre code HTML est essentiellement vide ou si votre contenu réel est masqué avant un spinner de chargement ou similaire, vous devez résoudre ce problème avant de pouvoir bénéficier des avantages en termes de performances de l'utilisation de CSS critiques.
Si votre code HTML est correct, mais varie en fonction de facteurs tels que l'utilisateur connecté, la publicité tierce, etc., vous pouvez alors utiliser le paramètre forceInclude pour forcer des styles supplémentaires spécifiques à rester dans le CSS critique, même si Penthouse ne les voit pas. sur la page lors de la génération critique du CSS.
Ce problème peut survenir si un élément apparaît au début du DOM, mais avec des styles appliqués pour se déplacer en dehors de la fenêtre critique (en utilisant la position absolue ou des transformations). Penthouse ne regarde pas la position absolue et les valeurs de transformation et verra simplement l'élément comme ne faisant pas partie de la fenêtre critique, et par conséquent Penthouse ne considérera pas ses styles comme critiques (donc l'élément sans style s'affichera lorsque le CSS critique est utilisé). Solution : déterminez s'il doit vraiment apparaître si tôt dans le DOM, ou utilisez la propriété forceInclude pour vous assurer que les styles pour le "masquer"/le déplacer sont laissés dans le CSS critique.
Des problèmes avec les caractères spéciaux comme → après la conversion ? Assurez-vous d'utiliser le format hexadécimal correct dans votre CSS. Vous pouvez toujours obtenir ce format depuis la console de votre navigateur, en entrant '→' .charCodeAt(0).toString(16) (la réponse pour ce glyphe de flèche est 2192 ). Lorsque vous utilisez le format hexadécimal en CSS, il doit être précédé d'une barre oblique inverse, comme ceci : 2192 (par exemple, content: '2192'; )
