PRPL הם ראשי תיבות שמתארים דפוס שמשמש לטעינה של דפי אינטרנט יהיה אינטראקטיבי, מהיר יותר:
- טעינה מראש של משאבים שזוהו בשלב מאוחר.
- לעבד את המסלול הראשוני בהקדם האפשרי.
- שמירה מראש במטמון של שאר הנכסים.
- טעינה הדרגתית של נתיבים אחרים ונכסים לא קריטיים.
במדריך הזה תלמדו איך כל אחת מהטכניקות האלה משתלבת יחד, אבל עדיין ניתן משמש באופן עצמאי להשגת תוצאות ביצועים.
ניתן לבדוק את הדף באמצעות Lighthouse
הפעלת Lighthouse כדי לזהות הזדמנויות לשיפור בהתאם ל-PRPL שיטות:
- מקישים על 'Control+Shift+J' (או על 'Command+Option+J' ב-Mac) כדי לפתוח את כלי הפיתוח.
- לוחצים על הכרטיסייה Lighthouse.
- מסמנים את התיבות Performance (ביצועים) ו-Progressive Web App.
- לוחצים על Run Audits כדי ליצור דוח.
מידע נוסף זמין במאמר גילוי הזדמנויות לשיפור הביצועים באמצעות Lighthouse.
טעינה מראש של משאבים קריטיים
ב-Lighthouse מוצגת הבדיקה הבאה שנכשלה אם מתבצע ניתוח של משאב מסוים, אוחזרו באיחור:
טעינה מראש
היא בקשת אחזור הצהרתית שאומרת לדפדפן לבקש משאב שלא ניתן לגלות על ידי סורק הטעינה מראש של הדפדפן, כמו למשל תמונה שאליה מפנה המאפיין background-image. כדי לטעון מראש משאבים שזוהו בשלב מאוחר, צריך להוסיף תג <link> עם rel="preload" לראש מסמך ה-HTML:
<link rel="preload" as="image" href="hero-image.jpg">
הוספה של הוראת <link rel="preload"> תפעיל בקשה למשאב הזה ותאחסן אותו במטמון. לאחר מכן הדפדפן יוכל לאחזר את המידע בעת הצורך.
מידע נוסף על טעינה מראש של משאבים קריטיים זמין המדריך לטעינה מראש של נכסים קריטיים.
צריך לעבד את המסלול הראשוני בהקדם האפשרי
ב-Lighthouse מוצגת אזהרה אם יש משאבים שמעכבים את הצגת הצבע הראשון, הרגע שבו האתר שלך מעבד פיקסלים למסך:
כדי לשפר את התכונה 'צבע ראשון', ההמלצה של Lighthouse היא להטמיע קוד JavaScript קריטי
דוחה את השאר באמצעות
async
ו-CSS קריטי שמופיע בחלק העליון והקבוע. זה משפר את הביצועים
על ידי הסרת העברות הלוך ושוב לשרת כדי לאחזר נכסים שחוסמים עיבוד.
עם זאת, קשה יותר לשמור קוד מוטבע מנקודת מבט של פיתוח,
לא ניתן לשמור בנפרד במטמון על ידי הדפדפן.
גישה נוספת לשיפור 'המהירות של התמונה הראשונה' היא לעבד את העיבוד בצד השרת ה-HTML של הדף. הפעולה הזו מציגה תוכן באופן מיידי למשתמש בזמן הסקריפטים עדיין מאוחזרים, מנתחים ומריצים. עם זאת, הפעולה הזו עלולה להגדיל המטען הייעודי (payload) של קובץ ה-HTML באופן משמעותי, שעלול להזיק לזמן התגובה האינטראקטיבית, או הזמן שנדרש כדי שהאפליקציה תהיה אינטראקטיבית ויכולה להגיב לקלט של משתמשים.
אין פתרון אחד נכון להפחתת הצבע הראשון וצריך לקחת בחשבון רק סגנונות מוטבעים ובצד השרת אם היתרונות של האפליקציה עולים על החסרונות במשחק. אפשר אפשר לקבל מידע נוסף על שני המושגים האלה במקורות המידע הבאים.
נכסים דיגיטליים שנשמרו מראש במטמון
כשרת Proxy, עובדי השירות יכולים לאחזר נכסים ישירות מהמטמון. ולא בשרת בביקורים חוזרים. לא רק זה מאפשר למשתמשים להשתמש בזמן שהם לא מקוונים, אך גם זמני הטעינה של דפים מהירים יותר וביקורים חוזרים.
שימוש בספרייה של צד שלישי כדי לפשט את תהליך היצירה של קובץ שירות (service worker) אלא אם יש לכם דרישות מורכבות יותר לשמירה במטמון לספק. לדוגמה, תיבת העבודה מספקת אוסף של כלים שמאפשרים לכם ליצור ולתחזק קובץ Service Worker נכסים במטמון. לקבלת מידע נוסף על קובצי שירות (service worker) ואמינות אופליין, כדאי לעיין במדריך ל-service worker בתוכנית הלימודים על אמינות.
טעינה מדורגת
אם שולחים יותר מדי נתונים דרך הרשת, מערכת Lighthouse תציג ביקורת שנכשלה.
זה כולל את כל סוגי הנכסים, אבל מטענים ייעודיים (payloads) גדולים של JavaScript יקר, בגלל הזמן שנדרש לדפדפן כדי לנתח ולהרכיב אותם. ב-Lighthouse מוצגות גם אזהרה על כך במקרים רלוונטיים.
כדי לשלוח מטען ייעודי (payload) קטן יותר של JavaScript שמכיל רק את הקוד שנדרש כאשר המשתמש טוען בהתחלה את האפליקציה, מפצלים את כל החבילה ומקטעים של טעינה מדורגת לפי דרישה.
לאחר הפיצול של החבילה, יש לטעון מראש את המקטעים (עיינו במדריך טעינה מראש של נכסים קריטיים). טעינה מראש מאפשרת אחזור והורדה של משאבים חשובים יותר מהר יותר על ידי הדפדפן.
מלבד פיצול וטעינה של מקטעי JavaScript שונים לפי דרישה, ב-Lighthouse אפשר גם לבדוק טעינה מדורגת של תמונות לא קריטיות.
אם אתם טוענים תמונות רבות בדף האינטרנט, דוחים את כל התמונות שנמצאות בחלק הנגלל, או מחוץ לאזור התצוגה של המכשיר, כשדף נטען (מידע נוסף זמין במאמר בנושא שימוש בשכבות עגולות כדי לטעון תמונות בהדרגה).
השלבים הבאים
עכשיו, אחרי שהבנתם כמה מהעקרונות הבסיסיים שמאחורי תבנית ה-PRPL, כדי לקבל מידע נוסף, המשיכו למדריך הבא בקטע הזה. חשוב לזכור שלא כל הטכניקות שמיושמות יחד. כל מאמץ שיבוצע באחת מהמטרות הבאות ידרוש שיפורים משמעותיים בביצועים.
- טעינה מראש של משאבים קריטיים.
- לעבד את המסלול הראשוני בהקדם האפשרי.
- שמירה מראש במטמון של שאר הנכסים.
- טעינה הדרגתית של נתיבים אחרים ונכסים לא קריטיים.
מידע נוסף על דפוסי PRPL