ทำความเข้าใจกับ WordPress CSS
ก่อนที่เราจะพูดถึง เรามาทำความเข้าใจว่า CSS ปกติทำงานอย่างไรใน WordPress
ธีม WordPress แต่ละธีมประกอบด้วย style.css ซึ่งมีโค้ดทั้งหมดที่จำเป็นสำหรับการจัดรูปแบบไซต์ของคุณ นักพัฒนาธีมควรสนับสนุนคุณลักษณะทั้งหมดของ WordPress ซึ่งรวมถึงโพสต์ในบล็อก ความคิดเห็น หน้าผลิตภัณฑ์ หน้าสมาชิก แบบฟอร์ม ฯลฯ ปลั๊กอินอื่น ๆ ที่คุณติดตั้งสามารถเพิ่มสไตล์ชีต css ที่คล้ายกันได้
สิ่งนี้สามารถทำให้ไฟล์ css บวมและมีขนาดใหญ่ถึง 200kb หรือมากกว่านั้น
CSS เส้นทางที่สำคัญคืออะไร?
เมื่อไฟล์ CSS ของคุณเติบโตขึ้น เบราว์เซอร์ของคุณต้องดาวน์โหลดไฟล์ขนาดใหญ่เหล่านั้น แยกวิเคราะห์ และแสดงผล หรือที่เรียกว่าการบล็อกการแสดงผล นอกจากนี้ยังจะเพิ่มการเรนเดอร์ที่มีความหมายครั้งแรกและการเรนเดอร์ที่มีความหมายครั้งแรกอีกด้วย
Critical Path CSS เป็น CSS ที่จำเป็นในการแสดงเนื้อหาข้างต้นในทุกหน้าเว็บ ตามชื่อที่แนะนำ CSS "สำคัญ" ซึ่งช่วยให้เบราว์เซอร์วาดและแสดงผลได้อย่างรวดเร็วก่อนที่จะโหลดไฟล์ CSS แบบเต็ม
โดยปกติ css ของพาธวิกฤตจะฝังอยู่ในส่วนหัว และไฟล์ css ต้นทางจะถูกโหลดแบบอะซิงโครนัสหรือในส่วนท้ายเพื่อความสะดวกในการใช้งาน
เหตุใด CSS เส้นทางที่สำคัญจึงมีความสำคัญมาก
คุณต้องเคยเห็นคำเตือนจากเครื่องมือต่างๆ เช่น Google PageSpeed Insights หรือ GTmetrix ที่ระบุว่า "เพิ่มประสิทธิภาพการจัดส่ง css" หรือ "เลื่อน css ที่ไม่ได้ใช้"
CSS ที่สำคัญไม่มีส่วนเกี่ยวข้องกับเวลาในการโหลดหน้าเว็บ ไม่เพิ่ม/ลดเวลาในการโหลด แต่ให้ประสบการณ์การใช้งานที่ดีขึ้นมาก ช่วยให้ "แสดงผล" หรือ "ระบายสี" หน้าเว็บได้อย่างรวดเร็ว
- ปรับปรุงการจับฉลากเนื้อหาครั้งแรก (FCP)
- ปรับปรุงการชำระเงินครั้งสำคัญครั้งแรก (FMP)
- ลบ CSS ที่ไม่ได้ใช้ (ในทางเทคนิคอย่าลบออก แต่จัดลำดับความสำคัญของ CSS ที่ "มีประโยชน์")
ต่อไปนี้เป็นภาพหน้าจอสองภาพในบล็อกของฉันที่มีและไม่มี CSS ที่สำคัญ
ดังที่คุณเห็นในส่วน "ไม่มีเส้นทาง css ที่สำคัญ" เกือบ 5 วินาทีในการแสดงให้ผู้ใช้เห็นสิ่งที่มีประโยชน์บนอุปกรณ์มือถือ เบราว์เซอร์ต้องส่งคำขอ HTTP เพิ่มเติมไปยังไฟล์ css ดาวน์โหลด แยกวิเคราะห์เพื่อเริ่มการแสดงผล แต่เมื่อใช้ css ที่สำคัญ css ที่จำเป็นทั้งหมดจะต้องอยู่ในบรรทัด และเบราว์เซอร์สามารถเริ่มแสดงผลได้ทันทีหลังจากโหลดไฟล์ HTML ภายในไม่กี่วินาที
จะสร้าง CSS ที่สำคัญใน WordPress ได้อย่างไร?
มีหลายวิธีในการสร้าง CSS ที่สำคัญใน WordPress
การใช้ปลั๊กอินแคช
WP Rocket เป็นปลั๊กอินแคชระดับพรีเมียมที่ทำงานได้ดีจริงๆ
เหตุผลหนึ่งที่ฉันใช้ WP Rocket ในทุกไซต์คือตัวสร้าง CSS ที่สำคัญ พวกเขาสร้าง Critical CSS แยกต่างหากสำหรับหน้าแรก หน้าโพสต์ หน้าหมวดหมู่ หน้าผลิตภัณฑ์ ฯลฯ และฝังไว้ พวกเขาจะกู้คืน CSS ที่สำคัญหากมีการเปลี่ยนแปลงธีมหรือการตั้งค่า
ทุกอย่างสามารถทำได้ด้วยการกดปุ่มเพียงปุ่มเดียว
ปลั๊กอินแคชอื่น ๆ ที่สามารถสร้าง CSS . ที่สำคัญได้
Swift Performance และ LiteSpeed (ต้องใช้เซิร์ฟเวอร์ LiteSpeed/OpenLiteSpeed ) เป็นปลั๊กอินที่คล้ายกันซึ่งสามารถสร้าง Critical CSS ได้ ปลั๊กอินทั้งสองนี้มีระบบคลาวด์และแคชเต็มรูปแบบอยู่ในเซิร์ฟเวอร์
ใช้ Autoptimize + เครื่องมือสร้าง CSS ที่สำคัญฟรี
มีเครื่องมือออนไลน์ของบุคคลที่สามที่ให้ css ที่สำคัญโดยการป้อน URL ของไซต์ของคุณ pegasaas เป็นเครื่องมือฟรีที่ยอดเยี่ยมมาก
นี่คือวิธีการ:
ขั้นตอนที่ 1. ไปที่ https://pegasaas.com/critical-path-css-generator/ และป้อน URL ของคุณ คัดลอก "Critical Path CSS" ที่สร้างขึ้น
ขั้นตอนที่ 2 ในการตั้งค่าปรับให้เหมาะสมอัตโนมัติ (เปิดใช้งานการตั้งค่าขั้นสูง) ภายใต้ "ตัวเลือก CSS" ให้เลือก "ในบรรทัดและเลื่อน CSS" และวาง CSS ที่คัดลอก
ข้อดี:
- ฟรี
ข้อเสีย:
- ไม่มี CSS ที่สำคัญแยกต่างหากสำหรับหน้าประเภทต่างๆ (เช่น หน้าแรก หน้าโพสต์ หน้าหมวดหมู่ หน้าผลิตภัณฑ์ ฯลฯ)
- อย่าสร้างใหม่โดยอัตโนมัติเมื่อเปลี่ยนธีม/การตั้งค่า
เหตุใด WordPress จึงไม่สามารถสร้าง CSS ที่สำคัญได้
ดังที่คุณอาจสังเกตเห็น การสร้างพาธวิกฤต css จะเปิดใช้งานบริการภายนอก เหตุใด WordPress จึงไม่สามารถสร้างมันขึ้นมาเองได้?
การสร้าง Critical CSS ทำได้โดยโครงการโอเพ่นซอร์ส เช่น Critical (โดย Google), CriticalCSS หรือ penthouse โครงการทั้งหมดเหล่านี้ใช้ NodeJS ไม่ใช่ PHP ดังนั้น คุณต้องติดตั้ง NodeJS บนเซิร์ฟเวอร์ของคุณ ผู้ให้บริการโฮสติ้งที่ใช้ร่วมกัน/ที่มีการจัดการส่วนใหญ่ไม่อนุญาตด้วยเหตุผลหลายประการ
