טעינה עצלנית ותאוצת UX

1) מטרות ועקרונות

• הפחתת TTI/LCP על חשבון הנתיב הקריטי.
• ייצוב פריסה (CLS נמוך) עם ממדים צפויים.
• שמור סוללה ותנועה לנייד.
• העלה המרה - המשתמש רואה את הפעולה מוקדם יותר.

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

2) מסלול שינוי קריטי

Critical HTML: תן ”מעל הקיפול” סימון מייד.
CSS Critical: inline whale 10-15 KB; השאר זה 'מדיה = ”הדפסה” + החלפה/הטעינה.
JS כחוסם: 'לדחות '/' async', חתיכה מחיצה, לטעון היגיון לאורך נתיבים.
גופנים: 'פונט-תצוגה: החלף' אופציונלי ', WOFF2 טעינה מראש, גיבוי מערכת' ו.

3) עדיפות למשאב רשת

התחברות מראש ל ־ CDN/fonts/images (TCP + TLS מראש).
DNS prefetch עבור תחום שלישי.
טען מראש תמונות קריטיות/גופנים/תסריטים.
High 'low', 'fetchpriority' = ”high” עבור תמונת גיבור).
HTTP/3/QUIC: פחות איחור; קצה ה-CDN קרוב יותר למשתמש.
מדיניות מטמון: ”בלתי ניתנת לשינוי” עבור נכסים מבוססים; נכון ETag/Last-Modified.

4) מצבי תרגול והורדה מתקדמים

שלדים/שימרים במקום ספינרים: התקדמות ויזואלית ללא ”קפיצה”.
ממלא מקומות בגודל קבוע (כרטיסים, ציפורניים) - אפס CLS.
הזרמה/Chunked HTML: למסור במהירות את המסגרת, ואז להוסיף תוכן.
פעולה מיידית ואחריה אימות.

5) תוכן מדיה מעמיס עצלות

תמונות: טעינה =” עצלן”, פענוח =” async”, פורמטי AVIF/WebP (JPEG/PNG fallback).
תגובה: 'srcset '/' גדלים' תחת DPR/widths שונים; אין לטעון 3 × כאשר 1 × מספיק.
גובה צפוי: ”רוחב/גובה” או ”יחס היבט/יחס CSS”.
וידאו: ”pretload =” metadata ”” ”” ””, פוסטרים לאחר טעינה, הפסקה אוטומטית מחוץ לצפייה.
סמלים: Sprite/inline SVG; להימנע מבקשות HTTP מיותרות.

6) רכיבים ומסלולים עצלים

פיצול קוד: ייבוא דינמי על ידי נתיבים/ווידג 'טים.
רכיבי אי/הידרציה חלקית: רק להחיות אזורים אינטראקטיביים.
SSR/SSG + ISR: להפוך את HTML לשרת, רענן באופן הדרגתי.
Suspense/Defer (במסגרת בה נעשה שימוש): פירוק נתונים ו-UI.

7) רשימות ושולחנות ענקיים

Windowing-Render רק האזור הנראה + חוצץ.
טעינת עוגן: לשמור על מיקום בעת טעינה מחדש של חפיסות.
עדכוני אצווה: למזער את השרטוט מחדש בעת הגלילה.
גובה שורה קבועה או 'קונטור-אינהרנטי-גודל' לגדלים צפויים.

8) מאיצי CSS ודפדפן

”קונטנט-ראות: אוטומטי”: הדפדפן מדלג על הבלתי נראה (חישוב מינימלי).
'קונטר '/' רצון-שינוי': להגביל את ההשפעה של סגנונות/פריסה.
אנימציות: שינוי צורה/אופייה בלבד; להימנע פריסה/אפקטים כבדים צבע.
צל וטשטוש - בדלילות, במיוחד ברשימות.

9) ניהול עומס אירועים ו ־ JS

מאזיני גלילה פסיבית/טאצ 'ה (”[פסיבי: נכון]”.
להקפיץ/למצערת כדי לשנות גודל/גלילה/מפעילים.
אתחול דחוי של וידג 'טים מחוץ לצפייה (Inters Observer).
מעביר מחשוב כבד לעובדי רשת.

10) הקשר נייד

רשת: איטי 3G/high RTT - הורדה עצלנית היא אגרסיבית יותר.
סוללה וחום: להגביל את התדירות של טיימרים, להפחית FPS של אנימציות רקע.
דחיסה: ברוטלי לטקסט, נכון ”קבלה-קידוד”.
Prefetch over Wi-Fi רק עבור העברות סבירות (היסטוריה של קליקים).

11) זמינות ו ־ SEO

שלד תוכן: אינו מפריע לקוראי מסך; סדר לוגי של מיקוד.
שרת HTML של טקסט מפתח - אל תסתיר הכל מאחורי JS.
טקסטים וכותרות אלט נותרו זמינים עד טעינה מחדש.
תוכן עצלן לא צריך לחסום מסלולים מהמקלדת.

12) מדדים ומטרות

LCP (תמונת גיבור/כותרת): 2. 5 s (נייד).
INP (תגובת קלט): בלום 200 ms.
CLS: 0,1.
TFB: 500 ms; TTI: 3S מנוקד.
Bytes over the wire (מבט ראשון): תקציב קפדני (לדוגמה, 200-300 KB Crete). משאבים).
גלילה-ג 'אנק: <1% פריימים> 16. 7 גב '.

• 'lazy _ נחקר '/' עצלן _ טעון' (id, סוג, גודל, latency),
• 'component _ hyderated' (זמן, משקל JS),
• ”virtualized _ window _ resize”,
• ”icp _ מועמד _ הראה”, ”שלד _ זמן _ גלוי”,
• שגיאות ('img _ שגיאה', 'לפענח _ timeout').

13) תבניות לאזורים טיפוסיים

Home/Directory: SSR + כרטיסי שלד, תמונות עצלות, מסננים מתקדמים.
מוצר/קלף משחק: תמונת גיבור בעדיפות עליונה + גלריה - עצלן; ביקורות על ידי לחיצה.
מאמרים/ויקי ארוכים: TOC, התקדמות קריאה, עצלנות עבור בלוקים מדיה/קוד, טבלאות עיכוב של תוכן.
קלטות חיות: וירטואליזציה שורה, הפסקה אוטומטית מגילה, גבול חוצץ.

14) תרופות אנטי ־ פטריות

מסך מלא ספינר> 1-2 s ללא התקדמות.
עצלן ללא מחזיקים מקומיים * קפיצות פריסה (CLS).
מוריד ”כל JS בבת אחת” לתרחישים נדירים.
הפעל גופנים כבדים/תמונות לחלק הקריטי.
מידות כרטיס בלתי צפויות * תוכן נודד.
טעינה ביקורתית עצלה (לוגו, טקסט גיבור) - שובר LCP.
אין חזרה עמדה לאחר ”בחזרה”.

15) רשימת מימושים (צעד אחר צעד)

ספרינט 1 - אבחון: מדידת LCP/INP/CLS/TTFB; משאבי מפה ונתיב קריטי.
Sprint 2 - ביקורת/עדיפות: CSS/HTML ביקורתי, "connect'/" preload", להפחית נתחי JS.
ספרינט 3 - מדיה: AVIF/WebP, 'srcset/directions', ממדים קבועים, עצלן עבור לא גיבור.
ספרינט 4 - רשימות: וירטואליזציה, טעינת עוגן, שלדים/נצנצים.
ספרינט 5 - ארכיטקטורה: הידרציה/איים חלקיים, SSR/SSG/ISR, הזרמה.
ספרינט 6 - כוונון עדין: ”תוכן-ראות”, רמזים בעדיפות עליונה, התבטאויות, עובדי רשת.
ספרינט 7 - A/B וטלמטריה: השוו אפשרויות שלד, רמות עצלות, תקציבים.
ספרינט 8 - שחרר היגיינה: גרסאות נכס, בזבוז מזומנים, אסטרטגיות החלפה.

16) גלוסרי (קצר)

טעינה עצלה - טעינה מאוחרת של תוכן בלתי נראה.
LCP/INP/CLS/TFB/TTI/TBT הם מדדי קצב UX העיקריים.
פיצול קוד/הידרציה/איים - טכניקות ריסוק והשבה מחדש.
וירטואליזציה - להפוך תיבת רשימה נראית לעין.
רמזים עדיפים/Preconnect/Preconnect - הוראות לדפדפן לגבי מה לטעון קודם לכן.
ראות תוכן - דילוג על חישובים לתוכן בלתי נראה.

17) השורה התחתונה

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