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

Τι σημαίνει ταχύτητα ιστοσελίδας, και πώς αυτή μπορεί να επηρεάσει τη λειτουργία της;

Η ταχύτητα της ιστοσελίδας, όπως καταλαβαίνουμε είναι ο απαιτούμενος χρόνος για την φόρτωσή της σε ένα τερματικό (ηλεκτρονικός υπολογιστής, tablet, κινητό κτλ.). Ο χρόνος αυτός, μετριέται σε δευτερόλεπτα και σε υποδιαιρέσεις του, και όσο και αν ακούγεται υπερβολικό, λίγα παραπάνω δεύτερα αρκούν για να οδηγήσουν τον επισκέπτη μας στη εγκατάλειψη της ιστοσελίδας.

Ο κανόνας στο Internet είναι απλός. Η γρήγορη ταχύτητα φόρτωσης είναι ο πρώτος παράγοντας που είτε θα κρατήσει είτε θα διώξει το χρήστη. Ο ανταγωνισμός είναι μεγάλος, και οι ιστότοποι τόσοι πολλοί για κάθε διαφορετικό αντικείμενο, που ο μέσος επισκέπτης δεν έχει καθόλου υπομονή για αργές ιστοσελίδες. Κλείνει την αργή ιστοσελίδα και ψάχνει για κάποια άλλη.

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

Πώς επηρεάζεται η ταχύτητα μιας ιστοσελίδας;

Η σωστή απάντηση σε αυτή την ερώτηση, εξαρτάται από τον τρόπο με τον οποίο έχει φτιαχτεί μια ιστοσελίδα. Υπάρχουν πολλά εργαλεία online που τεστάρουν μια ιστοσελίδα, τη βαθμολογούν και δίνουν συμβουλές για το πως μπορεί να βελτιωθεί η ταχύτητά τους, όπως το PageSpeed insights, το GTmetrix, το Pingdom, το Lighthouse και άλλα. Πέραν των βασικών σημείων βελτιστοποίησης, η προσέγγισή ανάλογα με τον τρόπο κατασκευής της και τα εργαλεία που χρησιμοποιήθηκαν είναι διαφορετική. Μια στατική ιστοσελίδα που έχει γραφτεί με πηγαίο κώδικα html, css, js και δεν πατάει πάνω σε κάποια πλατφόρμα τύπου wordpress, joomla! κ.α. έχει λίγο λιγότερες απαιτήσεις στο στάδιο της βελτιστοποίησής της. Αντίθετα σε δυναμικές ιστοσελίδες, με χρήση βάσεων δεδομένων, και αρκετά αρχεία στον πυρήνα της πλατφόρμας, οι απαιτήσεις είναι λίγο μεγαλύτερες.

Ας δούμε πρώτα τα βασικά σημεία βελτιστοποίησης.

1. Σωστή κατασκευή εξ’ αρχής

Η κατασκευή μιας ιστοσελίδας δεν είναι κάτι έυκολο. Απαιτεί γνώσεις και αρκετή εμπειρία. Υπάρχουν πολλά έτοιμα θέματα προς πώληση, και πολλές εταιρείες τα χρησιμοποιούν κατά κόρον. Πολλά έτοιμα θέματα όμως χαρακτηρίζονται multi purpose, και για να μπορούν να εξυπηρετήσουν μια γκάμα σχεδίων και ένα φάσμα διαφορετικών αντικειμένων φορτώνουν τόνους κώδικα, κάνοντας τα θέματα αυτά εξαιρετικά αργά, τα οποία καλό θα είναι να τα αποφεύγουμε.

2. Βελτιστοποίηση φωτογραφιών για χρήση στο διαδίκτυο.

Με άλλα λόγια μιλάμε για την αλλαγή μεγέθους και συμπίεση της πληροφορίας των φωτογραφιών. Το πιο πρόσφατο trend στην συμπίεση φωτογραφιών είναι η μετατροπή των κλασσικών αρχείων tiff, jpg και png σε webp. Το webp μπορεί να πετύχει συμπίεση έως 45% χωρίς απώλεια στην πληροφορία. Προσέχουμε πάντα το μέγεθος της φωτογραφίας να είναι όσο το δυνατόν μικρότερο ανάλογα με τις ανάγκες της προβολής.

3. Minifications

Σε στατικές ιστοσελίδες, αλλά και σε δυναμικές προτείνεται η σμίκρυνση του κώδικα. Η σμίκρυνση αφορά αρχεία κώδικα τα οποία ενώ για την λειτουργικότητά τους όταν τα δημιουργεί ένας προγραμματιστής τα φτιάχνει σε παραγράφους με κενά, comments και διαστήματα, στην πραγματικότητα, όλα αυτά είναι περιττή πληροφορία για έναν browser. Κάνοντας minify σε ένα αρχείο css ή js μπορούμε να κάνουμε έναν κώδικα 600 γραμμών μόνο 7 γραμμές, το οποίο εξοικονομεί χρόνο κατά τη φόρτωση μιας ιστοσελίδας.

4. Gzip / Caching

Δύο λειτουργίες που συναντάμε αυτοματοποιημένες σε πλατφόρμες CMS είτε προεγκατεστημένες στο core της πλατφόρμας (Joomla!) είτε με πρόσθετα λογισμικά τρίτων (third party software – Wordpress), είτε την προσθέτουμε στο αρχείο htaccess σε περίπτωση στατικής ιστοσελίδας γράφοντας τον απαιτούμενο κώδικα.

Η λειτουργία Gzip αφορά σε μέθοδο συμπίεσης η οποία μπορεί να ελαττώσει τον όγκο των αρχείων που χρειάζονται για τη λειτουργία μιας ιστοσελίδας. Αυτό έχει ως αποτέλεσμα ένας επισκέπτης να κατεβάζει μικρότερα συμπιεσμένα αρχεία αντί των κανονικών και να κερδίζει μερικά δεύτερα στη φόρτωση της ιστοσελίδας.

Η λειτουργία cache ή αλλιώς λειτουργία προσωρινής μνήμης, αφορά την προσωρινή αποθήκευση περιεχομένου με συχνή πρόσβαση για ταχύτερη φόρτωση.

Εκτός από τα παραπάνω σημεία που πρέπει να προσέχονται κατά τη διάρκεια της βελτιστοποίησης μιας ιστοσελίδας, υπάρχουν και άλλα σημεία, τα οποία εξαρτώνται από τον τρόπο λειτουργίας της κάθε ιστοσελίδας.

Ανάλογα με το budget και τις ανάγκες μιας ιστοσελίδας, το μέσο φιλοξενίας έχει πολύ βασικό ρόλο. Σίγουρα για σελίδες μικρές σε περιεχόμενο και χαμηλής επισκεψιμότητας (> 1000 / ημέρα), όπως απλές εταιρικές ιστοσελίδες παρουσίασης και προβολής υπηρεσιών και προϊόντων, μπορούν να λειτουργήσουν σε σωστά δομημένους και ελεγχόμενους shared servers, σε αντίθεση με ηλεκτρονικά καταστήματα και blogs με μεγάλο όγκο προϊόντων ή άρθρων αντίστοιχα και υψηλής επισκεψιμότητας, τα οποία θα έχουν καλύτερη απόδοση σε ένα VM ή έναν dedicated server, τα οποία μπορούν να γίνουν optimize ανάλογα με τις ανάγκες προβολής της κάθε ιστοσελίδας.

Μικρές συμβουλές όταν βλέπουμε χαμηλή βαθμολογία στην ταχύτητα της ιστοσελίδας μας

Κάποιοι παράγοντες που επηρεάζουν αρκετά την ταχύτητά μας, είναι:

• Η έκταση του περιεχομένου μιας ιστοσελίδας. Αν η αρχική μας σελίδα έχει πολλή πληροφορία, πολλές παραπομπές στις επόμενες ενότητες, και αρκετά άρθρα – φωτογραφίες κτλ. Προφανώς βαραίνει αρκετά. Καλό είναι να κρατάμε μια ισορροπία στο πόσα πράγματα θα πούμε σε μια ενότητα. Εκτός από την καθυστέρηση που μπορεί να προκαλέσει στη φόρτωση της ιστοσελίδας μας, είναι πολύ πιθανό να αποπροσανατολίσει και να κουράσει το χρήστη, οδηγώντας στην εγκατάλειψη.
• Google Tag Manager. Καλώς ή κακώς όσο και αν είναι αναγκαίος ο κώδικας παρακολούθησης της Google για την επισκεψιμότητα – διαφημιστική δραστηριότητα, αποτελεί ένα εμπόδιο όταν θέλουμε να πετύχουμε γρήγορες ταχύτητες στην ιστοσελίδα μας. Αντίστοιχως, ο κώδικας facebook pixel είναι λόγος καθυστέρησης.
• Social Media. Οι σύνδεσμοι που μπαίνουν στην ιστοσελίδα και παραπέμπουν στις σελίδες στα κοινωνικά δίκτυα ενδέχεται να καθυστερούν τη φόρτωση της ιστοσελίδας.
• Third Party Software – Plugins – Extensions. Οτιδήποτε υπόσχεται να προσφέρει κάτι παραπάνω σε επίπεδο λειτουργιών στην ιστοσελίδα σας δεν σημαίνει ότι θα το κάνει χωρίς κόστος. Πολλές φορές απενεργοποιώντας ένα extension σε μια ιστοσελίδα παρατηρούμε τεράστιες διαφορές στην απόδοση της ταχύτητας.