הסרת JavaScript שחוסם עיבוד

הכלל הזה מופעל כששירות PageSpeed Insights מזהה שה-HTML מפנה לחסימה בקובץ JavaScript חיצוני בחלק העליון והקבוע של הדף.

סקירה כללית

כדי שהדפדפן יוכל לעבד דף, הוא צריך לבנות את עץ ה-DOM על ידי ניתוח תגי העיצוב של HTML. במהלך התהליך הזה, בכל פעם שהמנתח נתקל בסקריפט, הוא צריך לעצור ולהפעיל אותו לפני שהוא יכול להמשיך בניתוח ה-HTML. במקרה של סקריפט חיצוני, המנתח גם נאלץ להמתין להורדת המשאב, פעולה שעלולה להוביל לנתיב הלוך ושוב אחד או יותר ברשת לעכב את זמן העיבוד הראשון של הדף. ראו הוספת אינטראקטיביות עם 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.

משוב

האם הדף הזה הועיל לך?