Πώς μειώσαμε τον χρόνο φόρτωσης του site’s σε κάτω από ένα δευτερόλεπτο

Τα περισσότερα αργά websites δεν είναι αργά για μυστήριους λόγους. Είναι αργά λόγω μερικών προβλέψιμων προβλημάτων που συσσωρεύονται το ένα πάνω στο άλλο — και διορθώνονται με μια προβλέψιμη σειρά. Όταν ένας πελάτης έρχεται σε εμάς με χρόνο φόρτωσης τριών δευτερολέπτων, σπάνια χρειαζόμαστε εξωτικά κόλπα. Χρειαζόμαστε πειθαρχία.

Αυτή είναι η ίδια checklist που εκτελούμε σε κάθε έργο performance, περίπου με σειρά προτεραιότητας. Κάθε βήμα είναι οικονομικό σε σχέση με τον αντίκτυπό του, και τα περισσότερα sites φαίνονται δραματικά ταχύτερα μετά τα πρώτα τρία.

Μετρήστε πριν αγγίξετε οτιδήποτε

Δεν μπορείτε να βελτιώσετε ό,τι δεν μετράτε, και σίγουρα δεν μπορείτε να αποδείξετε τη βελτίωση χωρίς μια βάση αναφοράς. Ξεκινάμε κάθε έργο με field data, όχι μόνο με lab scores.

• Lab — Lighthouse και WebPageTest για ένα ελεγχόμενο, επαναλαμβανόμενο στιγμιότυπο.
• Field — real-user metrics (CrUX / RUM) για αυτό που πραγματικά βιώνουν οι χρήστες.
• Budget — ένα αυστηρό όριο ανά route, έτσι ώστε οι υποτροπές (regressions) να εντοπίζονται στο CI και όχι στο production.

Εξαλείψτε τους render-blocking πόρους

Το μεγαλύτερο όφελος στα περισσότερα sites είναι η απομάκρυνση του CSS και του JavaScript από το critical path. Ο browser δεν μπορεί να κάνει paint μέχρι να ολοκληρώσει το parsing των render-blocking πόρων — οπότε όσο λιγότεροι υπάρχουν, τόσο πιο γρήγορα εμφανίζεται κάτι.

// defer everything that isn't critical
const load = () => import('./analytics.js');
if ('requestIdleCallback' in window)
  requestIdleCallback(load);
else setTimeout(load, 2000);

Κάντε inline τη μικρή ποσότητα CSS που απαιτείται για το πρώτο viewport, και στη συνέχεια φορτώστε τα υπόλοιπα ασύγχρονα. Defer τα μη κρίσιμα scripts. Ο στόχος είναι ένα πρώτο paint που δεν περιμένει τίποτα που δεν χρειάζεται απολύτως.

Αντιμετωπίστε τις εικόνες ως budget

Οι εικόνες είναι συνήθως το βαρύτερο στοιχείο σε μια σελίδα και το πιο εύκολο να γίνει λάθος. Τρεις κανόνες καλύπτουν το ενενήντα τοις εκατό των περιπτώσεων:

1. Σερβίρετε σύγχρονες μορφές — AVIF ή WebP — με ένα fallback.
2. Προσαρμόστε το μέγεθος των εικόνων στις διαστάσεις απόδοσής τους. Μην στέλνετε ποτέ μια εικόνα hero 3000px σε μια θέση 600px.
3. Lazy-load οτιδήποτε βρίσκεται κάτω από το fold, και δεσμεύστε χώρο για να αποφύγετε το layout shift.

Κάντε cache στο edge

Μόλις η σελίδα γίνει ελαφριά, το επόμενο ερώτημα είναι πόσο γρήγορα φτάνουν τα bytes στον χρήστη. Ένα CDN με λογικά cache headers μετατρέπει ένα ταξίδι 600ms στο origin σε ένα edge hit 30ms. Για δυναμικό περιεχόμενο, το stale-while-revalidate σας προσφέρει άμεσες αποκρίσεις ενώ ανανεώνεται στο παρασκήνιο.

Το performance είναι ένα χαρακτηριστικό (feature). Το υπολογίζουμε στο budget με τον ίδιο τρόπο που το κάνουμε για οποιοδήποτε άλλο μέρος της κατασκευής.

Το αποτέλεσμα

Στο project που έγινε η αφορμή για αυτό το άρθρο, η αρχική σελίδα πήγε από 3,1s σε 0,9s largest contentful paint, και οι οργανικές μετατροπές αυξήθηκαν αισθητά μέσα στον μήνα. Τίποτα από αυτά δεν ήταν μαγικό — απλώς η παραπάνω checklist, εφαρμοσμένη με τη σειρά.

Αν το site σας φαίνεται αργό και δεν είστε σίγουροι από πού να ξεκινήσετε, επικοινωνήστε μαζί μας — ένας σύντομος έλεγχος (audit) συνήθως αποκαλύπτει τις δύο ή τρεις αλλαγές που έχουν τη μεγαλύτερη σημασία.