וורדפרס מטפלת בדפי חווית משתמש

שדרוג וורדפרס לגרסה 5.8 היא סנונית לקראת דצמבר הקרוב בו עתיד (כנראה) לעלות עדכון הגרסה 5.9 של וורדפרס. בין היתר עתיד לטפל עדכון זה בדפי חווית משתמש Core web vitals ובמיוחד ברכיב ה LCP ובטיפול בטעינה העצלה של התמונות.

מדובר על עדכון שלדברי וורדפרס ישפר את ביצועי ה LCP עד 33% ע"י שליטה טובה יותר בטעינה העצלה של רכיב התמונה העיקרי ה LCP .

זה מה שאמרו על כך בוורדפרס:

“Instead of lazy-loading all images and iframes by default, the very first content image (also considering featured images) or content iframe should not be lazy-loaded.
This is a more sensitive default than what the current implementation uses, that on average and at scale will result in better LCP performance out of the box, while keeping necessary bandwidth low.”

למעשה בוורדפרס משנים את ההגדרה שמשנה את הטעינה העצלה כברירת מחדל ומאפשרת להחריג את התמונות, מה שהיה שמור עד עתה רק לתוספים בתשלום כמו WP Rocket.


מהי טעינה עצלה ?


טעינה עצלה או Lazy load היא דרך לזרז את טעינת הדף ע"י עיכוב טעינת אלמנטים ורכיבים שאין בהם צורך כמו למשל אלמנטים שמצויים מתחת ל Above the fold line.

מאפיין Html הוא שאחראי על הטעינה העצלה

מאפיין הטעינה משנה את התמונה, במקרה זה, בכך שהוא אומר לדפדפן לעכב את הורדתה ולאפשר לדפדפן להוריד רכיבי עמוד חשובים יותר הניתנים לצפייה מיידית למבקר האתר.

פעולה זו הופכת את הדף לאינטראקטיבי ולמהיר יותר עבור המבקר באתר. הרכיב Largest Contentful Paint (LCP), מודד כמה מהר נטענת התמונה והאלמנטים הגדולים ביותר שנמצאים Above the fold line, כלומר מה שרואה הגולש לפני שהוא צריך לגלול את הדף מטה.

אופן הקידוד ב HTML:



איך וורדפרס 5.9 תשפר את מדד ה LCP ?


בגרסת 5.5 הוסיפו כברירת מחדל את מאפיין הטעינה העצלה לכל התמונות וה iframes. זו מצב לא בריא מאחר ויש תמונות בחלק העליון של האתר כמו לוגו, תמונה ראשית וכד, שאמורות להטען במהירות מרבית. כשיצא העדכון לוורדפרס לא היתה כל דרך להחריג תמונות מהטעינה העצלה.


כיצד וורדפרס תשפר את רכיב ה LCP ?


צוות המפתחים של וורדפרס הציע לא לכלול הוספת תכונת הטעינה העצלנית לתמונה הראשונה או ל- iframe בקוד.

נבדקו 50 תבניות מובילות של וורדפרס והתברר כי הוספת המאפיין לתמונה הראשונה או אלמנט iframeהראשון, סיפקו שיפור ממוצע בציון ה- LCP Core Web Vitals בממוצע של 7%.

אחר כך בדקו עד כמה ה LCP השתפר על ידי הוספת טעינה עצלה לשני אלמנטים. הביצועים צנחו בממוצע ב -2%, והבהירו כי אי הכללת עומס עצל ביותר מאלמנט אחד לא שיפרו את ה- LCP בצורה משמעותית.

“Omitting the first content image from being lazy-loaded resulted in a median LCP improvement of 7% (1,877ms compared to 2,020ms with current core behavior) and a median image bytes increase of 0% (368KB compared to 369KB with current core behavior). → Omitting the first content image clearly results in an LCP improvement while not noticeably regressing on image bytes saved.
Omitting the first two content images from being lazy-loaded resulted in a median LCP improvement of 5% (1,927ms compared to 2,020ms with current core behavior) and a median image bytes increase of 2% (378KB compared to 369KB with current core behavior). → Omitting the first two content images produces worse results for both metrics than only omitting the first one, i.e. it is better to only skip lazy-loading for the first content image, and therefore no additional tests with larger numbers of images not being lazy-loading are needed.”

תוצאות חדשות עבור טעינה עצלה בוורדפרס

  • 5% מהתבניות בקבוצת הבדיקה השיגו ציוני LCP שהיו פחות טובים ב -10% עד 21%.

  • 42% מהתבניות שיפרו את ציוני ה- LCP עד 33% יותר.

  • רוב התבניות שנבדקו הציגו שיפור בביצועי ה LCP.

היי, לא לדאוג.....


נשמע כמו ג'יבריש ? יש שאלות נוספות, תרצו לקבל הסבר מקיף על נושא המאמר ? לקבל ייעוץ אישי, הדרכה ואפילו ליווי עסקי ?

שמי עמית צוק ואני עורכת מגזין קידום אתרים, בעלת מעל ל 20 שנות ניסיון בפיתוח אתרים, קידום וניהול קמפיינים באינטרנט ובניית אסטרטגיות שיווקיות ופרסומיות באינטרנט. צרו עימי קשר (מבטיחה לא לשלוח ספאם). ועוד משהו קטן....


פוסטים אחרונים

הצג הכול