Website speed: Πως να αυξήσετε την ταχύτητα ιστοσελίδας
Alexandros K. Nasiopoulos
  • 11-11-2019
  • 1851 Unique Views

Στο παρακάτω άρθρο, θα δώσουμε πληροφορίες για να αυξήσετε το website speed, δηλαδή την ταχύτητα ιστοσελίδας. Οι τεχνικές που προτείνουμε έχουν εφαρμογή σε οποιαδήποτε ιστοσελίδα (Wordpress, Joomla, Drupal, Opencart, Magento κλπ) και δεν αφορούν αποκλειστικά έναν "τύπο" website.

Πριν, όμως, προχωρήσουμε στις πληροφορίες αυτές, πάμε να απαντήσουμε σε μία άλλη ερώτηση:

Γιατί να αυξήσω το website speed;

Γιατί να αυξήσω την ταχύτητα της ιστοσελίδας μου;

Τι έχουν πάθει όλοι με την ταχύτητα;

Οι προσδοκίες και οι "ανάγκες" του ανθρώπου έχουν μεγαλώσει. Δε θυμάμαι τη γιαγιά μου στο χωριό να έλεγε ότι θέλει παραθαλάσσιο εξοχικό ή ότι ήθελε να πάει στις Maldives ή στο Dubai.

Οι απαιτήσεις της καθημερινότητας επίσης μεγάλωσαν. Τώρα πρέπει να πληρωθούν φόροι, πετρέλαιο θέρμανσης, internet, συνδρομητική τηλεόραση, η τροφή του σκύλου, ακόμα και η δόση για την 75" QLED SMART τηλεόραση ή για το iPhone 11 των παιδιών.

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

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

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

Σας άγχωσα ε;

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

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

Η ταχύτητα της ιστοσελίδας σας δεν είναι σημαντική μόνο για τους επισκέπτες της, αλλά και για τις μηχανές αναζήτησης.

Ένας εξαιρετικά σημαντικός παράγοντας για την κατάταξη - ranking μίας ιστοσελίδας, στις σελίδες αποτελεσμάτων των μηχανών αναζήτησης, είναι η ταχύτητα της ιστοσελίδας. Με άλλα λόγια η ταχύτητα της ιστοσελίδας είναι ένας σημαντικός παράγοντας του SEO - Search Engine Optimization.

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

Το ranking της ιστοσελίδας σας μπορεί να επηρεαστεί από την ταχύτητα της, έμμεσα, μέσω του bounce rate ή του session duration.

Πως;

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

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

Πως θα αυξήσω το website speed;

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

Παράγοντες που επηρεάζουν την ταχύτητα ιστοσελίδας:

  1. Template
  2. Εικόνες
  3. CSS
  4. Javascript
  5. Caching
  6. Minify
  7. Compression
  8. Redirects
  9. Server

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

1. Template

Δεν είναι τυχαίο που τοποθετήσαμε πρώτο το template. Το template που χρησιμοποιείτε μπορεί να καθορίσει, σε μεγάλο βαθμό, την ταχύτητα της ιστοσελίδας σας. Παράλληλα, αποτελεί την πιο απλή αλλαγή που μπορείτε να κάνετε για να βελτιώσετε το website speed.

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

Template με πολλά κινούμενα γραφικά ή τεράστιες background-images μπορεί να είναι ελκυστικά, αλλά συνήθως επιβραδύνουν αρκετά τις ιστοσελίδες.

Επίσης, multi-purpose template ή αλλιώς template για πολλές χρήσεις (eshop, κρατήσεις ξενοδοχείου, portfolio κλπ) μπορεί να περιέχουν τεράστιο κώδικα CSS τον οποίο δε πρόκειται ποτέ να χρησιμοποιήσετε. Παρ' όλα αυτά, όλος αυτός ο κώδικας αποστέλεται από το server στο χρήστη που επισκέπτεται την ιστοσελίδα σας.

Τέλος, μέρος ή μέρη της Javascript του template, μπορεί να βρίσκονται σε κάποιο άλλο server, από αυτόν που φιλοξενείτε την ιστοσελίδα σας. Αν ο server αυτός καθυστερεί να αποστείλει τα απαραίτητα αρχεία js για τη σωστή εμφάνιση της ιστοσελίδας σας, μπορεί να την καθυστερεί αρκετά.

Εσείς, τι μπορείτε να κάνετε όσον αφορά το template;

Επιλέξτε απλά template, που να ταιριάζουν στις δικές σας ανάγκες. Επιλέξτε template που, στα χαρακτηριστικά τους, δίνεται έμφαση στην ταχύτητα. Τέλος, ζητήστε από έναν έμπειρο web developer να ελέγξει αν το template που χρησιμοποιείτε περιέχει εξωτερικό κώδικα Javascript ή εξωτερικές βιβλιοθήκες Javascript και, αν ναι, να τις "κατεβάσει" και να τις τοποθετήσει στα αρχεία της ιστοσελίδας σας.

Θα επανέλθουμε στη Javascript παρακάτω.

2. Εικόνες

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

Εικόνες 8.000px ή 20.000px, δεν εξυπηρετούν κανέναν.

Οι εικόνες του slider της αρχικής σας σελίδας, δε χρειάζεται να είναι μεγαλύτερες από 2000px ή να έχουν μέγεθος αρχείου περισσότερο από 200KB η κάθε μία.

Όσον αφορά τις εικόνες των προϊόντων σας, τα 800px είναι υπεραρκετά με μέγεθος αρχείου 80ΚΒ.

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

3. CSS

CSS ή Cascading Style Sheet  είναι αρχεία που περιέχουν κώδικα του styling δηλαδή της εμφάνισης της ιστοσελίδας σας. Όπως είπαμε και παραπάνω, στην ενότητα του template, θα πρέπει να ξεφορτωθείτε τον κώδικα CSS που δεν χρησιμοποιείτε στην ιστοσελίδα σας.

Δεν εννοώ, φυσικά, να ψάξετε μία - μία τις 30.000 γραμμές κώδικα (ή και παραπάνω) που μπορεί να περιέχει ένα αρχείο CSS, για να διαπιστώσετε αν οι κλάσεις που περιέχει χρησιμοποιούνται στη σελίδα σας.

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

Αν τυχόν αποφασίσετε να μπείτε σε αυτή τη διαδικασία, θα πρέπει οπωσδήποτε να κρατήσετε ένα backup του/των αρχείων CSS πριν το/τα τροποποιήσετε. Προσέξτε να μην διαγράψετε το backup πριν σιγουρευτείτε ότι σε όλες τις σελίδες του website σας δεν έχει επηρεαστεί η εμφάνιση μετά τις αλλαγές.

4. Javascript

Δυστυχώς, με τη Javascript τα πράγματα δεν είναι τόσο απλά όσο με το CSS. Δε μπορείτε να αρχίσετε να διαγράφετε κώδικα Javascript που πιστεύετε ότι δεν χρησιμοποιεί η σελίδα σας.

Η Javascript ή τα αρχεία js που συνήθως βρίσκονται μέσα στα αρχεία του website σας, μπορεί να επηρεάζουν την εμφάνιση ή τις λειτουργίες του website σας.

Αυτό που μπορείτε να κάνετε με τη Javascript είναι, κατ' αρχήν, να επιλέξετε απλά template με, όσο το δυνατόν, λιγοστό κώδικα Javascript. Μπορείτε, επίσης, να φροντίσετε ώστε όλος ο κώδικας ή οι βιβλιοθήκες Javascript να βρίσκονται στο server που φιλοξενείτε το website σας ή, έστω, σε server με εγγυημένη ταχύτητα και διαθεσιμότητα (χωρίς downtime).

Τέλος, μπορείτε να κάνετε minify τα αρχεία js, τεχνική που θα αναλύσουμε παρακάτω.

5. Caching ή Cache Expiring

Web cache (ή HTTP cache) είναι μία τεχνολογία της πληροφορικής για προσωρινή αποθήκευση (caching) εγγράφων του διαδικτύου, όπως ιστοσελίδες, εικόνες, αρχεία js, βίντεο, pdf και άλλων τύπων πολυμέσων του διαδικτύου, για να μειωθεί η καθυστέρηση του διακομιστή (server).

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

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

6. Minify

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

Υπάρχουν αρκετά διαθέσιμα εργαλεία online, με τα οποία μπορείτε εύκολα να κάνετε minify τα αρχεία HTML, CSS και JS.

Αν θέλετε να χρησιμοποιήσετε τα εργαλεία που προτείνει η Google, αυτά είναι τα παρακάτω:

7. Compression

Μπορείτε να χρησιμοποιήσετε προγράμματα συμπίεσης (π.χ. Gzip, 7zip), για να κάνετε συμπίεση (file compression), των αρχείων HTML, CSS και JS.

Μην κάνετε συμπίεση των εικόνων σας με τέτοια προγράμματα. Αντ' αυτού, χρησιμοποιείστε ένα πρόγραμμα επεξεργασίας εικόνων όπως προτείνουμε στην ενότητα "Εικόνες".

Μπορείτε επίσης να χρησιμοποιήσετε custom ή wordpress plugins που θα αυτοματοποιήσουν τη διαδικασία!

8. Redirects

Μειώστε και, αν είναι δυνατόν, εξαλείψτε τελείως τα redirects. Κάθε φορά που κάποια σελίδα σας κάνει redirect, δηλαδή ανακατευθύνει το χρήστη σε μία άλλη σελίδα μέσα στο website σας, ο χρήστης πρέπει να περιμένει μέχρι να ολοκληρωθεί ο κύκλος HTTP request -> response.

9. Server

Last but not least, η ταχύτητα του server και τα χαρακτηριστικά του. Ο server που θα επιλέξετε για να φιλοξενήσετε τη σελίδα σας, μπορεί να επηρεάσει, σε μεγάλο βαθμό, την ταχύτητά της.

Μην επιλέγετε το web hosting βασιζόμενοι μόνο στο κόστος της φιλοξενίας. Τα 20 ή 30€ που μπορεί να διαθέσετε παραπάνω, ανά έτος, μπορεί να παίξουν μεγάλο ρόλο στην ταχύτητα της σελίδας σας και όχι μόνο. Περισσότερες πληροφορίες για τη φιλοξενία ιστοσελίδων, μπορείτε να βρείτε στο άρθρο μας "Πως θα επιλέξω το κατάλληλο Web Hosting".

Συμπερασματικά για το website speed

Προτού προβείτε σε οποιαδήποτε ενέργεια για να αυξήσετε την ταχύτητα του website σας, μπορείτε να χρησιμοποιήσετε το Google Page Speed Insights, ένα εργαλείο της Google με το οποίο μπορείτε να ελέγξετε την ταχύτητα του website σας.

Αν στη σελίδα σας έχετε ενσωματώσει το Google Analytics, πηγαίνοντας στο Google Analytics μέσω του μενού που βρίσκεται στα αριστερά πατώντας Behavior -> Site Speed, μπορείτε να βρείτε αναλυτικές πληροφορίες για την ταχύτητα της κάθε σελίδας του website σας καθώς και να αφήσετε τη Google να σας προτείνει διορθώσεις.

Έπειτα, μπορείτε να δοκιμάσετε τους τρόπους αύξησης του website speed που προτείνουμε σε αυτό το άρθρο και οι οποίοι, όπως είδαμε, είναι οι παρακάτω:

  1. Template
  2. Εικόνες
  3. CSS
  4. Javascript
  5. Caching
  6. Minify
  7. Compression
  8. Redirects
  9. Server

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

Εάν όλα αυτά σας φαίνονται δύσκολα και πιστεύετε ότι δε θα τα καταφέρετε μόνοι σας, η Cloud O.E., διαθέτοντας τεράστια εμπειρία στα αντικείμενα του web development και SEO, μπορεί να σας βοηθήσει να αυξήσετε την ταχύτητα της ιστοσελίδας σας. Εσείς, αυτό που πρέπει να κάνετε είναι να επικοινωνήσετε μαζί μας.

Έχεις την Ιδέα;
Ήρθε η ώρα να την υλοποιήσουμε!
Ζήτησε Προσφορά