Πρώτα για κινητό,
και πραγματικά γρήγορες

Όχι, μια responsive ιστοσελίδα προσαρμόζει τη διάταξή της στην οθόνη, ενώ μια ιστοσελίδα mobile-first σχεδιάστηκε και βελτιστοποιήθηκε για το κινητό από την αρχή.

Πολλές responsive ιστοσελίδες εξακολουθούν να στέλνουν σε ένα κινητό σελίδα μεγέθους desktop και απλώς στοιβάζουν τις στήλες, με εικόνες πλήρους πλάτους, βαριά scripts και μενού φτιαγμένα για ποντίκι. Το αποτέλεσμα φαίνεται μια χαρά σε ένα στενό παράθυρο browser και μοιάζει αργό στο χέρι ενός πελάτη μέσα στο τρένο. Το mobile-first αντιστρέφει τη διαδικασία. Αποφασίζουμε τι πρέπει να λέει η πρώτη οθόνη στο κινητό, πώς φτάνει ο αντίχειρας στο κύριο κουμπί και τι μπορεί να φορτώσει αργότερα, και μετά επεκτείνουμε τη διάταξη για μεγαλύτερες οθόνες. Κάθε ιστοσελίδα mobile-first είναι responsive, αλλά μόνο κάποιες responsive ιστοσελίδες είναι mobile-first, και η διαφορά φαίνεται πιο καθαρά σε κινητά μεσαίας κατηγορίας και σε ασταθείς συνδέσεις.

Στόχος είναι το κύριο περιεχόμενο να εμφανίζεται μέσα σε 2,5 δευτερόλεπτα σε ένα κινητό μεσαίας κατηγορίας με 4G, που είναι το όριο που χρησιμοποιεί η Google για καλό largest contentful paint.

Η Google εξετάζει επίσης πόσο γρήγορα αντιδρά η σελίδα σε ένα πάτημα, με στόχο τα 200 χιλιοστά του δευτερολέπτου για το interaction to next paint, και πόσο πηδά η διάταξη κατά τη φόρτωση. Για να πιάνουμε αυτούς τους αριθμούς σταθερά, συμφωνούμε στην αρχή του έργου έναν προϋπολογισμό απόδοσης: ένα ανώτατο όριο για το βάρος της σελίδας, τον αριθμό αιτημάτων, τις γραμματοσειρές και τα scripts τρίτων. Κάθε σχεδιαστική απόφαση ελέγχεται με βάση αυτόν, ώστε η ταχύτητα να είναι περιορισμός κατά την κατασκευή και όχι συμμάζεμα εκ των υστέρων. Για να δείτε πού βρίσκεται η τωρινή σας ιστοσελίδα, ξεκινήστε από τα δεδομένα πεδίου στο Google Search Console, και η δουλειά μας στα Core Web Vitals καλύπτει τη διόρθωση.

Για τις περισσότερες επιχειρήσεις που απευθύνονται σε καταναλωτές τα κινητά φέρνουν την πλειονότητα των επισκέψεων, αλλά ο μόνος αριθμός που μετράει είναι ο δικός σας, και υπάρχει ήδη στα analytics σας.

Στο Google Analytics, η αναφορά κατηγορίας συσκευής δείχνει την κατανομή ανάμεσα σε κινητό, desktop και tablet, μαζί με τα ποσοστά μετατροπών για το καθένα. Αυτός ο δεύτερος αριθμός είναι συχνά ο πιο αποκαλυπτικός. Αν τα κινητά φέρνουν τους περισσότερους επισκέπτες αλλά το desktop φέρνει τα περισσότερα αιτήματα, η εμπειρία στο κινητό συνήθως χάνει κόσμο, και δεν φταίει η αδιαφορία του κοινού. Οι ιστοσελίδες B2B βλέπουν μερικές φορές περισσότερη επισκεψιμότητα από desktop σε ώρες γραφείου, κάτι που αλλάζει τις προτεραιότητες αλλά σπάνια καταργεί την ανάγκη για καλή εκδοχή στο κινητό, γιατί ο κόσμος ψάχνει στο κινητό και επιστρέφει αργότερα. Εξετάζουμε αυτά τα δεδομένα την πρώτη εβδομάδα ενός έργου και τα χρησιμοποιούμε για να αποφασίσουμε ποιες σελίδες και διαδρομές βελτιστοποιούμε πρώτα.

Οι συνήθεις αιτίες είναι υπερμεγέθεις εικόνες, πάρα πολύ JavaScript, αργές web γραμματοσειρές και tags τρίτων που φορτώνουν πριν από το περιεχόμενο.

Οι εικόνες είναι το πιο συχνό πρόβλημα: μια φωτογραφία εξαγμένη για μεγάλη οθόνη desktop μπορεί να ζυγίζει πολλές φορές περισσότερο από όσο χρειάζεται ένα κινητό, γι’ αυτό σερβίρουμε σύγχρονα formats όπως AVIF και WebP σε μεγέθη που ταιριάζουν στη συσκευή. Η JavaScript είναι ο δεύτερος ένοχος, γιατί τα κινητά έχουν πιο αργούς επεξεργαστές και κάθε script πρέπει να επεξεργαστεί πριν η σελίδα μπορέσει να αντιδράσει σε ένα πάτημα. Widgets συνομιλίας, tracking pixels και ενσωματωμένα βίντεο προσθέτουν βάρος που οι επισκέπτες δεν ζήτησαν ποτέ. Μετράει και η απόκριση του server, ειδικά σε φθηνή κοινόχρηστη φιλοξενία. Μια κατασκευή mobile-first τα αντιμετωπίζει όλα μαζί, γι’ αυτό συνήθως αποδίδει καλύτερα από μια γρήγορη ιστοσελίδα desktop που στριμώχτηκε σε μικρή οθόνη.

Εν μέρει: διορθώσεις στην απόδοση και τη χρηστικότητα μπορούν να αλλάξουν ριζικά την εμπειρία στο κινητό χωρίς να ξεκινήσετε από την αρχή, αν και μια πραγματικά mobile-first διάταξη συνήθως έρχεται με επανασχεδιασμό.

Τα πιο γρήγορα κέρδη είναι η παράδοση των εικόνων, το καθάρισμα των scripts, η φόρτωση των γραμματοσειρών και η αφαίρεση tags τρίτων που κοστίζουν περισσότερο από όσο αποδίδουν. Στόχοι αφής, πεδία φορμών και μενού μπορούν συχνά να ξαναδουλευτούν μέσα στα υπάρχοντα templates. Αυτό που μια μετασκευή δεν αλλάζει εύκολα είναι η βασική δομή, αν η σελίδα σχεδιάστηκε γύρω από μια φαρδιά οθόνη και το σημαντικότερο μήνυμα βρίσκεται στη μέση της σελίδας στο κινητό. Ξεκινάμε με έλεγχο των κύριων σελίδων σας σε πραγματικές συσκευές και μετά προτείνουμε είτε στοχευμένες διορθώσεις είτε ανακατασκευή, με σαφή εικόνα του τι θα κέρδιζε η καθεμία. Πολλοί πελάτες κάνουν πρώτα τις διορθώσεις και σχεδιάζουν τον επανασχεδιασμό για αργότερα.

Δοκιμάζουμε σε πραγματικά κινητά με περιορισμένες συνδέσεις, όχι μόνο σε ένα στενό παράθυρο browser στο desktop.

Οι συσκευές μας καλύπτουν πρόσφατα και παλαιότερα iPhone και κινητά Android σε διάφορα μεγέθη οθόνης, γιατί μια σελίδα που λειτουργεί σε μια καινούργια ναυαρχίδα μπορεί να κολλάει σε ένα μοντέλο μεσαίας κατηγορίας τριών ετών. Προσομοιώνουμε αργό 4G για να δούμε τι πραγματικά περιμένει ένας επισκέπτης στο τρένο ή σε μια εκδήλωση. Κάθε βασική διαδρομή ελέγχεται με το χέρι: ανάγνωση μιας σελίδας με τον έναν αντίχειρα, άνοιγμα του μενού, συμπλήρωση φόρμας με το πληκτρολόγιο της οθόνης και ολοκλήρωση κράτησης ή αγοράς. Παράλληλα με τους χειροκίνητους ελέγχους, εργαλεία εργαστηρίου μετρούν τη φόρτωση και τη σταθερότητα της διάταξης σε σχέση με τον προϋπολογισμό απόδοσης. Μετά το λανσάρισμα, τα δεδομένα πεδίου από πραγματικούς επισκέπτες επιβεβαιώνουν αν τα αποτελέσματα κρατούν, και προσαρμόζουμε αν δεν κρατούν.