ไม่ว่าคุณจะใช้ไลบรารี UI หรือออกแบบสไตล์เอง ก็ควรจัดส่งการแสดงผลล่าช้าของ CSS จำนวนมากเนื่องจากเบราว์เซอร์ต้องดาวน์โหลดและแยกวิเคราะห์ไฟล์ CSS ก่อนจึงจะแสดงหน้าเว็บได้
แกลเลอรีไอศกรีมที่ปรับเปลี่ยนตามอุปกรณ์นี้สร้างขึ้นด้วย Bootstrap ไลบรารี UI อย่างเช่น Bootstrap เร่งการพัฒนา แต่มักจะก่อให้เกิดความเสียหายกับ CSS ที่ใหญ่เกินตัวและไม่จำเป็น ซึ่งทำให้การโหลดของคุณช้าลงได้ Bootstrap 4 มีขนาด 187 KB ขณะที่ Semantic UI ซึ่งเป็นไลบรารี UI อีกรายการหนึ่งจะมีขนาดไม่เกิน 730 KB เมื่อไม่ได้บีบอัด แม้จะมีการลดขนาดลงและมี gzip อยู่ แต่ Bootstrap จะยังคงมีน้ำหนักประมาณ 20 KB ซึ่งมากกว่าเกณฑ์ 14 KB สำหรับการไป-กลับครั้งแรก
Critical คือเครื่องมือที่แยก ลดขนาด และแทรกในบรรทัด CSS ครึ่งหน้าบน ซึ่งจะช่วยให้แสดงผลเนื้อหาครึ่งหน้าบนได้เร็วที่สุดแม้ว่าจะยังไม่ได้โหลด CSS สำหรับส่วนอื่นๆ ของหน้าเว็บก็ตาม ใน Codelab นี้ คุณจะได้เรียนรู้วิธีใช้โมดูล npm ของ Critical
วัดระยะทาง
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกดเต็มหน้าจอ
วิธีดำเนินการตรวจสอบ Lighthouse ในเว็บไซต์นี้
- กด "Control+Shift+J" (หรือ "Command+Option+J" ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาเว็บ
- คลิกแท็บ Lighthouse
- คลิกอุปกรณ์เคลื่อนที่
- เลือกช่องทำเครื่องหมายประสิทธิภาพ
- ล้างช่องทำเครื่องหมายที่เหลือในส่วน "การตรวจสอบ"
- คลิก 3G แบบรวดเร็วจำลอง, ความเร็ว CPU ช้าลง 4 เท่า
- เลือกช่องทำเครื่องหมายล้างพื้นที่เก็บข้อมูล เมื่อเลือกตัวเลือกนี้ Lighthouse จะไม่โหลดทรัพยากรจากแคช ซึ่งจะจำลองประสบการณ์การใช้งานหน้าเว็บครั้งแรกของผู้เข้าชม
- คลิกดำเนินการตรวจสอบ
เมื่อคุณทำการตรวจสอบบนเครื่อง ผลลัพธ์ที่แน่นอนอาจแตกต่างกันไป แต่ในมุมมองแถบฟิล์ม คุณจะเห็นว่าแอปมีหน้าจอว่างเปล่าเป็นระยะเวลาหนึ่งก่อนที่จะแสดงผลเนื้อหาในที่สุด ซึ่งเป็นสาเหตุที่ First Contentful Paint (FCP) มีคะแนนสูง และคะแนนประสิทธิภาพโดยรวมที่ได้จึงไม่ดีนัก
Lighthouse พร้อมช่วยคุณแก้ไขปัญหาด้านประสิทธิภาพ ดังนั้นโปรดมองหาโซลูชันในส่วนโอกาส ขจัดทรัพยากรที่บล็อกการแสดงผลถูกระบุไว้ว่าเป็นโอกาสซึ่งสำคัญอย่างยิ่ง
เพิ่มประสิทธิภาพ
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อทำให้โปรเจ็กต์แก้ไขได้
ระบบได้ติดตั้ง Critical ไว้แล้วเพื่อให้ทำงานได้เร็วขึ้น และได้รวมไฟล์การกำหนดค่าเปล่าไว้ใน Codelab
ในไฟล์การกำหนดค่า critical.js ให้เพิ่มการอ้างอิงไปยัง Critical จากนั้นเรียกใช้ฟังก์ชัน critical.generate() ฟังก์ชันนี้ยอมรับออบเจ็กต์ที่มีการกำหนดค่า
const critical = require('critical');
critical.generate({
// configuration
},(err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
การจัดการข้อผิดพลาดเป็นขั้นตอนที่ไม่บังคับ แต่เป็นวิธีที่ง่ายในการวัดความสำเร็จของการดำเนินการในคอนโซล
กำหนดค่าวิกฤต
ตารางด้านล่างมีตัวเลือกที่สำคัญบางส่วนที่มีประโยชน์ คุณดูตัวเลือกทั้งหมดที่มีได้ที่ GitHub
| ตัวเลือก | ประเภท | คำอธิบาย |
|---|---|---|
base |
string | ไดเรกทอรีฐานสำหรับไฟล์ของคุณ |
src |
string | ไฟล์ต้นฉบับ HTML |
dest |
string | เป้าหมายสำหรับไฟล์เอาต์พุต หากมี CSS ในบรรทัด ไฟล์เอาต์พุตจะเป็น HTML หากไม่มี เอาต์พุตจะเป็นไฟล์ CSS |
width height |
ตัวเลข | ความกว้างและความสูงของวิวพอร์ตเป็นพิกเซล |
dimensions |
อาร์เรย์ | มีวัตถุที่มีคุณสมบัติความกว้างและความสูง ออบเจ็กต์เหล่านี้แสดงวิวพอร์ตที่คุณต้องการกำหนดเป้าหมายด้วย CSS ครึ่งหน้าบน หากมีคำค้นหาสื่อใน CSS ซึ่งจะช่วยให้คุณสร้าง CSS ที่สำคัญซึ่งครอบคลุมวิวพอร์ตขนาดต่างๆ ได้ |
inline |
boolean | เมื่อตั้งค่าเป็น "จริง" CSS วิกฤติที่สร้างขึ้นจะถูกแทรกในไฟล์ต้นฉบับ HTML |
minify |
boolean | เมื่อตั้งค่าเป็น "จริง" Critical จะลดขนาด CSS ที่สำคัญที่สร้างขึ้น สามารถละเว้นได้เมื่อแยก CSS ที่สำคัญสำหรับความละเอียดหลายแบบ เนื่องจาก Critical จะลดขนาดลงโดยอัตโนมัติเพื่อหลีกเลี่ยงการรวมกฎที่ซ้ำกัน |
ด้านล่างเป็นตัวอย่างการกำหนดค่าสำหรับการแยก CSS ที่สำคัญสำหรับความละเอียดหลายแบบ เพิ่มใน critical.js หรือทดลองและปรับตัวเลือก
critical.generate({
base: 'public/',
src: './index.html',
dest: './index.html',
inline: true,
dimensions: [
{
height: 500,
width: 300,
},
{
height: 720,
width: 1280,
},
]
}, (err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
ในตัวอย่างนี้ index.html เป็นทั้งไฟล์ต้นทางและไฟล์ปลายทาง เพราะตั้งค่าตัวเลือก inline ไว้เป็น "จริง" ช่วงสำคัญในการอ่านไฟล์ต้นฉบับ HTML จะดึงข้อมูล CSS ที่สำคัญ จากนั้นเขียนทับ index.html ด้วย CSS ที่สำคัญซึ่งแทรกอยู่ใน <head>
อาร์เรย์ dimensions มีขนาดวิวพอร์ตที่ระบุไว้ 2 ขนาด ได้แก่ 300 x 500 สำหรับหน้าจอขนาดเล็กพิเศษและ 1280 x 720 สำหรับหน้าจอแล็ปท็อปมาตรฐาน
ระบบไม่แสดงตัวเลือก minify เนื่องจาก Critical จะลดขนาด CSS ที่ดึงข้อมูลโดยอัตโนมัติเมื่อมีการระบุวิวพอร์ตหลายขนาด
เรียกใช้ Critical
เพิ่มส่วนสำคัญให้กับสคริปต์ใน package.json:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- คลิกเทอร์มินัล (หมายเหตุ: หากปุ่มเทอร์มินัลไม่แสดงขึ้น คุณอาจต้องใช้ตัวเลือกเต็มหน้าจอ)
หากต้องการสร้าง CSS ที่สำคัญ ให้เรียกใช้คำสั่งต่อไปนี้ในคอนโซล
npm run critical
refresh
ตอนนี้ในแท็ก <head> ของ index.html แทรก CSS ที่สำคัญที่สร้างขึ้นไว้ระหว่างแท็ก <style> ตามด้วยสคริปต์ที่โหลด CSS ที่เหลือแบบไม่พร้อมกัน
วัดอีกครั้ง
ทำตามขั้นตอนตั้งแต่ต้นของ Codelab เพื่อเรียกใช้การตรวจสอบประสิทธิภาพของ Lighthouse อีกครั้ง ผลลัพธ์ที่ได้จะมีลักษณะคล้ายกับด้านล่างนี้
