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