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