นำ JavaScript ที่บล็อกการแสดงผลออก

กฎนี้จะทำงานเมื่อ PageSpeed Insights ตรวจพบว่า HTML ของคุณอ้างอิงไฟล์ JavaScript ภายนอกที่บล็อกไว้ในส่วนครึ่งหน้าบนของหน้าเว็บ

ภาพรวม

ก่อนที่เบราว์เซอร์จะแสดงผลหน้าเว็บได้ เบราว์เซอร์จะต้องสร้างแผนผัง DOM โดยการแยกวิเคราะห์มาร์กอัป HTML ในระหว่างขั้นตอนนี้ เมื่อใดก็ตามที่โปรแกรมแยกวิเคราะห์พบสคริปต์ โปรแกรมจะต้องหยุดและเรียกใช้สคริปต์ก่อนจะสามารถแยกวิเคราะห์ HTML ต่อไปได้ ในกรณีของสคริปต์ภายนอก ระบบจะบังคับให้โปรแกรมแยกวิเคราะห์รอดาวน์โหลดทรัพยากรด้วย ซึ่งอาจทำให้เกิดรอบการแสดงโฆษณาของเครือข่ายอย่างน้อย 1 รอบ และทำให้เวลาในการแสดงผลหน้าเว็บครั้งแรกล่าช้า ดู การเพิ่มการโต้ตอบด้วย JavaScript เพื่อเรียนรู้เพิ่มเติมว่า JavaScript ส่งผลต่อเส้นทางการแสดงผลที่สำคัญอย่างไร

การแนะนำวิดีโอ

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

JavaScript ในหน้า

สคริปต์การบล็อกภายนอกจะบังคับให้เบราว์เซอร์รอให้มีการดึงข้อมูล JavaScript ซึ่งอาจเพิ่มรอบการแสดงเครือข่ายอย่างน้อย 1 รอบก่อนที่จะแสดงหน้าเว็บได้ หากสคริปต์ภายนอกมีขนาดเล็ก คุณอาจแทรกเนื้อหาของสคริปต์ภายนอกลงในเอกสาร HTML โดยตรงเพื่อหลีกเลี่ยงเวลาในการตอบสนองของคำขอเครือข่าย ตัวอย่างเช่น หากเอกสาร HTML มีลักษณะดังนี้ 
<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
และทรัพยากร small.js มีลักษณะดังนี้ 
  /* contents of a small JavaScript file */
จากนั้นคุณสามารถแทรกสคริปต์ในหน้าดังนี้ 
<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>
การรวมเนื้อหาของสคริปต์จะลบคำขอภายนอกสำหรับ small.js และช่วยให้เบราว์เซอร์มีเวลาแสดงผลครั้งแรกที่เร็วขึ้น อย่างไรก็ตาม โปรดทราบว่าการแทรกในบรรทัดยังทำให้เอกสาร HTML มีขนาดมากขึ้น และอาจต้องแทรกเนื้อหาสคริปต์เดียวกันในหลายๆ หน้าด้วย ด้วยเหตุนี้ คุณจึงควรแทรกสคริปต์ขนาดเล็กในหน้าเท่านั้นเพื่อให้มีประสิทธิภาพที่ดีที่สุด

ทำให้ JavaScript เป็นแบบอะซิงโครนัส

โดยค่าเริ่มต้น JavaScript จะบล็อกการสร้าง DOM และทำให้เวลาในการแสดงผลครั้งแรกล่าช้า หากต้องการป้องกันไม่ให้ JavaScript บล็อกโปรแกรมแยกวิเคราะห์ เราขอแนะนำให้ใช้แอตทริบิวต์ HTML async ในสคริปต์ภายนอก ตัวอย่างเช่น 
<script async src="my.js">
โปรดดูข้อมูลเพิ่มเติมเกี่ยวกับสคริปต์แบบอะซิงโครนัสได้ใน การบล็อกโปรแกรมแยกวิเคราะห์เทียบกับ JavaScript แบบอะซิงโครนัส โปรดทราบว่าไม่มีการรับประกันว่าสคริปต์แบบอะซิงโครนัสจะทำงานได้ตามลำดับที่ระบุ และไม่ควรใช้ document.write อาจจำเป็นต้องเขียนสคริปต์ที่ขึ้นอยู่กับคำสั่งดำเนินการหรือต้องเข้าถึงหรือแก้ไข DOM หรือ CSSOM ของหน้าเว็บใหม่เพื่อให้สอดคล้องกับข้อจำกัดเหล่านี้

เลื่อนการโหลด JavaScript

การโหลดและการดำเนินการของสคริปต์ที่ไม่จำเป็นต่อการแสดงผลหน้าเริ่มต้นอาจเลื่อนออกไปจนกว่าการแสดงผลครั้งแรกหรือส่วนที่สำคัญอื่นๆ ของหน้าจะโหลดเสร็จ การทำเช่นนี้ช่วยลดการช่วงชิงทรัพยากรและปรับปรุงประสิทธิภาพได้

คำถามที่พบบ่อย

แล้วถ้าฉันใช้ไลบรารี JavaScript เช่น jQuery ล่ะ
ไลบรารี JavaScript จำนวนมาก เช่น JQuery ใช้สำหรับปรับปรุงหน้าเว็บเพื่อเพิ่มการโต้ตอบ ภาพเคลื่อนไหว และเอฟเฟกต์อื่นๆ เพิ่มเติม อย่างไรก็ตาม คุณสามารถเพิ่มลักษณะการทำงานเหล่านี้ได้อย่างปลอดภัยหลังจากที่แสดงเนื้อหาครึ่งหน้าบนแล้ว ตรวจสอบการทำให้ JavaScript ดังกล่าวไม่พร้อมกันหรือเลื่อนการโหลด
แล้วถ้าฉันใช้เฟรมเวิร์ก JavaScript ในการสร้างหน้าเว็บล่ะ
หากเนื้อหาของหน้าสร้างโดย JavaScript ฝั่งไคลเอ็นต์ คุณควรตรวจสอบการอินไลน์โมดูล JavaScript ที่เกี่ยวข้องเพื่อหลีกเลี่ยงรอบเครือข่ายเพิ่มเติม ในทำนองเดียวกัน การใช้ประโยชน์จากการแสดงผลฝั่งเซิร์ฟเวอร์ก็ช่วยปรับปรุงประสิทธิภาพการโหลดหน้าเว็บครั้งแรกได้อย่างมาก นั่นคือ แสดงผลเทมเพลต JavaScript บนเซิร์ฟเวอร์เพื่อให้แสดงผลครั้งแรกอย่างรวดเร็ว จากนั้นใช้เทมเพลตฝั่งไคลเอ็นต์เมื่อโหลดหน้าเว็บแล้ว ดูข้อมูลเพิ่มเติมเกี่ยวกับการแสดงผลฝั่งเซิร์ฟเวอร์ได้ที่ http://youtu.be/VKTWdaupft0?t=14m28s

ความคิดเห็น

หน้านี้มีประโยชน์ไหม