עצלנים טוענים תמונות: מדריך שלם פלוס 3 דרכים ליישום זה

עצלן טוען תמונות: מדריך שלם


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

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

נתחיל עם תוכן העניינים של העתיד לבוא:

  • למה טעינה עצלנית משנה?
  • מה זה טעינה עצלנית?
  • היתרונות של העמסה עצלה
  • מה לקחת בחשבון כשאתה טוען תמונות עצלן
  • אפשרות 1: הטמנת טעינה עצלה מאפס (ידידותי למתחילים: ⭐ / 5)
  • אפשרות 2: השתמש בתוסף JavaScript (ידידותי למתחילים: ⭐⭐ / 5)
  • אפשרות 3: השתמש בתוסף וורדפרס (ידידותי למתחילים: ⭐⭐⭐⭐⭐ / 5)
  • סיכום

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

העומס הגדול של דף אינטרנט מורכב בעיקר מתמונות, סקריפטים, גיליונות סגנונות, גופנים וסרטונים. עם זאת, תמונות גוזלות למעלה מ- 60% מגודל דף אינטרנט טיפוסי. תמונות הן קריטיות גם לעיצוב של דף אינטרנט, כך שלא תוכלו להיפטר מהן.

ללא כל אופטימיזציה, דפדפן האינטרנט של המשתמש מוריד את כל המשאבים לפני הצגת הדף לחלוטין. זה מוביל לזמני עומס מוגברים, מה שיכול למשוך אנשים. הערכת WooCommerce כי עבור כל 100 מס ‘שיפור במהירות העמוד, אתר מסחר אלקטרוני יכול להגדיל את הכנסותיו ב -1%.

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

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

כדי להבין כיצד פועלת הטעינה העצלה, הנה GIF מונפש מהיר הממחיש כיצד מוצגות תמונות ב- CodeinWP.

הדגמה של Lazy טוענת תמונותהפגנת טעינה עצלה ב- CodeinWP

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

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

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

היתרונות של העמסה עצלה

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

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

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

מה לקחת בחשבון כשאתה טוען תמונות עצלן

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

זהה את התמונות שאתה רוצה לטעון

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

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

בחר בך מצייני מיקום

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

ישנם שני כיוונים שמפתחים נוקטים בדרך כלל בנושא זה:

  • השתמש בצבע הדומיננטי של התמונה כרקע
  • השתמש בגרסת תמונה באיכות נמוכה

מציין מקום בשכירות נמוכהדוגמה לגרסאות באיכות נמוכה של תמונות כמצייני מיקום לטעינה עצלה

הבחירה הנכונה כאן תלויה בעיצוב האתר שלך ובמה היית מעדיף שיוצג למשתמש כשהוא מחכה לטעינת התמונה.

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

היזהר משינוי מבנה העמוד בעת טעינת תמונות

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

זה יכול לשנות בקלות את פריסת העמוד ומיקום הטקסט. פיתרון פשוט הוא להוסיף מידות נכונות לתמונה מייד – הדבר מבטיח את גודל אלמנט התמונה נשאר זהה לאחר הטעינה.

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

אפשרות 1: הטמנת טעינה עצלה מאפס

הבה נבחן תחילה כיצד לעשות זאת מבלי להשתמש בתוספים. אפשרות זו מומלצת לאלה מכם שנוח לכם עם JavaScript. באופן אידיאלי, יש לבצע את הצעדים הבאים:

  1. מניעת טעינת תמונות במהלך טעינת העמוד: כאשר אתה מציין את כתובת האתר או הנתיב של התמונה בתכונה src של  בתגית, התמונה תורד על ידי הדפדפן במהלך טעינת העמוד. כדי למנוע מהדפדפן להוריד את התמונה, עליך לציין את מיקום התמונה בתכונה data-src של  במקום זאת.
  2. רשום פונקציות של מטפל באירועים ב- JavaScript כדי לבדוק אם יש אלמנטים בשני אירועים: טעינה וגלילה.
  3. כאשר אלמנט נכנס ליציאת התצוגה, טען את ערך רכיב ה- data-src אלמנט ה- src, מה שמפעיל את הדפדפן לטעון את התמונה.

יישום פשוט של תהליך זה הוסבר על ידי רובין אוסבורן וההדגמה זמינה ב- CodePen.

אפשרות 1.1: השתמש בממשק API לצפייה בצומת

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

בלוג המפתחים של גוגל מסביר את היישום של ממשק API לצפייה בצומת דרך הדגמת CodePen זו.

אפשרות 2: השתמש בתוסף JavaScript

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

ה ספריית bLazy בגודל של פחות מ- 2 קילוגרם לא מטיל עומס נוסף על המטען, ומאפשר לכם להתמודד בקלות עם טעינת תמונות עצלות.

כדי להשתמש בספריית bLazy, עליך לאתחל  אלמנטים עם התכונות הבאות:

  • כיתה: הגדר את הכיתה של כולם  תגיות ל- b-עצלן
  • src: קישור לתמונת מציין המיקום
  • data-src: קישור לתמונה לטעינה
  • data-src-small: קישור לתמונה לטעינה על גבי מסכים ברוחב של פחות מ- 420 פיקסלים

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

; (פונקציה () {
// לאתחל
var bLazy = Blazy חדש ();
}) ();

קיימת הדגמה של CodePen כאן.

אפשרות 3: השתמש בתוסף וורדפרס

ישנן כמה אפשרויות בחוץ שיכולות לתת לך טעינה עצלה. הבולט ביותר:

כל התוספים הללו יתמודדו אוטומטית עם טעינה עצלה. כל אחד מהם כולל גם כמה תכונות צד נחמדות.

לדוגמא, Lazy Load של WP Rocket גם עצלן טוען סרטוני YouTube ומחליף אותם בתמונה ממוזערת.

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


אופטימיזציה של תמונות ומטען עצל על ידי Optimole מיטוב תמונה & עומס עצלני מאת אופטימול

מחבר / ים: אופטימול

גרסה נוכחית: 2.3.1

עודכן לאחרונה: 21 באפריל, 2020

optimole-wp.zip


96% דירוגים


50,000 + התקנות


WP 4.7 + דורש

כמו ברוב התוספים, כדי לטעון עצלנים, פשוט התקן את התוסף והפעל את התכונה בלוח הבקרה של התוסף:

אופטימלית לטעינת תמונות עצלנית

סיכום

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

  • אם יש לך מיומנות ביניים ב- JavaScript, תוכל ליישם טעינה עצלה מאפס
  • אם אתה מכיר תכנות מסוימות אך אינך רוצה פלאגינים, ספריית JavaScript קלה, bLazy היא אפשרות
  • אם תרצה פיתרון בלחיצה אחת להעלאת תמונות עצלות באתר האינטרנט שלך, עליך לחפש תוסף כמו Optimole

מה אתם חושבים על העמסה עצלה? האם ניסית להשתמש בו כדי לשפר את ביצועי האתר שלך?

אל תשכח להצטרף לקורס ההתרסקות שלנו בנושא זירוז אתר וורדפרס שלך. עם כמה תיקונים פשוטים, אתה יכול להפחית את זמן הטעינה שלך אפילו ב 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map