Πώς συνδέονται μεταξύ τους ο browser, ο server, το δίκτυο, η ασφάλεια και η απόδοση; Ένας διαδραστικός γράφος με 78 έννοιες και 180 σχέσεις, που δείχνει πώς συνεργάζονται οι τεχνολογίες ώστε να λειτουργήσει ένας ιστότοπος.
Όλες οι έννοιες και οι σχέσεις τους
Η ίδια πληροφορία σε μορφή λίστας, για πλοήγηση με πληκτρολόγιο και αναγνώστες οθόνης. Πάτησε μια έννοια για να ανοίξει η εξήγησή της.
Βασικές Έννοιες (6)
— Ο ιστότοπος είναι το σύνολο των σελίδων, των εικόνων, των αρχείων και των υπηρεσιών που ο επισκέπτης βλέπει κάτω από ένα domain. Για να λειτουργήσει χρειάζεται συνεργασία όλων των υπόλοιπων εννοιών του χάρτη: κώδικας στον browser, κώδικας στον server, δίκτυο, ασφάλεια και υποδομή. Παραδείγματα: agorasite.gr · Ένα ηλεκτρονικό κατάστημα · Ένα blog
Ιστότοπος (Website) αποτελείται από Web Page
Ιστότοπος (Website) προσπελαύνεται μέσω Domain Name
Ιστότοπος (Website) εξυπηρετείται από Web Server
Ιστότοπος (Website) φιλοξενείται σε Web Hosting
Ιστότοπος (Website) έχει ως τμήμα Frontend
Ιστότοπος (Website) έχει ως τμήμα Backend
Ιστότοπος (Website) χρειάζεται Security
Ιστότοπος (Website) αξιολογείται ως προς Performance
Ιστότοπος (Website) δημοσιεύεται μέσω Deployment
Ιστότοπος (Website) μπορεί να εξελιχθεί σε Web Application
Ιστότοπος (Website) βελτιστοποιείται για SEO
— Κάθε σελίδα έχει τη δική της διεύθυνση URL και αποτελείται από HTML για τη δομή, CSS για την εμφάνιση και προαιρετικά JavaScript για τη συμπεριφορά. Όταν ο χρήστης ανοίγει μια διεύθυνση, ο browser ζητά συγκεκριμένα αυτή τη σελίδα από τον server. Παραδείγματα: /contact · /pricing · Ένα άρθρο blog
Ιστότοπος (Website) αποτελείται από Web Page
Web Page δομείται με HTML
Web Page μορφοποιείται με CSS
Web Page αποκτά διαδραστικότητα με JavaScript
Web Page προσδιορίζεται από URL
Accessibility κάνει προσβάσιμη Web Page
— Μια web εφαρμογή μοιάζει περισσότερο με πρόγραμμα παρά με έγγραφο: ο χρήστης συνδέεται, εισάγει δεδομένα και παίρνει αποτελέσματα. Συνήθως έχει frontend που επικοινωνεί με ένα backend μέσω API. Παραδείγματα: Gmail · Google Docs · Ένα πάνελ διαχείρισης παραγγελιών
Ιστότοπος (Website) μπορεί να εξελιχθεί σε Web Application
Web Application μπορεί να υλοποιηθεί ως Single Page Application
Web Application επικοινωνεί με API
Web Application βασίζεται στο Backend
Web Application συχνά απαιτεί Authentication
— Ο browser κατεβάζει τους πόρους μιας σελίδας, χτίζει από το HTML το DOM, εφαρμόζει τα στυλ, εκτελεί το JavaScript και ζωγραφίζει το αποτέλεσμα. Επιπλέον κρατά cookies και cache και επιβάλλει κανόνες ασφαλείας όπως CORS και CSP. Παραδείγματα: Chrome · Firefox · Safari · Edge
Browser αναλύει HTML
Browser εφαρμόζει CSS
Browser εκτελεί JavaScript
Browser δημιουργεί DOM
Browser επικοινωνεί με Web Server
Browser μιλά HTTP
Browser αποθηκεύει και αποστέλλει Cookies
Browser διατηρεί Browser Cache
Browser ζητά επίλυση ονόματος από DNS
Browser επιβάλλει CORS
Browser εφαρμόζει Content Security Policy
Frontend εκτελείται στον Browser
Lazy Loading υποστηρίζεται από Browser
Browser εκτελεί Browser Rendering
— Το frontend είναι ό,τι εκτελείται στη συσκευή του χρήστη: οι σελίδες, τα κουμπιά, οι φόρμες και τα animations. Η ποιότητά του καθορίζει πόσο γρήγορη, κατανοητή και προσβάσιμη φαίνεται η σελίδα. Παραδείγματα: Μια φόρμα επικοινωνίας · Ένα μενού πλοήγησης · Ένα καλάθι αγορών
Ιστότοπος (Website) έχει ως τμήμα Frontend
Frontend εκτελείται στον Browser
Frontend χρησιμοποιεί HTML
Frontend χρησιμοποιεί CSS
Frontend χρησιμοποιεί JavaScript
— Το backend τρέχει στον server και δεν το βλέπει ο χρήστης. Δέχεται τα αιτήματα, ελέγχει ποιος είναι ο χρήστης, διαβάζει ή γράφει στη βάση δεδομένων και επιστρέφει HTML ή δεδομένα JSON. Παραδείγματα: PHP (όπως εδώ) · Node.js · Python/Django · Java
Ιστότοπος (Website) έχει ως τμήμα Backend
Web Application βασίζεται στο Backend
Backend εκτελείται σε Application Server
Backend διαβάζει και γράφει δεδομένα Database
Backend εκθέτει λειτουργίες μέσω API
Backend υλοποιεί Authentication
Backend διαχειρίζεται Session
Backend μπορεί να χρησιμοποιεί Server Cache
Server-Side Rendering εκτελείται στο Backend
Logging καταγράφει σφάλματα του Backend
Frontend (14)
— Το HTML ορίζει τι είναι κάθε κομμάτι του περιεχομένου: τίτλος, παράγραφος, λίστα, σύνδεσμος, εικόνα, φόρμα. Η σωστή σημασιολογική χρήση (π.χ. h1, nav, main) βοηθά τις μηχανές αναζήτησης και τους χρήστες με αναγνώστες οθόνης. Παραδείγματα: <h1>Τίτλος</h1> · <a href="/about">About</a> · <img src="logo.webp" alt="Λογότυπο">
Web Page δομείται με HTML
Browser αναλύει HTML
Frontend χρησιμοποιεί HTML
DOM αναπαριστά ως δέντρο HTML
Accessibility βασίζεται σε σημασιολογικό HTML
Server-Side Rendering παράγει έτοιμο HTML
HTTP μεταφέρει HTML
— Το CSS ορίζει πώς φαίνεται το HTML: χρώματα, γραμματοσειρές, αποστάσεις, διατάξεις και animations. Οι κανόνες του μπορούν να αλλάζουν ανάλογα με το μέγεθος της οθόνης ή την κατάσταση ενός στοιχείου. Παραδείγματα: button { background: #0d6efd; } · nav a:hover { text-decoration: underline; }
Web Page μορφοποιείται με CSS
Browser εφαρμόζει CSS
Frontend χρησιμοποιεί CSS
JavaScript μεταβάλλει δυναμικά μέσω DOM CSS
CSS επιλέγει και μορφοποιεί στοιχεία του DOM
Media Queries αποτελεί χαρακτηριστικό της CSS
Cumulative Layout Shift επηρεάζεται από ασταθείς διαστάσεις στη CSS
CSS παρέχει CSS Grid
CSS παρέχει Flexbox
HTTP μεταφέρει CSS
Browser Rendering εφαρμόζει στυλ από CSS
— Η JavaScript είναι η γλώσσα που τρέχει μέσα στον browser. Αντιδρά σε κλικ και πληκτρολόγηση, αλλάζει το DOM χωρίς να ξαναφορτώσει η σελίδα και μπορεί να ζητά δεδομένα από APIs. Βαριά ή κακογραμμένη JavaScript κάνει τη σελίδα αργή. Παραδείγματα: Άνοιγμα μενού στο κινητό · Έλεγχος φόρμας πριν σταλεί · fetch("/api/orders")
Web Page αποκτά διαδραστικότητα με JavaScript
Browser εκτελεί JavaScript
Frontend χρησιμοποιεί JavaScript
JavaScript διαβάζει και τροποποιεί DOM
JavaScript μεταβάλλει δυναμικά μέσω DOM CSS
JavaScript καλεί μέσω fetch/XHR API
TypeScript μεταγλωττίζεται σε JavaScript
Accessibility χρειάζεται διαχείριση focus και ARIA μέσω JavaScript
Single Page Application βασίζεται σε JavaScript
XSS εκμεταλλεύεται JavaScript
Interaction to Next Paint επηρεάζεται από βαριά εκτέλεση της JavaScript
HTTP μεταφέρει JavaScript
— Η TypeScript προσθέτει τύπους στη JavaScript ώστε πολλά λάθη να εντοπίζονται πριν τρέξει ο κώδικας. Ο browser δεν την καταλαβαίνει απευθείας· πριν τη δημοσίευση μετατρέπεται σε απλή JavaScript. Παραδείγματα: function total(price: number, qty: number) · Angular · Μεγάλες εφαρμογές React
TypeScript μεταγλωττίζεται σε JavaScript
— Όταν ο browser διαβάζει το HTML, το μετατρέπει σε δέντρο αντικειμένων, το DOM. Η JavaScript χρησιμοποιεί αυτό το δέντρο για να βρει στοιχεία και να αλλάξει κείμενο, χρώματα ή CSS classes, και η αλλαγή φαίνεται αμέσως στην οθόνη. Παραδείγματα: document.querySelector("h1") · el.classList.add("active") · el.textContent = "Γεια"
Browser δημιουργεί DOM
JavaScript διαβάζει και τροποποιεί DOM
DOM αναπαριστά ως δέντρο HTML
CSS επιλέγει και μορφοποιεί στοιχεία του DOM
XSS εγχέει κακόβουλο περιεχόμενο στο DOM
Browser Rendering χρησιμοποιεί DOM
— Η ίδια σελίδα πρέπει να είναι άνετη σε κινητό, tablet και μεγάλη οθόνη. Αυτό γίνεται με ευέλικτες διατάξεις, εικόνες που προσαρμόζονται και CSS κανόνες που αλλάζουν ανάλογα με το πλάτος. Παραδείγματα: Μενού που γίνεται «χάμπουργκερ» στο κινητό · Κάρτες σε 3 στήλες σε desktop και 1 στήλη σε κινητό
Responsive Design χρησιμοποιεί Media Queries
Responsive Design υλοποιείται με Flexbox
Responsive Design υλοποιείται με CSS Grid
— Τα media queries είναι συνθήκες μέσα στο CSS. Οι κανόνες που περιέχουν εφαρμόζονται μόνο όταν η συνθήκη ισχύει, π.χ. όταν η οθόνη είναι στενότερη από 768px ή όταν ο χρήστης προτιμά σκούρο θέμα. Παραδείγματα: @media (max-width: 768px) { ... } · @media (prefers-reduced-motion: reduce) { ... }
Responsive Design χρησιμοποιεί Media Queries
Media Queries αποτελεί χαρακτηριστικό της CSS
— Το Flexbox τοποθετεί στοιχεία σε μία γραμμή ή στήλη και μοιράζει τον διαθέσιμο χώρο ανάμεσά τους. Είναι κατάλληλο για μενού, γραμμές κουμπιών και κάρτες που πρέπει να ευθυγραμμιστούν. Παραδείγματα: display: flex; gap: 8px; · Κεντράρισμα ενός στοιχείου με justify-content: center
Responsive Design υλοποιείται με Flexbox
CSS παρέχει Flexbox
— Το CSS Grid ορίζει γραμμές και στήλες ταυτόχρονα και τοποθετεί τα στοιχεία σε κελιά. Είναι κατάλληλο για ολόκληρες διατάξεις σελίδας, όπως κεφαλίδα, πλευρική στήλη, περιεχόμενο και υποσέλιδο. Παραδείγματα: grid-template-columns: repeat(3, 1fr); · Συλλογή εικόνων
Responsive Design υλοποιείται με CSS Grid
CSS παρέχει CSS Grid
— Η προσβασιμότητα εξασφαλίζει ότι κάθε επισκέπτης μπορεί να χρησιμοποιήσει τη σελίδα, ακόμη κι αν δεν βλέπει την οθόνη, δεν χρησιμοποιεί ποντίκι ή δυσκολεύεται με χρώματα και μικρά γράμματα. Βοηθά και το SEO, γιατί βασίζεται στην ίδια καθαρή δομή HTML. Παραδείγματα: Εναλλακτικό κείμενο (alt) στις εικόνες · Πλοήγηση μόνο με Tab · Επαρκής αντίθεση χρωμάτων
Accessibility κάνει προσβάσιμη Web Page
Accessibility βασίζεται σε σημασιολογικό HTML
Accessibility χρειάζεται διαχείριση focus και ARIA μέσω JavaScript
— Σε μια SPA ο browser φορτώνει την εφαρμογή μία φορά και στη συνέχεια η JavaScript αλλάζει το περιεχόμενο όταν ο χρήστης πλοηγείται, ζητώντας από το API μόνο τα δεδομένα. Η αίσθηση είναι πιο άμεση, αλλά η αρχική φόρτωση και το SEO χρειάζονται προσοχή. Παραδείγματα: Gmail · Trello · Εφαρμογές σε React ή Vue
Web Application μπορεί να υλοποιηθεί ως Single Page Application
Single Page Application βασίζεται σε JavaScript
Single Page Application ανταλλάσσει δεδομένα μέσω API
Single Page Application αντιπαραβάλλεται με Server-Side Rendering
Single Page Application χωρίς SSR δυσκολεύει SEO
— Στο SSR ο server ετοιμάζει το πλήρες HTML της σελίδας πριν το στείλει, οπότε ο browser και οι μηχανές αναζήτησης βλέπουν το περιεχόμενο αμέσως. Το ίδιο κάνει και μια κλασική PHP σελίδα. Παραδείγματα: Σελίδες PHP · Next.js με SSR · Blog που παράγεται από τη βάση
Single Page Application αντιπαραβάλλεται με Server-Side Rendering
Server-Side Rendering εκτελείται στο Backend
Server-Side Rendering παράγει έτοιμο HTML
Server-Side Rendering βελτιώνει SEO
Server-Side Rendering μπορεί να βελτιώσει Largest Contentful Paint
— Το SEO είναι το σύνολο των πρακτικών ώστε η σελίδα να εμφανίζεται ψηλά στα αποτελέσματα αναζήτησης. Εξαρτάται από το περιεχόμενο, τη δομή του HTML, την ταχύτητα και την ασφάλεια (HTTPS). Παραδείγματα: Μοναδικός τίτλος και περιγραφή ανά σελίδα · Ένα h1 ανά σελίδα · Sitemap
Single Page Application χωρίς SSR δυσκολεύει SEO
Server-Side Rendering βελτιώνει SEO
SEO επηρεάζεται από Core Web Vitals
Ιστότοπος (Website) βελτιστοποιείται για SEO
— Ο browser χτίζει το DOM από το HTML, εφαρμόζει τους κανόνες CSS, υπολογίζει θέση και μέγεθος κάθε στοιχείου (layout) και τέλος ζωγραφίζει τα pixels (paint). Όταν η JavaScript αλλάζει το DOM, μέρος της διαδικασίας ξαναγίνεται. Παραδείγματα: Πρώτη εμφάνιση της σελίδας · Επαναϋπολογισμός διάταξης όταν αλλάζει το μέγεθος του παραθύρου
Browser εκτελεί Browser Rendering
Browser Rendering χρησιμοποιεί DOM
Browser Rendering εφαρμόζει στυλ από CSS
Δίκτυο & Internet (16)
— Το Internet είναι το παγκόσμιο δίκτυο που συνδέει εκατομμύρια δίκτυα. Το Web (οι ιστοσελίδες) είναι μία από τις υπηρεσίες που τρέχουν πάνω του, όπως και το email. Παραδείγματα: Web · Email · Streaming βίντεο
Internet αποτελείται από Δίκτυο (Network)
Internet χρησιμοποιεί διευθύνσεις IP Address
Internet μεταφέρει δεδομένα μέσω TCP
Internet μεταφέρει δεδομένα μέσω UDP
— Ένα δίκτυο είναι οι συσκευές και οι συνδέσεις που μεταφέρουν πακέτα δεδομένων. Η απόσταση, η ποιότητα της σύνδεσης και η συμφόρηση επηρεάζουν άμεσα πόσο γρήγορα φτάνει μια σελίδα στον χρήστη. Παραδείγματα: Το WiFi του σπιτιού · Δίκτυο κινητής τηλεφωνίας · Το δίκτυο του data center
Internet αποτελείται από Δίκτυο (Network)
Bandwidth είναι χαρακτηριστικό του Δίκτυο (Network)
Latency επηρεάζεται από Δίκτυο (Network)
Firewall φιλτράρει την κίνηση του Δίκτυο (Network)
— Το domain είναι το όνομα που πληκτρολογεί ο χρήστης αντί για μια αριθμητική IP. Νοικιάζεται από εταιρεία καταχώρισης και δείχνει, μέσω DNS, στον server του ιστότοπου. Παραδείγματα: agorasite.gr · example.com · Υποτομέας: blog.example.com
Ιστότοπος (Website) προσπελαύνεται μέσω Domain Name
Domain Name επιλύεται μέσω DNS
Domain Name αποτελεί τμήμα του URL
SSL/TLS Certificate εκδίδεται για Domain Name
— Το URL είναι η πλήρης διεύθυνση ενός πόρου. Περιέχει το πρωτόκολλο, το domain, τη διαδρομή και προαιρετικά παραμέτρους, και λέει στον browser τι ακριβώς να ζητήσει και από πού. Παραδείγματα: https://agorasite.gr/web-development-map · https://example.com/search?q=dns
Web Page προσδιορίζεται από URL
Domain Name αποτελεί τμήμα του URL
URL χρησιμοποιεί πρωτόκολλο όπως HTTPS
— Το Domain Name System μετατρέπει ονόματα χώρου, όπως agorasite.gr, σε πληροφορίες διευθυνσιοδότησης, όπως IP addresses, ώστε ο browser να μπορεί να εντοπίσει τον κατάλληλο server. Αν το DNS είναι αργό ή λάθος ρυθμισμένο, η σελίδα καθυστερεί ή δεν ανοίγει καθόλου, ακόμη κι αν ο server λειτουργεί. Παραδείγματα: Εγγραφή A: agorasite.gr → διεύθυνση IPv4 · Εγγραφή CNAME: www → agorasite.gr · Αλλαγή server: ενημέρωση της εγγραφής A
Browser ζητά επίλυση ονόματος από DNS
Domain Name επιλύεται μέσω DNS
DNS επιστρέφει διεύθυνση IP Address
DNS χρησιμοποιεί συνήθως UDP
CDN συχνά ενεργοποιείται μέσω DNS
— Κάθε συσκευή και κάθε server στο Internet έχει μια IP διεύθυνση, που λειτουργεί σαν ταχυδρομική διεύθυνση για τα πακέτα δεδομένων. Υπάρχουν IPv4 (π.χ. 203.0.113.10) και IPv6. Παραδείγματα: 203.0.113.10 (IPv4) · 2001:db8::1 (IPv6)
Internet χρησιμοποιεί διευθύνσεις IP Address
DNS επιστρέφει διεύθυνση IP Address
Web Server βρίσκεται σε IP Address
— Το TCP χωρίζει τα δεδομένα σε πακέτα, τα αριθμεί, επιβεβαιώνει την παραλαβή και ξαναστέλνει όσα χάθηκαν. Έτσι ο browser παίρνει ολόκληρη και σωστή τη σελίδα, με κόστος κάποιας καθυστέρησης για τη δημιουργία της σύνδεσης. Παραδείγματα: Το HTTP/1.1 και το HTTP/2 τρέχουν πάνω από TCP · Η αποστολή email
Internet μεταφέρει δεδομένα μέσω TCP
HTTP τρέχει συνήθως πάνω από TCP
HTTP/2 τρέχει πάνω από TCP
— Το UDP στέλνει πακέτα χωρίς να δημιουργεί σύνδεση και χωρίς να εγγυάται ότι θα φτάσουν. Είναι πιο γρήγορο και ελαφρύ, γι’ αυτό το χρησιμοποιούν το DNS, το streaming και το HTTP/3 (μέσω QUIC), που προσθέτει αξιοπιστία από πάνω. Παραδείγματα: Ερωτήματα DNS · Βιντεοκλήσεις · QUIC / HTTP/3
Internet μεταφέρει δεδομένα μέσω UDP
DNS χρησιμοποιεί συνήθως UDP
HTTP/3 τρέχει πάνω από (QUIC) UDP
— Το HTTP είναι η «γλώσσα» του Web. Ο browser στέλνει αίτημα με μέθοδο (GET, POST…) και διεύθυνση, και ο server απαντά με κωδικό κατάστασης, headers και περιεχόμενο. Δεν κρατά μνήμη ανάμεσα στα αιτήματα, γι’ αυτό χρειάζονται cookies και sessions. Παραδείγματα: GET /about → 200 OK · POST /contact → 302 Redirect · 404 Not Found
Browser μιλά HTTP
HTTP τρέχει συνήθως πάνω από TCP
HTTPS είναι η ασφαλής εκδοχή του HTTP
HTTP/2 είναι εξέλιξη του HTTP
HTTP/3 είναι εξέλιξη του HTTP
Web Server εξυπηρετεί αιτήματα HTTP
REST API χρησιμοποιεί HTTP
GraphQL μεταφέρεται συνήθως μέσω HTTP
Cookies μεταφέρονται σε headers του HTTP
Compression εφαρμόζεται μέσω headers του HTTP
Browser Cache ελέγχεται από headers του HTTP
HTTP μεταφέρει HTML
HTTP μεταφέρει CSS
HTTP μεταφέρει JavaScript
— Το HTTPS είναι το HTTP μέσα σε κρυπτογραφημένη σύνδεση. Κανείς ενδιάμεσα δεν μπορεί να διαβάσει ή να αλλάξει τα δεδομένα, και ο browser επιβεβαιώνει ότι μιλά με τον πραγματικό server. Σήμερα είναι απαραίτητο για login, πληρωμές και καλό SEO. Παραδείγματα: Το λουκέτο στη γραμμή διευθύνσεων · Προειδοποίηση «Μη ασφαλής» όταν λείπει
HTTPS είναι η ασφαλής εκδοχή του HTTP
HTTPS χρησιμοποιεί για ασφάλεια TLS
URL χρησιμοποιεί πρωτόκολλο όπως HTTPS
Authentication απαιτεί HTTPS
Security ενισχύεται με HTTPS
— Το TLS διαπραγματεύεται κλειδιά κρυπτογράφησης μεταξύ browser και server και ελέγχει το πιστοποιητικό του server. Είναι το πρωτόκολλο που κάνει το HTTPS ασφαλές (παλαιότερα λεγόταν SSL). Παραδείγματα: TLS 1.3 · Πιστοποιητικό Let’s Encrypt
HTTPS χρησιμοποιεί για ασφάλεια TLS
TLS βασίζεται σε SSL/TLS Certificate
Web Server τερματίζει συνδέσεις TLS
Reverse Proxy μπορεί να τερματίζει TLS
— Το HTTP/2 επιτρέπει πολλά αιτήματα ταυτόχρονα μέσα σε μία σύνδεση (multiplexing) και συμπιέζει τα headers. Έτσι μειώνει την αναμονή όταν η σελίδα χρειάζεται δεκάδες αρχεία. Παραδείγματα: Φόρτωση πολλών μικρών αρχείων CSS/JS/εικόνων σε μία σύνδεση
HTTP/2 είναι εξέλιξη του HTTP
HTTP/2 τρέχει πάνω από TCP
HTTP/2 μειώνει με multiplexing Latency
— Το HTTP/3 τρέχει πάνω από QUIC (UDP). Ένα χαμένο πακέτο δεν σταματά όλα τα υπόλοιπα αιτήματα και η σύνδεση ξεκινά πιο γρήγορα, κάτι που βοηθά ιδιαίτερα σε κινητά και ασταθή δίκτυα. Παραδείγματα: Μετάβαση από WiFi σε 4G χωρίς διακοπή της φόρτωσης
HTTP/3 είναι εξέλιξη του HTTP
HTTP/3 τρέχει πάνω από (QUIC) UDP
HTTP/3 μειώνει Latency
— Η latency είναι ο χρόνος αναμονής πριν αρχίσουν να έρχονται δεδομένα. Εξαρτάται από την απόσταση, τον αριθμό των ενδιάμεσων κόμβων και τον χρόνο που χρειάζεται ο server για να απαντήσει. Δεν μειώνεται αυξάνοντας απλώς το bandwidth. Παραδείγματα: Ping 20 ms προς server στην Αθήνα · Ping 180 ms προς server στις ΗΠΑ
HTTP/2 μειώνει με multiplexing Latency
HTTP/3 μειώνει Latency
Latency επηρεάζεται από Δίκτυο (Network)
Latency επηρεάζεται από τον χρόνο απόκρισης του Web Server
Latency επηρεάζει Performance
CDN μπορεί να μειώσει Latency
Largest Contentful Paint επηρεάζεται από Latency
— Το bandwidth είναι πόσα δεδομένα χωρούν στη σύνδεση ανά δευτερόλεπτο. Έχει σημασία για μεγάλα αρχεία, όπως εικόνες και βίντεο, ενώ για πολλά μικρά αιτήματα μετρά περισσότερο η latency. Παραδείγματα: Σύνδεση 100 Mbps · Εικόνα 3 MB έναντι 150 KB
Bandwidth είναι χαρακτηριστικό του Δίκτυο (Network)
CDN εξοικονομεί Bandwidth
Compression μειώνει τη χρήση του Bandwidth
Image Optimization εξοικονομεί Bandwidth
— Ένα CDN κρατά αντίγραφα στατικών αρχείων (εικόνες, CSS, JS) σε servers σε πολλές χώρες και εξυπηρετεί τον κάθε χρήστη από τον πλησιέστερο. Μειώνει τη latency και αφήνει τον κεντρικό server να ασχολείται μόνο με τα δυναμικά αιτήματα. Παραδείγματα: Cloudflare · Amazon CloudFront · jsDelivr για βιβλιοθήκες JavaScript
CDN μπορεί να μειώσει Latency
CDN αποφορτίζει Web Server
CDN εξοικονομεί Bandwidth
CDN συχνά ενεργοποιείται μέσω DNS
Servers & Backend (12)
— Ο web server περιμένει συνδέσεις, διαβάζει τα HTTP αιτήματα και είτε επιστρέφει ένα αρχείο είτε περνά το αίτημα σε εφαρμογή (π.χ. PHP). Ρυθμίζει επίσης HTTPS, συμπίεση, redirects και caching. Παραδείγματα: Apache · Nginx · Caddy
Ιστότοπος (Website) εξυπηρετείται από Web Server
Browser επικοινωνεί με Web Server
Web Server βρίσκεται σε IP Address
SSL/TLS Certificate εγκαθίσταται στον Web Server
Latency επηρεάζεται από τον χρόνο απόκρισης του Web Server
CDN αποφορτίζει Web Server
Web Server εξυπηρετεί αιτήματα HTTP
Web Server τερματίζει συνδέσεις TLS
Web Server προωθεί δυναμικά αιτήματα στον Application Server
Web Server μπορεί να χρησιμοποιεί Server Cache
Reverse Proxy προωθεί αιτήματα στον Web Server
Load Balancer κατανέμει την κίνηση σε Web Server
Firewall προστατεύει Web Server
Web Hosting παρέχει Web Server
Monitoring παρακολουθεί Web Server
Logging καταγράφει αιτήματα του Web Server
Compression ενεργοποιείται στον Web Server
— Ο application server εκτελεί τον κώδικα της εφαρμογής και επιστρέφει το αποτέλεσμα στον web server. Ο web server είναι καλός στο να σερβίρει αρχεία και ο application server στο να τρέχει λογική. Παραδείγματα: PHP-FPM πίσω από Nginx · Node.js με Express · Gunicorn για Python
Backend εκτελείται σε Application Server
Web Server προωθεί δυναμικά αιτήματα στον Application Server
— Ο reverse proxy στέκεται μπροστά από έναν ή περισσότερους servers, δέχεται τα αιτήματα του κόσμου και τα προωθεί στον κατάλληλο. Μπορεί ταυτόχρονα να χειρίζεται TLS, caching και προστασία, κρύβοντας την εσωτερική υποδομή. Παραδείγματα: Nginx μπροστά από εφαρμογή Node.js · Traefik με Docker
Reverse Proxy προωθεί αιτήματα στον Web Server
Reverse Proxy μπορεί να τερματίζει TLS
Reverse Proxy μπορεί να κάνει caching με Server Cache
Load Balancer μπορεί να υλοποιείται ως Reverse Proxy
— Ο load balancer μοιράζει τα εισερχόμενα αιτήματα σε πολλούς servers. Αν ένας πέσει, η κίνηση πηγαίνει στους υπόλοιπους, άρα ο ιστότοπος αντέχει περισσότερους χρήστες και μένει διαθέσιμος. Παραδείγματα: AWS Elastic Load Balancer · HAProxy · Τρεις ίδιοι servers πίσω από έναν balancer
Load Balancer μπορεί να υλοποιείται ως Reverse Proxy
Load Balancer κατανέμει την κίνηση σε Web Server
Load Balancer βελτιώνει Uptime
Cloud Hosting προσφέρει Load Balancer
— Ένα API καθορίζει ποια αιτήματα δέχεται ένα σύστημα και τι επιστρέφει. Έτσι το frontend, μια εφαρμογή κινητού ή άλλη υπηρεσία μπορούν να χρησιμοποιούν τις λειτουργίες του backend χωρίς να γνωρίζουν πώς είναι φτιαγμένο. Παραδείγματα: Το API καιρού · Το API πληρωμών του Stripe · GET /api/orders
Web Application επικοινωνεί με API
Backend εκθέτει λειτουργίες μέσω API
JavaScript καλεί μέσω fetch/XHR API
Single Page Application ανταλλάσσει δεδομένα μέσω API
API υλοποιείται συχνά ως REST API
API υλοποιείται εναλλακτικά ως GraphQL
API μπορεί να ανταλλάσσει δεδομένα σε JSON
API προστατεύεται με Rate Limiting
CORS ρυθμίζει την πρόσβαση στο API
— Σε ένα REST API κάθε πόρος έχει δική του διεύθυνση και οι ενέργειες εκφράζονται με μεθόδους HTTP: GET για ανάγνωση, POST για δημιουργία, PUT/PATCH για ενημέρωση, DELETE για διαγραφή. Παραδείγματα: GET /users/5 · POST /orders · DELETE /orders/12
API υλοποιείται συχνά ως REST API
REST API χρησιμοποιεί HTTP
REST API επιστρέφει συνήθως JSON
— Στο GraphQL ο client περιγράφει ακριβώς ποια πεδία θέλει σε ένα μόνο αίτημα, αντί να καλεί πολλά endpoints και να παίρνει περιττά δεδομένα. Συνήθως στέλνεται με POST σε ένα ενιαίο endpoint. Παραδείγματα: { user(id: 5) { name orders { total } } } · GitHub API v4
API υλοποιείται εναλλακτικά ως GraphQL
GraphQL μεταφέρεται συνήθως μέσω HTTP
GraphQL επιστρέφει JSON
— Το JSON γράφει δεδομένα ως ζεύγη κλειδιού–τιμής και λίστες, με τρόπο που διαβάζεται εύκολα από ανθρώπους και προγράμματα. Είναι ο συνηθέστερος τρόπος ανταλλαγής δεδομένων μεταξύ frontend και backend. Παραδείγματα: {"name": "Μαρία", "orders": 3} · Η απάντηση ενός API
API μπορεί να ανταλλάσσει δεδομένα σε JSON
REST API επιστρέφει συνήθως JSON
GraphQL επιστρέφει JSON
— Η βάση δεδομένων αποθηκεύει μόνιμα πληροφορίες όπως χρήστες, προϊόντα και παραγγελίες, και επιτρέπει γρήγορη αναζήτηση. Αν τα ερωτήματα είναι αργά, ολόκληρο το backend και άρα η σελίδα επιβραδύνεται. Παραδείγματα: MySQL · PostgreSQL · MongoDB
Backend διαβάζει και γράφει δεδομένα Database
Database ερωτάται με SQL
Database ανακουφίζεται από Server Cache
— Η SQL είναι η γλώσσα με την οποία ζητάμε, προσθέτουμε, αλλάζουμε ή διαγράφουμε δεδομένα σε σχεσιακές βάσεις. Τα ερωτήματα πρέπει να γράφονται με προσοχή (prepared statements) για να μη γίνονται SQL injection. Παραδείγματα: SELECT * FROM orders WHERE user_id = 5; · INSERT INTO users (name) VALUES ("Μαρία");
Database ερωτάται με SQL
— Η cache του server κρατά έτοιμα αποτελέσματα που ζητούνται συχνά ώστε να μη χρειάζεται να ξαναϋπολογιστούν ή να ξαναρωτηθεί η βάση. Η δυσκολία είναι να ανανεώνεται όταν αλλάζουν τα δεδομένα. Παραδείγματα: Redis · Memcached · OPcache της PHP
Backend μπορεί να χρησιμοποιεί Server Cache
Web Server μπορεί να χρησιμοποιεί Server Cache
Reverse Proxy μπορεί να κάνει caching με Server Cache
Database ανακουφίζεται από Server Cache
Performance βελτιώνεται με Server Cache
— Το HTTP δεν θυμάται τον χρήστη από αίτημα σε αίτημα. Το session λύνει το πρόβλημα: ο server κρατά δεδομένα για τον χρήστη (π.χ. ποιος είναι συνδεδεμένος) και του δίνει ένα αναγνωριστικό που ο browser στέλνει πίσω σε κάθε αίτημα, συνήθως σε cookie. Παραδείγματα: $_SESSION["user"] στην PHP · Το καλάθι αγορών ενός επισκέπτη
Backend διαχειρίζεται Session
Session αναγνωρίζεται συνήθως μέσω Cookies
Authentication μπορεί να χρησιμοποιεί Session
Ασφάλεια (10)
— Η ασφάλεια δεν είναι ένα εργαλείο αλλά επίπεδα προστασίας: κρυπτογράφηση της επικοινωνίας, έλεγχος ποιος μπαίνει και τι επιτρέπεται, προστασία από επιθέσεις και ενημερώσεις λογισμικού. Μια αδυναμία σε ένα επίπεδο μπορεί να ακυρώσει τα υπόλοιπα. Παραδείγματα: HTTPS · Δυνατοί κωδικοί και 2FA · Τακτικές ενημερώσεις
Ιστότοπος (Website) χρειάζεται Security
Security ενισχύεται με HTTPS
Security περιλαμβάνει Authentication
Security περιλαμβάνει Authorization
Security περιλαμβάνει Firewall
Security περιλαμβάνει Content Security Policy
Security περιλαμβάνει CORS
Security περιλαμβάνει Rate Limiting
Security αντιμετωπίζει XSS
Security αντιμετωπίζει CSRF
— Η αυθεντικοποίηση απαντά στο «ποιος είσαι;». Ο χρήστης αποδεικνύει την ταυτότητά του με κωδικό, κωδικό μίας χρήσης, δακτυλικό αποτύπωμα ή σύνδεση μέσω τρίτου. Μετά τη σύνδεση, το σύστημα τον θυμάται με session ή token. Παραδείγματα: Φόρμα login · Σύνδεση με Google · Κωδικός από εφαρμογή 2FA
Web Application συχνά απαιτεί Authentication
Backend υλοποιεί Authentication
Authentication μπορεί να χρησιμοποιεί Session
Authentication έπεται Authorization
Authentication διατηρείται συχνά μέσω Cookies
Authentication απαιτεί HTTPS
Security περιλαμβάνει Authentication
— Η εξουσιοδότηση απαντά στο «τι επιτρέπεται να κάνεις;». Ένας χρήστης μπορεί να βλέπει τις δικές του παραγγελίες αλλά όχι των άλλων, και μόνο ο διαχειριστής να αλλάζει τιμές. Παραδείγματα: Ρόλοι: χρήστης, διαχειριστής · Μόνο ο ιδιοκτήτης διαγράφει το άρθρο του
Authentication έπεται Authorization
Security περιλαμβάνει Authorization
— Ο server στέλνει ένα cookie και ο browser το επιστρέφει σε κάθε επόμενο αίτημα προς το ίδιο site. Χρησιμεύει για sessions, προτιμήσεις και παρακολούθηση. Τα σημαντικά cookies πρέπει να έχουν τα χαρακτηριστικά Secure, HttpOnly και SameSite. Παραδείγματα: Cookie PHPSESSID · Επιλογή γλώσσας · Συναίνεση για cookies
Browser αποθηκεύει και αποστέλλει Cookies
Session αναγνωρίζεται συνήθως μέσω Cookies
Authentication διατηρείται συχνά μέσω Cookies
CSRF εκμεταλλεύεται Cookies
Cookies μεταφέρονται σε headers του HTTP
— Ένας browser δεν αφήνει από προεπιλογή ένα script από το ένα site να διαβάσει απαντήσεις από άλλο domain. Με τα CORS headers ο server δηλώνει ποια origins επιτρέπονται. Προστατεύει τον χρήστη, δεν προστατεύει το API από εξωτερικά προγράμματα. Παραδείγματα: Access-Control-Allow-Origin: https://agorasite.gr · Σφάλμα «blocked by CORS policy» στην κονσόλα
Browser επιβάλλει CORS
CORS ρυθμίζει την πρόσβαση στο API
Security περιλαμβάνει CORS
— Με το header CSP ο server λέει στον browser από ποιες πηγές επιτρέπεται να φορτώνονται scripts, στυλ και εικόνες. Έτσι ένα κακόβουλο script που κατάφερε να εισαχθεί στη σελίδα συχνά δεν θα εκτελεστεί. Παραδείγματα: Content-Security-Policy: script-src 'self' cdn.jsdelivr.net
Browser εφαρμόζει Content Security Policy
Security περιλαμβάνει Content Security Policy
XSS μετριάζεται από Content Security Policy
— Στο XSS ο επιτιθέμενος καταφέρνει να μπει δικό του JavaScript στη σελίδα, π.χ. μέσα από ένα σχόλιο που δεν ελέγχθηκε. Το script τρέχει στον browser του θύματος και μπορεί να κλέψει δεδομένα ή να κάνει ενέργειες στο όνομά του. Η άμυνα είναι το escaping της εξόδου και το CSP. Παραδείγματα: Σχόλιο που περιέχει <script>…</script> · htmlspecialchars() στην PHP
XSS εγχέει κακόβουλο περιεχόμενο στο DOM
Security αντιμετωπίζει XSS
XSS μετριάζεται από Content Security Policy
XSS εκμεταλλεύεται JavaScript
— Στο CSRF μια κακόβουλη σελίδα κάνει τον browser ενός συνδεδεμένου χρήστη να στείλει αίτημα προς ένα άλλο site, και ο browser επισυνάπτει αυτόματα τα cookies. Αντιμετωπίζεται με CSRF tokens και cookies SameSite. Παραδείγματα: Κρυφή φόρμα που στέλνει POST προς το site της τράπεζας · CSRF token σε κάθε φόρμα
Security αντιμετωπίζει CSRF
CSRF εκμεταλλεύεται Cookies
— Το firewall ελέγχει ποια κίνηση επιτρέπεται να φτάσει σε έναν server, π.χ. μόνο τα ports 80 και 443. Ένα Web Application Firewall (WAF) εξετάζει και το περιεχόμενο των αιτημάτων για γνωστές επιθέσεις. Παραδείγματα: Κλείσιμο του port της βάσης στο διαδίκτυο · Cloudflare WAF
Security περιλαμβάνει Firewall
Firewall φιλτράρει την κίνηση του Δίκτυο (Network)
Firewall προστατεύει Web Server
— Το rate limiting θέτει όριο στα αιτήματα ανά χρήστη ή IP σε συγκεκριμένο χρόνο. Μειώνει τον κίνδυνο brute force στο login, κατάχρησης του API και υπερφόρτωσης του server. Παραδείγματα: Μέγιστο 5 προσπάθειες login ανά λεπτό · Απάντηση 429 Too Many Requests
API προστατεύεται με Rate Limiting
Security περιλαμβάνει Rate Limiting
Hosting & DevOps (11)
— Το hosting είναι ο υπολογιστής (ή η υπηρεσία) που τρέχει συνεχώς τον web server και αποθηκεύει τα αρχεία και τη βάση του ιστότοπου. Η ποιότητά του επηρεάζει ταχύτητα, διαθεσιμότητα και ασφάλεια. Παραδείγματα: Shared hosting · VPS · Dedicated server
Ιστότοπος (Website) φιλοξενείται σε Web Hosting
Web Hosting παρέχει Web Server
Cloud Hosting είναι τύπος Web Hosting
Deployment γίνεται στο Web Hosting
Uptime εξαρτάται από Web Hosting
— Στο cloud hosting ο ιστότοπος τρέχει σε ελαστική υποδομή: προσθέτεις ή αφαιρείς πόρους όποτε χρειάζεται και πληρώνεις για όσα χρησιμοποιείς. Ταιριάζει σε ιστότοπους με μεταβλητή κίνηση. Παραδείγματα: AWS · Google Cloud · Azure · DigitalOcean
Cloud Hosting είναι τύπος Web Hosting
Cloud Hosting τρέχει συχνά Containers
Cloud Hosting προσφέρει Load Balancer
— Το Git αποθηκεύει κάθε αλλαγή του κώδικα ως «στιγμιότυπο» με συγγραφέα και μήνυμα. Επιτρέπει επιστροφή σε παλιά έκδοση, παράλληλη δουλειά σε κλάδους και συνεργασία πολλών ατόμων. Παραδείγματα: git commit · git branch · GitHub / GitLab
CI/CD ενεργοποιείται από αλλαγές σε Git
— Σε κάθε αλλαγή στο Git, το CI/CD τρέχει αυτόματα τεστ και build (CI) και, αν όλα πάνε καλά, δημοσιεύει τη νέα έκδοση (CD). Έτσι οι αλλαγές βγαίνουν συχνά και με λιγότερο ρίσκο. Παραδείγματα: GitHub Actions · GitLab CI · Jenkins
CI/CD αυτοματοποιεί Deployment
CI/CD χτίζει images με Docker
CI/CD ενεργοποιείται από αλλαγές σε Git
— Το Docker πακετάρει την εφαρμογή μαζί με τις εξαρτήσεις της (έκδοση PHP, επεκτάσεις κ.λπ.) σε ένα image. Το ίδιο image τρέχει με τον ίδιο τρόπο στον υπολογιστή του προγραμματιστή και στον server. Παραδείγματα: Dockerfile · docker compose up · Docker Hub
Docker δημιουργεί και εκτελεί Containers
CI/CD χτίζει images με Docker
— Ένα container είναι ένα απομονωμένο περιβάλλον όπου τρέχει μια εφαρμογή, ελαφρύτερο από μια ολόκληρη εικονική μηχανή. Πολλά containers μοιράζονται το ίδιο λειτουργικό σύστημα αλλά δεν βλέπουν το ένα το άλλο. Παραδείγματα: Container για PHP · Container για MySQL · Kubernetes
Cloud Hosting τρέχει συχνά Containers
Docker δημιουργεί και εκτελεί Containers
Containers απλοποιούν Deployment
— Το πιστοποιητικό δένει ένα δημόσιο κλειδί με ένα domain και έχει υπογραφεί από αρχή πιστοποίησης που εμπιστεύεται ο browser. Λήγει και πρέπει να ανανεώνεται, αλλιώς οι επισκέπτες βλέπουν προειδοποίηση ασφαλείας. Παραδείγματα: Let’s Encrypt (δωρεάν, αυτόματη ανανέωση) · Wildcard *.example.com
TLS βασίζεται σε SSL/TLS Certificate
SSL/TLS Certificate εκδίδεται για Domain Name
SSL/TLS Certificate εγκαθίσταται στον Web Server
— Το monitoring ελέγχει συνεχώς αν ο ιστότοπος λειτουργεί και πόσο γρήγορα, και ειδοποιεί όταν κάτι ξεφεύγει, ώστε το πρόβλημα να βρεθεί πριν το αναφέρουν οι χρήστες. Παραδείγματα: Έλεγχος κάθε λεπτό ότι η αρχική απαντά με 200 · Ειδοποίηση όταν ο server ξεπερνά το 90% CPU
Monitoring παρακολουθεί Uptime
Monitoring αξιοποιεί Logging
Monitoring παρακολουθεί Web Server
Monitoring μετρά Core Web Vitals
— Τα logs καταγράφουν τι έγινε και πότε: ποια αιτήματα ήρθαν, ποια λάθη προέκυψαν και ποιος συνδέθηκε. Είναι το πρώτο μέρος που κοιτάμε όταν κάτι χαλάσει ή όταν ερευνούμε περιστατικό ασφαλείας. Παραδείγματα: Apache access.log · error.log της PHP
Monitoring αξιοποιεί Logging
Logging καταγράφει αιτήματα του Web Server
Logging καταγράφει σφάλματα του Backend
— Το uptime μετρά το ποσοστό του χρόνου που ο ιστότοπος ήταν διαθέσιμος. Το 99,9% σημαίνει περίπου 8,8 ώρες εκτός λειτουργίας τον χρόνο, ενώ το 99% περίπου 3,7 ημέρες. Παραδείγματα: 99,9% uptime · SLA του hosting
Load Balancer βελτιώνει Uptime
Uptime εξαρτάται από Web Hosting
Monitoring παρακολουθεί Uptime
— Το deployment είναι η μετάβαση ενός νέου κώδικα από τον υπολογιστή του προγραμματιστή στον server όπου τον βλέπουν οι χρήστες. Μπορεί να γίνει χειροκίνητα ή αυτόματα, με δυνατότητα γρήγορης επαναφοράς αν κάτι πάει στραβά. Παραδείγματα: Ανέβασμα αρχείων με FTP · Αυτόματο deploy μετά από commit · Rollback στην προηγούμενη έκδοση
Ιστότοπος (Website) δημοσιεύεται μέσω Deployment
Containers απλοποιούν Deployment
CI/CD αυτοματοποιεί Deployment
Deployment γίνεται στο Web Hosting
Απόδοση (9)
— Η απόδοση περιγράφει πόσο γρήγορα φορτώνει και αποκρίνεται η σελίδα. Επηρεάζεται από όλα τα επίπεδα: δίκτυο, server, βάση δεδομένων, μέγεθος αρχείων και JavaScript. Επηρεάζει τις μετατροπές, το SEO και την εμπειρία του χρήστη. Παραδείγματα: Σελίδα που ανοίγει σε 1 δευτερόλεπτο αντί για 5 · Έλεγχος με Lighthouse
Ιστότοπος (Website) αξιολογείται ως προς Performance
Latency επηρεάζει Performance
Performance μετράται με Core Web Vitals
Performance βελτιώνεται με Server Cache
Compression βελτιώνει Performance
Browser Cache μπορεί να βελτιώσει Performance
Lazy Loading βελτιώνει Performance
Image Optimization βελτιώνει Performance
— Τα Core Web Vitals είναι τρεις μετρικές της Google που αποτυπώνουν την εμπειρία του χρήστη: πόσο γρήγορα εμφανίζεται το κύριο περιεχόμενο (LCP), πόσο σταθερή είναι η διάταξη (CLS) και πόσο γρήγορα αντιδρά στις ενέργειες (INP). Λαμβάνονται υπόψη στην κατάταξη αναζήτησης. Παραδείγματα: PageSpeed Insights · Search Console → Core Web Vitals
SEO επηρεάζεται από Core Web Vitals
Monitoring μετρά Core Web Vitals
Performance μετράται με Core Web Vitals
Core Web Vitals περιλαμβάνει Largest Contentful Paint
Core Web Vitals περιλαμβάνει Cumulative Layout Shift
Core Web Vitals περιλαμβάνει Interaction to Next Paint
— Το LCP μετρά πότε εμφανίζεται το μεγαλύτερο ορατό στοιχείο, συνήθως η κεντρική εικόνα ή ο μεγάλος τίτλος. Βελτιώνεται με γρήγορο server, βελτιστοποιημένες εικόνες και αποφυγή αρχείων που μπλοκάρουν την εμφάνιση. Παραδείγματα: Hero εικόνα 2 MB → 150 KB · Καλός χρόνος: κάτω από 2,5 s
Server-Side Rendering μπορεί να βελτιώσει Largest Contentful Paint
Core Web Vitals περιλαμβάνει Largest Contentful Paint
Largest Contentful Paint βελτιώνεται με Image Optimization
Largest Contentful Paint επηρεάζεται από Latency
— Το CLS μετρά πόσο «πηδούν» τα στοιχεία ενώ φορτώνει η σελίδα. Συμβαίνει όταν μια εικόνα ή διαφήμιση εμφανίζεται χωρίς δεσμευμένο χώρο και σπρώχνει το κείμενο προς τα κάτω, ώστε ο χρήστης να πατά κατά λάθος κάτι άλλο. Παραδείγματα: Εικόνα χωρίς width/height · Banner που εμφανίζεται με καθυστέρηση
Core Web Vitals περιλαμβάνει Cumulative Layout Shift
Cumulative Layout Shift επηρεάζεται από ασταθείς διαστάσεις στη CSS
Image Optimization μπορεί να μειώσει Cumulative Layout Shift
— Το INP μετρά πόσο χρόνο περνά από ένα κλικ, ένα άγγιγμα ή ένα πάτημα πλήκτρου μέχρι να φανεί η αντίδραση στην οθόνη. Αργεί όταν η JavaScript είναι βαριά και κρατά απασχολημένο τον browser. Παραδείγματα: Κουμπί που αργεί να ανοίξει το μενού · Καλός χρόνος: κάτω από 200 ms
Core Web Vitals περιλαμβάνει Interaction to Next Paint
Interaction to Next Paint επηρεάζεται από βαριά εκτέλεση της JavaScript
— Ο server συμπιέζει κείμενο (HTML, CSS, JS, JSON) πριν το στείλει και ο browser το αποσυμπιέζει. Το μέγεθος μειώνεται συχνά πάνω από 70%, άρα φτάνει γρηγορότερα. Παραδείγματα: Content-Encoding: br · gzip στον Apache ή Nginx
Compression εφαρμόζεται μέσω headers του HTTP
Compression ενεργοποιείται στον Web Server
Compression μειώνει τη χρήση του Bandwidth
Compression βελτιώνει Performance
— Ο browser αποθηκεύει τοπικά αρχεία που δεν αλλάζουν συχνά, όπως λογότυπα, CSS και JS, και στις επόμενες επισκέψεις δεν τα ξανακατεβάζει. Ο server ορίζει τη διάρκεια με headers όπως Cache-Control. Παραδείγματα: Cache-Control: max-age=31536000 · ETag
Browser διατηρεί Browser Cache
Browser Cache ελέγχεται από headers του HTTP
Browser Cache μπορεί να βελτιώσει Performance
— Με το lazy loading οι εικόνες και τα iframes που βρίσκονται κάτω από την ορατή περιοχή φορτώνονται μόνο όταν ο χρήστης πλησιάσει σε αυτά. Εξοικονομεί δεδομένα και χρόνο, αλλά δεν πρέπει να εφαρμόζεται στο κύριο στοιχείο πάνω από την πρώτη οθόνη (LCP). Παραδείγματα: <img loading="lazy"> · Ατέλειωτο scroll σε γκαλερί
Lazy Loading συμπληρώνει Image Optimization
Lazy Loading βελτιώνει Performance
Lazy Loading υποστηρίζεται από Browser
— Οι εικόνες είναι συχνά το μεγαλύτερο μέρος του βάρους μιας σελίδας. Βελτιστοποιούνται με σύγχρονες μορφές (WebP, AVIF), σωστές διαστάσεις, συμπίεση και προσαρμογή στο μέγεθος της οθόνης. Παραδείγματα: PNG 2 MB → WebP 150 KB · srcset για διαφορετικά πλάτη οθόνης
Largest Contentful Paint βελτιώνεται με Image Optimization
Image Optimization μπορεί να μειώσει Cumulative Layout Shift
Lazy Loading συμπληρώνει Image Optimization
Image Optimization εξοικονομεί Bandwidth
Image Optimization βελτιώνει Performance
Subscribe to My Newsletter
Get the latest updates, free templates, and exclusive offers straight to your inbox.