Το ζαχαροπλαστείο της Ζωής Παπακώστα στη Βέροια χρειάζεται έξι δευτερόλεπτα για να δείξει το ωράριό του σε ένα κινητό. Ο διακομιστής απαντάει σε 90 χιλιοστά του δευτερολέπτου. Όλα τα υπόλοιπα δευτερόλεπτα ξοδεύονται αφού έχει φτάσει η απάντηση, σε πράγματα για τα οποία ο διακομιστής δεν έχει λόγο, και αυτός ο χωρισμός είναι η πρώτη δουλειά αυτού του θέματος.
Ο ιστός είναι δύο μηχανήματα και ένα συμβόλαιο ανάμεσά τους. Σχεδόν κάθε ερώτηση που μπαίνει εδώ ρωτάει στην πραγματικότητα σε ποια πλευρά του συμβολαίου κάθεται το πρόβλημα, και η απάντηση φαίνεται σε ένα πάνελ που οι περισσότεροι κατασκευαστές σελίδων δεν το έχουν ανοίξει ποτέ.
Τι συμβαίνει ανάμεσα στο άγγιγμα και στο κείμενο
Ένα κινητό ζήτησε μια σελίδα. Βρήκε τη διεύθυνση, άνοιξε σύνδεση, την ασφάλισε, έστειλε μία γραμμή αιτήματος και πήρε πίσω ένα αρχείο σήμανσης. Το αρχείο δεν είναι η σελίδα. Είναι κατάλογος με ονόματα, και ο περιηγητής κάνει ένα αίτημα για το HTML και ένα αίτημα για κάθε αρχείο που εκείνο ονομάζει. Η σελίδα της Ζωής ονομάζει 34: ένα φύλλο στυλ, δύο γραμματοσειρές, ένα σενάριο για τον χάρτη και τριάντα φωτογραφίες με σιροπιαστά.
Γι' αυτό ο χρόνος του διακομιστή και ο χρόνος της σελίδας είναι δύο αριθμοί με δύο ιδιοκτήτες. Ο χρόνος ως το πρώτο byte είναι ο διακομιστής, η μεγαλύτερη ζωγραφιά είναι τα υπόλοιπα. Τα 90 χιλιοστά του δευτερολέπτου είναι εξαιρετικός αριθμός και δεν πρόκειται να μετακινήσουν τα 6,1 δευτερόλεπτα, επειδή ο διακομιστής έχει ήδη τελειώσει τη δουλειά του πριν αρχίσει το πρόβλημα.
Το αρχείο που κρατάει λευκή την οθόνη
Από τα 34 αιτήματα, τα περισσότερα μπορούν να φτάσουν όποτε θέλουν. Δύο όχι. Ένα φύλλο στυλ μέσα στο head σταματάει τη ζωγραφική της σελίδας ώσπου να φτάσει. Ο περιηγητής δεν ζωγραφίζει κείμενο που ίσως χρειαστεί να ξαναζωγραφίσει σε άλλη γραμματοσειρά και άλλο μέγεθος, οπότε περιμένει. Το φύλλο στυλ της Ζωής είναι ένα αρχείο 180 kB με τα στυλ όλης της σελίδας, και το ωράριο χρησιμοποιεί περίπου το ένα δέκατό του.
Η δεύτερη καθυστέρηση είναι ελληνική και δεν φαίνεται σε κανένα εργαλείο ως πρόβλημα. Η γραμματοσειρά που διάλεξε ο σχεδιαστής για τους τίτλους δεν έχει ελληνικά σχήματα, οπότε ο περιηγητής κατεβάζει ένα αρχείο που δεν θα χρησιμοποιήσει και ύστερα ζωγραφίζει τον τίτλο με μια εφεδρική γραμματοσειρά του συστήματος. Ελέγχεται σε δέκα δευτερόλεπτα: γράψτε μία ελληνική και μία λατινική λέξη δίπλα δίπλα στον ίδιο τίτλο και δείτε αν έχουν το ίδιο πάχος.
Η επιδιόρθωση δεν είναι πλαίσιο. Είναι να μπουν οι κανόνες που ντύνουν την πρώτη οθόνη μέσα στη σήμανση και να αργήσουν οι υπόλοιποι, που μετατρέπει έξι λευκά δευτερόλεπτα σε κείμενο στα 400 χιλιοστά και φωτογραφίες που γεμίζουν από πίσω. Αυτή η ανταλλαγή και οι διπλανές της είναι η Ταχύτητα σελίδας.
Μια ελληνική διεύθυνση ζυγίζει έξι φορές το γράμμα της
Η Ζωή ονόμασε τις σελίδες της στα ελληνικά, επειδή έτσι διαβάζονται. Μια διεύθυνση όμως δεν ταξιδεύει σε γράμματα, ταξιδεύει σε byte, και ό,τι δεν είναι λατινικό γράφεται με ποσοστιαία κωδικοποίηση. Ένα ελληνικό γράμμα γίνεται έξι χαρακτήρες μέσα σε μια διεύθυνση: το «ή» γράφεται %CE%AE.
/proionta/είναι δέκα χαρακτήρες, όπου κι αν επικολληθεί/προϊόντα/είναι δέκα χαρακτήρες στη γραμμή διευθύνσεων και πενήντα μέσα σε ένα μήνυμα
Δεν σπάει τίποτα, και ακριβώς γι' αυτό δεν το βλέπει κανείς. Πληρώνεται αλλού: σε ένα μήνυμα που κόβει τον σύνδεσμο στη μέση, σε ένα αρχείο καταγραφής όπου καμία διαδρομή δεν διαβάζεται, και σε έναν πελάτη που στέλνει τη διεύθυνση σε φίλο του και φτάνει σπασμένη. Αυτός ο χάρτης πήρε την ίδια απόφαση προς την άλλη κατεύθυνση: κάθε ελληνική σελίδα του κάθεται σε λατινική διαδρομή κάτω από το πρόθεμα της γλώσσας, και τα ελληνικά ζουν στον τίτλο και στο κείμενο, εκεί όπου τα διαβάζει η αναζήτηση.
Η δομή
Τι πρέπει να κρατάει πριν αποκτήσει νόημα το από πάνω
Διαβάζεται από την κορυφή προς τα κάτω. Κάθε στρώμα πατάει στο από κάτω του, και μια βλάβη πέφτει προς τα πάνω σε όλα.
- Το πλαίσιο συστατικώνΕκεί που ξεκινούν οι περισσότεροι, και το στρώμα με τη μικρότερη μνήμη
- Τα στυλΣτοίχιση και εμφάνιση, και το μεγαλύτερο υποθέμα εδώ
- Η σήμανσηΔομή, νόημα, και το αν μπορεί να τη διαβάσει ένας αναγνώστης οθόνης
- Το συμβόλαιο του καλωδίουΑιτήματα, κωδικοί κατάστασης και αποθήκευση, που τα κληρονομούν και τα τρία από πάνω
Δεν λέει πόσος κώδικας είναι το κάθε στρώμα. Τα δύο κάτω γράφονται πιο γρήγορα από όλα και κοστίζουν πιο ακριβά όταν πάνε στραβά, επειδή τα από πάνω υποθέτουν ότι έγιναν.
Ανακατευθύνσεις, και εκείνη που τη θυμάται ο περιηγητής
Κάτω από το πρώτο πρόβλημα υπήρχε δεύτερο. Η παλιά διεύθυνση του ωραρίου ζούσε ακόμη και έστελνε τους επισκέπτες στη νέα, οπότε κάθε κινητό που είχε περάσει από εκεί έκανε δύο ταξίδια αντί για ένα. Ο κωδικός κατάστασης αποφασίζει πόσο κρατάει αυτό. Το 301 είναι μόνιμο, το 302 δεν είναι, και ο περιηγητής θυμάται το 301. Το 301 πληρώνεται μία φορά ανά περιηγητή και ύστερα εξαφανίζεται. Το 302 πληρώνεται σε κάθε επίσκεψη, για πάντα.
Η παλιά διεύθυνση της Ζωής γύριζε 302 που κάποιος είχε βάλει ως δοκιμή. Ένας αριθμός σε μία γραμμή ρύθμισης αφαίρεσε ένα ταξίδι από κάθε επισκέπτη που ξαναγυρίζει, και είναι το είδος διόρθωσης που δεν φαίνεται στον κώδικα και φαίνεται στους αριθμούς. Το ίδιο ένστικτο καλύπτει και τις τριάντα φωτογραφίες: ο διακομιστής μπορεί να πει στον περιηγητή για πόσο επιτρέπεται να τις κρατήσει, και είναι μία γραμμή. Χωρίς αυτήν, ο πελάτης που κοιτάζει το ωράριο δύο φορές μέσα στην εβδομάδα κατεβάζει τα ίδια γλυκά δύο φορές.
Η σειρά που δουλεύει, και το κόλλημα στο πρώτο πληρωμένο site
Η σειρά που δουλεύει είναι η σειρά του ίδιου του περιηγητή. Πρώτα το HTML, επειδή όλα τα υπόλοιπα κρεμιούνται πάνω του και επειδή ένα σωστά δομημένο έγγραφο είναι ήδη προσβάσιμο και ήδη αναγνώσιμο χωρίς ένα γραμμάριο στυλ. Ύστερα το CSS, που είναι το μεγαλύτερο υποθέμα εδώ και εκείνο που προσπερνούν όσοι πάνε κατευθείαν στα συστατικά. Από κάτω και από τα δύο κάθεται το συμβόλαιο του καλωδίου, που το κληρονομούν και τα τρία επάνω στρώματα.
Το ελληνικό κόλλημα δεν είναι ο διακομιστής, και αυτή είναι η διαφορά με ό,τι διαβάζετε αλλού. Η πρώτη πληρωμένη δουλειά ενός Έλληνα που μαθαίνει ιστό είναι σχεδόν πάντα ένα έτοιμο σύστημα περιεχομένου για μια μικρή επιχείρηση: ένα ξενοδοχείο στη Χαλκιδική, ένα συνεργείο στον Βόλο, το ζαχαροπλαστείο της Βέροιας. Η δουλειά πληρώνεται, βγαίνει, και ο άνθρωπος μαθαίνει πρόσθετα αντί για το καλώδιο.
Ύστερα ο πελάτης λέει ότι η σελίδα είναι αργή, και η μόνη κίνηση που ξέρει είναι να εγκαταστήσει ένα ακόμη πρόσθετο για την ταχύτητα, το οποίο προσθέτει δύο αιτήματα. Δεν είναι έλλειψη ταλέντου. Είναι ότι τα Συστήματα περιεχομένου είναι το μοναδικό κομμάτι αυτού του θέματος που πληρώνει από τον πρώτο μήνα, οπότε μαθαίνεται πρώτο και μοιάζει με ολόκληρο το επάγγελμα. Η Πλευρά διακομιστή και οι Διεπαφές προγραμματισμού είναι η άλλη μισή δουλειά, με άλλους κανόνες και τον ίδιο τίτλο θέσης.
Τι ανοίγετε το 2026, και γιατί δεν κοστίζει τίποτα
Το πάνελ δικτύου στα εργαλεία του περιηγητή είναι το πιο χρήσιμο πράγμα σε αυτή τη σελίδα. Δείχνει και τα 34 αιτήματα με τη σειρά τους, με το τι μπλόκαρε τι, και αντικατέστησε τη συνήθεια να μαντεύει κανείς ποιο αρχείο ήταν αργό και να σβήνει πράγματα ώσπου η σελίδα να γίνει γρήγορη. Είναι δωρεάν και είναι ήδη εγκατεστημένο.
Το Lighthouse, στο ίδιο παράθυρο, δίνει στους αριθμούς όνομα και στόχο, και έκανε την ταχύτητα από γνώμη μέτρηση για την οποία λογοδοτεί κάποιος. Οι βαθμοί του είναι σύνοψη και όχι διάγνωση: λέει στη Ζωή ότι η μεγαλύτερη ζωγραφιά της αργεί 6,1 δευτερόλεπτα και δεν της λέει ότι φταίει ένα φύλλο στυλ.
Το τρίτο λύνει ένα ελληνικό πρόβλημα μέτρησης. Το PageSpeed Insights τρέχει τη μέτρηση στα μηχανήματα της Google με προφίλ κινητού, και αντικατέστησε τη μέτρηση πάνω στον υπολογιστή του κατασκευαστή, ο οποίος έχει ήδη κάθε αρχείο στη μνήμη του και σύνδεση οπτικής ίνας. Ο πελάτης της Ζωής στέκεται στο πεζοδρόμιο με δεδομένα κινητής. Κανένα από τα τρία δεν χρεώνει ευρώ, δεν ζητάει κάρτα και δεν αρνείται ελληνική διεύθυνση, πράγμα ασυνήθιστο για εργαλεία που αξίζουν τόσα.
Αυτό που δεν καλύπτει τίποτα από τα παραπάνω είναι η στιγμή που τα δύο μηχανήματα δεν είναι περιηγητής και διακομιστής αλλά μια οθόνη στην τσέπη κάποιου, που έχει δικούς της κανόνες και τους έχουν οι Εφαρμογές κινητών. Και όταν η σελίδα γίνει γρήγορη, μένει η ερώτηση ποιος θα τη βρει, που είναι το SEO και όχι ο κώδικας.