penthouse
2.3.3
مولد المسار الحرج CSS
Penthouse هو منشئ CSS الأصلي للمسار الحرج، والذي يساعدك على تسريع عرض الصفحات لمواقع الويب الخاصة بك. قم بتوفير ملف CSS الكامل لموقعك والصفحة التي تريد إنشاء ملف CSS المهم لها، وسيقوم Penthouse بإرجاع ملف CSS المهم المطلوب لعرض محتوى الجزء العلوي من الصفحة بشكل مثالي. اقرأ المزيد عن المسار الحرج لـ CSS هنا.
العملية تلقائية وCSS الذي تم إنشاؤه جاهز للإنتاج كما هو. خلف الكواليس يستخدم Penthouse محرك الدمى لإنشاء ملف CSS المهم عبر chromium:headless.
(إذا كنت لا تريد كتابة التعليمات البرمجية، يمكنك استخدام النسخة المستضافة عبر الإنترنت.)
yarn add --dev penthouse
(أو npm install ، في حالة عدم استخدام الغزل)
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 لتشغيل العديد من الوظائف بالتوازي. تتم إعادة استخدام مثيل متصفح مشترك واحد ويتم تشغيل كل مهمة في علامة تبويب المتصفح الخاصة بها. لا يوجد سوى عدد قليل من المهام التي يمكنك تشغيلها بالتوازي قبل أن تبدأ موارد جهازك في النفاد. لتشغيل العديد من الوظائف بفعالية، راجع مثال عناوين URL المتعددة.
مطلوب فقط url و cssString - وجميع الخيارات الأخرى اختيارية. لاحظ أنه من المتوقع أن يتم تصميم ملف html الموجود عبر url ؛ لا يقوم penthouse بإدخال أي أنماط، فهو يستخدم فقط cssString (أو css ) للتحويل إلى css المهمة.
| اسم | يكتب | تقصير | وصف |
|---|---|---|---|
| عنوان URL | string | عنوان URL يمكن الوصول إليه. استخدم بروتوكول file:/// لملفات html المحلية. | |
| cssString | string | CSS الأصلي لاستخراج CSS الهامة منه | |
| المغلق | string | المسار إلى ملف CSS الأصلي على القرص (في حالة استخدام بدلاً من cssString ) | |
| عرض | integer | 1300 | العرض لإطار العرض الحرج |
| ارتفاع | integer | 900 | الارتفاع لإطار العرض الحرج |
| لقطات الشاشة | object | تكوين لقطات الشاشة (لا يُستخدم بشكل افتراضي). انظر مثال لقطة الشاشة | |
| keepLargerMediaQueries | boolean | false | احتفظ باستعلامات الوسائط حتى بالنسبة لقيم العرض/الارتفاع الأكبر من إطار العرض الحرج. |
| forceInclude | array | [] | مجموعة من محددات CSS للاحتفاظ بها في CSS المهمة، حتى لو لم تظهر في إطار العرض الحرج. السلاسل أو التعبير العادي (fe ['.keepMeEvenIfNotSeenInDom', /^.button/] ) |
| forceExclude | array | [] | مجموعة من محددات CSS المراد إزالتها في CSS المهمة، حتى لو كانت تظهر في إطار العرض الحرج. السلاسل أو التعبير العادي (fe ['.doNotKeepMeEvenIfNotSeenInDom', /^.button/] ) |
| propertyToRemove | array | ['(.*)transition(.*)', 'cursor', 'pointer-events', '(-webkit-)?tap-highlight-color', '(.*)user-select'] ] | خصائص Css للتصفية من CSS الحرجة |
| نفذ الوقت | integer | 30000 | آنسة؛ إحباط إنشاء CSS الحرج بعد هذا الوقت |
| محرك الدمى | object | إعدادات محرك الدمى. راجع مثال متصفح محرك الدمى المخصص | |
| pageLoadSkipTimeout | integer | 0 | آنسة؛ التوقف عن انتظار تحميل الصفحة بعد هذا الوقت (للمواقع التي يكون فيها حدث تحميل الصفحة غير موثوق به) |
| renderWaitTime | integer | 100 | آنسة؛ انتظر بعض الوقت بعد تحميل الصفحة قبل بدء استخراج CSS المهم (أيضًا قبل التقاط لقطة الشاشة "قبل"، إذا تم استخدامها) |
| blockJSRequests | boolean | true | اضبط على خطأ لتحميل JS (غير مستحسن) |
| الحد الأقصىEmbeddedBase64Length | integer | 1000 | الشخصيات؛ قم بإزالة الموارد المشفرة Base64 المضمنة الأكبر من هذا |
| maxElementsToCheckPerSelector | integer | undefined | يمكن تحديده للحد من عدد العناصر التي سيتم فحصها لكل محدد CSS، مما يقلل وقت التنفيذ. |
| userAgent | string | 'Penthouse Critical Path CSS Generator' | حدد سلسلة وكيل المستخدم عند تحميل الصفحة |
| customPageHeaders | object | قم بتعيين رؤوس http الإضافية ليتم إرسالها مع طلب عنوان url. | |
| ملفات تعريف الارتباط | array | [] | لتنسيق كل ملف تعريف ارتباط، راجع مستندات Puppeteer setCookie |
| حازم | boolean | false | اجعل Penthouse يتخلص من الأخطاء في تحليل CSS الأصلي. خيار قديم، غير مستحسن. |
| allowResponseCode | number|regex|function | دع Penthouse يتوقف إذا كان رمز استجابة الخادم لا يطابق هذه القيمة. يتم اختبار أنواع number والتعبيرات regex مقابل Response.status(). يُسمح أيضًا function وتحصل على الاستجابة كوسيطة. يجب أن ترجع الدالة boolean . |
يتم التسجيل عبر وحدة debug ضمن مساحة الاسم penthouse . يمكنك عرض المزيد حول تسجيل الدخول في وثائقهم.
# Basic verbose logging for all components
env DEBUG= " penthouse,penthouse:* " node script.jsقم بتثبيت التبعيات المفقودة لتشغيل Chrome بدون رأس:
sudo apt-get install libnss3
ربما تحتاج إلى قائمة أطول من المديرين، اعتمادًا على منطقتك، راجع هذه الإجابة
يمكن أن تكون الخطوة الأولى الجيدة هي اختبار عنوان url + css الخاص بك في منشئ css للمسار الحرج المستضاف، لتحديد ما إذا كانت المشكلة تتعلق بإدخال تمريرك (css + url)، أو في الإعداد المحلي الخاص بك: https://jonassebastianohlsson.com /criticalpathcssgenerator
إذا رأيت ومضات من المحتوى غير المنسق تظهر بعد تطبيق ملف CSS المهم، فهذا يعني أن هناك خطأ ما. فيما يلي الأسباب الأكثر شيوعًا وبعض النصائح العامة ذات الصلة:
بشكل عام، يتعين عليك التأكد من ظهور جميع العناصر التي تريد تصميمها في ملف CSS المهم (مرئية) في HTML الخاص بصفحتك (مع تعطيل Javascript). العرض الأول لصفحتك، وهو ملف CSS المهم الذي يساعد على جعله أسرع بكثير، يحدث قبل تحميل JS، ولهذا السبب يتم تشغيل Penthouse مع تعطيل JavaScript. لذا، إذا كان HTML الخاص بك فارغًا بشكل أساسي، أو كان المحتوى الحقيقي الخاص بك مخفيًا قبل أداة التحميل الدوارة أو ما شابه، فيجب عليك معالجة هذا الأمر قبل أن تتمكن من الحصول على فوائد الأداء لاستخدام CSS المهم.
إذا كان HTML الخاص بك جيدًا، ولكنه يختلف بناءً على أشياء مثل المستخدم الذي قام بتسجيل الدخول، وإعلانات الطرف الثالث وما إلى ذلك، فيمكنك استخدام المعلمة forceInclude لإجبار أنماط إضافية محددة على البقاء في ملف CSS المهم، حتى لو لم يراها Penthouse على الصفحة أثناء إنشاء CSS المهم.
يمكن أن تحدث هذه المشكلة إذا كان لديك عنصر يظهر مبكرًا في DOM، ولكن مع تطبيق الأنماط للانتقال خارج إطار العرض الحرج (باستخدام الموضع المطلق أو التحويلات). لا ينظر Penthouse إلى الموضع المطلق وقيم التحويل وسيرى العنصر على أنه ليس جزءًا من إطار العرض الحرج، وبالتالي لن يعتبر Penthouse أنماطه مهمة (وبالتالي سيظهر العنصر غير المنسق عند استخدام CSS الحرج). الحل: ضع في اعتبارك ما إذا كان يجب أن يظهر مبكرًا جدًا في DOM، أو استخدم خاصية forceInclude للتأكد من ترك الأنماط المراد "إخفائها"/نقلها في ملف CSS المهم.
هل تواجه مشاكل مع الأحرف الخاصة مثل → بعد التحويل؟ تأكد من استخدام التنسيق السداسي العشري الصحيح في CSS الخاص بك. يمكنك دائمًا الحصول على هذا التنسيق من وحدة تحكم المتصفح الخاص بك، عن طريق إدخال '→' .charCodeAt(0).toString(16) (الإجابة على الصورة الرمزية للسهم هي 2192 ). عند استخدام التنسيق السداسي العشري في CSS، يجب إضافة خط مائل عكسي مسبقًا، مثل: 2192 (fe content: '2192'; )
