CSS ที่สำคัญใน WordPress: มันคืออะไรและจะเพิ่มประสิทธิภาพการจัดส่ง CSS ได้อย่างไร

เมื่อเรียกใช้การตรวจสอบประสิทธิภาพใน Google PageSpeed ​​Insights คุณจะพบว่า Google แนะนำให้คุณ "กำจัดทรัพยากรการบล็อกการแสดงผล" เกือบทุกครั้ง หมายความว่าคุณควรโหลด CSS และ JavaScript ที่สำคัญในลำดับความสำคัญเสมอ

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

มาดำดิ่งกัน

CSS ที่สำคัญคืออะไรและเหตุใดจึงสำคัญต่อประสิทธิภาพ

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

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

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

คุณคุ้นเคยกับตัววัด Lighthouse ทั้งหกตัวที่วัดประสิทธิภาพหรือไม่ สองรายการ – First Contentful Paint (FCP) และ First Input Delay (FID) – วัดความเร็วที่รับรู้ของเว็บไซต์ของคุณ หากเมตริกเหล่านั้นอยู่ในสภาพดี Google จะวัดประสบการณ์ผู้ใช้ของคุณเช่นกัน อย่างไรก็ตาม หาก KPI ทั้งสองเป็นสีแดง คุณควรเพิ่มประสิทธิภาพ CSS ที่สำคัญของคุณ

Critical CSS อธิบายเป็นภาษาอังกฤษล้วน

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

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

สถานการณ์ #1 – ด้านบนมีเพจที่มี CSS ที่บล็อกการแสดงผล คุณเห็นหน้าว่างจนกว่าไฟล์ CSS ทั้งหมดจะโหลด

สถานการณ์ #2 – ที่ด้านล่าง CSS ที่สำคัญจะแสดงก่อน คุณเริ่มเห็นหน้าก่อนหน้านี้เนื่องจากเบราว์เซอร์ได้เริ่มโหลดสไตล์ชีตที่สำคัญที่สุดแล้ว

คำถาม: สถานการณ์ใดที่ "รู้สึก" เร็วกว่าสำหรับคุณ

คำตอบ: เราทุกคนต่างเห็นพ้องกันว่าความเร็วในการรับรู้ของบรรทัดล่างดีกว่า

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

เหตุใด CSS ที่สำคัญจึงจำเป็น

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

ไซต์ของ WP Rocket ที่ไม่มี CSS	ไซต์ของ WP Rocket พร้อม CSS

เส้นทางการแสดงผล CSS ที่สำคัญหมายถึงอะไร

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

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

แต่ถ้าเบราว์เซอร์สามารถเริ่มแสดงผล CSS ในขณะที่การดาวน์โหลดดำเนินไป

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

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

คำถามสองข้อกำลังเกิดขึ้น: จะเพิ่มประสิทธิภาพแต่ละขั้นตอนได้อย่างไร จะแน่ใจได้อย่างไรว่าเรามีการส่ง CSS ที่มีประสิทธิภาพมากที่สุด?

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

3 ขั้นตอนในการเพิ่มประสิทธิภาพการจัดส่ง CSS

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

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

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

วิธีค้นหา CSS ที่สำคัญ

WebDev มีเครื่องมือสามอย่างที่คุณสามารถใช้เพื่อระบุ CSS ที่สำคัญ:

• สำคัญ – แยก CSS ครึ่งหน้าบน (และยังอินไลน์และย่อให้เล็กลง)
• CriticalCSS – โมดูลอื่นที่แยก CSS . ที่สำคัญ
• เพนต์เฮาส์ – ทางเลือกที่ดีหากไซต์ของคุณมี CSS . จำนวนมาก

ขั้นตอนที่ 2: Inline CSS ที่สำคัญนี้ — นั่นคือการเพิ่ม CSS ที่สำคัญใน <head> ของเอกสาร HTML เพื่อกำจัดคำขอเพิ่มเติมทั้งหมดเพื่อดึงสไตล์เหล่านี้

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

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

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

วิธีสร้าง CSS ที่สำคัญและปรับเส้นทางการแสดงผลที่สำคัญให้เหมาะสมด้วยปลั๊กอิน

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

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

• การปรับอัตโนมัติ - ฉีด CSS ในส่วนหัวของหน้าโดยค่าเริ่มต้น และยังสามารถอินไลน์และเลื่อน CSS ที่สำคัญได้อีกด้วย

• การล้างข้อมูลเนื้อหา – ไฟล์ CSS แบบอินไลน์ (อัตโนมัติ & โดยการระบุเส้นทางไปยังสไตล์ชีต)

วิธีเพิ่มประสิทธิภาพการจัดส่ง CSS ด้วย WP Rocket

ใน WP Rocket 3.10 ตัวเลือกโหลด CSS แบบอะซิงโครนัสจะกล่าวถึงคำแนะนำเกี่ยวกับความเร็วของเพจที่เราเห็นก่อนหน้านี้: “กำจัดทรัพยากรการบล็อกการเรนเดอร์” WP Rocket ครอบคลุมการเพิ่มประสิทธิภาพ CSS หลักสองประการ:

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

ในการเพิ่มประสิทธิภาพการจัดส่ง CSS เพียงทำตามขั้นตอนเหล่านี้ในแดชบอร์ดของ WP Rocket:

• ไปที่ การตั้งค่า > WP Rocket
• คลิกที่แท็บ การเพิ่มประสิทธิภาพไฟล์
• เลื่อนลงไปที่ส่วนไฟล์ CSS และคลิกช่องที่ระบุว่า เพิ่มประสิทธิภาพการส่ง CSS
• เลือกตัวเลือก Remove Unused CSS (ตัว เลือกที่แนะนำ ) สิ่งนี้จะแยกเฉพาะ CSS ที่จำเป็นในหน้าและจะแทรกในบรรทัดด้วย

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

สุดท้ายแต่ไม่ท้ายสุด WP Rocket ยังกล่าวถึงคำแนะนำ "ลด CSS ที่ไม่ได้ใช้" จาก PageSpeed ​​Insights

CSS ที่ไม่ได้ใช้จะส่งผลต่อเวลาในการโหลดหน้าเว็บเนื่องจากเบราว์เซอร์ยังต้องโหลด เมตริกประสิทธิภาพของ Google เช่น Largest Contentful Paint (LCP) และ Total Blocking Time (TBT) ก็จะได้รับผลกระทบเช่นกัน LCP และ TBT มีน้ำหนักรวม 55% ในเกรด Google PageSpeed ​​และ Core Web Vitals ดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องรักษาเมตริกเหล่านั้นให้มีประสิทธิภาพ

มาทดสอบตัวเลือก WP Rocket บนไซต์ WordPress ที่มีคะแนนไม่ดีใน PSI (มือถือ) คุณจะเห็นว่า WP Rocket จะช่วยเราในกระบวนการเพิ่มประสิทธิภาพความเร็วหน้าเว็บได้อย่างไร

ก่อนที่จะปรับ CSS ที่สำคัญของฉันให้เหมาะสม คะแนนประสิทธิภาพของฉันอยู่ที่ 43/100 เท่านั้น ซึ่งทำให้ไซต์บนมือถือของฉันเป็นสีแดง:

ฉันยังได้รับคำเตือนสองอย่าง: "ลด CSS ที่ไม่ได้ใช้" และ "กำจัดทรัพยากรการบล็อกการแสดงผล"

ตอนนี้ มาติดตั้ง WP Rocket และเปิดใช้งานตัวเลือก " Remove Unused CSS"

ผลลัพธ์ด้านประสิทธิภาพการทำงานบนมือถือ นั้นยอดเยี่ยม เรามีถึง 94/100 เพียงไม่กี่คลิก WP Rocket ได้ปรับเส้นทางการเรนเดอร์ของฉันให้เหมาะสมและดูแล CSS ที่สำคัญของฉันด้วย

คำเตือน "กำจัดทรัพยากรการบล็อกการแสดงผล" และ "ลด CSS ที่ไม่ได้ใช้" อยู่ในส่วน "การตรวจสอบที่ผ่าน"

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

ห่อ

การเพิ่มประสิทธิภาพ CSS ที่สำคัญของคุณอาจดูน่ากลัว แต่ก็ไม่จำเป็นต้องเป็นเช่นนี้ ต้องขอบคุณปลั๊กอินอย่าง WP Rocket เราเห็นว่า WP Rocket ช่วยขจัดคำเตือนสีแดงที่เกี่ยวข้องกับทรัพยากรการบล็อกการแสดงผลบน Google PageSpeed ​​Insights

คุณจะประหยัดเวลาอันมีค่า ได้เพราะ WP Rocket ใช้แนวทางปฏิบัติที่ดีที่สุดเกี่ยวกับประสิทธิภาพเว็บ 80% โดยอัตโนมัติ และ คุณจะเห็นการปรับปรุงความเร็วในทันทีเมื่อเปิดใช้งาน

ยิ่งไปกว่านั้น คุณสามารถวางใจได้ในการรับประกันคืนเงิน 100% ของเรา แม้ว่าเราจะไม่คิดว่าคุณจะอยากได้อีก แต่เรายินดีคืนเงินหากคุณขอภายใน 14 วันนับจากวันที่ซื้อ