Βελτιστοποίηση Ταχύτητας Website

Η ταχύτητα ενός website δεν αποτελεί απλώς ένα τεχνικό χαρακτηριστικό.
Για πολύ καιρό είναι ένα από τα βασικά κριτήρια που κοιτάει η Google (και άλλες μηχανές αναζήτησης) ώστε να κατατάξουν το website σας.

Μία σελίδα που αργεί να φορτώσει επηρεάζει την εμπειρία του χρήστη και τις πωλήσεις (αν πρόκειται για e-shop), ενώ πολλοί χρήστες μπορεί να κλείσουν το παράθυρο χωρίς να περιμένουν να εμφανιστεί η σελίδα.

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

Σε αυτό το άρθρο θα δείτε ακριβώς:

• Τι είναι το Page Speed Optimization;
• Δωρεάν εργαλεία που μπορείτε να μετρήσετε την ταχύτητα του website σας.
• Μερικά easy wins για την βελτίωση ταχύτητας.
• Προχωρημένες τεχνικές για την βελτίωση ταχύτητας.

Το page speed optimization είναι η διαδικασία βελτίωσης της ταχύτητας φόρτωσης και ανταπόκρισης μιας ιστοσελίδας.

Η ταχύτητα δεν περιορίζεται μόνο στο πόσο γρήγορα ανοίγει μία ιστοσελίδα.
Αφορά επίσης:

• Πόσο γρήγορα εμφανίζεται το περιεχόμενο (First Contentful Paint).
• Πόσο γρήγορα μπορεί να αλληλεπιδράσει ο χρήστης με τη σελίδα.
• Η ομαλότητα κατά το scroll και την πλοήγηση.
• Το σύνολο σε bytes που μεταφέρθηκαν.

Δεν αρκεί μόνο να φορτώνει γρήγορα, θα πρέπει και το υλικό που φορτώνει να μην επηρεάζει την εμπειρία του χρήστη.

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

Η Google με το δικό της εργαλείο (Page Speed Insights) κάνει έλεγχο σχεδόν με το χειρότερο σενάριο.

Αν έχετε αναρωτηθεί γιατί στο κινητό σας όλα φαίνονται καλά αλλά στο page speed insights έχετε χαμηλό score στο κινητό, είναι επειδή η Google κάνει εξομοίωση του ελέγχου σε ένα Android κινητό (Moto G Power) με αργό 4G δίκτυο.

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

Όπως αναφέραμε στο προηγούμενο section, το πιο γνωστό εργαλείο είναι το Google Page Speed Insights.

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

Λίστα με τα πιο αξιόπιστα εργαλεία:

• Google PageSpeed Insights
• GTmetrix
• Pingdom Tools
• WebPageTest
• Lighthouse (μέσω Chrome DevTools)

Τα metrics που εμφανίζουν τα εργαλεία δεν δείχνουν απλά πόσο γρήγορο είναι ένα website, αλλά πώς βιώνει ο χρήστης τη σελίδα στην πράξη. Είναι αυτό που λέει και η Google, Core Web Vitals

• Largest Contentful Paint (LCP): Δείχνει πόσο χρόνο χρειάζεται για να εμφανιστεί το κύριο περιεχόμενο της σελίδας. Αυτό που λέμε above the fold.
  Παράδειγμα: Πόσο γρήγορα βλέπει ο χρήστης το header, τον βασικό τίτλο ή το κύριο banner της σελίδας.
• Interaction to Next Paint (INP): Δείχνει πόσο γρήγορα ανταποκρίνεται η σελίδα όταν ο χρήστης κάνει μια ενέργεια.
  Παράδειγμα: Πόσο άμεσα αντιδρά όταν πατάει ένα κουμπί, ανοίγει ένα menu ή κάνει scroll μέσα στη σελίδα.
• Cumulative Layout Shift (CLS): Δείχνει πόσο σταθερή είναι η σελίδα κατά τη φόρτωση.
  Παράδειγμα: Αν μετακινούνται ξαφνικά εικόνες και κείμενα κατά την φόρτωση ή κατά την περιήγηση. Επίσης το CLS είναι το πιο κοστοβόρο όσο αναφορά τους πόρους της συσκευής.
• First Contentful Paint (FCP): Δείχνει πότε εμφανίζεται το πρώτο ορατό στοιχείο.
  Παράδειγμα: Πότε αρχίζουν να εμφανίζονται πράγματα στο χρήστη, για παράδειγμα το header, τα κείμενα κλπ. Μπορεί δηλαδή μια σελίδα να έχει γρήγορη ανταπόκριση αλλά στην αρχή ο χρήστης να βλέπει μια λευκή σελίδα για μερικά δευτερόλεπτα.
• Time to First Byte (TTFB): Δείχνει πόσο γρήγορα ανταποκρίνεται ο server.
  Παράδειγμα: Πόσος χρόνος περνάει μέχρι να ξεκινήσει να φορτώνει η σελίδα.

Με άλλα λόγια, αυτά τα metrics μετρούν τη συνολική εμπειρία χρήστη και όχι μόνο την ταχύτητα.

Η χρήση ενός theme είναι συνήθως το πιο γρήγορο και οικονομικό (cost-effective) ξεκίνημα για την κατασκευή ενός website. Πλατφόρμες όπως το WordPress, το Magento 2 και άλλες, προσφέρουν μια τεράστια ποικιλία από δωρεάν και premium themes που μπορούν να καλύψουν σχεδόν κάθε ανάγκη.

Ωστόσο, αυτή η ευκολία έχει και το κόστος της.

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

Τα βασικότερα προβλήματα που προκύπτουν είναι:

• Περιττός κώδικας (bloated code) που φορτώνεται χωρίς λόγο και επιβαρύνει την απόδοση.
• Μεγάλα CSS και JavaScript αρχεία που αυξάνουν το loading time.
• Κακή ποιότητα υλοποίησης σε κάποια themes, που επηρεάζει metrics όπως το TTFB και το INP.
• Εξαρτήσεις από τρίτα libraries που φορτώνονται σε κάθε σελίδα, ακόμα και αν δεν χρειάζονται.

Επιπλέον, πολλά plugins λειτουργούν με παρόμοια λογική.

Συχνά προσθέτουν:

• Δικές τους γραμματοσειρές
• Extra CSS και JavaScript
• Λειτουργίες που μπορεί να μην χρησιμοποιούνται

Όλα τα παραπάνω αυξάνουν το συνολικό page size και τον αριθμό των requests, κάτι που επηρεάζει άμεσα την ταχύτητα φόρτωσης και την εμπειρία χρήστη.

Για αυτόν τον λόγο, μια πιο αποδοτική προσέγγιση είναι η χρήση custom themes.

Στη Fusion Lab, χρησιμοποίουμε in-house themes τα οποία είναι πλήρως προσαρμοσμένα στις ανάγκες του κάθε project. Αυτό σημαίνει ότι:

• Φορτώνεται μόνο ο απαραίτητος κώδικας
• Δεν υπάρχουν περιττά αρχεία και dependencies
• Η επιπλέον επέκταση είναι γρήγορη και εύκολη

Με αυτόν τον τρόπο, επιτυγχάνεται ένα website που δεν είναι απλά λειτουργικό, αλλά και γρήγορο, ελαφρύ και αποδοτικό σε όλες τις συσκευές.

TL;DR
Τα παρακάτω είναι αρκετά τεχνικα 🙂.
Μπορείς απλά να κάνεις skip στη φόρμα επικοινωνίας και να σου κάνουμε ένα δωρέαν έλεγχο. Συνεχίζουμε...

Βλέποντας τα reports από τα παραπάνω εργαλεία, μπορείτε να εντοπίσετε συγκεκριμένες προτάσεις βελτίωσης για τη δομή και την απόδοση της σελίδας σας.

Ένας από τους πιο εύκολους και άμεσους τρόπους για βελτίωση είναι το lazy loading των εικόνων που βρίσκονται below the fold (δηλαδή δεν εμφανίζονται στο αρχικό viewport).

Τι είναι το lazy loading εικόνων;

Το lazy loading είναι μια τεχνική κατά την οποία ο browser φορτώνει μόνο τις εικόνες που είναι ορατά στον χρήστη.

Με απλά λόγια, οι εικόνες που βρίσκονται χαμηλότερα στη σελίδα δεν φορτώνονται από την αρχή, αλλά μόνο όταν ο χρήστης κάνει scroll και φτάσει σε αυτές.

Αυτό μειώνει σημαντικά το initial load και βελτιώνει metrics όπως το LCP και το FCP.

Πώς μπορείτε να το εφαρμόσετε;

Ο πιο απλός τρόπος είναι να προσθέσετε το attribute:

loading="lazy"

στα <img> tags της σελίδας σας. Από εκεί και πέρα, ο browser αναλαμβάνει τα υπόλοιπα.

Ένα πολύ συχνό πρόβλημα, ειδικά σε themes και plugins, είναι η ύπαρξη διπλών βιβλιοθηκών.

Για παράδειγμα, μπορεί να χρησιμοποιείται το Owl Carousel για ένα slider και το Glide για ένα άλλο. Στην πράξη, και οι δύο βιβλιοθήκες κάνουν το ίδιο πράγμα, αλλά φορτώνονται και οι δύο, επιβαρύνοντας τη σελίδα.

Το ίδιο μπορεί να συμβεί και με:

• Γραμματοσειρές
• CSS αρχεία
• JavaScript plugins

Αν και όλα τα παραπάνω είναι πιο τεχνικά, υπάρχουν και πιο εύκολα wins που μπορείτε να εφαρμόσετε άμεσα:

• Lazy loading για εικόνες και iframes
• Compression μέσω Gzip ή Brotli από τον server
• Minification σε CSS και JavaScript
• Caching (browser & server-side)
• Χρήση CDN για γρηγορότερη παράδοση περιεχομένου

Τα περισσότερα από αυτά μπορούν να γίνουν εύκολα μέσω plugins ή μέσα από τις ρυθμίσεις της πλατφόρμας που χρησιμοποιείτε.

Πρόβλημα με το server σας; Δεν ξέρετε γιατί κολλάει το website; Δεν γνωρίζεται πως να κάνετε τις απαραίτητες ρυθμίσεις;

Αφήστε το να το κάνουμε εμείς για εσάς.