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

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

ภาพรวม

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

คำแนะนำ

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

JavaScript ในบรรทัด

สคริปต์การบล็อกภายนอกจะบังคับให้เบราว์เซอร์รอให้มีการดึงข้อมูล JavaScript ซึ่งอาจเพิ่มการรับส่งเครือข่ายอย่างน้อยหนึ่งรอบก่อนที่จะสามารถแสดงผลหน้าเว็บได้ หากผู้ใช้ภายนอก สคริปต์มีขนาดเล็ก คุณสามารถแทรกเนื้อหาของสคริปต์ลงในเอกสาร 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.

ความคิดเห็น

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