תובנות לגבי השימוש במאפיין הטעינה הסטנדרטי
המטרה של הפוסט הזה היא לשכנע את המפתחים והתורמים של פלטפורמות ניהול תוכן (כלומר, האנשים שמפתחים את הליבה של מערכות ניהול התוכן) שזה הזמן להטמיע תמיכה בתכונה של טעינת תמונות בזמן אמת ברמת הדפדפן. בנוסף, אשתף המלצות להבטחת חוויית משתמש באיכות גבוהה ולהתאמה אישית על ידי מפתחים אחרים במהלך הטמעת טעינה איטית. ההנחיות האלה מבוססות על הניסיון שלנו בהוספת תמיכה ב-WordPress, ועל העזרה שסיפקנו ל-Joomla, ל-Drupal ול-TYPO3 בהטמעת התכונה.
בין שאתם מפתחים של פלטפורמת מערכת ניהול תוכן ובין שאתם משתמשים במערכת ניהול תוכן (כלומר, אנשים שמפתחים אתרים באמצעות מערכת ניהול תוכן), תוכלו להיעזר בפוסט הזה כדי ללמוד עוד על היתרונות של טעינת פריטים בזמן אמת ברמת הדפדפן במערכת ניהול התוכן. בקטע השלבים הבאים מפורטות הצעות שיעזרו לכם לעודד את פלטפורמת ה-CMS להטמיע טעינת נתונים בזמן אמת.
רקע
במהלך השנה האחרונה, טעינה איטית של תמונות ו-iframe באמצעות המאפיין loading הפכה לחלק מתקן HTML של WHATWG והיא אומצה על ידי יותר ויותר דפדפנים.
עם זאת, אבני הדרך האלה רק מאפשרות לנו להתחיל לפתח אינטרנט מהיר יותר וחסכוני יותר במשאבים.
עכשיו מערכת האקולוגית של האינטרנט המבוזר יכולה להשתמש במאפיין loading.
מערכות ניהול תוכן מניעות כ-60% מהאתרים, ולכן הפלטפורמות האלה ממלאות תפקיד חיוני בהטמעת תכונות דפדפן מודרניות באינטרנט. כמה מערכות פופולריות לניהול תוכן בקוד פתוח, כמו WordPress, Joomla ו-TYPO3, כבר הטמיעו תמיכה במאפיין loading בתמונות. נבחן את הגישות שלהן ואת המסקנות הרלוונטיות להטמעת התכונה גם בפלטפורמות אחרות של מערכות ניהול תוכן. טעינת מדיה באיטרציות היא תכונה חשובה לשיפור ביצועי האתר, ולכן מומלץ להשתמש בה ברמת הליבה של מערכת ניהול התוכן.
למה כדאי להטמיע טעינה מאוחרת עכשיו
סטנדרטיזציה
שימוש בתכונות דפדפן לא סטנדרטיות במערכת ניהול תוכן מאפשר לבצע בדיקות נרחבות ולזהות תחומים פוטנציאליים לשיפור. עם זאת, הסכמה כללית בקרב מערכות ניהול תוכן היא שעדיף להטמיע תכונה של דפדפן בצורה של תוסף או פלאגין לפלטפורמה הרלוונטית, כל עוד היא לא סטנדרטית. רק אחרי שהתכונה תהיה סטנדרטית, נוכל להביא אותה לשימוש בליבה של הפלטפורמה.
תמיכה בדפדפנים
התמיכה בתכונה בדפדפנים היא בעיה דומה: רוב המשתמשים במערכת ניהול התוכן אמורים ליהנות מהתכונה. אם יש אחוז ניכר של דפדפנים שבהם התכונה עדיין לא נתמכת, צריך לוודא שהיא לפחות לא משפיעה לרעה על הדפדפנים האלה.
ערכי סף של מרחק מאזור התצוגה
אחת מהבעיות הנפוצות בהטמעות של טעינה איטית היא שהן, באופן עקרוני, מגדילות את הסבירות לכך שתמונה לא תיטען ברגע שהיא תהיה גלויה באזור התצוגה של המשתמש, כי מחזור הטעינה מתחיל בשלב מאוחר יותר. בניגוד לפתרונות קודמים מבוססי-JavaScript, דפדפנים מתייחסים לנושא הזה באופן שמרני, ויכולים גם לשפר את הגישה שלהם על סמך נתונים של חוויית משתמש בעולם האמיתי, כדי לצמצם את ההשפעה. לכן, פלטפורמות ניהול תוכן יכולות להשתמש בטעינה איטית ברמת הדפדפן בבטחה.
המלצות לחוויית משתמש
דרישה למאפייני מאפיינים ברכיבים
כדי למנוע שינויים בפריסה, כבר מזמן מומלץ שתמיד ייכללו במאפייני המימדים width ו-height של תוכן מוטמע, כמו תמונות או מסגרות iframe, כדי שהדפדפן יוכל להסיק את יחס הגובה-רוחב של הרכיבים האלה לפני הטעינה בפועל שלהם. ההמלצה הזו רלוונטית גם אם הרכיב נטען באיטרציה וגם אם לא. עם זאת, בגלל הסיכוי הגבוה ב-0.1% שהתמונה לא נטענת במלואה ברגע שהיא מופיעה בחלון התצוגה, האפשרות הזו רלוונטית יותר כשמשתמשים בטעינה איטית.
מומלץ שמערכת ניהול התוכן תספק מאפייני מידות בכל התמונות והפריטים מסוג iframe. אם אי אפשר לעשות זאת בכל אלמנט כזה, מומלץ לדלג על תמונות עם טעינת סמלים איטית שלא מספקות את שני המאפיינים האלה.
הימנעו משימוש בטעינה איטית של אלמנטים מעל למסך
בשלב זה, מומלץ להוסיף מאפייני loading="lazy" רק לתמונות ולפריטי iframe שממוקמים מתחת לקו החזית, כדי למנוע עיכוב במדד Largest Contentful Paint, שיכול להיות משמעותי במקרים מסוימים כפי שגילינו ביולי 2021. עם זאת, חשוב לזכור שקשה להעריך את המיקום של רכיב ביחס למסך התצוגה לפני תהליך הרינדור. המצב הזה רלוונטי במיוחד אם מערכת ניהול התוכן משתמשת בגישה אוטומטית להוספת מאפייני loading, אבל גם אם מדובר בהתערבות ידנית, צריך להביא בחשבון כמה גורמים כמו גדלים שונים של חלון תצוגה ויחסי גובה-רוחב שונים. עם זאת, מומלץ מאוד לא לכלול בטעינה באיטרציה תמונות ראשיות (hero) ותמונות או תגי iframe אחרים שיש סיכוי גבוה שיופיעו מעל למסך.
הימנעות מחלופה ל-JavaScript
אפשר להשתמש ב-JavaScript כדי לספק טעינת נתונים בזמן אמת לדפדפנים שעדיין לא תומכים במאפיין loading, אבל המנגנונים האלה תמיד מסתמכים על הסרת המאפיין src של תמונה או של iframe בשלב הראשון, מה שגורם לעיכוב בדפדפנים שכן תומכים במאפיין. בנוסף, השקת פתרון מבוסס-JavaScript כזה בחזית של מערכת ניהול תוכן (CMS) בקנה מידה גדול מגדילה את שטח החשיפה לבעיות פוטנציאליות. זו אחת הסיבות לכך שאף מערכת ניהול תוכן גדולה לא אימצה טעינת פריטים בזמן אמת בליבה שלה לפני שהתכונה הזו הופיעה בדפדפנים.
המלצות טכניות
הפעלת טעינה מדורגת כברירת מחדל
ההמלצה הכללית למערכות ניהול תוכן שמטמיעות טעינת נתונים באיטרציות (lazy loading) ברמת הדפדפן היא להפעיל אותה כברירת מחדל. כלומר, צריך להוסיף את loading="lazy" לתמונות ול-iframe, רצוי רק לרכיבים שכוללים מאפייני מאפיינים.
הפעלת התכונה כברירת מחדל תביא לחיסכון גדול יותר במשאבי הרשת מאשר אם צריך להפעיל אותה באופן ידני, למשל על בסיס תמונה.
ככל האפשר, צריך להוסיף את loading="lazy" רק לרכיבים שיש סיכוי גבוה שיופיעו מתחת לקו התפר.
יכול להיות שיהיה קשה להטמיע את הדרישה הזו במערכת ניהול תוכן בגלל חוסר המודעוּת בצד הלקוח וגודלי שדה התצוגה השונים, אבל מומלץ לפחות להשתמש בהיגוריית משוער כדי להשמיט רכיבים כמו תמונות הכותרת (hero) שסביר להניח שיופיעו מעל למסך.
מתן הרשאה לשינויים לכל רכיב
צריך להוסיף את loading="lazy" לתמונות ולתגי iframe כברירת מחדל, אבל חשוב לאפשר להשמיט את המאפיין בתמונות מסוימות, למשל כדי לבצע אופטימיזציה ל-LCP. אם הקהל של מערכת ניהול התוכן נחשב בממוצע ליותר מעודכן מבחינה טכנית, אפשר להציג פקדי ממשק משתמש לכל תמונה ו-iframe שמאפשרים לבטל את הטעינה האיטית של הרכיב הזה.
לחלופין, או בנוסף, אפשר לחשוף ממשק API למפתחים של צד שלישי כדי שיוכלו לבצע שינויים דומים באמצעות קוד.
לדוגמה, ב-WordPress אפשר לדלג על המאפיין loading עבור הקשר או תג HTML שלם או עבור רכיב HTML ספציפי בתוכן.
שדרוג תוכן קיים
באופן כללי, יש שתי גישות להוספת המאפיין loading לרכיבי HTML במערכת ניהול תוכן:
- אפשר להוסיף את המאפיין בעורך התוכן בקצה העורפי, ולשמור אותו באופן קבוע במסד הנתונים.
- מוסיפים את המאפיין בזמן אמת כשמריצים עיבוד של תוכן ממסד הנתונים בחזית.
מומלץ למערכת ניהול התוכן להוסיף את המאפיין בזמן אמת במהלך העיבוד, כדי ליהנות מהיתרונות של טעינת הנכסים בזמן אמת גם בתוכן קיים. אם אפשר להוסיף את המאפיין רק דרך העורך, רק קטעי תוכן חדשים או קטעי תוכן ששונו לאחרונה ייהנו מהיתרונות, וכך תהיה הפחתה משמעותית בהשפעה של מערכת ניהול התוכן על חיסכון במשאבי הרשת. בנוסף, הוספת המאפיין בזמן אמת תאפשר לבצע בקלות שינויים בעתיד, אם היכולות של טעינת הנתונים באיטרציות ברמת הדפדפן יתרחבו.
עם זאת, הוספת המאפיין בזמן אמת צריכה להתחשב במאפיין loading שעשוי להופיע ברכיב, ולאפשר למאפיין כזה לקבל עדיפות. כך, מערכת ה-CMS או תוסף שלה יוכלו גם ליישם את הגישה שמבוססת על עורך בלי לגרום לסכסוך עם מאפיינים כפולים.
אופטימיזציה של הביצועים בצד השרת
כשמוסיפים את המאפיין loading לתוכן בזמן אמת באמצעות (לדוגמה) שכבת middleware בצד השרת, צריך להביא בחשבון את המהירות. בהתאם למערכת ניהול התוכן, אפשר להוסיף את המאפיין באמצעות סריקה של DOM או באמצעות ביטויים רגולריים. מומלץ להשתמש בביטויים רגולריים כדי לשפר את הביצועים.
מומלץ להשתמש בביטויים רגולריים במינימום הנדרש. לדוגמה, ביטוי רגולרי יחיד שמאגד את כל התגים מסוג img ו-iframe בתוכן, כולל המאפיינים שלהם, ולאחר מכן מוסיף את המאפיין loading לכל מחרוזת תגים בהתאם. לדוגמה, ב-WordPress יש ביטוי רגולרי כללי אחד שמאפשר לבצע פעולות שונות בזמן אמת על רכיבים מסוימים, והוספת loading="lazy" היא רק אחת מהן. הביטוי הרגולרי הזה מאפשר לבצע כמה תכונות. בנוסף, סוג האופטימיזציה הזה הוא עוד סיבה לכך שמומלץ להשתמש בטעינה איטית בליבה של מערכת ניהול התוכן במקום בתוסף – היא מאפשרת לבצע אופטימיזציה טובה יותר של הביצועים בצד השרת.
השלבים הבאים
כדאי לבדוק אם יש כרטיס קיים עם בקשה להוספת התכונה למערכת ניהול התוכן, או לפתוח כרטיס חדש אם אין כזה. אפשר להפנות לפוסט הזה לפי הצורך כדי לתמוך בהצעה.
אפשר לשלוח לי ציוץ (felixarntz@) אם יש לכם שאלות או הערות, או כדי להוסיף את מערכת ניהול התוכן שלכם לדף הזה אם נוספה תמיכה בחיבור איטי (lazy loading) ברמת הדפדפן. אם נתקלת בבעיות נוספות, אשמח לקבל מידע נוסף עליהן כדי שנוכל למצוא פתרון.
מפתחים של פלטפורמות ניהול תוכן יכולים ללמוד איך מערכות ניהול תוכן אחרות הטמיעו את טכנולוגיית הטעינה האיטית:
תוכלו להשתמש בתובנות מהמחקר ובהמלצות הטכניות מהפוסט הזה כדי להתחיל לתרום קוד למערכת ניהול התוכן שלכם, למשל בצורת תיקון או בקשת משיכה (pull request).
התמונה הראשית (Hero) היא צילום של קולין ווטס ב-Unsplash.