วิธีสร้าง Critical CSS ใน WordPress (2 วิธี)

ผู้ที่เข้าชมเว็บไซต์ของคุณไม่ต้องการรอนานเพื่อดูเนื้อหาของคุณ หากคุณไม่เพิ่มประสิทธิภาพโค้ดของคุณ ทรัพยากรการบล็อกการแสดงผล เช่น CSS อาจมีส่วนทำให้ผู้เข้าชมรับรู้ถึงเวลาในการโหลดที่ช้าลง

โชคดีที่คุณสามารถสร้าง CSS ที่สำคัญสำหรับเว็บไซต์ของคุณได้อย่างง่ายดาย ด้วยการติดตั้งปลั๊กอินเช่น Jetpack Boost คุณจะสามารถแยก CSS ที่จำเป็นทั้งหมดสำหรับการแสดงเนื้อหาครึ่งหน้าบน นี่อาจเป็นกุญแจสำคัญในการทำให้เว็บไซต์ของคุณปรากฏเร็วขึ้นและเป็นมิตรกับผู้ใช้มากขึ้น

ในโพสต์นี้ เราจะอธิบาย CSS ที่สำคัญและเหตุผลที่คุณควรพิจารณาสร้าง CSS สำหรับเว็บไซต์ของคุณ จากนั้น เราจะแสดงให้คุณเห็นสองวิธีในการดำเนินการนี้ใน WordPress

CSS ที่สำคัญใน WordPress คืออะไร?

เมื่อผู้เยี่ยมชมคลิกลิงก์ไปยังเว็บไซต์ของคุณ เบราว์เซอร์ของพวกเขาจะต้องประมวลผลชุดของงานเพื่อแสดงเนื้อหาทั้งหมด ขั้นตอนทั้งหมดที่เกี่ยวข้องในการดาวน์โหลด ประมวลผล และแปลงรหัสเป็นพิกเซลประกอบขึ้นเป็นเส้นทางการแสดงผลที่สำคัญ

เบราว์เซอร์จะอ่านโค้ด HTML, CSS และ JavaScript ของไซต์จากบนลงล่างในระหว่างกระบวนการโหลดนี้ เนื่องจากจะไม่ทราบโดยอัตโนมัติว่าทรัพยากรใดที่สำคัญที่สุดในการแสดงผลหน้าเว็บ เบราว์เซอร์อาจติดขัดในการประมวลผลโค้ดที่ไม่จำเป็น

หากไฟล์ CSS บางไฟล์หยุดไม่ให้เว็บไซต์ของคุณแสดงผล ไฟล์นั้นจะกลายเป็นทรัพยากรที่ปิดกั้นการแสดงผล แม้ว่าจะไม่จำเป็นสำหรับการแสดงหน้าเว็บ แต่ผู้เข้าชมจะไม่เห็นเนื้อหาจนกว่า CSS ที่ปิดกั้นการแสดงผลจะได้รับการประมวลผลอย่างสมบูรณ์

CSS ที่สำคัญหมายถึงโค้ด CSS ที่จำเป็นสำหรับเนื้อหาเว็บครึ่งหน้าบน โดยพื้นฐานแล้ว มันคือโค้ดขั้นต่ำเปล่าที่เบราว์เซอร์ต้องใช้ในการแสดงเนื้อหาส่วนแรกแก่ผู้เยี่ยมชม

ประโยชน์ของการสร้าง CSS ที่สำคัญ

การสร้าง CSS ที่สำคัญสำหรับหน้าเว็บของคุณเกี่ยวข้องกับการกำจัด CSS ที่ปิดกั้นการแสดงผลและเปิดใช้งานเบราว์เซอร์เพื่อประมวลผลเฉพาะสิ่งที่จำเป็นเท่านั้น

1. เพิ่มประสิทธิภาพการส่งเนื้อหา

เมื่อคุณเพิ่มประสิทธิภาพการนำส่ง CSS สำหรับเว็บไซต์ WordPress ของคุณ มันสามารถปรับปรุงกระบวนการแสดงผลได้ สำหรับผู้เข้าชมส่วนหน้า อาจดูเหมือนหน้าเว็บของคุณโหลดเร็วขึ้นด้วยซ้ำ

เมื่อมีคนเข้ามาที่เว็บไซต์ของคุณ สิ่งแรกที่พวกเขาเห็นคือเนื้อหาครึ่งหน้าบน นี่คือทุกอย่างที่แสดงบนหน้าแรกโดยไม่จำเป็นต้องเลื่อน

ด้วยการแยก CSS ที่สำคัญ คุณกำลังเพิ่มประสิทธิภาพไฟล์ CSS ที่จำเป็นในการแสดงส่วนเริ่มต้นนี้ หากไม่มี ผู้ใช้อาจเห็นองค์ประกอบบางส่วนที่ยังไม่ได้แสดงผลทั้งหมด

ความเข้าใจผิดที่พบบ่อยคือ CSS ที่สำคัญจะลดเวลาในการโหลดของคุณ แม้ว่าจะไม่เป็นความจริง แต่เทคนิคการเพิ่มประสิทธิภาพสามารถปรับปรุงประสิทธิภาพการ รับรู้ ได้

โดยพื้นฐานแล้ว ผู้ใช้จะคิดว่าหน้าเว็บของคุณโหลดเร็วขึ้น เนื่องจากเบราว์เซอร์สามารถแสดงองค์ประกอบครึ่งหน้าบนได้อย่างมีประสิทธิภาพมากขึ้น

ด้วยการสร้าง CSS ที่สำคัญของ WordPress ผู้เข้าชมจะได้รับประสบการณ์ผู้ใช้ (UX) ที่ดีขึ้นบนไซต์ของคุณ ด้วยเหตุนี้ คุณจึงสามารถลดอัตราตีกลับและกระตุ้นการกลับมาเยี่ยมชมได้

2. ปรับปรุง Core Web Vitals

แม้ว่า CSS ที่สำคัญของ WordPress จะไม่เพิ่มหรือลดเวลาในการโหลดหน้าเว็บ แต่ก็สามารถปรับปรุง Core Web Vitals ของคุณได้ เมตริกเหล่านี้วิเคราะห์ประสบการณ์ของผู้ใช้เว็บไซต์

นี่คือ Core Web Vitals:

• Largest Contentful Paint (LCP) : ประสิทธิภาพการโหลดเว็บไซต์
• First Input Delay (FID) : การโต้ตอบของเว็บไซต์
• Cumulative Layout Shift (CLS) : ความเสถียรของภาพเว็บไซต์

หลังจากสแกนเว็บไซต์เพื่อดูรายงาน Core Web Vitals แล้ว คุณอาจเห็นเมตริกเพิ่มเติม เช่น First Contentful Paint (FCP) หรือ Time to First Byte (TTFB) สิ่งเหล่านี้ส่งผลกระทบต่อ LCP และมีบทบาทสำคัญในกระบวนการโหลด

CSS ที่สำคัญส่งผลกระทบโดยตรงต่อ FCP พูดง่ายๆ ก็คือ FCP จะวัดเวลาที่ใช้ในการแสดงผลองค์ประกอบแรกบนหน้าเว็บหลังจากที่เริ่มโหลด หากไซต์ของคุณมีคะแนน FCP ต่ำ ผู้เข้าชมมักจะเห็นหน้าว่างอยู่พักหนึ่ง

ในฐานะเจ้าของเว็บไซต์ WordPress คุณควรตั้งเป้าหมายที่จะได้รับ FCP ภายใน 1.8 วินาที แต่องค์ประกอบหลายอย่างอาจส่งผลเสียต่อคะแนนนี้ ได้แก่:

• Render-blocking JavaScript และ CSS
• เซิร์ฟเวอร์ช้า
• ไฟล์ฟอนต์ขนาดใหญ่
• ขนาดโมเดลวัตถุเอกสารขนาดใหญ่ (DOM)

เนื่องจาก CSS ที่บล็อกการเรนเดอร์มีส่วนสนับสนุน FCP การสร้าง CSS ที่สำคัญจึงสามารถปรับปรุงคะแนนนี้ได้ ในระหว่างขั้นตอนนี้ คุณจะอินไลน์ CSS ทั้งหมดที่จำเป็นในการแสดงเนื้อหาครึ่งหน้าบน

วิธีทดสอบเว็บไซต์ของคุณสำหรับ CSS ที่ปิดกั้นการแสดงผล

ก่อนที่จะสร้าง CSS ที่สำคัญของ WordPress คุณจะต้องรู้ว่ามันจำเป็นสำหรับเว็บไซต์ของคุณหรือไม่ เนื่องจากไฟล์ CSS ขนาดใหญ่ถือเป็นทรัพยากรที่ปิดกั้นการแสดงผล คุณจึงสามารถสแกนหาไฟล์เหล่านี้ได้ด้วยเครื่องมือเพิ่มประสิทธิภาพความเร็ว

ในการเริ่มต้น ให้ป้อน URL เว็บไซต์ของคุณลงใน PageSpeed ​​Insights ซอฟต์แวร์ Google นี้จะวิเคราะห์ประสิทธิภาพไซต์ของคุณด้วยการตรวจสอบความเร็วต่างๆ

ที่ด้านบนของหน้า คุณจะเห็นการประเมิน Core Web Vitals ของคุณ ประกอบด้วยเมตริกสำหรับระบายสีเนื้อหาขนาดใหญ่ที่สุด การหน่วงเวลาอินพุตแรก การเปลี่ยนเลย์เอาต์สะสม ระบายสีเนื้อหาแรก การโต้ตอบกับสีถัดไป และเวลาถึงไบต์แรก

ดังที่คุณได้เรียนรู้ก่อนหน้านี้ CSS ที่ปิดกั้นการแสดงผลนั้นเชื่อมโยงอย่างใกล้ชิดกับคะแนน FCP ตรวจสอบให้แน่ใจว่าผลการประเมินทั้งมือถือและเดสก์ท็อปของคุณใช้เวลา 1.8 วินาทีหรือน้อยกว่า

หากคุณได้คะแนนต่ำ คุณอาจมีไฟล์ CSS ขนาดใหญ่ที่ไม่ได้ปรับแต่งบนเว็บไซต์ของคุณ หากต้องการตรวจสอบว่าเป็นจริงหรือไม่ ให้เลื่อนลงไปที่ โอกาส ส่วนนี้ให้คำแนะนำเฉพาะเพื่อปรับปรุงเวลาในการโหลดเว็บไซต์ของคุณ

ที่นี่ คุณอาจสังเกตเห็นการแจ้งเตือนที่แจ้งให้คุณลบ ทรัพยากรการบล็อกการแสดงผล แม้ว่าข้อความนี้อาจอ้างถึงไฟล์ JavaScript แต่อาจส่งสัญญาณว่าคุณต้องสร้าง CSS ที่สำคัญ

วิธีสร้าง CSS ที่สำคัญใน WordPress

ตอนนี้คุณเข้าใจมากขึ้นเกี่ยวกับ CSS ที่สำคัญของ WordPress และเหตุใดจึงสำคัญ ถึงเวลาสร้างมันแล้ว! ไม่ว่าทักษะของคุณจะเป็นระดับใด คุณสามารถเรียนรู้วิธีเพิ่มประสิทธิภาพการนำส่ง CSS ใน WordPress ได้โดยทำตามบทช่วยสอนที่เป็นมิตรกับผู้เริ่มต้นของเรา

วิธีที่ 1: สร้าง CSS ที่สำคัญด้วยปลั๊กอิน

แม้ว่าคุณจะสร้างมันได้ด้วยตัวเอง แต่การเพิ่มประสิทธิภาพการนำส่ง CSS ด้วยปลั๊กอิน WordPress มักทำได้ง่ายกว่า เครื่องมือที่เหมาะสมสามารถเลื่อน CSS ที่มีความสำคัญน้อยกว่าได้โดยอัตโนมัติ นอกจากนี้ คุณไม่ต้องแก้ไขโค้ดใดๆ ด้วยตนเอง

Jetpack Boost สามารถปรับปรุงประสิทธิภาพการโหลดไซต์ของคุณได้อย่างรวดเร็ว หลังจากขั้นตอนการตั้งค่าง่ายๆ คุณสามารถใช้ปลั๊กอินนี้เพื่อสร้าง CSS ที่สำคัญ เลื่อน JavaScript ที่ไม่จำเป็น และอื่นๆ

หากต้องการเริ่มใช้ Jetpack Boost ให้ติดตั้งและเปิดใช้งานใน WordPress จากนั้น คุณจะได้รับคะแนนตามประสิทธิภาพปัจจุบันของเว็บไซต์ของคุณ

ด้วยปลั๊กอินฟรี คุณจะเห็นตัวเลือกในการ เพิ่มประสิทธิภาพการโหลด CSS หรือคุณสามารถอัปเกรดเป็นการสมัครสมาชิกแบบชำระเงินเพื่อสร้าง CSS ที่สำคัญโดยอัตโนมัติ วิธีนี้จะช่วยไม่ต้องสร้าง CSS ใหม่ทุกครั้งที่คุณทำการเปลี่ยนแปลง

ในการเปิดใช้งาน CSS ที่สำคัญ เพียงใช้สวิตช์ทางด้านซ้ายมือ ในทำนองเดียวกัน คุณสามารถเลื่อน JavaScript ที่ไม่จำเป็นออกไปและเปิดใช้การโหลดแบบ Lazy Loading สำหรับรูปภาพได้ เมื่อรวมกันแล้ว การตั้งค่าเหล่านี้สามารถลดเวลาในการโหลดหน้าเว็บได้อย่างมาก และช่วยให้ผู้เยี่ยมชมเห็นเนื้อหาของคุณเร็วขึ้น

วิธีที่ 2: สร้าง CSS ที่สำคัญด้วยตนเอง

หากคุณไม่ต้องการใช้ปลั๊กอิน คุณสามารถสร้าง CSS ที่สำคัญได้ด้วยตนเอง สิ่งสำคัญคือต้องจำไว้ว่าวิธีนี้เกี่ยวข้องกับการแก้ไขโค้ดของไซต์ของคุณ ดังนั้นจึงอาจเป็นขั้นตอนที่ซับซ้อนกว่าสำหรับผู้เริ่มต้น

ขั้นตอนที่ 1: สำรองเว็บไซต์ของคุณ

ในการเริ่มต้น คุณจะต้องสร้างข้อมูลสำรองของไซต์ WordPress ของคุณ หากคุณทำผิดพลาดในไฟล์ไซต์ของคุณ คุณสามารถเปลี่ยนกลับเป็นเวอร์ชันที่บันทึกไว้ได้อย่างง่ายดาย ด้วยวิธีนี้ คุณจะไม่สูญเสียข้อมูลสำคัญใดๆ

หากคุณต้องการจัดการข้อมูลสำรองของคุณอย่างง่ายดาย คุณสามารถติดตั้งปลั๊กอินสำรองข้อมูล Jetpack VaultPress เครื่องมือนี้เก็บข้อมูลสำรองไว้นอกไซต์และให้การคืนค่าในคลิกเดียว แม้ว่าไซต์ของคุณจะหยุดทำงานโดยสมบูรณ์

ต่อไปนี้เป็นวิธีเริ่มต้น:

ไปที่ ปลั๊กอิน → เพิ่มใหม่ ในแดชบอร์ด WordPress ของคุณ ค้นหา “Jetpack VaultPress Backup” แล้วคลิก ติดตั้ง ทันที → เปิดใช้งาน

จากนั้น คุณจะเห็นหน้าต่างใหม่ที่จะช่วยให้คุณตั้งค่าปลั๊กอินได้ คลิก ตั้งค่า Jetpack

จากนั้น เชื่อมต่อไซต์ของคุณกับบัญชี WordPress.com ของคุณ เมื่อคุณถูกเปลี่ยนเส้นทางกลับไปยังไซต์ของคุณ ให้คลิก อัปเกรด ทันทีเพื่อดูตัวเลือกต่างๆ สำหรับแผนการสำรองข้อมูล Jetpack VaultPress

อย่างน้อยที่สุด คุณจะต้องมีแผนการสำรองข้อมูล แต่การรักษาความปลอดภัยและความสมบูรณ์มีเครื่องมือเพิ่มเติมสำหรับการปกป้อง การเติบโต และเพิ่มความเร็วไซต์ของคุณ

การสำรองข้อมูลครั้งแรกของคุณจะเริ่มต้นโดยอัตโนมัติ และคุณสามารถตรวจสอบความคืบหน้าได้โดยไปที่ Jetpack → สำรองข้อมูล ในแดชบอร์ด WordPress ของคุณ

หากมีข้อผิดพลาดเกิดขึ้นในขั้นตอนถัดไป เพียงกลับมาที่หน้านี้แล้วกด Restore to this point การดำเนินการนี้จะแปลงไซต์ของคุณกลับเป็นเวอร์ชันเก่า กำจัดข้อผิดพลาดใดๆ ที่เกิดขึ้น

ขั้นตอนที่ 2: ใช้ตัวสร้าง CSS ที่สำคัญ

เมื่อคุณทราบว่าเว็บไซต์ของคุณได้รับการสำรองข้อมูลแล้ว คุณสามารถเริ่มสร้าง CSS ที่สำคัญของคุณได้ หนึ่งในวิธีที่ง่ายที่สุดในการทำเช่นนี้คือการใช้ตัวสร้าง CSS ที่สำคัญ เครื่องมือนี้จะสร้าง CSS ที่สำคัญของคุณโดยอัตโนมัติ ทำให้คุณไม่จำเป็นต้องสร้างโค้ดด้วยตนเอง

ขั้นแรก เปิด CoreWebVitals Critical CSS Generator ป้อน URL สำหรับเว็บไซต์ของคุณหรือหน้าใดหน้าหนึ่งที่คุณต้องการเพิ่มประสิทธิภาพ จากนั้นกด สร้าง CSS ที่สำคัญ

เมื่อโหลดเสร็จแล้ว คุณจะเห็นโค้ด CSS ที่สร้างขึ้นในกล่องข้อความ คัดลอกรหัสนี้

หลังจากที่คุณบันทึกโค้ดนี้แล้ว คุณสามารถอินไลน์โค้ดบนเว็บไซต์ของคุณได้!

ขั้นตอนที่ 3: CSS ที่สำคัญแบบอินไลน์

เมื่อมีผู้เยี่ยมชมเว็บไซต์ของคุณ เบราว์เซอร์ของพวกเขาจะดึงไฟล์ของเว็บไซต์ของคุณจากเซิร์ฟเวอร์ ก่อนอื่นจะตรวจสอบส่วน <head> สำหรับเนื้อหาที่จำเป็นในระหว่างกระบวนการแยกวิเคราะห์ จากนั้น ก็จะแสดงผลเนื้อหา <body> ต่อไป

หากต้องการจัดลำดับความสำคัญของ CSS ให้วางไว้ในส่วน <head> ของไฟล์ สิ่งนี้เรียกว่าอินไลน์ เมื่อคุณอินไลน์ CSS เบราว์เซอร์จะร้องขอให้เรียกสไตล์ชีตนี้ก่อนที่จะแสดงผลส่วนที่เหลือของหน้า

โดยพื้นฐานแล้ว การฝัง CSS จะวางโค้ดในที่ที่จำเป็น ดังนั้น เบราว์เซอร์ของผู้เข้าชมจะไม่ต้องแยกวิเคราะห์ไฟล์ที่ปิดกั้นการแสดงผล ก่อนที่จะ แสดงเนื้อหาเป้าหมาย

เมื่อคุณคัดลอก CSS ที่สำคัญที่สร้างขึ้นแล้ว คุณสามารถฝังลงในไฟล์ของคุณได้ นำทางไปยังโฟลเดอร์ public_html ผ่าน FTP จากนั้นไปที่ wp-content → ธีม → ธีมที่ใช้งานอยู่ แล้วเปิด ไฟล์ header.php

ในไฟล์ส่วนหัวนี้ ค้นหาแท็ก <title> ข้างใต้ ให้เพิ่ม CSS ที่สำคัญโดยใช้แท็ก <style> สุดท้าย เลือก อัปเดตไฟล์

คำถามที่พบบ่อย (FAQs)

จนถึงตอนนี้ เราได้พูดถึง CSS ที่สำคัญและวิธีสร้างมันแล้ว หากคุณยังมีข้อสงสัยเกี่ยวกับการฝัง CSS บนเว็บไซต์ของคุณ เราจะตอบคำถามเหล่านี้ที่นี่!

การสร้าง CSS ที่สำคัญอาจทำให้ไซต์ของคุณเสียหายได้หรือไม่?

หากทำไม่ถูกต้อง การสร้าง CSS ที่สำคัญอาจส่งผลเสียต่อรูปลักษณ์และการจัดวางไซต์ของคุณ โชคดีที่คุณสามารถย้อนกลับการเปลี่ยนแปลงใดๆ ได้โดยเพียงแค่กู้คืนข้อมูลสำรองที่บันทึกไว้ของไซต์ WordPress ของคุณ เมื่อใช้ Jetpack VaultPress Backup คุณสามารถดูบันทึกกิจกรรมและกู้คืนไซต์เวอร์ชันเก่าได้ด้วยคลิกเดียว

นอกจากนี้ คุณสามารถใช้ปลั๊กอินเช่น Jetpack Boost เพื่อเปิดและปิด CSS ที่สำคัญได้ทุกเมื่อที่จำเป็น การตั้งค่าง่ายๆ เหล่านี้สร้างขึ้นตามแนวทางปฏิบัติที่ดีที่สุดของ WordPress ดังนั้นจึงมีโอกาสน้อยที่จะส่งผลกระทบต่อเว็บไซต์ของคุณในส่วนหน้า

ฉันสามารถทำอะไรได้อีกเพื่อเพิ่มประสิทธิภาพโค้ด CSS ของฉัน

หากคุณต้องการเพิ่มประสิทธิภาพ CSS บนไซต์ของคุณเพิ่มเติม ให้ลองลดขนาดลง คุณจะลบโค้ดที่ไม่จำเป็นระหว่างการลดขนาด CSS เพื่อลดขนาดไฟล์ CSS

โค้ด CSS ของคุณน่าจะมีช่องว่างและตัวแบ่งบรรทัดเพื่อให้อ่านง่ายขึ้น เนื่องจากเบราว์เซอร์สามารถประมวลผลโค้ดโดยไม่มีองค์ประกอบพิเศษเหล่านี้ คุณจึงสามารถลบออกได้ ซึ่งช่วยลดทรัพยากรและเวลาที่จำเป็นในการเรียกใช้ไฟล์

คุณยังสามารถลบ CSS ที่ไม่ได้ใช้ออกไปได้ทั้งหมด การลดไฟล์ของคุณให้เหลือเพียงโค้ดที่จำเป็น เว็บไซต์ของคุณจะเริ่มโหลดเร็วขึ้น

ฉันสามารถทำอะไรได้อีกเพื่อปรับปรุงความเร็วหน้าเว็บของฉัน

หนึ่งในวิธีที่ดีที่สุดในการเพิ่มความเร็วไซต์ของคุณคือการปรับปรุง Core Web Vitals การใช้เครื่องมืออย่าง PageSpeed ​​Insights ช่วยให้คุณระบุองค์ประกอบที่ไม่ได้รับการปรับแต่ง เช่น ทรัพยากรที่ปิดกั้นการแสดงผล

เนื่องจากเบราว์เซอร์โหลดโค้ดไซต์ของคุณจากบนลงล่าง กระบวนการโหลดจึงอาจถูกขัดจังหวะโดย JavaScript ได้อย่างง่ายดาย ด้วยการชะลอการแยกวิเคราะห์ JavaScript ผู้เข้าชมจะไม่ต้องรอให้สคริปต์โหลดก่อนที่จะเห็นเนื้อหาของคุณ

นอกจากนี้ ให้พิจารณาใช้การโหลดแบบ Lazy Loading สำหรับรูปภาพ ด้วยการตั้งค่านี้ใน Jetpack Boost รูปภาพด้านล่างครึ่งหน้าจะไม่โหลดจนกว่าผู้เข้าชมจะเลื่อนลงมา สิ่งนี้สามารถป้องกันไม่ให้เว็บไซต์ของคุณโหลดทุกภาพพร้อมกัน ทำให้กระบวนการเรนเดอร์ล่าช้า

ประการสุดท้าย เครือข่ายการจัดส่งเนื้อหา (CDN) สามารถเร่งความเร็วเว็บไซต์ของคุณได้อย่างมาก แทนที่จะใช้เซิร์ฟเวอร์เครื่องเดียว CDN ใช้ระบบของศูนย์ข้อมูลทั่วโลก ตัวเลือกเช่น CDN ของ Jetpack สามารถปรับปรุงการส่งเนื้อหาสำหรับรูปภาพและไฟล์คงที่

เพิ่มประสิทธิภาพการนำส่ง CSS ใน WordPress

หากคุณกำลังพยายามปรับปรุงการส่งเนื้อหาของเว็บไซต์ สิ่งสำคัญคือต้องกำจัดทรัพยากรที่ปิดกั้นการแสดงผล เนื่องจาก CSS ที่ไม่ได้รับการเพิ่มประสิทธิภาพอาจทำให้กระบวนการแสดงผลล่าช้า จึงควรสร้าง CSS ที่สำคัญ แม้ว่าการทำเช่นนี้จะไม่เพิ่มเวลาในการโหลดโดยตรง แต่จะช่วยให้ผู้เข้าชมเห็นเนื้อหาครึ่งหน้าบนได้เร็วขึ้นมาก

หากต้องการตรวจสอบ ต่อไปนี้เป็นวิธีสร้าง CSS ที่สำคัญใน WordPress:

1. สร้าง CSS ที่สำคัญด้วยปลั๊กอินเช่น Jetpack Boost
2. ใช้ตัวสร้าง CSS ที่สำคัญ

ด้วย Jetpack Boost คุณสามารถเพิ่มประสิทธิภาพ CSS โดยไม่ต้องแก้ไขโค้ดใดๆ หลังจากดาวน์โหลดและเปิดใช้งานปลั๊กอิน คุณจะสามารถสร้าง CSS ที่สำคัญได้ในคลิกเดียว!