ไม่แสดงเนื้อหาสำรองเมื่อ JavaScript ไม่พร้อมใช้งาน

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

วิธีที่การตรวจสอบเนื้อหาสำรองของ Lighthouse ล้มเหลว

Lighthouse จะแจ้งเตือนหน้าเว็บที่ไม่มีเนื้อหาบางรายการเมื่อ JavaScript ไม่พร้อมใช้งาน

การตรวจสอบ Lighthouse ที่แสดงว่าหน้าเว็บไม่มีเนื้อหาบางอย่างเมื่อ JS ไม่พร้อมใช้งาน

Lighthouse จะปิดใช้ JavaScript ในหน้าเว็บแล้วตรวจสอบ HTML ของหน้าเว็บ หาก HTML ว่างเปล่า การตรวจสอบจะไม่สำเร็จ

วิธีตรวจสอบว่าหน้าเว็บของคุณมีเนื้อหาโดยไม่มี JavaScript

การเพิ่มประสิทธิภาพแบบก้าวหน้าเป็นหัวข้อที่ใหญ่และถกเถียงกันมาก ค่ายหนึ่งกล่าวว่า เพื่อให้เป็นไปตามกลยุทธ์การเพิ่มประสิทธิภาพแบบต่อเนื่อง หน้าเว็บควรแบ่งชั้นเพื่อให้เนื้อหาพื้นฐานและฟังก์ชันการทำงานของหน้าเว็บใช้เพียง HTML เท่านั้น ดูตัวอย่างวิธีการนี้ได้ที่ การเพิ่มประสิทธิภาพแบบก้าวหน้า: นี่คืออะไรและวิธีใช้ของ Smashing Magazine

อีกค่าหนึ่งเชื่อว่าวิธีการแบบเข้มงวดนี้ทำไม่ได้หรือไม่จำเป็นสำหรับเว็บแอปพลิเคชันขนาดใหญ่ที่ทันสมัยจำนวนมาก และแนะนำให้ใช้ CSS เส้นทางที่สำคัญแบบแทรกในบรรทัดในเอกสาร <head> สำหรับรูปแบบหน้าเว็บที่สำคัญอย่างยิ่ง

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

สำหรับหน้าเว็บที่ต้องอาศัย JavaScript อย่างแท้จริง วิธีหนึ่งคือการใช้องค์ประกอบ <noscript> เพื่อแจ้งเตือนผู้ใช้ว่าหน้านั้นจำเป็นต้องใช้ JavaScript วิธีนี้ดีกว่าหน้าว่างเพราะหน้าว่างนั้นทำให้ผู้ใช้ไม่มั่นใจว่าหน้านั้นๆ มีปัญหา เบราว์เซอร์ หรือคอมพิวเตอร์ของผู้ใช้

หากต้องการดูหน้าตาและประสิทธิภาพของเว็บไซต์เมื่อปิด JavaScript ให้ใช้ฟีเจอร์ปิดใช้ JavaScript ของ Chrome DevTools

แหล่งข้อมูล