Το πρόβλημα, ένα site που είχε σταματήσει στο 2016
Το παλιό site δεν ήταν κακό για την εποχή του. Απλώς η εποχή του είχε περάσει, και τα συμπτώματα ήταν τα κλασικά.
- Αργή φόρτωση, με Lighthouse σε κινητό στα χαμηλά εξήντα. Για έναν σύλλογο που τον ψάχνουν από το τηλέφωνο, έξω, πριν μπουν στο αυτοκίνητο, αυτό είναι το πρώτο εμπόδιο.
- Cookie banner στην είσοδο, το τίμημα για analytics που δεν χρησιμοποιούσε κανείς.
- Καμία δυναμική πληροφορία. Οι παίκτες τηλεφωνούσαν στη ρεσεψιόν για να ρωτήσουν αν παίζονται τα γήπεδα. Η ίδια ερώτηση, δεκάδες φορές την ημέρα, από ανθρώπους που ήθελαν απλώς ένα ναι ή ένα όχι.
- Στατικό περιεχόμενο χωρίς blog, χωρίς ανακοινώσεις, χωρίς λόγο να επιστρέψει κανείς.
- Παλιές εικόνες χωρίς WebP και χωρίς responsive μεγέθη, με το layout να αναπηδά σε κάθε φόρτωση.
Η λύση, Symbols CMS πάνω από το Cloudflare edge
Χτίσαμε το νέο site σε Symbols CMS, τη δική μας πλατφόρμα διαχείρισης περιεχομένου, με φιλοξενία σε Cloudflare Pages. Δύο στόχοι, με αυτή τη σειρά: ταχύτητα, και χρήσιμη πληροφορία στον επισκέπτη. Το δεύτερο είναι εκείνο που άλλαξε τη συμπεριφορά του κόσμου.
Ο δείκτης «παίξιμα γήπεδα»
Ένα weather widget που δείχνει θερμοκρασία και υγρασία είναι διακοσμητικό. Ο παίκτης του τένις δεν θέλει μετεωρολογικά δεδομένα, θέλει απόφαση. Οπότε δεν δείξαμε τον καιρό, δείξαμε τι σημαίνει ο καιρός για τα συγκεκριμένα γήπεδα:
Δίπλα στον δείκτη υπάρχουν και τα αναλυτικά: τρέχουσες συνθήκες με θερμοκρασία, αίσθηση, υγρασία, πίεση και δείκτη υπεριώδους, η κατεύθυνση και η ένταση του ανέμου — που στο outdoor τένις μετράει περισσότερο από τη θερμοκρασία — και ωριαία πρόβλεψη για τις επόμενες ώρες, ώστε να διαλέξει κανείς πότε θα κατεβεί.
Το αποτέλεσμα ήταν μετρήσιμο εκεί που δεν το περιμέναμε: σημαντική μείωση των τηλεφωνημάτων στη ρεσεψιόν. Οι παίκτες εξυπηρετούνται μόνοι τους, και το προσωπικό κάνει τη δουλειά του.
Γιατί ο ζωντανός καιρός δεν επιβραδύνει τη σελίδα
Το προφανές λάθος σε ένα τέτοιο widget είναι να καλεί το μετεωρολογικό API σε κάθε φόρτωση σελίδας. Τότε η ταχύτητα του site γίνεται όμηρος ενός τρίτου server, και το κόστος του API μεγαλώνει με την επισκεψιμότητα. Η τιμή γράφεται μία φορά στο Cloudflare KV και σερβίρεται από το edge:
// functions/api/weather.ts — ο καιρός του Καβουρίου, μία φορά ανά 15 λεπτά
const TTL = 15 * 60; // δευτερόλεπτα
export const onRequest: PagesFunction<Env> = async ({ env }) => {
// Πρώτα το edge: αν υπάρχει φρέσκια τιμή, δεν αγγίζουμε καθόλου το API.
const cached = await env.WEATHER.get('kavouri', 'json');
if (cached) return Response.json(cached);
const obs = await fetchObservation(env.METEO_KEY);
const payload = {
...obs,
playable: playability(obs), // 'ok' | 'marginal' | 'no' — οι κανόνες του συλλόγου
updatedAt: new Date().toISOString(),
};
// Η λήξη είναι δουλειά του KV, όχι δική μας με cron.
await env.WEATHER.put('kavouri', JSON.stringify(payload), { expirationTtl: TTL });
return Response.json(payload);
};Δύο γραμμές κάνουν όλη τη διαφορά. Το get πρώτα, ώστε ο επισκέπτης να παίρνει απάντηση από τον κόμβο που του είναι πιο κοντά. Και το expirationTtl, που σημαίνει ότι κανείς δεν χρειάζεται να θυμάται να καθαρίσει την παλιά τιμή.
Απόδοση, Lighthouse 95+ και φόρτωση κάτω από 300ms
Το νέο site κρατάει σταθερά Lighthouse Performance πάνω από 95, και η αρχική φορτώνει σε λιγότερο από 300ms. Δεν υπάρχει κάποιο τρικ, υπάρχουν πέντε βαρετές αποφάσεις.
Οι σελίδες είναι προ-παραγόμενες και σερβίρονται από το δίκτυο του Cloudflare, δηλαδή από το κοντινότερο data center και όχι από «κάπου στο cloud». Δυναμικά μένουν μόνο εκείνα που πρέπει: ο καιρός και οι ανακοινώσεις. Οι εικόνες περνούν από το Image Engine, που παράγει αυτόματα τρία responsive μεγέθη και WebP, με width και height πάντα ορισμένα ώστε το CLS να μένει στο μηδέν. Το κρίσιμο CSS είναι inline, η JavaScript σπασμένη και φορτώνεται με καθυστέρηση, και οι γραμματοσειρές σερβίρονται με font-display: swap.
Cookieless analytics, και το banner φεύγει
Καταργήσαμε εντελώς το cookie consent banner — όχι κρύβοντάς το, αλλά αφαιρώντας τον λόγο ύπαρξής του. Η μέτρηση επισκεψιμότητας γίνεται μέσω της xolqy.com, της cookieless πλατφόρμας analytics της Symbols House of Brands: μηδέν cookies στον browser του επισκέπτη, καμία συγκατάθεση να ζητηθεί, φιλοξενία δεδομένων στην Ευρώπη, και — το πιο πρακτικό — πλήρης εικόνα της κίνησης αντί για το σαράντα με εξήντα τοις εκατό που χάνεται όταν ο κόσμος πατά «απόρριψη».
Blog και δυναμικό περιεχόμενο
Ένα site που δεν αλλάζει δεν έχει λόγο να το επισκεφθεί κανείς δεύτερη φορά. Το νέο έχει blog με κατηγορίες για τεχνική τένις, νέα διοργανώσεων και ανακοινώσεις του συλλόγου, δυναμικό πρόγραμμα και διαθεσιμότητα γηπέδων, και feed ανακοινώσεων. Είναι έτοιμο για ελληνικά και αγγλικά, που στο Καβούρι δεν είναι πολυτέλεια: η περιοχή έχει σημαντικό κοινό από πρεσβείες και μόνιμους κατοίκους από το εξωτερικό.
SEO, με δομημένα δεδομένα που λένε την αλήθεια
Ένας τοπικός σύλλογος κερδίζει ή χάνει στην αναζήτηση από τη σαφήνεια. Δηλώνουμε στη Google τι είναι το σωματείο, πού βρίσκεται και τι προσφέρει, με τον πιο συγκεκριμένο τύπο που υπάρχει:
// src/pages/index.astro — τι λέμε στη Google για το σωματείο
const schema = {
'@context': 'https://schema.org',
'@type': 'SportsClub', // υποκατηγορία του LocalBusiness, δεν χρειάζονται και τα δύο
name: 'Kavouri Tennis Club',
sport: 'Tennis',
url: 'https://kavouritennisclub.gr/',
address: {
'@type': 'PostalAddress',
addressLocality: 'Καβούρι',
addressRegion: 'Αττική',
addressCountry: 'GR',
},
// Οι ανέσεις είναι ό,τι ρωτάει ο παίκτης, άρα και ό,τι γράφει στην αναζήτηση.
amenityFeature: [
{ '@type': 'LocationFeatureSpecification', name: 'Γήπεδα με φωτισμό', value: true },
{ '@type': 'LocationFeatureSpecification', name: 'Προπονητές', value: true },
],
openingHoursSpecification: OPENING_HOURS,
};Το SportsClub είναι υποκατηγορία του LocalBusiness, οπότε δηλώνοντας το ένα παίρνεις και τη σημασία του άλλου — διπλή δήλωση απλώς μπερδεύει τους crawlers. Το amenityFeature απαντά στα ερωτήματα που όντως γράφει ο κόσμος, τύπου «γήπεδα τένις με φωτισμό κοντά μου».
Πάνω από αυτό: sitemaps, OG tags και canonical URLs σε κάθε σελίδα, landing pages για τις γειτονικές περιοχές —Βούλα, Γλυφάδα, Βάρκιζα— στρατηγική περιεχομένου γύρω από long-tail αναζητήσεις για τένις στην Αττική, περιγραφικό alt text σε κάθε εικόνα, και εσωτερική διασύνδεση που στέλνει authority στις σελίδες που φέρνουν εγγραφές: μαθήματα, μέλη, διοργανώσεις.
Σχεδιασμός που ταιριάζει στον σύλλογο
Δεν χρησιμοποιήθηκε template. Το design φτιάχτηκε για το συγκεκριμένο brand: σκούρα, premium αισθητική που τιμά την ιστορικότητα του σωματείου, λεπτή τυπογραφία με άπλετο λευκό χώρο, και το ίδιο το γήπεδο ως βασικό οπτικό στοιχείο — γιατί είναι όμορφο και δεν χρειάζεται stock φωτογραφία. Η αισθητική παραμένει ίδια σε κινητό, tablet και desktop, και όλα είναι συμβατά με WCAG 2.2: σημεία αφής 44×44 pixel, ορατά focus rings, φιλικό σε screen readers.
Τι κερδίζει ένας σύλλογος από τέτοιο stack
Η μετάβαση δεν είναι μόνο ταχύτητα. Είναι μηδέν downtime στο cutover, με την αλλαγή DNS να κρατάει δευτερόλεπτα. Είναι μηδέν πάγια έξοδα σε third-party εργαλεία, γιατί analytics, cookie banner SaaS και CDN έφυγαν από τον προϋπολογισμό. Είναι συντήρηση από άνθρωπο και όχι από ουρά αιτημάτων. Και είναι συνεχείς βελτιώσεις σε απόδοση και λειτουργίες χωρίς επιπλέον χρέωση, γιατί την πλατφόρμα τη συντηρούμε εμείς.
Έχετε αθλητικό σωματείο, σχολή ή τοπική επιχείρηση στα Νότια Προάστια με site που έμεινε στο 2015; Δείτε την υπηρεσία μας κατασκευή ιστοσελίδων ή ζητήστε προσφορά, να δούμε μαζί τι κερδίζετε.
