אנחנו שמחים שהצטרפת אל 'לומדים ביצועים'

ביצועי אתרים הם היבט קריטי בפיתוח אתרים, שמתמקד במהירות הטעינה של דפים ובמהירות שבה הם מגיבים לקלט של משתמשים. כשמבצעים אופטימיזציה של האתר לשיפור הביצועים, המשתמשים נהנים מחוויה טובה יותר. חוויות משתמש טובות יותר תורמות מאוד להשיג את המטרות שרציתם להשיג באתר.

הביצועים באינטרנט אולי נראים כנושא נישתי, אבל למעשה הם רחבים וגם די עמוקים. בהתחשב בעומק התחום כנושא, חשוב מאוד שקורס על ביצועים באינטרנט יהיה נגיש אך גם אינפורמטיבי. המהדורה הראשונית של הקורס מתמקדת ביסודות הביצועים באינטרנט שכדאי למתחילים לקבל מהם מידע אינפורמטיבי.

המטרה של כל מודול בסדרה הזו היא להציג - כשאפשר בפועל - קבוצה של הדגמות שמשלימות את התוכן של כל מודול ומדגימות מושגים מרכזיים של ביצועים. מכיוון שהקורס הזה הוא השקה ראשונית, אנחנו מתכננים לפרסם מודולים נוספים בחודשים הקרובים.

אלה הם הנושאים של קורס ההדרכה ההתחלתי של 'לימוד הביצועים':

למה המהירות חשובה

כדי להתחיל לעבוד עם מודל למידת ביצועים, צריך קודם להבין את התפקיד שלה בחוויית המשתמש ואיך היא יכולה לשפר את התוצאות עבור המשתמשים. הקורס הזה מתחיל במבוא קצר לנושאים האלה, שמספק הקשר חיוני למה חשוב ללמוד את הביצועים.

שיקולים כלליים לגבי ביצועי HTML

כל אתר מתחיל בבקשה למסמך HTML, לבקשה הזו יש תפקיד חשוב במהירות הטעינה של האתר. המודול הזה עוסק במושגים חשובים כמו שמירה במטמון HTML, חסימה של מנתח הנתונים, חסימת עיבוד ועוד, כדי להבטיח שהבקשה הראשונה ל-HTML של האתר שלך תהיה נמצאת ברגל ימין.

הסבר על הנתיב הקריטי

נתיב העיבוד הקריטי הוא מושג בביצועי אתרים המתייחס למהירות שבה הרינדור הראשוני של הדף מופיע בדפדפן. המודול הזה עוסק בתיאוריה שמאחורי נתיב העיבוד הקריטי, ומכסה מושגים כמו חסימת רינדור ומשאבים שחוסמים ניתוח, והאופן שבו הם ממלאים תפקיד חשוב במהירות שבה הדף מופיע בדפדפן.

אופטימיזציה של טעינת המשאבים

כשהדף נטען, יש הפניה למשאבים רבים מתוך ה-HTML שלו, שמספקים לדף עם המראה והפריסה שלו באמצעות CSS, וכן את האינטראקטיביות שלו באמצעות JavaScript. במודול הזה נפרט כמה מושגים חשובים שקשורים למשאבים האלה והאופן שבו הם משפיעים על זמן הטעינה של דף.

סיוע לדפדפן עם טיפים למשאבים

טיפים למשאבים הם אוסף של תכונות שזמינות ב-HTML שיכולות לעזור לדפדפן לטעון משאבים מוקדם יותר, ואולי גם עם עדיפות גבוהה יותר של משאבים. במודול הזה יש כמה רמזים למשאבים שיכולים לעזור לטעינה מהירה יותר של הדפים.

ביצועי תמונות

התמונות מייצגות חלק גדול מהנתונים שהועברו כיום בדפי אינטרנט רבים. המודול הזה מסביר איך לבצע אופטימיזציה של תמונות ואיך להציג אותן ביעילות כדי לצמצם את הבזבוז הבייטים, בלי קשר למכשיר של המשתמש.

ביצועי סרטונים

וידאו הוא סוג מדיה המשמש לעיתים קרובות בדפי אינטרנט, אבל חשוב לדעת איך להציג את המודעות ביעילות. זה אחד ההיבטים של הביצועים שלא כדאי להתעלם מהם. המודול הזה עוסק בכמה טכניקות עיקריות להטמעת סרטונים, כך שהאתר ימשיך לפעול במהירות, וכן שיקולי ביצועים קרובים שעשויים לעלות במהלך השימוש בהם.

אופטימיזציה של גופני אינטרנט

גופני אינטרנט הם משאב נפוץ באינטרנט - ובצדק - הם מוספים לעיצוב של אתר בדרכים שמשאבים אחרים לא יכולים לעשות. עם זאת, לגופנים באינטרנט עדיין יש עלות ביצועים. במודול זה, נחקור מספר שיקולים ושיקולי ביצועים הקשורים לגופני אינטרנט.

JavaScript לפיצול קוד

חלק מהמשאבים לא חיוניים לטעינה הראשונית של דף אינטרנט. JavaScript הוא אחד מהמשאבים כאלה שאפשר לעכב עד לפי הצורך, באמצעות שיטה שנקראת 'פיצול קוד'. כך אפשר לשפר את הביצועים על ידי הקטנת רוחב הפס והתחרות בין המעבד (CPU) – שיקול קריטי לשיפור מהירות הטעינה הראשונית של הדף וגם מהירות התגובה לקלט במהלך ההפעלה.

תמונות בטעינה מושהית ואלמנטים של <iframe>

תמונות ורכיבי <iframe> יכולים לצרוך רוחב פס משמעותי ומשך עיבוד משמעותי של המעבד (CPU). עם זאת, לא צריך לטעון את כל התמונות ורכיבי <iframe> במהלך הטעינה הראשונית של הדף, ואפשר לדחות את הטעינה למועד מאוחר יותר שבו יש את הסיכוי הגבוה ביותר שהמשתמש יראה אותם. השיטה הזו נקראת טעינה מדורגת. במודול הזה יש הסבר על טעינה מדורגת של תמונות ועל רכיבי <iframe>, כדי לאפשר טעינה מהירה יותר של הדפים תוך צריכת רוחב פס וזמן עיבוד בלבד לפי הצורך.

שליפה מראש (prefetch), עיבוד מראש והכנה מראש של קובץ שירות (service worker)

חלק גדול מהביצועים עוסקים במה שאפשר לעשות כדי לבצע אופטימיזציה ולבטל משאבים מיותרים, אבל לפעמים נראה קצת פרדוקסלי לטעון שיש לטעון משאבים מסוימים לפני שיש בהם צורך. עם זאת, במקרים מסוימים ייתכן שכדאי לטעון משאבים מסוימים מראש. במודול הזה, נדון בהיבט הזה של הביצועים, כמו בשליפה מראש (prefetch), בעיבוד מראש ובהכנה מראש של קובץ שירות (service worker).

סקירה כללית של ערכי worker באינטרנט

חלק גדול מהתוכן שהמשתמש רואה בדפדפן מתרחש בשרשור יחיד שנקרא ה-thread הראשי. עם זאת, יש הזדמנויות שבהן אפשר להתחיל שרשורים חדשים כדי לבצע עבודה יקרה מבחינה חישובית כדי שה-thread הראשי יוכל להכיל משימות חשובות למשתמשים. ממשק ה-API שמבצע את הפעולה הזו נקרא Web Worker API, ובמודול הזה נפרט את העקרונות הבסיסיים שלו.

תרחיש לדוגמה של Web Worker

עכשיו, אחרי שהבנתם את הכללים הבסיסיים של עובדי אינטרנט ואת היכולות והמגבלות שלהם, הגיע הזמן לבחון תרחיש קונקרטי לדוגמה של עובד אינטרנט. בהדגמה הזו נעשה שימוש ב-Web worker כדי לאחזר קובץ JPEG, לחלץ את המטא-נתונים שלו ולשלוח אותו חזרה ל-thread הראשי כדי שהמשתמש יוכל לראות אותו בדפדפן.

 

מוכנים להתחיל ללמוד על ביצועי האינטרנט? כדי להתחיל ברגל ימין, קראו קודם את המאמר למה המהירות חשובה.