bfcache και ταχύτητα ιστοσελίδας: γιατί το back button πρέπει να είναι σχεδόν άμεσο

Ο χρήστης πατάει προϊόν, διαβάζει λεπτομέρειες και μετά πατάει πίσω για να γυρίσει στη λίστα. Αν η προηγούμενη σελίδα φορτώνει ξανά από την αρχή, η εμπειρία γίνεται αργή. Σε e-shop αυτό συμβαίνει συνεχώς.

Το bfcache, δηλαδή back-forward cache, είναι browser optimization που μπορεί να επαναφέρει ολόκληρη τη σελίδα σχεδόν άμεσα όταν ο χρήστης πηγαίνει πίσω ή μπροστά.

Τι είναι το bfcache

Το web.dev περιγράφει το bfcache ως cache που κρατά snapshot της σελίδας στη μνήμη. Όταν ο χρήστης επιστρέφει με back/forward navigation, ο browser μπορεί να επαναφέρει τη σελίδα χωρίς νέο network load.

Αυτό διαφέρει από το HTTP cache. Δεν μιλάμε μόνο για αποθηκευμένα assets, αλλά για αποκατάσταση της κατάστασης της σελίδας.

Γιατί έχει σημασία σε e-shop

Σε ένα e-shop, ο χρήστης συχνά κινείται έτσι:

• ανοίγει κατηγορία
• εφαρμόζει φίλτρα
• ανοίγει προϊόν
• γυρίζει πίσω
• ανοίγει άλλο προϊόν

Αν κάθε επιστροφή χάνει scroll position, φίλτρα ή φορτώνει ξανά βαριά assets, ο χρήστης κουράζεται. Το bfcache μπορεί να κάνει αυτή τη ροή πιο γρήγορη και πιο φυσική.

Τι μπορεί να το μπλοκάρει

Κάποια τεχνικά μοτίβα κάνουν μια σελίδα μη κατάλληλη για bfcache.

Συνηθισμένα προβλήματα:

• χρήση unload event listener
• υπερβολικά αυστηρό Cache-Control: no-store σε σελίδες που δεν το χρειάζονται
• ανοιχτές συνδέσεις ή APIs που δεν καθαρίζονται σωστά
• scripts τρίτων που μπλοκάρουν eligibility
• λάθος χειρισμός page lifecycle events

Για σελίδες με ευαίσθητα δεδομένα, το no-store μπορεί να είναι σωστό. Για δημόσιες σελίδες προϊόντων, άρθρων ή υπηρεσιών, συχνά δεν χρειάζεται να μπλοκάρει το bfcache.

Analytics και bfcache

Όταν μια σελίδα επανέρχεται από bfcache, δεν γίνεται κλασικό page load. Αν μετράτε analytics χωρίς να λαμβάνετε υπόψη το pageshow event και το persisted flag, μπορεί να χάνετε ή να διπλομετράτε navigations.

Χρειάζεται καθαρή στρατηγική measurement, ειδικά σε e-shop και funnels όπου η διαδρομή χρήστη έχει σημασία.

Πώς το κάνει η Ai Foundry

Στην Ai Foundry ελέγχουμε performance και page lifecycle συμπεριφορά πρακτικά, όχι μόνο με ένα PageSpeed score. Σε e-shop, ιστοσελίδες και web applications κοιτάμε navigation patterns, cache headers, JavaScript events και analytics ώστε το back/forward navigation να λειτουργεί σωστά.

Αυτό είναι σημαντικό για χρήστες σε κινητό, product browsing και σύνθετες εφαρμογές όπου η ταχύτητα δεν είναι μόνο πρώτη φόρτωση. Είναι και το πόσο γρήγορα κινείται ο χρήστης μέσα στο σύστημα.

Checklist

Ελέγξτε:

• αν οι δημόσιες σελίδες είναι eligible για bfcache
• αν υπάρχουν unload listeners
• αν χρησιμοποιείται pagehide ή pageshow όπου χρειάζεται
• αν τα cache headers δεν μπλοκάρουν άσκοπα δημόσιες σελίδες
• αν η επιστροφή από product page κρατά σωστή κατάσταση λίστας
• αν analytics μετρά bfcache restores σωστά
• αν γίνεται test με Chrome DevTools Back-forward Cache panel

Η ταχύτητα δεν είναι μόνο το πρώτο page load. Είναι και το πόσο άμεσα ανταποκρίνεται το site σε φυσικές κινήσεις του χρήστη.