Όταν ανοίγεις μια ιστοσελίδα, η σελίδα εμφανίζεται σχεδόν αμέσως. Αυτό που βλέπεις είναι το αποτέλεσμα μιας αλυσίδας βημάτων που γίνονται στο παρασκήνιο πριν φτάσει έστω και μία λέξη στην οθόνη σου. Αν καταλάβεις πώς δουλεύουν οι ιστοσελίδες στο παρασκήνιο, βρίσκεις πιο εύκολα τα προβλήματα, παίρνεις καλύτερες αποφάσεις για φιλοξενία και ταχύτητα και μιλάς καθαρά με προγραμματιστές ή με την υποστήριξη όταν κάτι πάει στραβά.
Μια ιστοσελίδα δεν είναι ένα μόνο αρχείο σε έναν υπολογιστή. Είναι ένα σύνολο από αρχεία, βάσεις δεδομένων και υπηρεσίες που δουλεύουν μαζί για να παραδώσουν περιεχόμενο στους επισκέπτες. Κάθε φόρτωση σελίδας περιλαμβάνει ένα αίτημα από τον browser, μια απάντηση από έναν server και μια διαδικασία εμφάνισης που μετατρέπει τον κώδικα στη σελίδα με την οποία αλληλεπιδράς. Για μια βασική επισκόπηση του τι είναι πραγματικά μια ιστοσελίδα, δες το άρθρο τι είναι μια ιστοσελίδα.
Τι γίνεται όταν γράφεις μια διεύθυνση ιστοσελίδας;
Η διαδικασία αρχίζει τη στιγμή που ένας επισκέπτης γράφει ένα URL ή πατάει έναν σύνδεσμο. Αρκετά συστήματα συντονίζονται για να βρουν τον σωστό server και να φέρουν τη σωστή σελίδα.
Αναζήτηση του domain
Ο browser μεταφράζει πρώτα το όνομα του domain σε μια αριθμητική διεύθυνση IP μέσω του Domain Name System. Αυτή η αναζήτηση λέει στον browser ποιος server στο διαδίκτυο έχει τα αρχεία της ιστοσελίδας. Χωρίς αυτό το βήμα, οι επισκέπτες θα έπρεπε να θυμούνται διευθύνσεις IP αντί για ευανάγνωστα ονόματα domain.
Το αίτημα στον server
Μόλις βρεθεί ο server, ο browser στέλνει ένα αίτημα HTTP για μια συγκεκριμένη σελίδα ή πόρο. Ο server λαμβάνει το αίτημα, το επεξεργάζεται και ετοιμάζει μια απάντηση. Η απάντηση περιλαμβάνει συνήθως markup HTML μαζί με οδηγίες για να φορτωθούν επιπλέον αρχεία, όπως stylesheets, scripts και εικόνες.
Ερωτήματα στη βάση δεδομένων
Πολλές σύγχρονες ιστοσελίδες αποθηκεύουν το περιεχόμενο σε μια βάση δεδομένων και όχι σε στατικά αρχεία. Όταν ζητηθεί μια σελίδα, ο server μπορεί να ρωτήσει τη βάση για να πάρει κείμενα, εικόνες, λίστες προϊόντων ή άρθρα blog. Μετά συναρμολογεί αυτά τα δεδομένα σε HTML πριν τα στείλει πίσω στον browser. Αυτό το βήμα συναρμολόγησης είναι ένας από τους βασικούς λόγους που δύο σελίδες του ίδιου site μπορούν να έχουν την ίδια διάταξη αλλά να δείχνουν διαφορετικό περιεχόμενο.
Πώς μετατρέπει ο browser τον κώδικα σε σελίδα;
Η λήψη του HTML είναι μόνο η αρχή. Ο browser πρέπει να ερμηνεύσει τον κώδικα και να φτιάξει από αυτόν μια σελίδα που μπορείς να χρησιμοποιήσεις. Το άρθρο για το πώς φορτώνει μια ιστοσελίδα ο browser εξηγεί τη διαδικασία αναλυτικά, αλλά αξίζει να δούμε εδώ τα βασικά στάδια.
Ανάλυση του HTML και δημιουργία του DOM
Ο browser διαβάζει το HTML και φτιάχνει ένα Document Object Model, μια δομημένη αναπαράσταση κάθε στοιχείου της σελίδας. Οι επικεφαλίδες, οι παράγραφοι, οι εικόνες και οι σύνδεσμοι γίνονται όλα κόμβοι σε αυτό το δέντρο. Το DOM είναι η βάση που χρησιμοποιεί ο browser για να εμφανίσει τη σελίδα και να αλληλεπιδράσει μαζί της.
Εμφάνιση της ορατής σελίδας
Τα stylesheets ελέγχουν τη διάταξη και την εμφάνιση. Η JavaScript προσθέτει διαδραστικότητα. Μόλις ο browser έχει αρκετές πληροφορίες, ζωγραφίζει τη σελίδα στην οθόνη. Η πλήρης διαδρομή από το αίτημα μέχρι τη διαδραστική σελίδα παίρνει συνήθως ένα με τρία δευτερόλεπτα σε μια καλά βελτιστοποιημένη ιστοσελίδα.
Πώς διαχειρίζεται το WEMASY την τεχνική υποδομή
Το WEMASY διαχειρίζεται ολόκληρη την υποδομή πίσω από την ιστοσελίδα σου, ώστε να μη χρειάζεται να ρυθμίσεις servers, βάσεις δεδομένων ή caching με το χέρι. Η φιλοξενία, τα πιστοποιητικά ασφαλείας και οι βελτιστοποιήσεις απόδοσης περιλαμβάνονται στην πλατφόρμα. Οι σελίδες που φτιάχνεις στον δημιουργό ιστοσελίδων του WEMASY σερβίρονται από υποδομή σχεδιασμένη για γρήγορους χρόνους απόκρισης και αξιόπιστη διαθεσιμότητα. Οι αλλαγές περιεχομένου από τον editor εμφανίζονται στο ζωντανό site χωρίς να χρειάζονται τεχνικά βήματα δημοσίευσης.
Δες τι περιλαμβάνεται στον δημιουργό ιστοσελίδων του WEMASY ή δες τα πακέτα στη σελίδα τιμών.
Συχνές ερωτήσεις
Τι γίνεται όταν κάποιος επισκέπτεται την ιστοσελίδα μου;
Ο browser ψάχνει το domain σου για να βρει τον server σου, στέλνει αίτημα για τη σελίδα και ο server σου απαντά με HTML και σχετικά αρχεία. Μετά ο browser αναλύει τον κώδικα, φορτώνει stylesheets και scripts και εμφανίζει τη σελίδα στην οθόνη. Με τον δημιουργό ιστοσελίδων του WEMASY, μπορείς να το στήσεις απευθείας στην ιστοσελίδα σου.
Χρειάζεται να καταλαβαίνω πώς δουλεύουν οι ιστοσελίδες για να έχω μία;
Όχι. Οι περισσότεροι επιχειρηματίες διαχειρίζονται περιεχόμενο και σχεδιασμό χωρίς να ξέρουν λεπτομέρειες για τους servers. Οι βασικές γνώσεις βοηθούν όταν ψάχνεις τον λόγο για αργές σελίδες, διακοπές λειτουργίας ή κατεστραμμένες λειτουργίες. Μια διαχειριζόμενη πλατφόρμα σαν το WEMASY αναλαμβάνει την τεχνική υποδομή, ώστε να εστιάζεις στο περιεχόμενο και τον σχεδιασμό.
Ποια είναι η διαφορά ανάμεσα στο frontend και το backend;
Το frontend είναι ό,τι βλέπει και χρησιμοποιεί ο επισκέπτης στον browser: διάταξη, κείμενο, εικόνες και κουμπιά. Το backend είναι ό,τι γίνεται στον server: αποθήκευση δεδομένων, επεξεργασία φορμών, ερωτήματα στη βάση και συναρμολόγηση των σελίδων πριν σταλούν. Και τα δύο επίπεδα πρέπει να δουλεύουν σωστά για να λειτουργεί μια ιστοσελίδα.
Γιατί η ιστοσελίδα μου φορτώνει μερικές φορές αργά;
Η αργή φόρτωση μπορεί να οφείλεται σε διάφορα σημεία της αλυσίδας: αργή απόκριση του server, μεγάλες εικόνες χωρίς βελτιστοποίηση, πάρα πολλά scripts που φορτώνουν πριν εμφανιστεί το περιεχόμενο ή απενεργοποιημένο caching. Το πρώτο βήμα για τη διόρθωση είναι να βρεις ποιο στάδιο προκαλεί την καθυστέρηση. Τα άρθρα για την απόδοση σε αυτόν τον οδηγό καλύπτουν κάθε αιτία αναλυτικά.
Τι είναι ένα δίκτυο διανομής περιεχομένου;
Ένα δίκτυο διανομής περιεχομένου, που λέγεται συχνά CDN, αποθηκεύει αντίγραφα των αρχείων της ιστοσελίδας σου σε servers σε όλο τον κόσμο. Όταν ένας επισκέπτης ζητά μια σελίδα, τα αρχεία σερβίρονται από την τοποθεσία που βρίσκεται πιο κοντά του και όχι από έναν κεντρικό server. Αυτό μειώνει τον χρόνο φόρτωσης, ειδικά για επισκέπτες που βρίσκονται μακριά από τον κύριο server σου.
Μπορώ να δω τι γίνεται στο παρασκήνιο στη δική μου ιστοσελίδα;
Τα εργαλεία προγραμματιστή του browser σου επιτρέπουν να ελέγξεις τα αιτήματα δικτύου, να δεις ποια αρχεία φορτώνουν και πόσο χρόνο παίρνει το καθένα και να δεις τη δομή HTML κάθε σελίδας. Τα εργαλεία ελέγχου ταχύτητας μετρούν τον χρόνο απόκρισης του server και τη συνολική απόδοση φόρτωσης. Το WEMASY περιλαμβάνει μετρήσεις απόδοσης στον πίνακα ελέγχου, ώστε να παρακολουθείς πώς τα πάει το site σου χωρίς εξωτερικά εργαλεία.