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