Πώς να επιταχύνετε τον ιστότοπό σας

Ένας οδηγός για αρχάριους για τη βελτιστοποίηση ταχύτητας φόρτωσης ιστότοπου

Άρτεμ Μιναγιέφ
Ενημερώθηκε: 4 Οκτωβρίου 2023
Αναγν. 12 min
Το FirstSiteGuide υποστηρίζεται από τους αναγνώστες μας. Όταν αγοράζετε μέσω συνδέσμων στον ιστότοπό μας, ενδέχεται να κερδίσουμε προμήθεια. Δείτε Περισσότερα
Πώς να επιταχύνετε τον ιστότοπό σας

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

Μετά την δημιουργήστε τον ιστότοπό σας or ξεκινήστε το blog σας, μπορεί να νιώθετε ότι όλα είναι στη θέση τους. Ο ιστότοπός σας είναι όμορφος, επομένως αυτό σημαίνει ότι οι άνθρωποι δεν θα έχουν κανένα πρόβλημα να περιμένουν μερικά δευτερόλεπτα ακόμη για να φορτώσει σωστά, σωστά;

Όχι, δεν είναι έτσι.

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

χρόνοι φόρτωσης σελίδας

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

Γεια σας, με λένε Άρτεμ.

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

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

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

14 βήματα για να βελτιώσετε την ταχύτητα του ιστότοπου

Βήμα 1: Εκτελέστε μια δοκιμή ταχύτητας

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

Δωρεάν εργαλεία

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

Insights PageSpeed ​​της Google

Δεδομένου ότι οι περισσότεροι άνθρωποι βελτιστοποιούν τον ιστότοπό τους για το Google, το πρώτο εργαλείο που θα αναφέρω είναι το PageSpeed ​​Insights της Google. Είναι αρκετά απλό και μπορείτε να έχετε το αποτέλεσμα μέσα σε λίγα δευτερόλεπτα.

  1. Ανοικτό Insights PageSpeed ​​της Google.
  2. Εισαγάγετε τη διεύθυνση URL του ιστότοπού σας.
  3. Κάντε κλικ στο κουμπί «Ανάλυση».

Στην περίπτωσή μου, χρειάστηκαν μόλις 10-15 δευτερόλεπτα για να ολοκληρωθεί η δοκιμή και να εμφανιστούν τα αποτελέσματα που κοινοποιήθηκαν στο παρακάτω στιγμιότυπο οθόνης.

δοκιμή πληροφοριών ταχύτητας σελίδας

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

  • Πρώτο περιεχόμενο περιεχομένου (FCP)
  • Μεγαλύτερο περιεχόμενο με περιεχόμενο (LCP)
  • Αθροιστική μετατόπιση διάταξης (CLS)

Και τα τρία στοιχεία αποτελούν μέρος των Web Vitals που περιλαμβάνονται πλέον στις κύριες μετρήσεις της Google που θα δείχνουν πόσο γρήγορο ή αργό είναι ο ιστότοπός σας. Μπορείτε να μάθετε περισσότερα για τα Web Vitals στον οδηγό μας σχετικά πώς να βελτιστοποιήσετε τον ιστότοπό σας για κινητά.

GTmetrix

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

  1. Πηγαίνετε στο GTmetrix.
  2. Πληκτρολογήστε την πλήρη διεύθυνση URL του ιστότοπού σας.
  3. Πατήστε το κουμπί «Εκτέλεση δοκιμής» και περιμένετε περίπου 30 δευτερόλεπτα.

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

δοκιμή gtmetrix

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

Βήμα 2: Αποκτήστε γρήγορη και αξιόπιστη φιλοξενία ιστοσελίδων

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

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

Για να ξεκινήσετε με τον σωστό τρόπο, φιλοξενήστε τον ιστότοπό σας Bluehost, μια από τις σπάνιες εταιρείες φιλοξενίας που προτείνεται επίσημα από το WordPress.org. Η πολυετής εμπειρία και τα εκατομμύρια φιλοξενούμενων ιστοσελίδων καθιστούν αυτήν την εταιρεία φιλοξενίας μία από τις καλύτερες στον τομέα της – κάτι που θα μεταφραστεί εύκολα σε μια ισχυρή ιστοσελίδα.

Βήμα 3: Υλοποιήστε μια υπηρεσία Δικτύου Παράδοσης Περιεχομένου (CDN).

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

Εδώ μπαίνουν τα δίκτυα παράδοσης περιεχομένου. Σας επιτρέπουν να φιλοξενείτε τον ιστότοπό σας σε πολλούς διακομιστές σε όλο τον κόσμο. Το CDN μπορεί να αναγνωρίσει την πλησιέστερη τοποθεσία σε κάθε άτομο που φορτώνει τον ιστότοπό σας και να φορτώσει το περιεχόμενο από τον πλησιέστερο διακομιστή. Έτσι, εάν ένας επισκέπτης προσπαθήσει να φορτώσει τον ιστότοπό σας από τις ΗΠΑ, θα λάβει το περιεχόμενο από έναν από τους διακομιστές των ΗΠΑ, ενώ κάποιος που προέρχεται από την Ευρώπη θα φορτώσει τον ιστότοπό σας μέσω ενός διακομιστή που βρίσκεται κοντά του, για παράδειγμα στο Λονδίνο.

Εάν φιλοξενείτε τον ιστότοπο στο Bluehost, μπορείτε να βρείτε το TrueSpeed ​​CDN τους μέσα στον πίνακα ελέγχου. Απλώς με τη ρύθμιση του, ο ιστότοπός σας θα γίνει παγκόσμιος και θα φορτώνεται πιο γρήγορα σε άτομα από όλο τον κόσμο.

Μπορείτε επίσης να λάβετε υπηρεσίες CDN τρίτου μέρους. ο τα πιο δημοφιλή CDN είναι:

Βήμα 4: Ελαχιστοποιήστε τα αρχεία CSS και JavaScript

Οι σύγχρονοι ιστότοποι είναι γεμάτοι με αρχεία CSS και JavaScript που συνεργάζονται για να διατηρούν τις ιστοσελίδες όμορφες και να λειτουργούν προς όφελος των χρηστών. Γραμμή μετά από γραμμή κώδικα κάνει αυτά τα αρχεία άσκοπα μεγάλα, γεγονός που μπορεί να επιβραδύνει γρήγορα τον ιστότοπό σας.

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

Ακολουθεί ένα παράδειγμα απλού κώδικα CSS:

σώμα {

padding: 10px;

color:#f35123;

φόντο:#f22f12;

}

Μπορεί να ελαχιστοποιηθεί σε αυτό:

body{padding:10px;color:#f35123;background:#f22f12}

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

Ευτυχώς, για να ελαχιστοποιήσετε τα αρχεία CSS και JavaScript, δεν χρειάζεται να περάσετε από τον κώδικα και να κάνετε τις αλλαγές μόνοι σας. Υπάρχουν πρόσθετα που θα το κάνουν αυτό αυτόματα για εσάς και θα διασφαλίσουν ότι όλα λειτουργούν σωστά:

  1. Μεταβείτε στο «Προσθήκες > Προσθήκη νέου».
  2. Ψάχνω για "Autoptimize".
  3. Εγκαταστήστε και ενεργοποιήστε το "Autoptimize".
  4. Μεταβείτε στις "Ρυθμίσεις -> Αυτόματη βελτιστοποίηση".
  5. Επιλέξτε "Βελτιστοποίηση κώδικα JavaScript;" και «Συγκεντρωτικά αρχεία JS;». 
  6. Επιλέξτε "Βελτιστοποίηση κώδικα CSS;" και «Συγκεντρωτικά αρχεία CSS;». 

Βήμα 5: Ενεργοποιήστε την προσωρινή αποθήκευση του προγράμματος περιήγησης

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

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

Για να το ενεργοποιήσετε στον ιστότοπό σας, το μόνο που χρειάζεστε είναι ένα δωρεάν πρόσθετο WordPress όπως:

Εάν, για παράδειγμα, χρησιμοποιείτε W3 Total Cache, το μόνο που χρειάζεται να κάνετε είναι να το κάνετε εγκαταστήστε την προσθήκη:

  1. Μεταβείτε στις Προσθήκες -> Προσθήκη νέου.
  2. Αναζήτηση για "W3 Total Cache".
  3. Εγκαταστήστε και ενεργοποιήστε το πρόσθετο.
  4. Πραγματοποιήστε τη ρύθμιση αφήνοντας την προσθήκη να δοκιμάσει τις ρυθμίσεις του ιστότοπού σας και του διακομιστή σας.
w3 συνολική ρύθμιση προσωρινής μνήμης

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

Βήμα 6: Βελτιστοποιήστε και καθαρίστε τη βάση δεδομένων του WordPress

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

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

Ευτυχώς, υπάρχουν διαθέσιμα δωρεάν πρόσθετα WordPress που θα βελτιστοποιήσουν και θα καθαρίσουν τη βάση δεδομένων για εσάς. Ωστόσο, πριν κάνετε οτιδήποτε, φροντίστε να το κάνετε δημιουργήστε ένα πλήρες αντίγραφο ασφαλείας του ιστότοπού σας ή έχετε έναν τρόπο να αναιρέσετε τις αλλαγές. Αν και WP-Optimize είναι ένα πολύ γνωστό και ασφαλές πρόσθετο, η απευθείας επεξεργασία μιας βάσης δεδομένων μερικές φορές μπορεί να πάει στραβά. 

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

  1. Μεταβείτε στις Προσθήκες -> Προσθήκη νέου.
  2. Βρείτε το WP-Optimize, εγκαταστήστε το και ενεργοποιήστε το.
  3. Επιλέξτε τις επιλογές που θέλετε και κάντε κλικ στο κουμπί για να ξεκινήσει η βελτιστοποίηση.
wp βελτιστοποίηση εγκατάστασης

Βήμα 7: Χρησιμοποιήστε βελτιστοποιημένα/premium και απλά θέματα

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

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

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

Βήμα 8: Βελτιστοποιήστε όλες τις εικόνες στον ιστότοπό σας

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

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

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

Εάν διαθέτετε ήδη έναν ενεργό ιστότοπο και δεν έχετε τον χρόνο να βελτιστοποιήσετε τις εικόνες μία κάθε φορά, υπάρχει μια προσθήκη freemium που θα λύσει όλα σας τα προβλήματα. ShortPixel Image Optimizer θα φροντίσει για όλες τις εικόνες σας που είναι διαθέσιμες στη βιβλιοθήκη πολυμέσων σας. Λειτουργεί επίσης εξαιρετικά με το NextGEN, το Foo Gallery, καθώς και με άλλα πρόσθετα γκαλερί και ρυθμιστικών.

Η δωρεάν έκδοση σάς επιτρέπει να χειρίζεστε έως και εκατό εικόνες. Μερικά από τα χαρακτηριστικά περιλαμβάνουν:

  • Βελτιστοποίηση του μεγέθους και της ποιότητας των εικόνων.
  • Μετατροπή μορφών σε άλλη.
  • Λειτουργεί με WebP και AVIF.

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

ρύθμιση shortpixel

Βήμα 9: Τεμπέλης φόρτωση εικόνων και βίντεο

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

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

Πώς να ενεργοποιήσετε την τεμπέλικη φόρτωση στο WordPress:

  1. Μεταβείτε στις Προσθήκες -> Προσθήκη νέου.
  2. Αναζήτηση Lazy Load από το WP Rocket.
  3. Εγκαταστήστε και ενεργοποιήστε την προσθήκη.
  4. Ελέγξτε το περιεχόμενο που θέλετε να φορτώσετε αργά και αποθηκεύστε τις ρυθμίσεις.
ρύθμιση τεμπέλικου φορτίου

Βήμα 10: Αποτρέψτε το hotlinking εικόνας

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

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

Υπάρχουν διάφοροι τρόποι για να αποτρέψετε τη σύνδεση hotlink:

  • Χρησιμοποιώντας ένα CDN: τα πιο δημοφιλή CDN όπως το Cloudflare και το KeyCDN έχουν ήδη ενεργοποιημένη την προστασία hotlinking.
  • Χρήση προσθηκών ασφαλείας: Όλα σε ένα WP Security & Firewall Το plugin σάς επιτρέπει να έχετε τον έλεγχο των hotlinking.
  • Απενεργοποίηση δεξί κλικ στις εικόνες σας: χρησιμοποιήστε μια προσθήκη σαν Αποτροπή κλοπής περιεχομένου [Απενεργοποίηση δεξί κλικ].
  • Τροποποίηση αρχείου .htaccess: οι πιο προχωρημένοι χρήστες μπορούν να απενεργοποιήσουν απευθείας το hotlinking τροποποιώντας τον κώδικα στο αρχείο .htaccess.

Βήμα 11: Φιλοξενήστε βίντεο σε υπηρεσίες τρίτων και αποφορτώστε τα μεγάλα μέσα

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

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

Όταν πρόκειται για βίντεο, μπορείτε να τα φιλοξενήσετε σε:

Βήμα 12: Διατηρήστε τις προσθήκες στο ελάχιστο / βρείτε τις προσθήκες που σας επιβραδύνουν

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

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

  1. Μεταβείτε στις Προσθήκες -> Προσθήκη νέου.
  2. Αναζήτηση P3 (Προφίλ επιδόσεων plugin).
  3. Εγκαταστήστε και ενεργοποιήστε την προσθήκη.
  4. Μεταβείτε στα Εργαλεία -> P3 Plugin Profiler.
  5. Ξεκινήστε τη σάρωση.

Αυτό το πρόσθετο θα εκτελέσει ορισμένες δοκιμές στον ιστότοπό σας και θα σας δείξει ένα γράφημα και λεπτομέρειες. Αυτό που σας ενδιαφέρει εδώ είναι η καρτέλα "Runtime by Plugin" που θα σχεδιάσει ένα γράφημα που θα σας δείχνει όλες τις ενεργές προσθήκες σας και τον αντίκτυπό τους στον ιστότοπο.

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

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

Δοκιμή προφίλ για πρόσθετο p3

Βήμα 13: Ελέγξτε τις ανακατευθύνσεις στον ιστότοπό σας

Η ύπαρξη ανακατευθύνσεων βελτιώνει την εμπειρία χρήστη και μπορεί ακόμη βελτιώστε τον SEO σας αν γίνει σωστά. Η ύπαρξη ενεργών ανακατευθύνσεων δεν θα έχει αρνητικό αντίκτυπο στον ιστότοπό σας. Ωστόσο, με κάθε ανακατεύθυνση, ο ιστότοπός σας γίνεται λίγο πιο αργός. Έτσι, εάν καταλήξετε να έχετε πάρα πολλές ανακατευθύνσεις (δημιουργώντας μια λεγόμενη αλυσίδα ανακατεύθυνσης), θα προστεθούν χιλιοστά του δευτερολέπτου και ο ιστότοπός σας θα γίνει πιο αργός.

Ένα από τα πιο δημοφιλή εργαλεία για το χειρισμό ανακατευθύνσεων είναι Screaming Frog. Μπορείτε επίσης να ελέγξετε:

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

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

Για το χειρισμό ανακατευθύνσεων στο WordPress, μπορείτε να χρησιμοποιήσετε ένα δωρεάν Ανακατευθύνσεις WP 301 plugin που θα σας βοηθήσει να διαχειριστείτε όλες τις ανακατευθύνσεις σας.

Βήμα 14: Βελτιστοποίηση περιεχομένου (χρησιμοποιήστε αποσπάσματα, χωρίστε μεγάλα άρθρα και σχόλια, κ.λπ.)

Μερικές φορές, μπορείτε να κάνετε πολλά αλλάζοντας μικρά πράγματα. Αν εσύ γράφω ένα blog, μπορείτε να επιτύχετε έναν πιο γρήγορο ιστότοπο ελέγχοντας το περιεχόμενο. Όταν εμφανίζετε τα πιο πρόσφατα άρθρα από το ιστολόγιο, χρησιμοποιήστε αποσπάσματα αντί να φορτώσετε ολόκληρο το άρθρο.

Εάν χρησιμοποιείτε ένα κλασικό πρόγραμμα επεξεργασίας, η εμφάνιση ενός προσαρμοσμένου αποσπάσματος είναι σχετικά εύκολη:

  1. Πηγαίνετε στο WordPress ταμπλό -> Αναρτήσεις -> Προσθήκη νέου.
  2. Κάντε κλικ στο κουμπί «Επιλογές οθόνης».
  3. Ενεργοποίηση της επιλογής πλαισίου αποσπάσματος. 
  4. Κάντε κύλιση προς τα κάτω, βρείτε το πλαίσιο του αποσπάσματος και γράψτε μια προσαρμοσμένη περίληψη.
προσαρμοσμένο απόσπασμα

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

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

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

Τέλος, για όσους έχουν πολλά σχόλια, μπορείτε να επιλέξετε να σελιδοποιήσετε τα σχόλια αντί να τα φορτώσετε όλα ταυτόχρονα:

  1. Πηγαίνετε στο Ρυθμίσεις WordPress -> Συζήτηση.
  2. Βρείτε την επιλογή "Διάσπαση σχολίων σε σελίδες".
  3. Εισαγάγετε τον αριθμό των σχολίων που πρέπει να εμφανίζονται σε μία μόνο σελίδα.
  4. Αποθηκεύσετε τις ρυθμίσεις.
σελιδοποίηση σχόλια

Συνεχίστε να δοκιμάζετε την ταχύτητα του ιστότοπού σας

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

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

Πώς ένας αργός ιστότοπος μπορεί να σας βλάψει

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

  • Υψηλότερα ποσοστά εγκατάλειψης – Ακόμα κι αν ο επισκέπτης σας αποφασίσει να περιμένει να φορτώσει μια σελίδα, αυτό δεν σημαίνει ότι θα είναι υπομονετικός καθ' όλη τη διάρκεια της επίσκεψής του. Διακινδυνεύετε υψηλότερα ποσοστά εγκατάλειψης που θα κάνουν τους χρήστες να εγκαταλείψουν τον ιστότοπό σας αφού επισκεφθούν την πρώτη σελίδα.
  • Χάνοντας χρήματα - Αν εσύ πωλούν προϊόντα ή υπηρεσίες στον ιστότοπό σας, ένας αργός ιστότοπος θα απωθήσει πιθανούς αγοραστές και μελλοντικούς πελάτες.
  • Απώλεια κυκλοφορίας – Θέλετε περισσότερη επισκεψιμότητα που θα ωθήσει τον ιστότοπό σας προς τα εμπρός; Σε αυτήν την περίπτωση, δεν έχετε την πολυτέλεια να χάσετε έναν επισκέπτη επειδή ο ιστότοπός σας δεν έχει βελτιστοποιηθεί σωστά.
  • Χαμηλότερη κατάταξη SERP – Η Google και άλλες μηχανές αναζήτησης λαμβάνουν υπόψη την ταχύτητα φόρτωσης. Μια πιο αργή σελίδα μπορεί να οδηγήσει σε περαιτέρω ώθηση στη σελίδα αποτελεσμάτων της μηχανής αναζήτησης, ακόμα κι αν το περιεχόμενό σας είναι καλό.

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

Συμπέρασμα

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

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

4 σχόλια για «Πώς να επιταχύνετε τον ιστότοπό σας»

  1. Ομάδα Koderey

    Γεια, μου άρεσε πολύ η ανάγνωση του οδηγού. Όντας ψηφιακός έμπορος μπορώ να σχετιστώ με όλα όσα αναφέρατε παραπάνω. Ευχαριστώ πολύ που μοιράζεσαι το ίδιο.

  2. Νικήτα Σεφτσένκο

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

    Οι οδηγοί σαν αυτόν με βοήθησαν πολύ!

  3. Σκοτ Ντάνκαν

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

Αφήστε μια απάντηση

Η διεύθυνση email σας δεν θα δημοσιευθεί. Τα υποχρεωτικά πεδία σημειώνονται *

Στείλτε το σε ένα φίλο