ไม่ว่าคุณจะใช้ไลบรารี UI หรือสร้างสไตล์ด้วยตนเอง การส่ง CSS จํานวนมากจะทําให้การแสดงผลล่าช้าเนื่องจากเบราว์เซอร์ต้องดาวน์โหลดและแยกวิเคราะห์ไฟล์ CSS ก่อนจึงจะแสดงหน้าเว็บได้
แกลเลอรีไอศกรีมที่ตอบสนองตามอุปกรณ์นี้สร้างขึ้นด้วย Bootstrap ไลบรารี UI อย่าง Bootstrap เร่งการพัฒนา แต่มักจะลด CSS ที่มากเกินไปและไม่จำเป็น ซึ่งจะทำให้เวลาในการโหลดของคุณช้าลง Bootstrap 4 มีขนาดใหญ่ 187 KB ส่วน Semantic UI ซึ่งเป็นไลบรารี UI อีกรายการหนึ่งมีขนาดใหญ่ถึง 730 KB เมื่อยังไม่ได้บีบอัด แม้ว่าจะได้รับการบีบอัดและแปลงเป็นไฟล์ ZIP แล้ว Bootstrap ยังคงมีขนาดใหญ่ประมาณ 20 KB ซึ่งมากกว่าเกณฑ์ 14 KB สำหรับการรับส่งข้อมูลครั้งแรก
สำคัญเป็นเครื่องมือที่ดึงข้อมูล CSS ครึ่งหน้าบน บีบอัด และแทรกในหน้า ซึ่งช่วยให้ระบบแสดงผลเนื้อหาด้านบนโฆษณาโดยเร็วที่สุด แม้ว่า CSS สําหรับส่วนอื่นๆ ของหน้าจะยังไม่โหลดก็ตาม ในโค้ดแล็บนี้ คุณจะได้เรียนรู้วิธีใช้โมดูล npm ของ Critical
วัดระยะทาง
- หากต้องการดูตัวอย่างเว็บไซต์ ให้กดดูแอป แล้วกด
เต็มหน้าจอ
วิธีเรียกใช้การตรวจสอบ Lighthouse ในเว็บไซต์นี้
- กดแป้น Control+Shift+J (หรือ Command+Option+J ใน Mac) เพื่อเปิดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
- คลิกแท็บ Lighthouse
- คลิกอุปกรณ์เคลื่อนที่
- เลือกช่องทําเครื่องหมายประสิทธิภาพ
- ล้างช่องทำเครื่องหมายที่เหลือในส่วนการตรวจสอบ
- คลิก3G ที่เร็วจำลอง ชะลอความเร็ว CPU ลง 4 เท่า
- เลือกช่องทำเครื่องหมายล้างพื้นที่เก็บข้อมูล เมื่อเลือกตัวเลือกนี้ Lighthouse จะไม่โหลดทรัพยากรจากแคช ซึ่งเป็นการจำลองวิธีที่ผู้เข้าชมครั้งแรกจะได้รับประสบการณ์ในการใช้งานหน้าเว็บ
- คลิกเรียกใช้การตรวจสอบ
เมื่อเรียกใช้การตรวจสอบบนเครื่อง ผลลัพธ์จริงอาจแตกต่างกันไป แต่ในมุมมองแถบฟิล์ม คุณจะสังเกตเห็นว่าแอปมีหน้าจอว่างเปล่ามาระยะหนึ่งแล้วก่อนที่จะแสดงผลเนื้อหาในที่สุด ด้วยเหตุนี้ First Contentful Paint (FCP) จึงสูงและคะแนนประสิทธิภาพโดยรวมจึงไม่ดี
Lighthouse พร้อมช่วยคุณแก้ไขปัญหาด้านประสิทธิภาพ ดังนั้นให้มองหาวิธีแก้ปัญหาในส่วนโอกาส กำจัดทรัพยากรที่บล็อกการแสดงผลแสดงอยู่ในโอกาส ซึ่ง Critical โดดเด่น
เพิ่มประสิทธิภาพ
- คลิกรีมิกซ์เพื่อแก้ไขเพื่อให้โปรเจ็กต์แก้ไขได้
เพื่อให้การดำเนินการเป็นไปได้เร็วขึ้น ระบบได้ติดตั้ง 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 ครึ่งหน้าบน หากมี Media Queries ใน CSS คุณจะสร้าง CSS ที่สำคัญซึ่งครอบคลุมขนาดวิวพอร์ตหลายขนาดได้ |
inline |
บูลีน | เมื่อตั้งค่าเป็น "จริง" ระบบจะแทรก CSS ที่สำคัญที่สร้างขึ้นไว้ในไฟล์ต้นฉบับ HTML |
minify |
บูลีน | เมื่อตั้งค่าเป็น "จริง" 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 ที่ดึงข้อมูลโดยอัตโนมัติเมื่อมีการกำหนดขนาดวิวพอร์ตหลายขนาด
เรียกใช้การทดสอบที่สำคัญ
เพิ่ม "สำคัญ" ในสคริปต์ใน package.json
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- คลิก Terminal (หมายเหตุ: หากปุ่ม Terminal ไม่แสดง คุณอาจต้องใช้ตัวเลือก "เต็มหน้าจอ")
หากต้องการสร้าง CSS ที่สำคัญ ให้เรียกใช้คำสั่งต่อไปนี้ในคอนโซล
npm run critical
refresh
ตอนนี้ในแท็ก <head> ของ index.html ระบบจะแทรก CSS ที่สําคัญซึ่งสร้างขึ้นไว้ระหว่างแท็ก <style> ตามด้วยสคริปต์ที่โหลด CSS ที่เหลือแบบไม่พร้อมกัน
วัดอีกครั้ง
ทําตามขั้นตอนตั้งแต่ต้นของโค้ดแล็บเพื่อเรียกใช้การตรวจสอบประสิทธิภาพของ Lighthouse อีกครั้ง ผลลัพธ์ที่คุณได้รับจะมีลักษณะคล้ายกับด้านล่างนี้
