CSS สำคัญและการบล็อกการแสดงผล
แทรก CSS สำคัญของส่วนที่มองเห็นก่อนเลื่อนหน้าไว้ในเอกสาร และเลื่อนการโหลดรูปแบบที่ไม่สำคัญ เพื่อกำจัดการบล็อกการแสดงผล
CSS สำคัญและการบล็อกการแสดงผล เป็นบทเรียน CSS Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน CSS Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
วิธีที่เบราว์เซอร์แสดงผล
เบราว์เซอร์จะแยกวิเคราะห์ HTML เป็น DOM แยกวิเคราะห์ CSS เป็น CSSOM รวมทั้งสองอย่างเป็นต้นไม้การแสดงผล คำนวณการจัดวาง แล้วจึงวาดภาพ CSS จะขัดขวางการแสดงผลจนกว่า CSSOM จะเสร็จสมบูรณ์ ดังนั้น CSS ทุกไบต์บนเส้นทางวิกฤติจึงทำให้การวาดครั้งแรกล่าช้า
CSS วิกฤติคืออะไร
CSS วิกฤติคือชุดรูปแบบขั้นต่ำที่จำเป็นต่อการแสดงผลเนื้อหาที่อยู่เหนือขอบล่างของหน้าจอ การใส่รูปแบบนี้ไว้ภายในแท็ก <style> ในส่วน <head> จะขจัดคำขอสไตล์ชีตที่ขัดขวางการแสดงผลสำหรับมุมมองเริ่มต้น
ทรัพยากรที่ขัดขวางการแสดงผล
<link rel="stylesheet"> ใด ๆ ในส่วน head จะขัดขวางการแสดงผล สคริปต์ที่ไม่มี async หรือ defer ก็จะขัดขวางการแยกวิเคราะห์ HTML เช่นกัน การลดทรัพยากรที่ขัดขวางการแสดงผลช่วยปรับปรุง Largest Contentful Paint (LCP) และ First Contentful Paint (FCP) โดยตรง
การดึง CSS วิกฤติ
เครื่องมืออย่าง critical (npm), เพนต์เฮาส์ และเครื่องมือดึงข้อมูลที่ใช้ Puppeteer จะแสดงผลหน้าเว็บที่ขนาดพื้นที่แสดงผลเฉพาะ และเก็บรูปแบบที่ใช้กับองค์ประกอบที่มองเห็นได้ ผลลัพธ์จะถูกใส่ไว้ในหน้า ส่วนสไตล์ชีตฉบับเต็มจะโหลดแบบไม่พร้อมกัน
การโหลด CSS ที่ไม่วิกฤติแบบไม่พร้อมกัน
โหลดสไตล์ชีตฉบับเต็มโดยไม่ขัดขวางการแสดงผลด้วย media="print" และสลับค่าเมื่อโหลดเสร็จ หรือใช้รูปแบบ rel="preload" + as="style" + onload="this.rel='stylesheet'"
<pre class="snippet"><link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript></pre>คิวรีสื่อในฐานะคำใบ้การโหลด
ไฟล์ CSS ที่โหลดด้วยคิวรีสื่อไม่ตรงเงื่อนไข เช่น media="print" จะถูกดาวน์โหลดด้วยลำดับความสำคัญต่ำและไม่ขัดขวางการแสดงผล นี่คือเทคนิคคลาสสิกสำหรับโหลดสไตล์ชีตโดยไม่ขัดขวางเส้นทางวิกฤติ
HTTP/2 และการแยก CSS
เมื่อใช้การส่งข้อมูลหลายชุดพร้อมกันของ HTTP/2 การแยก CSS เป็นไฟล์ขนาดเล็กจำนวนมากจะมีภาระน้อยกว่า HTTP/1 โหลดเฉพาะ CSS ที่จำเป็นสำหรับแต่ละเส้นทาง เช่น home.css และ checkout.css แทนที่จะใช้ชุดไฟล์ขนาดใหญ่ชุดเดียวที่รวมรูปแบบของทุกหน้าไว้
CSS และ Scanner สำหรับโหลดล่วงหน้า
Scanner สำหรับโหลดล่วงหน้าของเบราว์เซอร์จะค้นหาแท็กสไตล์ชีต <link> ตั้งแต่เนิ่น ๆ และเริ่มดาวน์โหลดก่อนที่ตัวแยกวิเคราะห์ HTML จะมาถึงแท็กเหล่านั้น ตรวจสอบให้แน่ใจว่าสไตล์ชีตอยู่ใน <head> ไม่ใช่ใน body เพื่อให้ Scanner พบได้ตั้งแต่เนิ่น ๆ
การวัดผลกระทบจากการขัดขวางการแสดงผล
แผงเครือข่ายของ Chrome DevTools จะแสดงเวลาที่ทรัพยากรถูกขัดขวางในแผนภาพลำดับเวลา Lighthouse จะรายงาน "กำจัดทรัพยากรที่ขัดขวางการแสดงผล" พร้อมการประหยัดแยกตามทรัพยากร WebPageTest จะแสดง renderBlockingResources ในมุมมองแถบภาพยนตร์
CSS วิกฤติฝั่งเซิร์ฟเวอร์
เฟรมเวิร์กอย่าง Next.js และแอสโทรจะใส่ CSS วิกฤติไว้ในหน้าโดยอัตโนมัติระหว่าง SSR เซิร์ฟเวอร์จะระบุว่ารูปแบบใดใช้กับ HTML เริ่มต้น แล้วใส่รูปแบบเหล่านั้นไว้ในหน้า จึงไม่จำเป็นต้องมีขั้นตอนดึงข้อมูลฝั่งไคลเอ็นต์
ข้อแลกเปลี่ยนในทางปฏิบัติ
การใส่ CSS ไว้ในหน้ามากเกินไปจะเพิ่มขนาด HTML ทำให้ TTFB ช้าลง และลดประสิทธิภาพแคช (HTML จะไม่ถูกแคชนานเท่าไฟล์ CSS) ควรจำกัด CSS วิกฤติที่ใส่ไว้ในหน้าให้มีขนาดไม่เกิน 14KB เพื่อให้อยู่ภายในหน้าต่างความคับคั่ง TCP แรก
ตรวจสอบความรู้
เหตุใดสไตล์ชีตที่ขัดขวางการแสดงผลจึงทำให้ First Contentful Paint ล่าช้า
สรุป
CSS วิกฤติจะใส่รูปแบบของเนื้อหาที่อยู่เหนือขอบล่างของหน้าจอไว้ในหน้า เพื่อขจัดความล่าช้าจากการขัดขวางการแสดงผล โหลด CSS ที่เหลือแบบไม่พร้อมกันโดยใช้การโหลดล่วงหน้าหรือเทคนิคคิวรีสื่อ วัดผลกระทบด้วย Lighthouse และ DevTools และควบคุมขนาดข้อมูล CSS วิกฤติให้ต่ำกว่า 14KB เพื่อประสิทธิภาพสูงสุด
คำถามที่พบบ่อย
บทเรียน “CSS สำคัญและการบล็อกการแสดงผล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “CSS สำคัญและการบล็อกการแสดงผล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส CSS Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส CSS Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “CSS สำคัญและการบล็อกการแสดงผล”
แทรก CSS สำคัญของส่วนที่มองเห็นก่อนเลื่อนหน้าไว้ในเอกสาร และเลื่อนการโหลดรูปแบบที่ไม่สำคัญ เพื่อกำจัดการบล็อกการแสดงผล คุณปฏิบัติ CSS Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน CSS Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน CSS Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน
บทเรียน “CSS สำคัญและการบล็อกการแสดงผล” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน CSS Academy นี้ได้ไหม
ได้ บทเรียน CSS Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- CSS สำคัญและการบล็อกการแสดงผล
- การจัดวาง การวาด และการประกอบ: กระบวนการแสดงผล
- will-change และการเลื่อนระดับเลเยอร์
- ความครอบคลุมของ CSS และรูปแบบที่ไม่ได้ใช้