ไม่ว่าคุณจะใช้ไลบรารี UI หรือสร้างสไตล์เอง การจัดส่งการแสดงผลล่าช้าของ CSS จำนวนมากเนื่องจากเบราว์เซอร์ต้องดาวน์โหลดและแยกวิเคราะห์ไฟล์ CSS ก่อนจึงจะแสดงหน้าเว็บได้
แกลเลอรีไอศกรีมที่ปรับเปลี่ยนตามอุปกรณ์นี้สร้างขึ้นด้วยเข็มขัดนิรภัย ไลบรารี 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 |
สตริง | ไดเรกทอรีฐานสำหรับไฟล์ของคุณ |
src |
สตริง | ไฟล์ต้นฉบับ HTML |
dest |
สตริง | เป้าหมายสำหรับไฟล์เอาต์พุต หาก 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 ตั้งค่าเป็น "จริง" Critical จะอ่านไฟล์ต้นฉบับ 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 อีกครั้ง ผลลัพธ์ที่คุณได้รับจะมีลักษณะคล้ายกับด้านล่างนี้
