Μια γρήγορη ιστοσελίδα προσφέρει μια καλή εμπειρία στο χρήστη, και ένα ικανοποιητικό UX οδηγεί σε υψηλότερες μετατροπές και πωλήσεις! Κάθε δευτερόλεπτο που κερδίζεται, μετράει.
Πως να αυξήσετε τη ταχύτητα της ιστοσελίδας σας;
- ΕΠΙΛΟΓΗ ΚΑΤΑΛΛΗΛΟΥ SERVER
- ΕΠΙΛΟΓΗ ΚΑΤΑΛΛΗΛΟΥ THEME-TEMPLATE
- ΕΠΙΛΟΓΗ ΚΑΤΑΛΛΗΛΩΝ PLUGINS ΚΑΙ ΔΙΑΓΡΑΦΗ ΤΩΝ ΜΗ ΧΡΗΣΙΜΩΝ
- ΑΝΑΒΑΘΜΙΣΗ ΤΗΣ PHP VERSION
- ΑΝΑΒΑΘΜΙΣΗ ΤΟΥ WORDPRESS ΚΑΙ ΤΩΝ PLUGINS
- ΜΕΙΩΣΗ ΤΩΝ HTTP REQUESTS
- ΕΝΕΡΓΟΠΟΙΗΣΗ ΤΟΥ HTTP/2
- ΕΝΕΡΓΟΠΟΙΗΣΗ CACHE ΚΑΙ MINIFY/COMBINE CSS & JS ΑΡΧΕΙΑ
- ΔΙΑΣΥΝΔΕΣΗ ΜΕ CLOUDFLARE
- ΒΕΛΤΙΣΤΟΠΟΙΗΣΗ ΤΩΝ ΕΙΚΟΝΩΝ
- ΠΡΟΣΘΗΚΗ LΑZYLOAD
- ΑΦΑΙΡΕΣΗ ΤΩΝ QUERY STRINGS ΑΠΟ ΤΑ ΣΤΑΤΙΚΑ RESOURCES
- ΜΕΤΑΦΟΡΑ ΤΩΝ SCRIPTS ΑΠΟ ΤΟ ΠΑΝΩ ΜΕΡΟΣ ΤΗΣ ΣΕΛΙΔΑΣ ΣΤΟ ΚΑΤΩ
- ΚΑΘΑΡΙΣΜΟΣ ΚΑΙ ΣΥΝΤΗΡΗΣΗ ΒΑΣΗΣ ΔΕΔΟΜΕΝΩΝ
- ΑΠΕΝΕΡΓΟΠΟΙΗΣΗ ΤΟΥ HOTLINKING
Πως να ελέγξετε τη ταχύτητα και τα scores της ιστοσελίδας σας;
Ποιά είναι μια καλή ταχύτητα για την ιστοσελίδα σας;
Ιστορικά οι περισσότεροι έχουν επικεντρωθεί στην βελτιστοποίηση της ταχύτητας της desktop έκδοσης μιας ιστοσελίδας , ωστόσο με την εναλλαγή της Google στο να ευρετηριάζει πρώτα την mobile έκδοση και ταυτόχρονα με την αύξηση του αριθμού των χρηστών σε κινητές συσκευές, πρέπει τώρα να επικεντρωθούμε στην ταχύτητα του κινητού, περισσότερο.
Μην θεωρείτε ποτέ, οτι η ιστοσελίδα σας είναι γρήγορη επειδή φορτώνει γρήγορα στο δικό σας υπολογιστή. Η τοποθεσία, η ταχύτητα σύνδεσης στο διαδίκτυο, η προσωρινή αποθήκευση της σελίδας απο τον browser του κάθε επισκέπτη, είναι μόνο μερικές απο τις παραμέτρους που επιρεάζουν το πόσο γρήγορα θα φορτώσει η σελίδα σας σε ένα επισκέπτη που μπαίνει πρώτη φορά στη σελίδα σας.
Από έρευνα του Doubleclick (που ανήκει στην Google) προτείνεται:
Ο μέσος χρόνος φόρτωσης για ιστότοπους απο κινητά είναι 19 δευτερόλεπτα μέσω συνδέσεων 3G ενω το 53% των επισκέψεων σε ιστότοπους απο κινητά εγκαταλείπονται εάν οι σελίδες διαρκούν περισσότερο από 3 δευτερόλεπτα για φόρτωση. Οι επισκέπτες της desktop έκδοσης μιας ιστοσελίδας αναμένουν να φορτωθεί ένας ιστότοπος μέσα σε ένα δευτερόλεπτο ή δύο.
Πάμε λοιπόν και σε μια πιο αναλυτική περιγραφή των βασικών βημάτων βελτιστοποιήσης μιας ιστοσελίδας, παρακάτω.
ΕΠΙΛΟΓΗ ΚΑΤΑΛΛΗΛΟΥ SERVER
Η επιλογή του καταλληλότερου server ανάλογα πάντα και με τις ανάγκες της εκάστοστε ιστοσελίδας, αποτελεί το Α και το Ω στην επιτυχία της ταχύτητας του site σας.
Σήμερα, με μια σύντομη περιήγηση στο διαδίκτυο, μπορείτε να βρείτε διάφορες εταιρείες που παρέχουν web hosting σε διαφόρων ειδών πακέτα.
Πάμε να δούμε μερικά απο τα πιο βασικά πακέτα:
Shared Hosting:
Το πακέτο αυτό, αφορά τους περισσότερους κατόχους ιστοσελίδων στο διαδίκτυο, καθώς είναι το φθηνότερο και ταυτόχρονα είναι αρκετό για ένα πολύ μεγάλο ποσοστό ιστοσελίδων.
Τo shared Hosting, όπως το λέει και το όνομα του είναι ένας shared server, δηλαδή κοινόχρηστος. Για να έχετε μια καλύτερη εικόνα, σκεφτείτε έναν υπολογιστή, ο οποίος φιλοξενεί ταυτόχρονα παραπάνω απο 1 ιστοσελίδα.
Αυτό συνεπάγεται σε πολύ πιο φθηνό μηνιαίο κόστος για τον ενοικιαστή, αλλά επίσης σημαίνει ότι οι πόροι και οι δυνατότητες του server αυτού, μοιράζονται για κάθε σελίδα που φιλοξενεί, άρα είναι και περιορισμένες. Βέβαια για μια ιστοσελίδα με μικρό traffic και απαραίτητες λειτουργίες, σίγουρα αποτελεί μια καλή και φθηνή επιλογή.
DEDICATED: Ο dedicated server είναι ένας ολόκληρος server για εσάς. Στην ουσία, σας παρέχεται ένας server ο οποίος φιλοξενεί μόνο τη δική σας ιστοσελίδα και όλες του οι δυνατότητες χρησιμοποιούνται για το δικό σας site. Αφορά πολύ δυναμικές ιστοσελίδες ή blogs και μεγάλα eshop, με μεγάλο traffic και απαιτήσεις.
Semi-Dedicated: Το πακέτο αυτό αφορά τους χρήστες, οι οποίοι έχουν ανάγκη να φιλοξενήσουν μόνο ένα (το πιο απαιτητικό) από τα websites τους, σε ένα οικονομικότερο πακέτο φιλοξενίας (από ότι τα VPS), που σε πόρους και χαρακτηριστικά βρίσκονται ανάμεσα στο Shared και το VPS hosting.
VPS Hosting: Ο VPS server είναι ένας απομονωμένος, εικονικός server μέσα σε έναν γονικό dedicated server. Σε αντίθεση με τους shared , έχουν τους δικούς τους απομονωμένους πόρους ( ram, χώρο στο δίσκο κτλπ) οπότε τους καθιστά πολύ πιο δυνατούς από τις υπόλοιπες επιλογές πλην βέβαια του dedicated server.
ΕΠΙΛΟΓΗ ΚΑΤΑΛΛΗΛΟΥ THEME-TEMPLATE
Κάντε έρευνα για τα demo themes που θέλετε να χρησιμοποιήσετε, πρωτού προχωρήσετε στη κατασκευή της ιστοσελίδας σας, εγκαθιστώντας ένα απο αυτά.
Επιλέξτε themes που έχουν υψηλές κριτικές, καλό support και υποστηρίζονται με ενημερώσεις ακόμα και σήμερα απο τους δημιουργούς τους.
Προσπαθήστε να βρείτε themes τα οποία απευθύνονται πιο στοχευμένα, κυρίως σε αυτό που έχετε στο μυαλό σας να δημιουργήσετε και όχι τόσο σε multipurpose themes, καθώς θα έχουν ενδεχομένως πολλές περισσότερες “άχρηστες” για το σκοπό σας λειτουργίες που θα επιβαρύνουν την λειτουργία της ιστοσελίδας σας τις οποίες και θα πρέπει να τις περιορίσετε.
Σε περίπτωση που επιλέξετε ένα Multipurpose theme, θα ήταν καλό να χρησιμοποιήσετε μόνο όσα Plugins είναι εντελώς απαραίτητα για το site σας και να διαγράψετε όσα πρόσθετα εγκαταστάθηκαν πακέτο με το theme που επιλέξατε ακόμα και τα “recommended plugins” που προτείνει το theme εαν δεν σκοπέυετε να τα χρησιμοποιήσετε.
ΕΠΙΛΟΓΗ ΚΑΤΑΛΛΗΛΩΝ PLUGINS ΚΑΙ ΔΙΑΓΡΑΦΗ ΤΩΝ ΜΗ ΧΡΗΣΙΜΩΝ
” Κάντε μόνοι σας ό,τι μπορείτε, αποφέυγοντας την εύκολη λύση των plugins”
Ένας γενικός κανόνας, όχι όμως και απόλυτος, για μια σβέλτη ιστοσελίδα είναι να έχει όσα λιγότερα Plugins χρειάζεται για να πληροί των λειτουργειών που απαιτεί. Σίγουρα τα διαθέσιμα plugins ποικίλουν και πληρούν πλέον ένα τεράστιο φάσμα απαιτήσεων και αναγκών για οποιουδήποτε τύπου ιστοσελίδας ή eshop, με αποτέλεσμα να αποτελούν τη πρώτη σας σκέψη και επιλογή.
Ωστόσο τα περισσότερα πρόσθετα υλοποιούνται με τρόπο τέτοιο ώστε να καλύπτουν μαζικά διάφορες ανάγκες χρηστών ταυτόχρονα και όχι μεμονομένες απαιτήσεις. Πολλές φορές θα έχετε εγκαταστήσει κάποιο plugin απο το οποίο θα έχετε χρησιμοποιήσει μόνο τις μισές επιλογές που σας προσφέρει, για να πετύχετε απλά τον σκοπό σας γρήγορα και εύκολα. Την ίδια ώρα όμως φορτώνονται διάφορα επιπλέον αρχεία στην ιστοσελίδα σας, που δεν τα χρειάζεστε, τα οποία απαιτούν πόρους, calls στη βάση δεδομένων κ.α. Αν αναλογιστείτε λοιπόν πόσα τέτοια Plugins έχετε χρησιμοποιήσει ταυτόχρονα, θα καταλάβετε πόσες επιπλέον “άχρηστες” λειτουργίες προφορτώνονται στην ιστοσελίδα σας.
Εφόσον φυσικά έχετε ορισμένες προγραμματιστικές γνώσεις, αποφεύγετε την εγκατάσταση κάποιου plugin εάν μπορείτε να υλοποιήσετε μόνοι σας την αλλαγή αυτή!
Εάν πάλι δεν έχετε τις βασικές προγραμματιστικές γνώσεις για να υλοποιήσετε μόνος/η την ανάγκη σας αυτή, τότε δώστε μεγάλη προσοχή στα Plugins που εγκαθιστάτε. Χρησιμοποιείτε μόνο καλά κατασκευασμένα plugins, με καλά ratings. Διαβάστε κριτικές χρηστών, δείτε πότε έγινε το τελευταίο update και πόσο άμεσα απαντάνε οι δημιουργοί τους.
Έτσι θα έχετε ένα καλό δείγμα του πόσο σημασία έχει δώσει ο εκάστοτε developer για το Plugin που σας παρέχει.
Διαγράψτε όλα τα plugins που δεν χρησιμοποιείτε καθώς δεν αρκεί να κάνετε απλά απενεργοποίηση των plugins.
ΑΝΑΒΑΘΜΙΣΗ ΤΟΥ WORDPRESS ΚΑΙ ΤΩΝ PLUGINS
Ενημερώνετε συχνά και κρατάτε up to date το wordpress και τα εγκατεστημένα plugins. Εκτός απο διορθώσεις “κενών ασφαλείας” που μπορεί να οδηγήσει ένα μη up to date plugin, συχνά γίνονται και βελτιστοποιήσεις του κώδικα τους, που επηρεάζουν την ταχύτητα μιας ιστοσελίδας και το πώς αυτή επικοινωνεί με τη βάση δεδομένων, μειώνοντας πολλές φορές τους απαιτούμενους πόρους που χρειάζονται για να λειτουργήσουν .
PHP VERSION
Ελέγξτε ότι τα plugins που χρησιμοποιείτε και το wordpress σας είναι συμβατά με την έκδοση 7 της php και μεταβείτε σε αυτή.
Εάν κάποια plugins δεν είναι συμβατά με την php7 αλλά δεν είναι και απαραίτητα για την ιστοσελίδα σας ή μπορείτε να τα αντικαταστήσετε με άλλα, συμβατά, τότε ανεπιφύλακτα πρέπει να προχωρήσετε σε αυτές τις αλλαγές. Θα δείτε πραγματική διαφορά στη ταχύτητα της ιστοσελίδας σας.
Με αυτό το plugin, μπορείτε να ελέγξετε αν τα πρόσθετα που χρησιμοποιείτε είναι συμβατά με την php7.
Μην ξεχάσετε να το διαγράψετε μετά! 🙂
ΜΕΙΩΣΤΕ ΤΑ HTTP REQUESTS
Κάθε theme ή plugin που εγκαθιστάτε χρησιμοποιεί js και css αρχεία για τη λειτουργεία και την εμφάνιση των λειτουργιών που σας παρέχει.
Έτσι κάθε φορά που φορτώνεται η ιστοσελίδα σας στον browser γίνονται και τα απαραίτητα calls σε αυτά τα αρχεία.
Βρείτε τα js και τα css που χρησιμοποιούν τα Plugins και το theme που χρησιμοποιείτε και ενώστε τα σε ένα ή λιγότερα, ώστε να μειωθούν τα calls αυτά. Υπάρχουν επίσης αρκετά plugins που κάνουν τη δουλειά αυτή για εσάς όπως το W3 Total Cache ή το Merge + Minify
Επίσης βρείτε πιθανές γραμματοσειρές που φορτώνονται αλλά δεν χρησιμοποιούνται και απλά έχουν εγκατασταθεί στην ιστοσελίδα σας από κάποιο Plugin ή το demo που ίσως χρησιμοποιήσατε για τη δημιουργία της σελίδας σας και αφαιρέστε τις.
Μην χρησιμοποιείτε external υπηρεσίες που δεν χρειάζεστε, εφόσον δεν είστε διατεθειμένος/η να τα παρακολουθείτε και να τα χρησιμοποιείτε, όπως είναι το Google Analytics, το Hotjar, το Google tag manager κτλπ.
ΕΝΕΡΓΟΠΟΙΗΣΗ ΤΟΥ HTTP/2
Το HTTP εντοπίζει και φέρνει πληροφορίες από το διαδίκτυο στον browser κάθε φορά που πληκτρολογείτε ενα URL.
Με την ενεργοποίηση του ΗTTP/2, λόγω των καινούριων χαρακτηριστικών και κυρίως λόγω του multiplexing, της δυνατότητας του εξελιγμένου πρωτοκόλλου να επεξεργαστεί περισσότερα HTTP requests μαζεμένα, θα δείτε την απόδοση της ιστοσελίδας σας να ανεβαίνει.
Ελέγξτε εδώ, εάν ο server σας υποστηρίζει το HTTP/2.
ΕΝΕΡΓΟΠΟΙΗΣΗ CACHE ΚΑΙ MINIFY/COMBINE CSS & JS ΑΡΧΕΙΑ
Εγκαταστήστε κάποιο cache plugin και δοκιμάστε διεξοδικά τις επιλογές που σας παρέχει όπως το minify των αρχείων js / css / html. Ελέγξτε ότι οι ρυθμίσεις που ενεργοποιήσατε δεν δημιουργούν πρόβλημα στην ιστοσελίδα σας, δοκιμάστε άλλες και καταλήξτε στο συνδυασμό των βέλτιστων επιλογών μετά απο διάφορα tests.
Δείτε εδώ τα καλύτερα δωρεάν cache plugins
ΔΙΑΣΥΝΔΕΣΗ ΜΕ CLOUDFLARE
Συνδέστε το cloudflare με την ιστοσελίδα σας.
Το Cloudflare έχει σχεδιαστεί για να προσφέρει μεγαλύτερες ταχύτητες και καλύτερη ασφάλεια σε οποιαδήποτε ιστοσελίδα. Στην ουσία λειτουργεί σαν ένα δίκτυο διανομής περιεχομένου (CDN), αλλά είναι πολύ πιο εύκολο να το εγκαταστήσετε και να το ρυθμίσετε απ’ ότι ένα τυπικό CDN.
Δείτε τον επίσημο οδηγό διασύνδεσης εδώ
ΒΕΛΤΙΣΤΟΠΟΙΗΣΗ ΤΩΝ ΕΙΚΟΝΩΝ
Ένας πολύ σημαντικός παράγοντας που επηρεάζει αρκετά τη ταχύτητα της ιστοσελίδας σας είναι οι φωτογραφίες.
Ανεβάζετε μόνο σωστά μεγέθη φωτογραφιών εφόσον πρώτα τις έχετε συμπιέσει – βελτιστοποιήσει κατάλληλα ώστε να είναι optimized για το web.
Για παράδειγμα εάν πρόκειται να ανεβάσετε μια φωτογραφία σε ένα slider που έχει μέγεθος 1920×400, πρώτα θα πρέπει να φτιάξετε την φωτογραφία σε αυτή τη διάσταση και να μην ανεβάσετε μια τυχαίου μεγέθους φωτογραφία που απλά θα προσαρμοστεί σε αυτό το μεγέθος.
Επίσης υπάρχουν πολλά Online εργαλεία βελτιστοποιήσης εικόνων για να ξεκινήσετε, όπως το tinypng .
Ακόμα καλύτερα μπορείτε να εγκαταστήσετε κάποιο image optimization plugin, καθώς κάνει απο μόνο του τη δουλειά με το ανέβασμα των φωτογραφιών στην ιστοσελίδα σας ενώ μπορείτε να βελτιστοποιήσετε ακόμα και τις ήδη ανεβασμένες , γλιτώνοντάς σας πολύτιμο χρόνο.
Δείτε εδώ τα καλύτερα δωρεάν Image Optimazation plugins
ΠΡΟΣΘΗΚΗ LΑZYLOAD ΓΙΑ ΤΙΣ EIKONES / ΒΙΝΤΕΟ
Εαν η ιστοσελίδα σας περιέχει πολλές φωτογραφίες ενεργοποιήστε κάποιο lazy loading plugin.
Με το Lazyload εμφανίζονται μόνο οι εικόνες που είναι ορατές στο παράθυρο του προγράμματος περιήγησης του επισκέπτη και στη συνέχεια, όταν ο αναγνώστης μετακινηθεί προς τα κάτω, οι άλλες εικόνες αρχίζουν να φορτώνονται, λίγο πριν εμφανιστούν.
Μπορείτε να ξεκινήσετε δοκιμάζοντας αυτό το plugin.
ΑΦΑΙΡΕΣΗ ΤΩΝ QUERY STRINGS ΑΠΟ ΤΑ ΣΤΑΤΙΚΑ RESOURCES
Τα query strings ( πχ wp-includes/css/dashicons.min.css?ver=4.4.2 ) στα στατικά resources της σελίδας σας προκαλούν προβλήματα στην προσωρινή αποθήκευση του browser ή αλλιώς στο cache.
Υπάρχουν αρκετά plugins διαθέσιμα, όπως αυτό, που βοηθάνε στη αφαίρεση των query strings απο τα στατικά resources της σελίδας σας γλιτώνοντάς σας αρκετό χρόνο.
ΜΕΤΑΦΟΡΑ ΤΩΝ SCRIPTS ΑΠΟ ΤΟ ΠΑΝΩ ΜΕΡΟΣ ΤΗΣ ΣΕΛΙΔΑΣ ΣΤΟ ΚΑΤΩ
Ο browser, την ώρα που διαβάζει μια ιστοσελίδα ξεκινάει απο πάνω προς τα κάτω. Για το λόγο αυτό, θα πρέπει στο πάνω μέρος της σελίδας ανάμεσα δηλαδή στο <head></head> να υπάρχουν όσο το δυνατόν λιγότερα resources.
Προσπαθήστε να μεταφέρετε τα js αρχεία στο κάτω μέρος δηλαδή στο footer της ιστοσελίδας σας, ελέγχοντας πάντα ότι δεν δημιουργείται κάποιο πρόβλημα στο site.
Για παράδειγμα εαν αποφασίσατε να φορτώσετε το cookie plugin ώστε να ενημερώσετε τους χρήστες σας για την πολιτική των cookies ( μιας και πλέον το επιβάλλει και το GDPR ), θα πρέπει να το προσθέσετε στο footer της ιστοσελίδας σας.
ΚΑΘΑΡΙΣΜΟΣ ΚΑΙ ΣΥΝΤΗΡΗΣΗ ΒΑΣΗΣ ΔΕΔΟΜΕΝΩΝ
Κάντε συχνά backup και καθαρισμό της βάσης δεδομένων σας χωρίς να την αφήνετε να γεμίζει άχρηστο data το οποίο επιβαρύνει πολύ τη ταχύτητα των λειτουργιών μιας ιστοσελίδας.
Εγκαταστήστε το WP-OPTIMIZE και πραγματοποιείτε καθαρισμό της βάσης τουλάχιστον μια φορά το μήνα.
Εφόσον ολοκληρώσετε με τον καθαρισμό, απενεργοποιείστε το plugin και διαγράψτε το, καθώς μέχρι την επόμενη φορά που θα θέλετε να καθαρίσετε τη βάση, θα σας είναι άχρηστο.
ΑΠΕΝΕΡΓΟΠΟΙΗΣΗ ΤΟΥ HOTLINKING
Το Hotlink είναι η απευθείας σύνδεση των αρχείων (εικόνες, βίντεο, κτλ.) μιας ιστοσελίδας σε μια άλλη. Αυτό έχει ως αποτέλεσμα την κατανάλωση της κίνησης (bandwidth) της ιστοσελίδας που φιλοξενεί τα αρχεία.
Το All in One WP security plugin παρέχει τη δυνατότητα να απενεργοποίησετε το hotlinking ενώ ταυτόχρονα παρέχει και ασφάλεια της ιστοσελίδας σας με αρκετές επιλογές, όπως firewall, block php file editing κ.α
BONUS TIP
Μπορείτε να επιτύχετε μια γρήγορη βελτιστοποίηση της φόρμας επικοινωνίας που αφορά το contact form 7 plugin του wordpress, εξασφαλίζοντας ότι τα σχετικά αρχεία javascript φορτώνονται ΜΟΝΟ στη σελίδα της φόρμας επικοινωνίας, προσθέτοντας απλά τον ακόλουθο κώδικα στο τέλος του αρχείου function.php – μπορείτε να κερδίσετε 70kb από το χρόνο φόρτωσης.
add_action( 'wp_print_scripts', 'my_deregister_javascript', 100 );function my_deregister_javascript() {if ( !is_page('Contact') ) {wp_deregister_script( 'contact-form-7' );}}add_action( 'wp_print_styles', 'my_deregister_styles', 100 );function my_deregister_styles() {if ( !is_page('Contact') ) {wp_deregister_style( 'contact-form-7' );}}
