ไม่ว่าคุณจะใช้ไลบรารี 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
![ข้อความว่า "สร้าง CSS ที่สำคัญแล้ว" แจ้งว่า "สร้าง CSS ที่สำคัญแล้ว" ในคอนโซล](https://web.developers.google.cn/static/articles/codelab-extract-and-inline-critical-css/image/success-message-saying-g-e2359b437448f.png?authuser=9&hl=th)
ตอนนี้ในแท็ก <head>
ของ index.html
โค้ด CSS ที่สำคัญซึ่งสร้างขึ้นจะอยู่ระหว่างแท็ก <style>
ตามด้วยสคริปต์ที่โหลด CSS ที่เหลือแบบไม่พร้อมกัน
![index.html ที่มี CSS วิกฤตแบบแทรกในบรรทัด](https://web.developers.google.cn/static/articles/codelab-extract-and-inline-critical-css/image/indexhtml-inlined-criti-9c5e8661497d1.png?authuser=9&hl=th)
วัดอีกครั้ง
ทำตามขั้นตอนตั้งแต่ต้นของ Codelab เพื่อเรียกใช้การตรวจสอบประสิทธิภาพ Lighthouse อีกครั้ง ผลลัพธ์ที่คุณได้รับจะมีลักษณะคล้ายกับด้านล่างนี้