ส่วนโอกาสของรายงาน Lighthouse จะแสดง URL ทั้งหมดที่บล็อกการแสดงผลครั้งแรกของหน้าเว็บ เป้าหมายคือการลดผลกระทบของ URL ที่บล็อกการแสดงผลเหล่านี้โดยการรวมทรัพยากรที่สำคัญ เลื่อนทรัพยากรที่ไม่สำคัญ และนำสิ่งที่ไม่ได้ใช้ออก
URL ใดที่ได้รับการแจ้งว่าเป็นทรัพยากรที่บล็อกการแสดงผล
Lighthouse จะแจ้ง URL การบล็อกการแสดงผล 2 ประเภท ได้แก่ สคริปต์และสไตล์ชีต
แท็ก <script> ที่มีลักษณะดังนี้
- อยู่ใน
<head>ของเอกสาร - ไม่มีแอตทริบิวต์
defer - ไม่มีแอตทริบิวต์
async
แท็ก <link rel="stylesheet"> ที่มีลักษณะดังนี้
- ไม่มีแอตทริบิวต์
disabledเมื่อมีแอตทริบิวต์นี้ เบราว์เซอร์จะไม่ดาวน์โหลดสไตล์ชีต - ไม่มีแอตทริบิวต์
mediaที่ตรงกับอุปกรณ์ของผู้ใช้โดยเฉพาะmedia="all"ถือเป็นการบล็อกการแสดงผล
วิธีระบุทรัพยากรที่สำคัญ
ขั้นตอนแรกในการลดผลกระทบของทรัพยากรที่บล็อกการแสดงผลคือการระบุเนื้อหาที่สำคัญและสิ่งใดที่ไม่สำคัญ ใช้แท็บการครอบคลุม ใน Chrome DevTools เพื่อระบุ CSS และ JS ที่ไม่สำคัญ เมื่อคุณโหลดหรือเรียกใช้หน้าเว็บ แท็บจะบอกจำนวนโค้ดที่ใช้ไปเทียบกับจำนวนการโหลด ดังนี้
คุณสามารถลดขนาดของหน้าเว็บได้โดยจัดส่งเฉพาะโค้ดและรูปแบบที่คุณต้องการเท่านั้น คลิก URL เพื่อตรวจสอบไฟล์นั้นในแผงแหล่งที่มา รูปแบบในไฟล์ CSS และโค้ดในไฟล์ JavaScript จะทำเครื่องหมายเป็น 2 สี ดังนี้
- สีเขียว (สำคัญ): สไตล์ที่จำเป็นสำหรับการลงสีครั้งแรก ซึ่งเป็นโค้ดที่สําคัญต่อฟังก์ชันหลักของหน้า
- สีแดง (ไม่สำคัญ): รูปแบบที่ใช้กับเนื้อหาจะไม่ปรากฏทันที ไม่มีการใช้งานโค้ดในฟังก์ชันหลักของหน้า
วิธีกำจัดสคริปต์ที่บล็อกการแสดงผล
เมื่อระบุโค้ดสำคัญแล้ว
ให้ย้ายโค้ดนั้นจาก URL ที่บล็อกการแสดงผลไปยังแท็ก script ในหน้า HTML
เมื่อโหลดหน้าเว็บเสร็จจะมีสิ่งที่จำเป็นในการจัดการฟังก์ชันหลักของหน้า
หากมีโค้ดใน URL ที่บล็อกการแสดงผลซึ่งไม่สำคัญ
คุณสามารถเก็บไว้ใน URL แล้วทำเครื่องหมาย URL ด้วยแอตทริบิวต์ async หรือ defer
(ดูการเพิ่มการโต้ตอบด้วย JavaScript)
ควรนำโค้ดที่ไม่ได้ใช้งานออกเลย (ดูนำโค้ดที่ไม่ได้ใช้ออก)
วิธีลบสไตล์ชีตที่บล็อกการแสดงผล
คล้ายกับโค้ดในบรรทัดในแท็ก <script> นั่นคือต้องมีรูปแบบวิกฤติแบบแทรกในบรรทัดสำหรับการแสดงผลครั้งแรกภายในบล็อก <style> ที่ head ของหน้า HTML
จากนั้นโหลดสไตล์ที่เหลือแบบไม่พร้อมกันโดยใช้ลิงก์ preload
(ดูเลื่อน CSS ที่ไม่ได้ใช้)
ลองทำให้กระบวนการดึงข้อมูลและแทรกในบรรทัด CSS เป็น "ครึ่งหน้าบน" เป็นแบบอัตโนมัติโดยใช้เครื่องมือวิกฤติ
อีกวิธีในการกำจัดสไตล์การบล็อกการแสดงผลคือ การแบ่งสไตล์เหล่านั้นออกเป็นไฟล์ต่างๆ และจัดระเบียบตามคิวรี่สื่อ จากนั้นเพิ่มแอตทริบิวต์สื่อลงในลิงก์สไตล์ชีตแต่ละลิงก์ เมื่อโหลดหน้าเว็บ เบราว์เซอร์จะบล็อกเฉพาะสีแรกเท่านั้นเพื่อเรียกสไตล์ชีตที่ตรงกับอุปกรณ์ของผู้ใช้ (ดู CSS-ของบุคคลที่สามในการแสดงผล)
สุดท้าย คุณจะต้องลดขนาด CSS เพื่อนำช่องว่างหรืออักขระที่เกินออก (ดู Minify CSS) วิธีนี้ช่วยให้มั่นใจได้ว่าคุณส่ง Bundle ที่เล็กที่สุดให้กับผู้ใช้
คำแนะนำเฉพาะกลุ่ม
AMP
ใช้เครื่องมือ เช่น AMP Optimizer เพื่อแสดงเลย์เอาต์ AMP ฝั่งเซิร์ฟเวอร์
Drupal
ลองใช้โมดูลเพื่อแทรก CSS และ JavaScript ที่สำคัญในหน้า หรืออาจโหลดเนื้อหาแบบไม่พร้อมกันผ่าน JavaScript เช่น โมดูลการรวม CSS/JS ขั้นสูง
จูมลา
มีปลั๊กอิน Joomla หลายรายการที่ช่วยคุณแทรกเนื้อหาที่สำคัญในหน้าหรือเลื่อนเวลาทรัพยากรที่สำคัญน้อยกว่าได้
WordPress
มีปลั๊กอิน WordPress หลายรายการที่ช่วยคุณแทรกเนื้อหาที่สำคัญหรือเลื่อนเวลาโหลดทรัพยากรที่สำคัญน้อยกว่าได้