penthouse
2.3.3
ตัวสร้าง CSS เส้นทางวิกฤต
Penthouse เป็นตัวสร้าง CSS Path ที่สำคัญดั้งเดิมซึ่งช่วยให้คุณเพิ่มความเร็วในการเรนเดอร์เพจสำหรับเว็บไซต์ของคุณ ระบุ CSS แบบเต็มสำหรับไซต์ของคุณและหน้าที่คุณต้องการสร้าง CSS ที่สำคัญ จากนั้น Penthouse จะส่งคืน CSS ที่สำคัญซึ่งจำเป็นในการแสดงผลเนื้อหาครึ่งหน้าบนของหน้าได้อย่างสมบูรณ์แบบ อ่านเพิ่มเติมเกี่ยวกับ CSS เส้นทางวิกฤตที่นี่
กระบวนการนี้เป็นไปโดยอัตโนมัติและ CSS ที่สร้างขึ้นก็พร้อมสำหรับการผลิตตามที่เป็นอยู่ เบื้องหลัง Penthouse ใช้ puppeteer เพื่อสร้าง 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
เพนต์เฮาส์ได้รับการปรับให้เหมาะสมสำหรับการรันงานหลายอย่างพร้อมกัน อินสแตนซ์เบราว์เซอร์ที่ใช้ร่วมกันหนึ่งอินสแตนซ์ถูกนำมาใช้ซ้ำ และแต่ละงานจะทำงานในแท็บเบราว์เซอร์ของตัวเอง มีงานมากมายเท่านั้นที่คุณสามารถทำงานแบบคู่ขนานได้ก่อนที่เครื่องของคุณจะหมดทรัพยากร หากต้องการรันงานจำนวนมากอย่างมีประสิทธิภาพ โปรดดูตัวอย่าง 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 | เก็บคำสั่งสื่อไว้แม้สำหรับค่าความกว้าง/ความสูงที่ใหญ่กว่าวิวพอร์ตที่สำคัญ |
| บังคับรวม | array | [] | อาร์เรย์ของตัวเลือก CSS ที่จะเก็บไว้ใน CSS ที่สำคัญ แม้ว่าจะไม่ปรากฏในวิวพอร์ตที่สำคัญก็ตาม สตริงหรือ regex (fe ['.keepMeEvenIfNotSeenInDom', /^.button/] ) |
| บังคับยกเว้น | array | [] | อาร์เรย์ของตัวเลือก CSS ที่จะลบใน CSS ที่สำคัญ แม้ว่าจะปรากฏในวิวพอร์ตที่สำคัญก็ตาม สตริงหรือ regex (fe ['.doNotKeepMeEvenIfNotSeenInDom', /^.button/] ) |
| คุณสมบัติในการลบ | array | ['(.*)transition(.*)', 'cursor', 'pointer-events', '(-webkit-)?tap-highlight-color', '(.*)user-select'] ] | คุณสมบัติ CSS เพื่อกรองออกจาก CSS ที่สำคัญ |
| หมดเวลา | integer | 30000 | นางสาว; ยกเลิกการสร้าง CSS ที่สำคัญหลังจากเวลานี้ |
| นักเชิดหุ่น | object | การตั้งค่าสำหรับนักเชิดหุ่น ดูตัวอย่างเบราว์เซอร์หุ่นกระบอกที่กำหนดเอง | |
| เพจLoadSkipTimeout | integer | 0 | นางสาว; หยุดรอการโหลดหน้าเว็บหลังจากเวลานี้ (สำหรับไซต์ที่เหตุการณ์การโหลดหน้าเว็บไม่น่าเชื่อถือ) |
| แสดงผลรอเวลา | integer | 100 | นางสาว; รอเวลาหลังจากโหลดหน้าเว็บก่อนที่จะเริ่มการแยก CSS ที่สำคัญ (หรือก่อนที่จะจับภาพหน้าจอ "ก่อน" หากใช้) |
| blockJSRequests | boolean | true | ตั้งค่าเป็นเท็จเพื่อโหลด JS (ไม่แนะนำ) |
| ความยาวสูงสุดEmbeddedBase64 | integer | 1000 | ตัวละคร; ตัดทรัพยากรที่เข้ารหัส base64 แบบอินไลน์ที่มีขนาดใหญ่กว่านี้ออก |
| maxElementsToCheckPerSelector | integer | undefined | สามารถระบุเพื่อจำกัดจำนวนองค์ประกอบที่จะตรวจสอบต่อตัวเลือก CSS เพื่อลดเวลาในการดำเนินการ |
| userAgent | string | 'Penthouse Critical Path CSS Generator' | ระบุสตริงตัวแทนผู้ใช้เมื่อโหลดเพจ |
| กำหนดเอง PageHeaders | object | ตั้งค่าส่วนหัว http พิเศษที่จะส่งพร้อมกับคำขอ URL | |
| คุกกี้ | array | [] | สำหรับการจัดรูปแบบคุกกี้แต่ละรายการ โปรดดูเอกสาร Puppeteer setCookie |
| เข้มงวด | boolean | false | ทำให้ Penthouse เกิดข้อผิดพลาดในการแยกวิเคราะห์ CSS ดั้งเดิม ตัวเลือกแบบเดิม ไม่แนะนำ |
| อนุญาต ResponseCode | 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
คุณอาจจำเป็นต้องมีรายการ deps ที่ยาวกว่านี้ ดูคำตอบนี้ ทั้งนี้ขึ้นอยู่กับ dist ของคุณ
ขั้นตอนแรกที่ดีคือการทดสอบ 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 แต่มีการใช้สไตล์เพื่อย้ายออกนอกวิวพอร์ตที่สำคัญ (โดยใช้ตำแหน่งสัมบูรณ์หรือการแปลง) เพนต์เฮาส์ไม่ได้ดูตำแหน่งสัมบูรณ์และค่าการแปลง และจะเห็นเพียงองค์ประกอบว่าไม่ได้เป็นส่วนหนึ่งของวิวพอร์ตที่สำคัญ ดังนั้นเพนต์เฮาส์จะไม่พิจารณาว่าเป็นรูปแบบที่สำคัญ (ดังนั้นองค์ประกอบที่ไม่มีสไตล์จะแสดงขึ้นเมื่อมีการใช้ CSS ที่สำคัญ) วิธีแก้ไข: พิจารณาว่าควรปรากฏตั้งแต่ต้นใน DOM จริงๆ หรือใช้คุณสมบัติ forceInclude เพื่อให้แน่ใจว่าสไตล์ที่จะ "ซ่อน"/ย้ายจะเหลืออยู่ใน CSS ที่สำคัญหรือไม่
มีปัญหากับอักขระพิเศษเช่น → หลังจากแปลงแล้วใช่ไหม ตรวจสอบให้แน่ใจว่าคุณใช้รูปแบบเลขฐานสิบหกที่ถูกต้องใน CSS ของคุณ คุณสามารถรับรูปแบบนี้ได้จากคอนโซลของเบราว์เซอร์โดยป้อน '→' .charCodeAt(0).toString(16) (คำตอบสำหรับสัญลักษณ์ลูกศรนี้คือ 2192 ) เมื่อใช้รูปแบบเลขฐานสิบหกใน CSS จะต้องเติมแบ็กสแลชไว้หน้า เช่น: 2192 ( content: '2192'; )
