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

Είναι εύκολο να υποθέσεις ότι μια ιστοσελίδα πρέπει να δείχνει εντυπωσιακή για να δουλεύει καλά. Στην πράξη, οι σελίδες που πραγματικά κάνουν τη δουλειά τους — κάνουν κάποιον να καταλάβει τι προσφέρεις, και μετά να κάνει κάτι γι' αυτό — συνήθως δείχνουν απλές δίπλα σε αυτές που είναι γεμάτες κινούμενα γραφικά και βίντεο φόντου. Αυτό που πραγματικά μετράει είναι πιο σύντομο απ' όσο φαίνεται, και η ταχύτητα αποδεικνύεται ότι είναι το μεγαλύτερο κομμάτι του.

Τι πραγματικά αξίζει τη θέση του

• Μια ξεκάθαρη απάντηση, αμέσως. Ένας επισκέπτης αποφασίζει αν θα συνεχίσει να διαβάζει μέσα σε δευτερόλεπτα — τι κάνεις, και αν είναι για αυτόν, πρέπει να είναι προφανές χωρίς scroll.
• Δουλεύει σωστά στο κινητό. Οι περισσότερες επισκέψεις στις περισσότερες ιστοσελίδες μικρών επιχειρήσεων γίνονται από κινητό, όχι από laptop — μια σελίδα που δουλεύει σωστά μόνο σε φαρδιά οθόνη απογοητεύει τους περισσότερους απ' όσους φτάνουν σε αυτήν.
• Ένας ξεκάθαρος τρόπος δράσης. Κάλεσε, αγόρασε, κλείσε ραντεβού, επικοινώνησε — διάλεξε το ένα πράγμα που πραγματικά θέλεις να κάνει ένας επισκέπτης, και κάν' το αδύνατο να το προσπεράσει. Μια σελίδα που προσφέρει πέντε εξίσου δυνατές επιλογές συνήθως δεν πετυχαίνει καμία.
• Φορτώνει πριν κάποιος τα παρατήσει. Όλα τα υπόλοιπα σε αυτή τη λίστα πάνε χαμένα αν η σελίδα δεν είναι ακόμα στην οθόνη όταν ένας επισκέπτης αποφασίσει να φύγει.

Γιατί η ταχύτητα μετράει τόσο πολύ

Μια αργή σελίδα δεν απλά νιώθεται χειρότερα — χάνει μετρήσιμα επισκέπτες πριν καν δουν οτιδήποτε, και οι μηχανές αναζήτησης υπολογίζουν την πραγματική ταχύτητα φόρτωσης απευθείας στην κατάταξη, κάτω από αυτό που η Google ονομάζει Core Web Vitals. Κανένα από τα δύο δεν είναι μικρή λεπτομέρεια: το ένα επηρεάζει αν κάποιος που βρήκε τη σελίδα σου μένει σε αυτήν, το άλλο επηρεάζει αν τη βρίσκει καν.

Το ενοχλητικό είναι ότι οι αργές ιστοσελίδες σπάνια είναι αργές για καλό λόγο. Οι συνήθεις ένοχοι είναι αποφεύξιμοι, όχι αναγκαίοι:

• Εικόνες σε μέγεθος κάμερας, όχι οθόνης. Μια φωτογραφία 4000 pixel πλάτους που εμφανίζεται σε 400 pixel είναι 10 φορές περισσότερα δεδομένα απ' όσα ο browser θα εμφανίσει ποτέ — η πιο συνηθισμένη πηγή αργής σελίδας, και η πιο εύκολη να διορθωθεί.
• JavaScript που η σελίδα δεν χρειαζόταν να τρέξει. Ένα μεγάλο framework που κατεβαίνει και αναλύεται μόνο για να εμφανίσει κείμενο και ένα κουμπί κοστίζει πραγματικό, μετρήσιμο χρόνο — πριν ο επισκέπτης δει έστω μία λέξη.
• Third-party scripts που κανείς δεν παρακολουθεί. Trackers, widgets συνομιλίας και embeds από αλλού προσθέτουν το καθένα τη δική του διαδρομή, και το καθένα μπορεί να είναι η ταχύτητα μιας σελίδας που χειροτερεύει σιωπηλά όσο προστίθενται περισσότερα και δεν αφαιρείται κανένα.

Πώς χτίστηκε στην πράξη η σελίδα που διαβάζεις αυτή τη στιγμή

Αφού αυτό είναι ακριβώς το θέμα αυτού του άρθρου, φαίνεται δίκαιο να πούμε ξεκάθαρα πώς είναι φτιαγμένες οι ίδιες οι σελίδες της webaki — γιατί είναι οι ίδιες τρεις ιδέες παραπάνω, απλά εφαρμοσμένες αντί απλά περιγραμμένες.

• Κάθε σελίδα συναρμολογείται σε ένα πλήρες, αυτόνομο έγγραφο εκ των προτέρων, αντί για ένα κέλυφος που μετά ζητάει από τον browser να φέρει και να συναρμολογήσει αρκετά ακόμα κομμάτια πριν υπάρξει κάτι να δείξει.
• Κάθε εικόνα σε αυτή τη σελίδα αλλάζει μέγεθος και συμπιέζεται ειδικά για το ακριβές μέγεθος στο οποίο εμφανίζεται πραγματικά — οι τρεις εικονογραφήσεις στην αρχική μας σελίδα, για παράδειγμα, είναι το ένα δέκατο του μεγέθους που ξεκίνησαν, χωρίς ορατή διαφορά στο μέγεθος που τις βλέπει κανείς.
• Δεν υπάρχει μεγάλο front-end framework να τρέχει στο παρασκήνιο, κάνοντας δουλειά που ένας επισκέπτης δεν προσέχει παρά μόνο ως σελίδα που αργεί περισσότερο να νιώσει έτοιμη.

Τίποτα απ' αυτά δεν είναι κάποιο έξυπνο κόλπο — είναι κυρίως η απουσία πραγμάτων που δεν χρειαζόταν να υπάρχουν εξαρχής, κάτι που είναι μια γνήσια βαρετή απάντηση, και επίσης η ειλικρινής.

Τι να ελέγξεις πραγματικά στη δική σου σελίδα

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

Ο δικός μας δημιουργός ιστοσελίδων είναι φτιαγμένος γύρω ακριβώς από αυτό — μια γρήγορη, λειτουργική μονοσέλιδη ιστοσελίδα εξ αρχής, χωρίς framework να ρυθμίσεις ή plugin να ψάξεις.