Το πρόβλημα, ένα site φτιαγμένο για γραφείο
Το παλιό site δεν ήταν άσχημο. Ήταν φτιαγμένο για κάποιον που κάθεται μπροστά σε υπολογιστή με σταθερή σύνδεση, δηλαδή για κάποιον που δεν υπάρχει σε αυτή την αγορά.
Φόρτωνε σε πάνω από οκτώ δευτερόλεπτα σε 4G, και στη Μύκονο τον Αύγουστο το σήμα είναι αδύναμο εξ ορισμού: πολλοί άνθρωποι, λίγες κυψέλες. Ήταν μόνο στα ελληνικά, όταν το 80% των πελατών είναι ξένοι επισκέπτες. Η φόρμα κράτησης είχε πολλά βήματα και ασάφεια στα δύο πράγματα που μετράνε — ημερομηνίες και σημείο παραλαβής. Και δεν είχε καμία ορατότητα σε αναζητήσεις τύπου «car rental Mykonos», που είναι κυριολεκτικά ο τρόπος με τον οποίο ψάχνει ο πελάτης.
Η λύση, στατικό site και τρία βήματα
Χτίσαμε το site από την αρχή ως στατικό με Eleventy, σε Cloudflare Pages. Η επιλογή δεν είναι ιδεολογική, είναι απάντηση στο δίκτυο: όταν η σύνδεση είναι κακή, το μόνο που βοηθάει είναι λιγότερα και μικρότερα αρχεία, από κοντινό κόμβο. Δεν υπάρχει βάση να ερωτηθεί, δεν υπάρχει server να ξυπνήσει.
Η κράτηση έγινε τρία βήματα, και τα τρία απαντούν σε ερώτηση που έχει ο πελάτης στο κεφάλι του: πότε το θέλει, πού το παραλαμβάνει και το παραδίδει, και τι κατηγορία οχήματος. Η διαθεσιμότητα ελέγχεται πάνω στο ημερολόγιο του στόλου μέσα στη ροή, πριν σταλεί η φόρμα, οπότε δεν κλείνεται όχημα που είναι ήδη δεσμευμένο — μηδέν διπλές κρατήσεις.
Προστέθηκαν επίσης στοχευμένες landing pages ανά σημείο παραλαβής, για τις αναζητήσεις που όντως γίνονται — «car rental Mykonos airport», «car rental Mykonos port» — και GA4 με events στις κλήσεις και στις υποβολές φόρμας, ώστε να ξέρουμε από ποια σελίδα ήρθε η κράτηση.
Οι εικόνες, εκεί κρίνεται το 4G
Σε ένα site ενοικίασης αυτοκινήτων το βάρος είναι σχεδόν εξ ολοκλήρου φωτογραφίες οχημάτων. Κάθε εικόνα σερβίρεται σε AVIF, με WebP ως εφεδρικό και JPG για ό,τι δεν υποστηρίζει κανένα από τα δύο:
<!-- src/_includes/vehicle-photo.njk — τρεις μορφές, δύο μεγέθη, ένα μέγεθος πλαισίου -->
<picture>
<source type="image/avif"
srcset="/i/{{ car.slug }}-480.avif 480w, /i/{{ car.slug }}-960.avif 960w"
sizes="(max-width: 700px) 100vw, 480px">
<source type="image/webp"
srcset="/i/{{ car.slug }}-480.webp 480w, /i/{{ car.slug }}-960.webp 960w"
sizes="(max-width: 700px) 100vw, 480px">
<!-- width και height πάντα: ο browser κρατάει τον χώρο πριν κατέβει η εικόνα -->
<img src="/i/{{ car.slug }}-960.jpg" width="960" height="640"
alt="{{ car.name }} προς ενοικίαση στη Μύκονο"
loading="lazy" decoding="async">
</picture>Δύο λεπτομέρειες κάνουν τη διαφορά ανάμεσα στο 90 και στο 100. Το sizes λέει στον browser ότι σε κινητό η εικόνα καταλαμβάνει όλο το πλάτος, οπότε κατεβάζει την εκδοχή των 480 και όχι των 960 — στα μισά bytes. Και το width με το height σημαίνουν ότι το layout δεν αναπηδά όταν φτάσει η φωτογραφία, που είναι το μισό CLS σε κάθε τέτοιο site.
Τρεις γλώσσες, σωστά
Το πολυγλωσσικό δεν είναι μετάφραση. Η μετάφραση είναι το εύκολο κομμάτι, και το μόνο που κάνουν τα περισσότερα sites.
Ο κανόνας που σπάει σχεδόν παντού είναι η αμοιβαιότητα: κάθε έκδοση πρέπει να δηλώνει όλες τις εκδόσεις, τον εαυτό της συμπεριλαμβανομένου. Αν η γερμανική δηλώνει την ελληνική αλλά η ελληνική δεν δηλώνει τη γερμανική, η Google δεν διορθώνει τη διαφορά — αγνοεί όλη την ομάδα. Οπότε δεν το γράφουμε με το χέρι, το παράγει το build:
<!-- src/_includes/head.njk — παράγεται από το build, όχι από άνθρωπο -->
{% for alt in page.alternates %}
<link rel="alternate" hreflang="{{ alt.lang }}" href="{{ site.url }}{{ alt.url }}">
{% endfor %}
<!-- Όποιος δεν ταιριάζει σε καμία από τις τρεις γλώσσες, πάει στα αγγλικά. -->
<link rel="alternate" hreflang="x-default" href="{{ site.url }}/en{{ page.slugEn }}/">
<!-- Κάθε γλώσσα είναι κανονική για τον εαυτό της, όχι για την ελληνική. -->
<link rel="canonical" href="{{ site.url }}{{ page.url }}">Η τελευταία γραμμή είναι το δεύτερο συνηθισμένο λάθος: να δείχνουν όλες οι γλώσσες canonical στην ελληνική έκδοση. Τότε η Google σβήνει τις άλλες δύο από το ευρετήριο, και το πολυγλωσσικό site δουλεύει μόνο για το 20% του κοινού.
Πέρα από τα τεχνικά, το περιεχόμενο είναι τοπικοποιημένο και όχι μεταφρασμένο: η δομή των URL είναι στη γλώσσα του αναγνώστη, και τα κείμενα απαντούν σε αυτό που ρωτά ο συγκεκριμένος επισκέπτης — ο Γερμανός ρωτά για ασφάλεια και για το δίπλωμα, ο Έλληνας για τιμές και για παράδοση στο λιμάνι.
Τι έδωσε το πρώτο τρίμηνο
+40% κρατήσεις, με PageSpeed 100/100 και φόρτωση κάτω από ένα δευτερόλεπτο σε 4G. Μηδέν διπλές κρατήσεις στη διάρκεια της σεζόν. Τρίτη θέση στο Google για «car rental Mykonos», και ορατότητα σε αγγλικές και γερμανικές αναζητήσεις που πριν δεν υπήρχε καθόλου.
Και το νούμερο που εξηγεί όλα τα άλλα: το 70% των επισκεπτών από κινητό μένει πάνω από δύο λεπτά στο site, όταν πριν έφευγαν σε λιγότερο από τριάντα δευτερόλεπτα. Δεν έγινε το περιεχόμενο πιο συναρπαστικό. Απλώς πρόλαβαν να το δουν.
Γιατί η ταχύτητα είναι εμπορικό, όχι τεχνικό ζήτημα
Στον τουρισμό, η απόφαση παίρνεται σε συνθήκες που κανένα analytics dashboard δεν δείχνει: στην ουρά του λιμανιού, με τη βαλίτσα, με μία μπάρα σήμα και με τρεις καρτέλες ανοιχτές. Ο ανταγωνιστής δεν είναι το καλύτερο site, είναι το site που πρόλαβε να φορτώσει.
Έχετε τουριστική επιχείρηση με site που φτιάχτηκε για desktop; Ζητήστε προσφορά και δείτε τι κάνουμε στην κατασκευή ιστοσελίδων.
