9 κορυφαίες συμβουλές
ταχύτητας

Speed Optimization

Είσαι αρκετά γρήγορος?

Η βελτιστοποίηση της ταχύτητας της ιστοσελίδας πρέπει να είναι πάντα η πρώτη προτεραιότητα, ειδικά όταν υπάρχει τόσο μεγάλος online ανταγωνισμός. Ακολουθούν οι κορυφαίες 9 συμβουλές βελτιστοποίησης ταχύτητας που σου προτείνουμε, ανεξάρτητα από την πλατφόρμα (WordPress, Joomla, Drupal), αν θέλεις να βελτιστοποιήσεις τον ιστότοπό σου.

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

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

1. Βελτιστοποίηση Εικόνων

Ο πιο απλός και πιο συνηθισμένος λόγος που αργεί ένα website είναι γιατί οι εικόνες δεν είναι βελτιστοποιημένες με αποτέλεσμα να καθυστερούν τη φόρτωση της ιστοσελίδας λόγω του μεγάλου μεγέθους τους.

Η λύση είναι απλή:

  1. Συμπίεσε τις φωτογραφίες σου χωρίς ή με μείωση της ποιότητας
  2. Προσάρμοσε τις στο απαιτούμενο μέγεθος (π.χ. αν μια φωτογραφία εμφανίζεται σε ένα πλαίσιο 256*256 δεν υπάρχει κανένας λόγος να είναι 1920*1080)

2. Μείωση των HTTP Requests

Όταν το πρόγραμμα περιήγησής συλλέγει δεδομένα από ένα διακομιστή, το κάνει με HTTP (Hypertext Transfer Protocol). Πρόκειται για ένα αίτημα/απόκριση μεταξύ του υπολογιστή σου και server. Σε γενικές γραμμές, όσο περισσότερα αιτήματα HTTP κάνει η ιστοσελίδα σου τόσο επιβραδύνεται η φόρτωση της.

Υπάρχουν πολλοί τρόποι με τους οποίους μπορείτε να μειώσετε τον αριθμό αιτημάτων όπως:

  1. Inline Javascript (μόνο αν είναι πολύ μικρή)
  2. Χρησιμοποιώντας CSS Sprites
  3. Μείωση στοιχείων, όπως τα plugins που κάνουν μεγάλο αριθμό εξωτερικών αιτημάτων
  4. Αφαίρεση 3rd-party frameworks εκτός αν είναι απολύτως αναγκαία

Όλα αυτά σου φαίνονται βουνό? Είμαστε εδώ για να σε βοηθήσουμε

3. Ελαχιστοποίηση CSS και Javascript

Η ελαχιστοποίηση των πόρων (minify css & javascript) σημαίνει την αφαίρεση περιττών χαρακτήρων από τα HTML, Javascript και CSS που δεν χρειάζονται, όπως:

  1. Λευκοί χαρακτήρες χώρου
  2. Νέοι χαρακτήρες γραμμής
  3. Σχόλια
  4. Αποκλεισμός μπλοκ

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

Υπάρχουν πολλά δωρεάν online εργαλεία που μπορούν να σε βοηθήσουν.

4. Μείωση του Critical path & αφαίρεση των πόρων αποκλεισμού (CSS + JS)

Όταν αναλύεις την ταχύτητα της ιστοσελίδας σου, πρέπει πάντα να λάβεις υπόψη τι μπορεί να εμποδίζει το DOM να φορτώσει, προκαλώντας καθυστερήσεις στην φόρτωση της σελίδας σου.
Αυτά ονομάζονται πόροι αποκλεισμού HTML και μπορεί να είναι CSS (αυτό μπορεί να περιλαμβάνει και γραμματοσειρές web), και Javascript.

Ακολουθούν μερικές συστάσεις σχετικά με τον τρόπο με τον οποίο μπορείς να αποτρέψεις το CSS και τη Javascript από το να αποκλείει το DOM, βελτιστοποιώντας την κρίσιμη διαδρομή.

CSS

Κάλεσε σωστά τα αρχεία CSS

  1. Χρησιμοποίησε media queries για να επισημάνεις κάποια CSS ως non-render blocking
  2. Μείωσε το μέγεθος των αρχείων CSS (συνέδεσε τα αρχεία CSS σε ένα αρχείο)
  3. Μείωσε το CSS (αφαιρέστε επιπλέον κενά, χαρακτήρες, σχόλια κλπ)
  4. Χρησιμοποίησε λιγότερα CSS

Javascript

Όταν πρόκειται για τη Javascript, υπάρχουν ορισμένες βέλτιστες πρακτικές που πρέπει να έχεις πάντα κατά νου.

  1. Μετακίνησε τη στο κάτω μέρος της σελίδας ακριβώς πριν την ετικέτα </body>.
  2. Φόρτωσε τα με ασύγχρονο τρόπο (async, defer)
  3. Συνδύασε τα αρχεία JS σε ένα αρχείο
  4. Ελαχιστοποίησε τη Javascript (κατάργησε επιπλέον κενά, χαρακτήρες κ.λπ.)
  5. Τοποθέτησε την javascript inline αν δεν έχει μεγάλο μέγεθος

5. Χρησιμοποίησε Content Delivery Network (CDN)

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

6. Απέφυγε τις Ανακατευθύνσεις

Οι ανακατευθύνσεις είναι δολοφόνοι της απόδοσης. Απέφυγέ τους όποτε είναι δυνατόν. Μια ανακατεύθυνση θα δημιουργήσει πρόσθετους χρόνους RTT και επομένως θα διπλασιάσει γρήγορα τον χρόνο που απαιτείται για τη φόρτωση του αρχικού εγγράφου HTML προτού αρχίσει να φορτώνει ακόμη και το άλλο asset.

Όλα αυτά σου φαίνονται βουνό? Είμαστε εδώ για να σε βοηθήσουμε

7. Caching

Cache Browser

Είναι η αξιοποίηση της μνήμης cache του προγράμματος περιήγησης για assets που σπάνια αλλάζουν. Συνιστάται να έχετε μέγιστη ηλικία 7 ημερών σε τέτοιες περιπτώσεις.

Για παράδειγμα το logo της σελίδας σου αλλάζει πολύ σπάνια άρα δεν χρειάζεται να το φορτώνεις από το server κάθε φορά που μπαίνει ο ίδιος χρήστης στη σελίδα σου παρά μόνο την πρώτη φορά.

Cache διακομιστή

Υπάρχουν πολλές μορφές προσωρινής αποθήκευσης από πλευράς διακομιστή και αρκετά plugins για αυτό το σκοπό. Η χρήση του CDN επιτρέπει ένα ακόμα επίπεδο caching.

8. Prefetch και Preconnect

Η προ-φόρτωση (prefetch) των domains είναι μια καλή λύση για την επίλυση των domains προτού ο χρήστης ακολουθήσει έναν σύνδεσμο.

Το Preconnect επιτρέπει στο πρόγραμμα περιήγησης να ρυθμίσει τις πρώιμες συνδέσεις πριν από την αποστολή ενός αιτήματος HTTP στο διακομιστή. Συνδέσεις όπως DNS Lookup, TCP Handshake και TLS διαπραγμάτευσης μπορούν να ξεκινήσουν εκ των προτέρων, εξαλείφοντας την καθυστέρηση για αυτές τις συνδέσεις και εξοικονομώντας χρόνο για τους χρήστες.

9. Ενεργοποιήστε τη συμπίεση του Gzip

Το Gzip είναι μια άλλη μορφή συμπίεσης που συμπιέζει ιστοσελίδες, CSS και javascript σε επίπεδο διακομιστή πριν την αποστείλει στον browser. Αυτή η βελτιστοποίηση της απόδοσης του ιστότοπου είναι εύκολη στην εφαρμογή και μπορεί να κάνει μεγάλη διαφορά.

Η συμπίεση Gzip μειώνει 50% έως 80% το μέγεθος και συνεπώς θα αυξήσει σημαντικά την ταχύτητα φόρτωσης του ιστότοπου.

Apache

Μπορείς να ενεργοποιήσεις τη συμπίεση μέσω του αρχείου .htaccess.

Nginx

Μπορείς να ενεργοποιήσεις τη συμπίεση μέσω του αρχείου nginx.conf.