Πληκτρολογείς το όνομα ενός site και η σελίδα εμφανίζεται σε δευτερόλεπτα. Πίσω από αυτή την απλή κίνηση όμως, γίνονται πολλά. Δες πώς δουλεύουν τα site και τι συμβαίνει όταν φορτώνει μια σελίδα στον browser σου.
Γράφεις κάτι στη γραμμή αναζήτησης και βρίσκεις αμέσως τα αποτελέσματα; Σου φαίνεται σαν μαγεία; Οι μηχανές αναζήτησης έχουν γίνει βοηθός για όλους μας στο να βρίσκουμε κάτι στο διαδίκτυο. Γράφουμε το όνομα ενός site, πατάμε Enter και μέσα σε δευτερόλεπτα η σελίδα εμφανίζεται στην οθόνη μας. Πίσω από αυτή την απλή κίνηση όμως, πολλά πράγματα γίνονται πολύ γρήγορα. Παρότι φαίνεται σαν πολύ σύντομο ταξίδι, πολλά συμβαίνουν στο παρασκήνιο. Θες να δεις πώς δουλεύουν τα site στο παρασκήνιο; Ας ρίξουμε μια ματιά.
Βήμα 1: Γράφεις το ερώτημά σου
Όλα ξεκινούν όταν γράφεις μια λέξη, μια ερώτηση ή το όνομα ενός site στη γραμμή αναζήτησης ή στον browser και πατάς «enter». Όλα όσα γράφεις γίνονται ένα ερώτημα για να το αναζητήσει και να το βρει η μηχανή αναζήτησης. Το ερώτημά σου μπορεί να είναι το όνομα ενός site, μια ερώτηση ή οτιδήποτε ψάχνεις.
Ένας browser δεν καταλαβαίνει το όνομα ενός site όπως οι άνθρωποι. Χρειάζεται έναν αριθμό ή μια ειδική διεύθυνση για να ξέρει ακριβώς πού να πάει στο διαδίκτυο. Γι' αυτό η πρώτη μεγάλη δουλειά είναι να βρεθεί ο server όπου είναι αποθηκευμένο το site.
Βήμα 2: Ο browser ψάχνει τη σωστή διεύθυνση
Αφού γράψεις το ερώτημά σου, ο browser αρχίζει να βρίσκει πού είναι αποθηκευμένες οι πληροφορίες στο διαδίκτυο. Τα site αποθηκεύονται σε ειδικούς υπολογιστές που λέγονται servers. Κάθε server έχει έναν μοναδικό αριθμό που βοηθά να αναγνωριστεί.
Επειδή οι browsers δεν καταλαβαίνουν εύκολα τα ονόματα των site, χρησιμοποιούν ένα σύστημα που μετατρέπει το όνομα domain που έγραψες σε αριθμό. Έτσι δουλεύουν οι browsers στο παρασκήνιο για να βρουν τον ακριβή server που κρατά τα αρχεία του site. Μόλις βρεθεί ο server, ο browser ξέρει πού να στείλει το αίτημά του.
Βήμα 3: Ο browser δημιουργεί σύνδεση με τον server
Μόλις ο browser ξέρει ποιον server να επικοινωνήσει, πρέπει να συνδεθεί μαζί του. Ο browser και ο server ελέγχουν πρώτα αν μπορούν να επικοινωνήσουν σωστά. Είναι σαν να λες «γεια» πριν ξεκινήσεις μια συζήτηση. Αυτό το βήμα είναι σημαντικό, γιατί δεν μπορούν να ανταλλαγούν δεδομένα μέχρι να συμφωνήσουν και οι δύο πλευρές για το πώς θα γίνει η επικοινωνία.
Αν το site χρησιμοποιεί HTTPS, γίνεται ένας επιπλέον έλεγχος ασφαλείας, ώστε να είναι κρυπτογραφημένα και ασφαλή τα δεδομένα που στέλνονται ανάμεσά τους. Μόνο αφού δημιουργηθεί αυτή η σύνδεση προχωρά ο browser. Αυτό το βήμα φροντίζει οι πληροφορίες που ζητάς να φτάνουν στον σωστό server και να επιστρέφουν σε εσένα με ασφάλεια.
Βήμα 4: Ο browser στέλνει αίτημα για την ιστοσελίδα
Μόλις είναι έτοιμη η σύνδεση, ο browser στέλνει αίτημα στον server ζητώντας την ιστοσελίδα που θέλεις να δεις. Αυτό το αίτημα αναφέρει ξεκάθαρα ποια σελίδα χρειάζεται και τι είδους δεδομένα μπορεί να δεχτεί ο browser.
Το αίτημα ταξιδεύει στο διαδίκτυο μέχρι τον server. Όταν το λάβει ο server, καταλαβαίνει ακριβώς τι ζητά ο browser. Αυτό το βήμα είναι σημαντικό, γιατί λέει στον server ποιο περιεχόμενο πρέπει να στείλει πίσω. Μόνο αφού ληφθεί αυτό το αίτημα αρχίζει ο server να ετοιμάζει τα αρχεία της ιστοσελίδας για τον browser.
Βήμα 5: Ο server στέλνει στον χρήστη τα απαραίτητα αρχεία του site
Αφού λάβει το αίτημα του browser, ο server ετοιμάζει μια απάντηση. Η απάντηση περιέχει όλα τα αρχεία που χρειάζονται για να εμφανιστεί η ιστοσελίδα. Αυτά τα αρχεία ορίζουν πώς είναι δομημένη η σελίδα, πώς φαίνεται και πώς συμπεριφέρεται όταν αλληλεπιδρά μαζί της ο χρήστης.
Τα δεδομένα στέλνονται πίσω μέσω του διαδικτύου σε μικρά κομμάτια, ώστε να ταξιδεύουν πιο γρήγορα και πιο αξιόπιστα. Καθώς αυτά τα κομμάτια φτάνουν στον browser, ξανασυναρμολογούνται με τη σωστή σειρά. Σε αυτό το στάδιο, ο browser έχει όλες τις πληροφορίες που χρειάζεται για να αρχίσει να χτίζει την ιστοσελίδα.
Βήμα 6: Ο browser επεξεργάζεται τα αρχεία και χτίζει την ιστοσελίδα
Μόλις λάβει ο browser τα αρχεία του site, αρχίζει να τα επεξεργάζεται. Διαβάζει πρώτα τη δομή της σελίδας και μετά εφαρμόζει κανόνες στυλ για να αποφασίσει πώς θα εμφανιστεί το περιεχόμενο στην οθόνη. Ταυτόχρονα, ετοιμάζει τα scripts που ελέγχουν πώς θα ανταποκρίνεται η σελίδα στις ενέργειες του χρήστη.
Καθώς ο browser επεξεργάζεται αυτές τις πληροφορίες, υπολογίζει πού πρέπει να μπει κάθε στοιχείο και πόσο χώρο πρέπει να πιάνει. Αυτό το βήμα μετατρέπει τον ακατέργαστο κώδικα σε οπτική διάταξη έτοιμη να εμφανιστεί.
Βήμα 7: Η ιστοσελίδα εμφανίζεται και γίνεται διαδραστική
Αφού επεξεργαστεί τα αρχεία, ο browser εμφανίζει την ιστοσελίδα στην οθόνη σου. Κείμενα, εικόνες και κουμπιά εμφανίζονται στις σωστές θέσεις και σχηματίζουν τη σελίδα που ήθελες να δεις. Μόλις γίνει ορατή η σελίδα, γίνεται διαδραστική.
Μπορείς να κάνεις scroll, να πατάς συνδέσμους, να συμπληρώνεις φόρμες ή να βλέπεις βίντεο. Ακόμα και σε αυτό το στάδιο, ο browser μπορεί να συνεχίζει να φορτώνει κάποια μέρη του site στο παρασκήνιο, για να βελτιώσει τη συνολική εμπειρία. Τώρα που ξέρεις τι συμβαίνει αφού πατήσει κάποιος Enter, είναι πιο εύκολο να καταλάβεις γιατί μετράει τόσο πολύ η απόδοση ενός site.
Όλα αυτά τα βήματα γίνονται μέσα σε λίγα δευτερόλεπτα, συχνά χωρίς να το προσέξουμε. Για σένα ως ιδιοκτήτη brand, αυτό σημαίνει ότι ο τρόπος που είναι φτιαγμένο και παραδίδεται το site σου διαμορφώνει άμεσα το πώς βιώνουν οι άνθρωποι το brand σου. Πράγματα όπως η τοποθεσία του server και η ρύθμιση της cache παίζουν άμεσο ρόλο στο πόσο γρήγορα ολοκληρώνεται αυτή η διαδικασία. Το να καταλαβαίνεις πώς δουλεύουν τα site σε βοηθά να κάνεις καλύτερες επιλογές όταν χτίζεις το δικό σου. Αν θες να παρακολουθείς πόσο καλά αποδίδει το site σου, διάβασε για τις βασικές μετρήσεις για την παρακολούθηση της απόδοσης ενός site.
Συχνές ερωτήσεις
Γιατί κάποια site αργούν περισσότερο να φορτώσουν από άλλα;
Διάφορα πράγματα επηρεάζουν τον χρόνο φόρτωσης: το μέγεθος των αρχείων στη σελίδα, πόσο μακριά είναι ο server από τον επισκέπτη, αν έχει ρυθμιστεί cache και πόσο καλά είναι γραμμένος ο κώδικας. Μια σελίδα με μεγάλες εικόνες χωρίς συμπίεση ή με πάρα πολλά scripts θα αργήσει περισσότερο. Μια καλή φιλοξενία και η βελτιστοποίηση των αρχείων σου βοηθούν να μένουν τα πράγματα γρήγορα. Τα στατικά site τείνουν να είναι τα πιο γρήγορα, γιατί οι σελίδες είναι έτοιμες από πριν. Διάβασε περισσότερα για τα οφέλη της επιλογής στατικών site.
Τι είναι το TTFB και γιατί μετράει;
Το TTFB σημαίνει Time to First Byte. Μετράει πόσο περιμένει ο browser πριν αρχίσει να λαμβάνει δεδομένα από τον server. Ένα γρήγορο TTFB σημαίνει ότι ο server απαντά γρήγορα. Ένα αργό TTFB μπορεί να καθυστερήσει τα πάντα, ακόμα κι αν το υπόλοιπο site σου είναι καλά βελτιστοποιημένο. Η τοποθεσία του server και η ποιότητα της φιλοξενίας είναι οι μεγαλύτεροι παράγοντες εδώ.
Επηρεάζει η ταχύτητα του διαδικτύου σου το πώς φορτώνει ένα site;
Ναι. Η σύνδεσή σου στο διαδίκτυο καθορίζει πόσο γρήγορα μπορεί να κατεβάσει ο browser σου τα αρχεία από τον server. Αλλά παίζει ρόλο και το ίδιο το site. Ένα καλά βελτιστοποιημένο site με μικρά αρχεία και σωστή cache θα φορτώνει πιο γρήγορα ακόμα και σε πιο αργές συνδέσεις. Δεν μπορείς να ελέγξεις την ταχύτητα διαδικτύου του επισκέπτη σου, αλλά μπορείς να ελέγξεις πόσο ελαφριές ή βαριές είναι οι σελίδες σου.
Ποιος είναι ο ιδανικός χρόνος φόρτωσης σελίδας για ένα site;
Κάτω από 2 δευτερόλεπτα είναι ιδανικό. Οι περισσότεροι επισκέπτες αρχίζουν να χάνουν την υπομονή τους μετά από 3 δευτερόλεπτα. Οι μηχανές αναζήτησης ευνοούν επίσης τις πιο γρήγορες σελίδες. Τα site που φτιάχνονται με τον δημιουργό ιστοσελίδων του WEMASY είναι βελτιστοποιημένα για ταχύτητα εξαρχής, με σελίδες που φορτώνουν σε λίγα μόλις δευτερόλεπτα. Το σύστημα είναι φτιαγμένο να κρατά τα πράγματα ελαφριά και γρήγορα, ώστε οι επισκέπτες σου να έχουν ομαλή εμπειρία χωρίς να χρειάζεται να ασχοληθείς με τον συντονισμό της απόδοσης.
Φορτώνουν διαφορετικά τα site στο κινητό και στον υπολογιστή;
Η διαδικασία είναι η ίδια, αλλά η εμπειρία μπορεί να είναι διαφορετική. Τα κινητά έχουν συχνά πιο αργές συνδέσεις και μικρότερες οθόνες. Ένα site που δεν είναι βελτιστοποιημένο για κινητό μπορεί να φορτώνει περισσότερα δεδομένα απ' όσα χρειάζεται ή να δείχνει το περιεχόμενο με τρόπο που είναι δύσκολο να διαβαστεί. Το responsive design και η βελτιστοποίηση για κινητό βοηθούν να είναι ομαλή η εμπειρία φόρτωσης σε όλες τις συσκευές.
Μπορούν οι πάρα πολλές εικόνες να επιβραδύνουν ένα site;
Ναι. Οι εικόνες είναι συχνά τα μεγαλύτερα αρχεία σε μια ιστοσελίδα. Αν δεν είναι συμπιεσμένες ή σε σωστό μέγεθος, μπορούν να αυξήσουν σημαντικά τον χρόνο φόρτωσης. Η χρήση της σωστής μορφής εικόνας, η συμπίεση των αρχείων πριν το ανέβασμα και η φόρτωση των εικόνων μόνο όταν εμφανίζονται στην οθόνη (το λεγόμενο lazy loading) βοηθούν να μένουν γρήγορες οι σελίδες σου. Το WEMASY βελτιστοποιεί αυτόματα τις εικόνες όταν τις ανεβάζεις στο site σου.