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

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

סקירה כללית

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

משוב

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