Μοντέρνο Web Design, Loading Times & SEO

Τετάρτη, 04-01-23, Nick Zoumpoulis

Όταν μιλάμε για κατασκευή ιστοσελίδων, οι επιλογές και οι τεχνολογίες που μπορούμε να χρησιμοποιήσουμε, είναι παραπάνω από αρκετές. Μοντέρνα γραφικά, Full width εικόνες, sliders, Parallax blocks και πολλά ακόμα, μας δίνουν τη δυνατότητα να συνθέσουμε ένα πολύ καλό και ισορροπημένο αποτέλεσμα. Πέρα από το καλαίσθητο κομμάτι, ένα πολύ βασικό συστατικό είναι η ευκολία πλοήγησης και το σωστά δομημένο περιβάλλον, κοινώς UI (User Interface). Ένα άρτια δομημένο UI μπορεί ουσιαστικά να απογειώσει οποιαδήποτε ιστοσελίδα, προσφέροντας ευκολία χρήσης, ευκολία πρόσβασης στο πιο βασικό κομμάτι, την πληροφορία, καθώς και ταχύτητα φόρτωσης. Και πολλές φορές, εδώ είναι που γίνεται η μεγαλύτερη προσπάθεια. Η ταχύτητα φόρτωσης μιας ιστοσελίδας, ή αλλιώς, loading time, πέρα από το ότι ενθαρρύνει τον επισκέπτη να παραμείνει στη σελίδα αν είναι χαμηλή, είναι εξίσου βοηθητική και για τις μηχανές αναζήτησης. Αυτό είναι απόλυτα λογικό μιας και εδώ και 2 περίπου χρόνια, ο αλγόριθμος της Google βασίζεται στην τεχνολογία και θέαση της ιστοσελίδας μας από κινητή συσκευή, κοινώς: Mobile First! Τα τεστ που πραγματοποιούνται τα οποία θέτουν ουσιαστικά και το ranking της ιστοσελίδας μας στη μηχανή αναζήτησης, είναι και πολύπλευρα, και πολυεπίπεδα, ενώ σαν σημείο αναφοράς μέτρησης λαμβάνουν το 3G και όχι το, σχεδόν τελευταίας τεχνολογίας, 4G.

Πως λοιπόν μπορούμε να καταφέρουμε να πετύχουμε μοντέρνα και παράλληλα πολύ γρήγορα Loading times ώστε να έχουμε την ιδανική ισορροπία; Εδώ είναι το κλειδί. Οι περισσότερες ιστοσελίδες αυτή τη στιγμή στο Ελληνικό, και όχι μόνο, διαδίκτυο, είναι βασισμένες σε πολύ γνωστά και επιτυχημένα Content Management Systems. Παραδείγματα αποτελούν το πολύ καλό Wordpress, το Joomla, Drupal, Magento για λύσεις e-shop, OpenCart, και αρκετά ακόμα. Κάθε ένα, με τα υπέρ του και τα κατά του, παρέχουν ολοκληρωμένες λύσεις για κατασκευή ιστοσελίδων κάθε τύπου και αποτελούν μια πολύ καλή λύση για μοντέρνο web development. Έχουμε δει πολύ καλά παραδείγματα εταιρικών παρουσιάσεων, portal αλλά και e-shops που κάνουν χρήση αυτών των CMS και ένα από τα πράγματα που παρατηρήσαμε είναι και τα loading times. Αυτός ακριβώς ήταν ο λόγος που προχωρήσαμε στην κατασκευή δικών μας διαχειριστικών αλλά και εικαστικών, προσπαθώντας να κρατήσουμε το εικαστικό επίπεδο πολύ ψηλά, αλλά και τους χρόνους φόρτωσης πολύ χαμηλά.

Υπάρχουν αρκετά εργαλεία μέτρησης που πέρα από την ταχύτητα, προσμετρούν την ποιότητα του κώδικα, τον όγκο του πραγματικού περιεχομένου της ιστοσελίδας (τίτλους, κείμενα κτλ.), την ποιότητα αυτών, καθώς και πολλά πολλά ακόμα πράγματα. Όλα τα παραπάνω αποτελούν κριτήρια που στην τελική τους ανάλυση μας υποδεικνύουν αν το τελικό αποτέλεσμα είναι πολύ καλό, απλώς ικανοποιητικό, ή δυστυχώς φτωχό. Τα εργαλεία που εμπιστευόμαστε εμείς είναι 3. Το πολύ γνωστό, επίσημο εργαλείο της Google, Lighthouse Test που το παρέχει και ο Google Chrome, το πολύ αναλυτικό εργαλείο GTmetrix, καθώς και το επίσης εξαιρετικό, Nibbler.

Εστιάζοντας στο κομμάτι που βλέπει ο επισκέπτης, κοινώς Front End, κάνουμε ότι περνάει από το μυαλό αλλά και το πληκτρολόγιό μας, ώστε να πετύχουμε πολύ ψηλά σκορ και στα 3 εργαλεία, και το καταφέρνουμε. Πως; Κάνοντας χρήση του γνωστού framework Bootstrap στην τελευταία του έκδοση, φορτώνοντας όσο το δυνατόν λιγότερα εξωτερικά libraries της JavaScript, επιχειρώντας να καταφέρουμε όλα όσα θέλουμε (εφέ, γραφικά, πλοήγηση) βάσει του αρχικού μας framework, φορτώνοντας όλες τις φωτογραφίες κάτω από το folding point με ασύγχρονο τρόπο και μόνο όταν έρθουν στη θέαση του επισκέπτη, κάνοντας τεχνικές minification, κάνοντας χρήση των τελευταίων version της PHP, και πολλά πολλά ακόμα. Όπως καταλαβαίνετε, δεν θα μπορούσαμε να παραθέσουμε όλο το οπλοστάσιό μας εδώ.

Εξαιρετικά παραδείγματα αποτελούν η ιστοσελίδα που βρίσκεστε αυτή τη στιγμή, το www.tersus.gr, και το www.lavabeads.gr τα οποία και καταφέρνουν πολύ ψηλά σκορ σε όλα τα εργαλεία, καθώς και συνεχώς αναπτυσσόμενα rankings στη μηχανή αναζήτησης της Google, οργανικά φυσικά και χωρίς καμία πληρωμή.