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