אופטימיזציה של ביצועי UI

1) מה שנחשב כ ”מהיר” ‏

TFB (זמן לבייט ראשון) - תגובה מהירה לשרת/CDN.
(LCP (Great Contentful Paint - התוכן העיקרי הופיע במהירות.
INP (אינטראקציה לצבע הבא) - תגובה במהלך אינטראקציה.
CLS (משמרת פריסה מצטברת) - היעדר של מתנועע ממשק.
TTI (זמן לאינטראקטיב) - כאשר הכל כבר מגיב.
נקודות התייחסות מומלצות: LCP Lother 2. 5, INP/200ms, CLS/0. 1 (לאחוז ה-75 של המשתמשים האמיתיים).

2) תהליך: מדידה = מצא צווארי בקבוק = תיקון תקציבים

1. מדד: RUM (משתמשים אמיתיים, אחוזים על ידי מדינה/רשת/התקן) + סינתטיים (מגדלור/דפדפנים).
2. מצא: פרופיילר ביצועי (משימות ארוכות> 50 ms, מתפתל פריסה, רנדרס נוסף).
3. תקן: תקציבים (משקל JS/CSS/fonts, LCP/INP) וקווים אדומים ב ־ CI.

3) רשת וטעינת משאבים

3. 1 HTTP וסדרי עדיפויות

אפשר HTTP/2/3, דחיסת ברוטלי.
'להתחבר' לתחומים קריטיים; " Dns-prefetch 'לתחומים משניים.
"Prelod' עבור משאבים קריטיים (תמונת גיבור, גופן ראשי).
' fetchpriority =” גבוה/נמוך” ו' priority 'רמז איפה נתמך.

3. 2 מטמון

סטטי עם חשיש קובץ: ”Cache-Control: ציבורי, מקסימום גיל = 31536000, בלתי משתנה”.
HTML - TTL קצר + מעופש-בזמן-חידוש באמצעות CDN.
ETag/Last-Modified and Service Worker לביקורים לא מקוונים/חוזרים.

4) קוד: פחות, מאוחר יותר, ”מחמיא”

4. הרכבה 1

טלטול עצים, הכן (tree shell. ч. מת-קוד-אלים).
פיצול קוד על ידי מסלולים/וידג 'טים, יבוא דינמי.
הימנע מחבילות כבדות ”גלובליות” בצרור הבסיסי (Moment # Intl/Day. js).

4. 2 טרנינג ומשלוח של HTML

SSR/ISR/הזרמה: תנו קודם את המסגרת והתוכן הראשי.
הידבקות חלקית/איים: הידרזות רק באזורים אינטראקטיביים.
דחו את כל הדברים שאינם קריטיים: ”<script type =” module ”defer>”.

4. 3 מפרט תגובה (אם משתמשים בתגובה)

"להגיב. עצלן '+' מתח עבור ווידג 'טים עצלנים.
'StartTransition' ו- 'useDeferredValue' עבור מסננים כבדים/lookups.
RSC (רכיבי שרת) - חישובי שרת, פחות מ-JS על הלקוח.
סלקטורים ב (zustand/redux): לחתום על הרכיב לקטעים, לא כל הערימה.

5) רנדור ומדינה: היכן ש ”מאט”

5. 1 בידוד של משדרים חוזרים

מחץ רכיבים גדולים, תזכיר (”מזכר”, ”useMemo”, ”useCallback”).
מפתחות הרשימה יציבים; אל תיצור פונקציות/אובייקטים חדשים באביזרים שלא לצורך.
הימנע מהקשר ”גלובלי” לשינוי תדיר במבחרי שימוש בנתונים או באוטובוסים.

5. 2 וירטואליזציה ורשימות גדולות

גיליונות/טבלאות * וירטואליזציה (להפוך חלון).
גיליון/גלילה אינסופית עם תרמיל גב (לא לטעון 100 k קווים בבת אחת).
אתחול מושהה של וידג 'טים כבדים מחוץ לנמל הצפייה.

5. 3 פריסה וצביעה

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

6) תמונות וגרפיקה

פורמטים: AVIF/WebP (נפילה על PNG/JPEG).
גישה מגיבה: 'srcset' + 'גדלים', מבוסס צפיפות לרשתית.
טעינה =” עצלן” עבור תמונות שאינן גיבור; עדיפות/הכנה למועמד LCP בלבד.
ממלא מקום גודל קבוע = אין קפיצות CLS.
קנבס/תרשימים: בד offscreen ו-Web Worker לחישובים; שרטוט אדום.

7) גופנים וטקסט

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

8) CSS ואנימציות

קריטי CSS inline (<14-20 kB), מנוחה - להידחות.
מחק סגנונות שאינם בשימוש (טיהור/CSSTREE).
אנימציות, במידת האפשר, על שינוי צורה/אופייה; כבוד 'מעדיף-מופחת תנועה'.
הימנע ממקרים עמוקים ומחילופי אש.

9) עובדי רשת, זרימה ומשימות כבדות

כל המעבד כבד - בעובד (פירוק, מיון, צבירה, מל "ל).
הזרמת API (”ReadioldStream”, ”להביא” עם זרמים) עבור תגובות ארוכות.
פיצול משימות לחתיכות דרך ' IdleCallback '/מיקרו-משימות כדי לשמור על היענות.

10) יציבות פריסה (CLS)

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

11) דוגמאות של קטעים

גופן קריטי ותמונת LCP

html
<link rel="preload" href="/fonts/Inter. var. woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" as="image" href="/hero. avif" imagesrcset="/hero. avif 1x, /hero@2x. avif 2x" fetchpriority="high">

עצלן וידג 'ט מאובטח אתחול

js const Widget = React. lazy(() => import('./Widget'));
function Section() {
const inView = useInViewport('#sec');
return <div id="sec">{inView? <React. Suspense fallback={null}><Widget/></React. Suspense>: null}</div>;
}

ייצוב פריסה

css
.hero {
content-visibility: auto;
contain: layout paint;
contain-intrinsic-size: 720px 320px ;/LCP reserve/
}

12) פיקוח רגרסיה ותקציבים

& gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & gt; & g

Web-Vitals in CI (מחקה) + RUM-Atlets (באחוזון).
ניתוח צרור: חוקר מפות מקור/אנליזר ביחסי ציבור.
ספסל ביצועים של רכיבים (הפיכת מרכיבים של 10k, זמן תגובה).

13) אנטי דפוסים

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

14) רשימת בדיקות מסך

[ ] LCP 2. 5 אס על התנועה 3G/mobile, CLS על 0. 1, INP/200ms

[ ] משאבים קריטיים: טעינה מראש/סדר עדיפויות; השאר הוא לדחות/עצלן

[ צרורות ]: פיצול קוד, אין תלות נוספת

[ רשימת ]/וירטואליזציה שולחן, וידג 'ט כבד התעכב ייזום

[ ] תמונות: AVIF/WebP, 'srcset/Digs',' טעינה = "עצלן" "

[ ] גופנים: משתנה + 'תצוגת גופנים', טעינה מראש רצויה בלבד

[ ] CSS: Critical inline, Tegge, ”תוכן-ראות” ו ”להכיל” איפה מתאים

[ ] עובדים/סרק למחשוב כבד

[ ] תקציבים ואיברים חיוניים מחוברים ללוחות מחוונים/התראות

15) תוכנית יישום (3 איטרציות)

איטרציה 1 - ניצחונות מהירים (1-2 שבועות)

אפשר Brotli/HTTP-2/3, CDN. CSS קריטי וטעינת משאבי LCP.
העבר וידג 'טים כבדים ליבוא דינמי.
תמונות * AVIF/WebP + 'srcset'. גופנים: ”פונט-תצוגה: החלפה”.

iteration 2 - שיפורים מבניים (שבועות 3-4)

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

Iteration 3 - Scale ו Robusness (רציף)

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

16) מיני ־ FAQ

מה יאיץ הכי הרבה בנייד?
הפחתת ה ־ JS המקורי, SSR/הזרמה וייעול תמונת ה ־ LCP.

אני תמיד צריך סס "ר?
לא, זה לא אם הדף אינטראקטיבי מבחינה דינאמית ומאובזר בצורה גרועה, האיים/היבשות החלקיות עשויים להיות טובים יותר.

למה INP גרוע עם צרור ”אור”?
כנראה משימות ארוכות (מיון, גרפיקה) על החוט הראשי - להביא אותם לפועל ולחלק את המשימות.

סך הכל

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