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