ตัวสร้าง Critical CSS
ตัวสร้าง Critical CSS ออนไลน์ฟรี ดึง CSS rules ที่ใช้โดย HTML ส่วนบนของหน้าเพื่อช่วยให้ first paint และ Core Web Vitals ดีขึ้น วาง HTML และ CSS
Loading tool...
ตัวสร้าง Critical CSS คืออะไร?
ตัวสร้าง Critical CSS ระบุ stylesheet rules ที่ตรงกับ HTML ซึ่งมองเห็นในการเปิดหน้าครั้งแรก การดึง styles ส่วนบนของหน้าช่วยให้นักพัฒนาสามารถ inline CSS payload ที่เล็กลง และให้ stylesheet ส่วนที่เหลือโหลดภายหลัง เครื่องมือนี้ใช้ heuristic สำหรับ selectors ในเบราว์เซอร์และไม่อัปโหลด source code
ประโยชน์หลัก
- จัดลำดับ styles ที่จำเป็นสำหรับการ render ครั้งแรก
- ลด CSS ที่ block การ render ระหว่างการเปิดหน้า
- ตรวจสอบการใช้งาน selectors กับ HTML จริง
- คัดลอกหรือดาวน์โหลดไฟล์ critical.css เพื่อตรวจสอบต่อ
- รักษาความเป็นส่วนตัวด้วยการประมวลผลในเบราว์เซอร์
กรณีการใช้งาน
- •ทดลองปรับปรุง Lighthouse และ Core Web Vitals
- •เตรียม inline CSS สำหรับ static websites และ landing pages
- •ตรวจสอบ selectors ที่ถูกใช้ในส่วนบนของหน้า
- •สร้างจุดเริ่มต้นสำหรับ production critical CSS pipeline
วิธีดึง Critical CSS
- วาง HTML ส่วนบนของหน้า: ป้อนโครงสร้าง HTML ที่ควรแสดงในการเปิดหน้าครั้งแรก
- วาง stylesheet: เพิ่ม CSS ของหน้า รวม selectors ที่ HTML ที่วางไว้ใช้งาน
- ดึง rules ที่ตรงกัน: คลิกดึง Critical CSS เพื่อจับคู่ tags, classes, IDs และ root styles
- คัดลอกหรือดาวน์โหลด: ตรวจสอบผลลัพธ์ แล้วคัดลอกหรือดาวน์โหลดเป็น critical.css เพื่อใช้ใน workflow ด้าน performance
คุณสมบัติหลัก
- จับคู่ HTML tags, classes, IDs, root styles และ universal selectors
- ดึง rules จาก stylesheet ที่วางไว้โดยไม่อัปโหลด source code
- เก็บ charset และ import directives หากอยู่ด้านบนของ stylesheet
- แสดงผล critical.css ที่จัดรูปแบบแล้วพร้อมจำนวน rules ที่ตรงกัน
- คัดลอกผลลัพธ์หรือดาวน์โหลดเป็นไฟล์ CSS ได้ทันที
- ทำงานแบบ offline ในเบราว์เซอร์โดยไม่ต้องใช้ API หรือ build step
คำถามที่พบบ่อย
Critical CSS คืออะไร?
Critical CSS คือ styles ขั้นต่ำที่จำเป็นต่อการ render ส่วนที่มองเห็นของหน้า การโหลดส่วนนี้ก่อนช่วยลดงานที่ block การ render และช่วยให้หน้าเว็บรู้สึกเร็วขึ้น
ตัวสร้าง Critical CSS นี้ทำงานอย่างไร?
เครื่องมืออ่าน HTML tags, classes และ IDs ที่คุณวางไว้ แล้วเก็บ stylesheet rules ที่ selectors ตรงกัน รวมถึง root, body, html และ universal rules
เครื่องมือนี้อัปโหลด HTML หรือ CSS ของฉันไหม?
ไม่ เครื่องมือทำงานทั้งหมดในเบราว์เซอร์ ข้อมูล source code จึงอยู่บนอุปกรณ์ของคุณและไม่ต้องเรียก API
นำผลลัพธ์ไปใช้ใน production ได้เลยไหม?
ควรใช้ผลลัพธ์เป็นจุดเริ่มต้นเท่านั้น heuristic นี้ไม่ได้ประเมิน JavaScript state, viewport ที่ responsive, pseudo-elements หรือ nested at-rules ทุกกรณี จึงควรตรวจสอบและทดสอบหน้าเว็บก่อน deploy