Βελτιστοποίηση της απόδοσης UI

1) Τι μετράει ως «γρήγορη»

TTFB (time to first byte) - γρήγορος διακομιστής/απόκριση CDN.
LCP (Ligest Contentful Paint) - «κύριο» περιεχόμενο εμφανίστηκε γρήγορα.
INP (Αλληλεπίδραση με το Next Paint) - ανταπόκριση κατά τη διάρκεια της αλληλεπίδρασης.
CLS (Σωρευτική μετατόπιση διάταξης) - απουσία διεπαφής.
TTI (Time to Interactive) - όταν όλα ήδη ανταποκρίνονται.
Συνιστώμενα σημεία αναφοράς: LCP ≤ 2. 5s, INP ≤ 200ms, CLS ≤ 0. 1 (για το 75ο εκατοστημόριο των πραγματικών χρηστών).

2) Διαδικασία: μέτρηση → εξεύρεση σημείων συμφόρησης → καθορισμός προϋπολογισμών

1. Μέτρο: RUM (πραγματικοί χρήστες, εκατοστημόρια ανά χώρα/δίκτυο/συσκευή) + συνθετικά (φάρος/περιηγητές).
2. Βρείτε: Προφίλ επιδόσεων (μακριές εργασίες> 50ms, θραύση διάταξης, επιπλέον αποδόσεις).
3. Καθορισμός: προϋπολογισμοί (βάρος JS/CSS/γραμματοσειρές, LCP/INP) και «κόκκινες γραμμές» στον ΚΚΠ.

3) Φόρτωση δικτύων και πόρων

3. 1 HTTP και προτεραιότητες

Ενεργοποίηση συμπίεσης Brotli.
'preconnect' to critical domains? ' dns-prefetch 'to δευτερεύοντες τομείς.
'preload' for κρίσιμους πόρους (εικόνα ήρωα, κύρια γραμματοσειρά).
'fetchpriority =' high/low '' and 'priority' ints where supported.

3. 2 Αποθήκευση σε θήκη

Στατικό με hash αρχείου: 'Cache-Control: public, max-age = 31536000, αμετάβλητο'.
HTML - σύντομο TTL + stale-while-revalidate μέσω CDN.
ETag/Τελευταίος τροποποιημένος εργαζόμενος και εργαζόμενος στην υπηρεσία για επισκέψεις εκτός διαδικτύου/επαναλαμβανόμενες επισκέψεις.

4) Κωδικός: λιγότερος, αργότερα, «κολακευτικός»

4. 1 Συναρμολόγηση

Ανακινώντας δένδρα, μικροσκοπικά (в т. ч. dead-code-elim).
Διαχωρισμός κωδικών ανά διαδρομή/γραφικό συστατικό, δυναμική εισαγωγή.
Αποφύγετε τα «παγκόσμια» βαριά πακέτα στη βασική δέσμη (στιγμή → Intl/Day. ις).

4. 2 HTML Απόδοση και παράδοση

SSR/ISR/streaming: δώστε πρώτα το πλαίσιο και το κύριο περιεχόμενο.
Μερική ενυδάτωση Νήσων: ενυδάτωση μόνο διαδραστικών περιοχών.
Αναβολή όλων των μη κρίσιμων: '<script type = «module» defer>'.

4. 3 Εξειδίκευση αντίδρασης (εάν χρησιμοποιείται αντίδραση)

"Αντιδράστε. τεμπέλης '+' Suspense 'για τα τεμπέλικα γραφικά συστατικά.
'startTransition' and 'useDef Value' for heavy filters/lookups.
RSC (Στοιχεία εξυπηρετητή) - Υπολογισμοί εξυπηρετητή, μικρότεροι από JS στον πελάτη.
Επιλογείς στο (zustand/redux): υπογράψτε το συστατικό σε θραύσματα, όχι σε ολόκληρη τη στοίβα.

5) Απόδοση και κατάσταση: όπου «επιβραδύνει»

5. 1 Απομόνωση των αναδρομέων

Συντρίψτε μεγάλα συστατικά, απομνημονεύστε ('memo', 'useCallback').
Τα κλειδιά λίστας είναι σταθερά. δεν δημιουργούν νέες λειτουργίες/αντικείμενα στα στηρίγματα χωρίς λόγο.
Αποφυγή «παγκόσμιου» πλαισίου για συχνά μεταβαλλόμενα δεδομένα - χρήση επιλογέων ή λεωφορείων εκδηλώσεων.

5. 2 Εικονοποίηση και μεγάλες λίστες

Φύλλα/πίνακες → εικονοποίηση (απόδοση παραθύρου).
Pagination/άπειρη κύλιση με αντίθλιψη (μην φορτώνετε γραμμές 100k ταυτόχρονα).
Καθυστέρηση αρχικοποίησης βαρέων γραφικών συστατικών εκτός προβολής.

5. 3 Διάταξη & βαφή

ορατότητα περιεχομένου: αυτόματο· για κρυμμένα χωρίσματα (ο φυλλομετρητής δεν καθιστά το αόρατο).
περιέχουν και «περιέχουν εγγενές μέγεθος» για προβλέψιμα μεγέθη.
Αποφυγή συχνών καταχωρήσεων ανάγνωσης (θραύση διάταξης). ομαδικές μετρήσεις.
θα αλλάξουν τη χρήση της δόσης (διαφορετικά επιπλέον μνήμη/στρώματα).

6) Εικόνες και γραφικά

Μορφότυποι: AVIF/WebP (οπισθοδρόμηση PNG/JPEG).
Προσέγγιση ανταπόκρισης: 'srcset' + 'μεγέθη', με βάση την πυκνότητα του αμφιβληστροειδούς.
«Φόρτωση =» τεμπέλης «» για εικόνες μη ήρωες. προτεραιότητα/προφόρτωση - μόνο για υποψήφια LCP.
Οι κάτοχοι θέσεων σταθερού μεγέθους δεν → άλματα CLS.
Καμβάς/διαγράμματα: καμβάς εκτός οθόνης και εργαζόμενος στον Παγκόσμιο Ιστό για υπολογισμούς. Σφουγγάρισμα retraws.

7) Γραμματοσειρές και κείμενο

Μία ή δύο μεταβλητές γραμματοσειρές αντί πολλών στυλ.
'font-display: swap '/' προαιρετικό', προφορτωμένο για βασικό στυλ.
"ρύθμιση μεγέθους 'για να μειωθεί το" άλμα "κατά την αλλαγή της γραμματοσειράς.
Τοπικές γραμματοσειρές με παρόμοιες μετρήσεις.

8) CSS και κινούμενα σχέδια

Κρίσιμο CSS inline (<14-20 kB), ανάπαυση - προς αναβολή.
Διαγραφή αχρησιμοποίητων στυλ (εκκαθάριση/CSSTree).
Κινούμενα σχέδια, εάν είναι δυνατόν, σε μετασχηματισμό/αδιαφάνεια. να σέβεται την «προτιμώμενη-μειωμένη κίνηση».
Αποφύγετε τους βαθείς καταρράκτες και τους εκρηκτικούς επιλογείς.

9) Εργαζόμενοι στον Παγκόσμιο Ιστό, ροή και βαριά καθήκοντα

Όλες οι ΚΜΕ-βαριές - σε εργαζόμενους (ανάλυση, διαλογή, συγκέντρωση, ML).
Streaming APIs ('ReadabLeam', 'fetch' with streams) για μακρές απαντήσεις.
Διαχωρίζοντας τις εργασίες σε κομμάτια μέσω 'RevieCallback '/microtasks για τη διατήρηση της απόκρισης.

10) Σταθερότητα διάταξης (CLS)

Εφεδρικός χώρος για το στοιχείο LCP (εικόνα/γραφικό συστατικό).
Μην εισάγετε πανό/κορδέλες χωρίς σταθερά μεγέθη.
Ασύμμετρες τουλίπες/τοστ - μην μετακινείτε το περιεχόμενο. χρήση στρωμάτων/πυλών.

11) Παραδείγματα snippets

Κρίσιμη γραμματοσειρά και εικόνα 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) Έλεγχος της παλινδρόμησης και προϋπολογισμοί

Συνολικός προϋπολογισμός: JS ≤ N kB, CSS ≤ M kB, αρχικό κομμάτι ≤ K kB.
Web-Vitals in CI (emulated) + RUM-alerts (on εκατοστημόρια).
Ανάλυση δέσμης: εξερευνητής/αναλυτής χαρτών πηγής στις δημόσιες σχέσεις.
Δείκτες αναφοράς επιδόσεων συστατικών στοιχείων (απόδοση στοιχείων 10k, χρόνος αντίδρασης).

13) Αντι-μοτίβα

Φόρτωση «όλων ταυτόχρονα»: γραφήματα, επεξεργαστές, χάρτες στην πρώτη οθόνη.
Τεράστια παγκόσμια κατάσταση → διαδοχικών επανακατηγοριοδοτών.
Εικόνες 2-4 × του επιθυμητού μεγέθους, χωρίς 'srcset/μεγέθη'.
Μακροί συγχρονισμένοι βρόχοι στο κύριο νήμα.
'ouline: κανένα' και έθιμα κόλπα χωρίς βελτιστοποίηση - παρεμβαίνουν στους δείκτες απόδοσης.
Κινούμενα σχέδια με 'πάνω/αριστερά' (σπάστε τη διάταξη και καλέστε την παλινδρόμηση).

14) Κατάλογος ελέγχου οθόνης

• LCP ≤ 2. 5 s στην 3G/mobile κυκλοφορία, CLS ≤ 0. 1, INP ≤ 200ms
• Κρίσιμοι πόροι: προφόρτωση/προτεραιότητες· το υπόλοιπο αναβάλλεται/τεμπέλης
• Δέσμες: διαχωρισμός κωδικών, χωρίς πρόσθετες εξαρτήσεις
• Λίστα/Εικονοποίηση πίνακα, Βαρύ Widget Καθυστερημένη αρχικοποίηση
• Εικόνες: AVIF/WebP,' srcset/μεγέθη', 'φόρτωση =» τεμπέλης»'
• Γραμματοσειρές: μεταβλητή + 'οθόνη γραμματοσειράς', επιθυμητή μόνο η προφόρτωση
• CSS: κρίσιμη inline, εκκαθάριση, «ορατότητα περιεχομένου» και «περιέχει» κατά περίπτωση
• Εργαζόμενοι/αδρανείς για βαρέα υπολογιστικά συστήματα
• Οι προϋπολογισμοί και τα Web-Vitals συνδέονται με ταμπλό/ειδοποιήσεις

15) Σχέδιο εφαρμογής (3 επαναλήψεις)

Επανάληψη 1 - Γρήγορα κέρδη (1-2 εβδομάδες)

Ενεργοποίηση Brotli/HTTP-2/3, CDN. Κρίσιμη CSS και προφορτωμένοι πόροι LCP.
Μετακίνηση βαρέων γραφικών συστατικών σε δυναμικές εισαγωγές.
Εικόνες → AVIF/WebP + 'srcset'. Γραμματοσειρές: 'font-display: swap'.

Iteration 2 - Διαρθρωτικές βελτιώσεις (3- 4 εβδομάδες)

Διαχωρισμός κωδικών ανά διαδρομή, ανάλυση δέσμης, αφαίρεση «βαρέων» libs.
Λίστα εικονοποίησης, ορατότητα περιεχομένου, περιέχον εγγενές μέγεθος.
Εφαρμογή SSR/streaming/islands (κατά περίπτωση).
RUM με Web-Vitals, προϋπολογισμοί σε CI.

Επανάληψη 3 - Κλίμακα και ανθεκτικότητα (Συνεχής)

Εργαζόμενοι/καμβάς εκτός οθόνης, υπολογισμοί butching, startTransition/def Value.
Τακτικός έλεγχος perf, αυτόματη πέψη παλινδρόμησης, ομαδική εκπαίδευση.

16) Mini-FAQ

Τι θα επιταχύνει περισσότερο το κινητό

Μείωση της αρχικής JS, SSR/streaming και βελτιστοποίηση της εικόνας LCP.

Χρειάζομαι πάντα SSR

Όχι, δεν είναι. Αν η σελίδα είναι δυναμικά διαδραστική και κεκλιμένη, τα νησιά/μερική ενυδάτωση μπορεί να είναι καλύτερα.

Γιατί η INP είναι κακή με μια «ελαφριά» δέσμη

Πιθανώς μεγάλες εργασίες (διαλογή, γραφικά) στο κύριο νήμα - φέρτε τις στο Worker και μοιραστείτε τις εργασίες.

Σύνολο

Το Fast UI είναι μια συλλογή από επιστημονικούς κλάδους: προτεραιότητες δικτύου και κρυφή μνήμη, μικρότερες και καθυστερημένες δέσμες, προβλέψιμη απόδοση χωρίς άλμα, οικονομικές εικόνες και γραμματοσειρές, και συνεχής μετρικός έλεγχος πραγματικού κόσμου. Εισάγετε προϋπολογισμούς, αυτοματοποιήστε ελέγχους και μάθετε στην ομάδα να σκέφτεται την ταχύτητα σε κάθε βήμα - με αυτόν τον τρόπο η διεπαφή θα παραμείνει γρήγορη σήμερα και σε ένα χρόνο.