Τεμπέλης φόρτωσης και επιτάχυνση UX

1) Στόχοι και αρχές

• Μείωση των TTI/LCP εις βάρος της κρίσιμης πορείας.
• Σταθεροποίηση διάταξης (χαμηλό CLS) με προβλέψιμες διαστάσεις.
• Αποθήκευση μπαταρίας και κίνησης σε κινητό.
• Αύξηση μετατροπής - Ο χρήστης βλέπει τη δράση νωρίτερα.

Αρχές: προτεραιότητα → πρόοδο → προβλεψιμότητα. Πρώτον, κρίσιμο περιεχόμενο, στη συνέχεια προοδευτικό περιεχόμενο και βελτιώσεις μετά τη φόρτωση.

2) Κρίσιμη διαδρομή απόδοσης

Κρίσιμη HTML: Δώστε τη σήμανση «πάνω από το διπλάσιο» αμέσως.
Κρίσιμο CSS: inline ≤ 10-15 KB. το υπόλοιπο είναι «μέσα =» εκτύπωση «» + ανταλλαγή/επαναφόρτωση.
JS ως αποκλειστής: 'αναβολή '/' async', κατάτμηση κομματιών, λογική φορτίου κατά μήκος των διαδρομών.
Γραμματοσειρές: 'font-display: swap' προαιρετική ', WOFF2 preload, system back' και.

3) Ιεράρχηση των πόρων δικτύου

Προεξοχή σε CDN/γραμματοσειρές/εικόνες (TCP + TLS εκ των προτέρων).
DNS prefetch για τρίτους τομείς.
Προφορτώστε κρίσιμες εικόνες/γραμματοσειρές/σενάρια.
Υποδείξεις προτεραιότητας ('σημασία =' υψηλή 'χαμηλή' ',' fetchpriority = 'υψηλή' 'για την εικόνα ήρωα).
: λιγότερη καθυστέρηση· Η άκρη CDN είναι πιο κοντά στο χρήστη.
Πολιτικές «αποθήκευσης»: «αμετάβλητες» για περιουσιακά στοιχεία που αποστέλλονται· διόρθωση ETag/τελευταίας τροποποίησης.

4) Προοδευτική απόδοση και τηλεφόρτωση κρατών

Σκελετοί/Shimmers αντί για spinners: οπτική πρόοδος χωρίς «άλμα».
Κάτοχοι θέσης σταθερού μεγέθους (κάρτες, μικρογραφίες) - μηδενικό CLS.
Streaming/Chunked HTML: γρήγορα δώστε το πλαίσιο και μετά προσθέστε περιεχόμενο.
Αισιόδοξος UI (προσοχή): στιγμιαία δράση ακολουθούμενη από επικύρωση.

5) Περιεχόμενο μέσων τεμπέλης φόρτωσης

Εικόνες:' loading =» lazy»',' decoding =» async»', AVIF/WebP formats (JPEG/PNG fallback).
Απόκριση: 'srcset '/' μεγέθη' κάτω από διαφορετικά DPR/πλάτος. δεν φορτώνουν 3 × όπου 1 × είναι αρκετό.
Προβλεπόμενο ύψος: 'πλάτος/ύψος' ή 'λόγος διαστάσεων-διαστάσεων CSS'.
Βίντεο: 'preload = «μεταδεδομένα»', αφίσες μετά το φορτίο, αυτόματη παύση εκτός προβολής.
Εικονίδια: sprite/inline SVG; αποφυγή περιττών αιτήσεων HTTP.

6) Τεμπέλικα εξαρτήματα και οδοί

Διαχωρισμός κωδικών: δυναμική εισαγωγή ανά διαδρομή/γραφικό συστατικό.
Island Components/Μερική ενυδάτωση: Μόνο διαδραστικές περιοχές κινουμένων σχεδίων.
SSR/SSG + ISR: απόδοση HTML στον εξυπηρετητή, επαυξημένη ανανέωση.
Αναστολή/αναβολή (στο πλαίσιο που χρησιμοποιείται): αποσύνθεση δεδομένων και UI.

7) Τεράστιοι κατάλογοι και πίνακες

windowing-Render μόνο η ορατή περιοχή + ρυθμιστικό διάλυμα.
Επαναφόρτωση της άγκυρας: διατήρηση της θέσης κατά την επαναφόρτωση των συσκευασιών.
Ενημέρωση παρτίδας: ελαχιστοποίηση του επανασχεδιασμού κατά την κύλιση.
Ύψος σταθερής γραμμής ή «εγγενές μέγεθος» για προβλέψιμα μεγέθη.

8) Επιταχυντές CSS και περιηγητή

'οπτική επαφή-ορατότητα: αυτόματο': ο περιηγητής παρακάμπτει το αόρατο (ελάχιστος υπολογισμός).
'contain '/' will-change': περιορισμός της επίδρασης των στυλ/διάταξης.
Κινούμενα σχέδια: μόνο μετασχηματισμός/αδιαφάνεια. να αποφεύγονται οι επιπτώσεις της διάταξης/των βαρέων χρωμάτων.
Σκιά και θολή - φειδωλά, ειδικά στις λίστες.

9) Διαχείριση φορτίου συμβάντων και JS

Παθητική κύλιση/ακροατές tacha («{παθητική: αληθινή}»).
Αποσφαλμάτωση/γκάζι για αλλαγή μεγέθους/πάπυρο/χειριστές.
Αναβολή αρχικοποίησης των γραφικών συστατικών εκτός προβολής (IntersetionObserver).
Μετανάστευση βαρέων υπολογιστών στο Web Workers.

10) Κινητό πλαίσιο

Δίκτυο: αργή 3G/high RTT - τεμπέλης λήψη είναι πιο επιθετική.
Μπαταρία και θερμότητα: περιορισμός της συχνότητας των χρονοδιακοπτών, μείωση της FPS των κινουμένων σχεδίων υποβάθρου.
Συμπίεση: Brotli για κείμενο, σωστό 'Accept-Encoding'.
Prefetch over Wi-Fi μόνο για πιθανές μεταβάσεις (ιστορικό κλικ).

11) Διαθεσιμότητα και SEO

Περιεχόμενο ≠ σκελετού: δεν παρεμβαίνει στις συσκευές ανάγνωσης οθόνης. λογική σειρά εστίασης.
Εξυπηρετητής HTML του κειμένου κλειδιού - μην κρύβετε τα πάντα πίσω από το JS.
Τα alt κείμενα και οι κεφαλίδες παραμένουν διαθέσιμα μέχρι την επαναφόρτωση.
Το τεμπέλικο περιεχόμενο δεν πρέπει να εμποδίζει τις διαδρομές από το πληκτρολόγιο.

12) Μετρήσεις και στόχοι

LCP (εικόνα/κεφαλίδα ήρωα): ≤ 2. 5 s (κινητό).
INP (απόκριση εισόδου): ≤ 200 ms.
CLS: ≤ 0,1.
TTFB: ≤ 500 ms· TTI: ≤ 3 s.
Bytes over the wire (πρώτη προβολή): αυστηρός προϋπολογισμός (για παράδειγμα, 200-300 KB Κρήτης. πόροι).
Σκελετός: <1% καρέ> 16. 7 ms.

• 'lazy _ enqueued '/' lazy _ loaded' (ταυτότητα, τύπος, μέγεθος, καθυστέρηση),
• 'component _ hydrated' (χρόνος, βάρος JS),
• 'virtualized _ window _ resize',
• 'lcp _ υποψήφιος _ shown', 'σκελετός _ χρόνος _ ορατός',
• σφάλματα ('img _ error', 'decode _ timeout').

13) Πρότυπα για τις τυπικές ζώνες

Αρχική/κατάλογος: κάρτες SSR + σκελετού, τεμπέλικες εικόνες, προοδευτικά φίλτρα.
Προφόρτωση εικόνας ήρωα + υψηλή προτεραιότητα γκαλερί - τεμπέλης; κριτικές - με κλικ.
Μεγάλα άρθρα/wiki: TOC, ανάγνωση προόδου, τεμπέλης για τα μέσα/μπλοκ κώδικα, καθυστερημένοι πίνακες περιεχομένων.
Ζωντανές ταινίες: εικονοποίηση γραμμής, αυτόματη παύση κύλισης, όριο ρυθμιστικού διαλύματος.

14) Αντιπατερίδια

spinner πλήρους οθόνης> 1-2 s χωρίς πρόοδο.
Τεμπέλης χωρίς τοπικούς κατόχους → άλματα διάταξης (CLS ↑).
Λήψη «όλων των JS ταυτόχρονα» για σπάνια σενάρια.
Ενσωμάτωση βαρέων γραμματοσειρών/εικόνων στο κρίσιμο μέρος.
Απρόβλεπτα μεγέθη καρτών → περιεχόμενο περιαγωγής.
Τεμπέλης κρίσιμη φόρτωση (λογότυπο, κείμενο ήρωα) - σπάει LCP.
Δεν υπάρχει επιστροφή θέσης μετά την «επιστροφή».

15) Κατάλογος ελέγχου εφαρμογής (βήμα προς βήμα)

Sprint 1 - Διαγνωστικά: Μέτρηση LCP/INP/CLS/TTFB Χάρτης πόρων και κρίσιμη πορεία.
Sprint 2 - Κριτική/Προτεραιότητα: Κρίσιμη CSS/HTML, 'preconnec /' preload', μείωση κομματιών JS.
Sprint 3 - Media: AVIF/WebP, 'srcset/μεγέθη', σταθερές διαστάσεις, τεμπέληδες για μη ήρωες.
Sprint 4 - Λίστες: εικονοποίηση, επαναφόρτωση άγκυρας, σκελετοί/λαμπερό.
Sprint 5 - Αρχιτεκτονική: μερική ενυδάτωση/νησιά, SSR/SSG/ISR, streaming.
Sprint 6 - Τελειοποίηση: «προβολή περιεχομένου», υποδείξεις προτεραιότητας, αποσφαλμάτωση, εργαζόμενοι στον Παγκόσμιο Ιστό.
Sprint 7 - A/B και τηλεμετρία: σύγκριση των επιλογών του σκελετού, τεμπέλικα επίπεδα, προϋπολογισμοί.
Sprint 8 - Release hygiene: εκδόσεις περιουσιακών στοιχείων, cash basting, στρατηγικές rollback.

16) Γλωσσάριο (συνοπτικά)

Τεμπέλης - καθυστερημένη φόρτωση αόρατου περιεχομένου.
LCP/INP/CLS/TTFB/TTI/TBT είναι οι κύριες μετρήσεις ταχύτητας UX.
Διαχωρισμός κωδικών/Ενυδάτωση/Νήσοι - τεχνικές σύνθλιψης και αναζωογόνησης ΚΠΕ.
Εικονοποίηση - Απόδοση ενός ορατού πλαισίου λίστας.
Υποδείξεις προτεραιότητας/Προεπεξεργασία/Προφόρτωση - οδηγίες προς τον περιηγητή σχετικά με το τι να φορτώσει νωρίτερα.
Ορατότητα περιεχομένου - παράλειψη υπολογισμών για αόρατο περιεχόμενο.

17) Η τελική γραμμή

Τεμπέλης-φόρτωση δεν είναι «pu φόρτωση =» τεμπέλης «» και γίνεται. "Αυτό είναι το σύστημα: η κρίσιμη διαδρομή, οι σωστές μορφές μέσων ενημέρωσης, η νησιωτική διαδραστικότητα, η εικονοποίηση και η τηλεμετρία. Κάντε τη σημαντική στιγμή, τη δευτερεύουσα λεπτή και φθηνή, και τη διάταξη προβλέψιμη. Στη συνέχεια, το προϊόν θα αισθάνεται γρήγορα σε οποιαδήποτε συσκευή και σε οποιοδήποτε δίκτυο.