Πως να επιτύχετε επιτάχυνση του wordpress

Σε αυτό το άρθρο παρουσιάζουμε κάποιες συμβουλές επιτάχυνσης του wordpress. Βελτιώνοντας την ταχύτητα και την απόδοση των ιστοσελίδων το κέρδος είναι πολλαπλό. Όχι μόνο βελτιώνουμε την εμπειρία του χρήστη αλλά επιπλέον κάνουμε και ένα σημαντικό βήμα για την προώθηση της ιστοσελίδας μας στην πρώτη σελίδα του Google. Εδώ υπάρχουν ακόμη  περισσότερες συμβουλές για να επιταχύνετε το wordpress.

Βελτιστοποιήστε τις Εικόνες χρησιμοποιώντας την Έξυπνη Συμπίεση

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

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

Συμπίεση Gzip

Το Gzip είναι μια άλλη μορφή συμπίεσης που συμπιέζει ιστοσελίδες, CSS και javascript στο επίπεδο διακομιστή πριν την αποστολή τους στο πρόγραμμα περιήγησης. Μπορείτε να ελέγξετε αν ο WordPress ιστότοπός σας είναι ήδη συμπιεσμένος χρησιμοποιώντας το Check GZIP Compression.

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

Μειώστε τον αριθμό των Plug-ins του WordPress

Ένας κοινός λόγος για την επιβράδυνση του WordPress είναι ότι οι περισσότεροι τρέχουν πάρα πολλά plugins, δημιουργώντας πάρα πολλά έξοδα που πρέπει να διαχειριστεί ο webserver τους. Η διατήρηση ελάχιστου αριθμού εγκατεστημένων plugins είναι πολύ σημαντική. Πριν απλά διαγράψετε τα plugins, υπάρχουν δύο τρόποι για να προσδιορίσετε ποια επιβραδύνουν τον ιστότοπό σας. Στη συνέχεια, μετά την ανάλυση του αντίκτυπου στους χρόνους φόρτωσης, αναρωτηθείτε αν το plugin είναι κάτι που πραγματικά χρειάζεστε ή ίσως θα μπορούσατε να πετύχετε το ίδιο πράγμα με διαφορετικό τρόπο.

P3 (Plugin Performance Profiler)

Το P3 είναι ένα δωρεάν WordPress plugin που δημιουργήθηκε από την GoDaddy για να σας βοηθήσει να δείτε ποια πρόσθετα επιβραδύνουν τον ιστότοπό σας. Με αυτό το plugin μπορείτε να δείτε τα εξής:

• Χρόνο εκτέλεσης ανά plugin
• Σύνολο ενεργών plugins και χρόνο φόρτωσης σελίδας
• Επίδραση του plugin στον χρόνο φόρτωσης σελίδας
• Αριθμός ερωτημάτων MySQL (επίπεδο σελίδας)
• Ιστορική σύγκριση σαρώσεων

Σημείωση: Αυτό το plugin δεν είναι τώρα συμβατό με την PHP7. WP

Performance Profiler.

Το WP performance profiler είναι ένα premium πρόσθετο χαμηλού κόστους για το WordPress που δημιουργήθηκε από την Interconnect IT ειδικά με σκοπό τη μέτρηση της απόδοσης των plug-ins στο WordPress. Αυτό το plugin δεν είναι τόσο γνωστό όσο το P3, αλλά αν ψάχνετε για ένα πιο εξελιγμένο εργαλείο μέτρησης απόδοσης, σας συνιστούμε να του ρίξετε μια ματιά. Και φυσικά, μόλις ολοκληρώσετε την ανάλυση του ιστότοπού σας, μπορείτε να απεγκαταστήσετε αυτά τα plugins μέτρησης απόδοσης.

Βελτιστοποιήστε την Απόδοση της Διαδικτυακής Γραμματοσειράς

Το 57% των ιστοτόπων πλέον χρησιμοποιεί προσαρμοσμένες γραμματοσειρές, το οποίο σημαίνει αύξηση κατά 850% από το 2011. Σημειώσαμε ότι είναι σημαντικό να χρησιμοποιείτε μόνο τις γραμματοσειρές που χρειάζεστε, όπως τα WOFF και WOFF2. Υπηρεσίες όπως το Typekit base64 κωδικοποιούν όλες τις μορφές, πράγμα που μπορεί να αυξήσει τους χρόνους λήψης και να επιβραδύνει τον ιστότοπό σας.

Στις δοκιμές μας, οι γραμματοσειρές της Google είχαν καλή απόδοση λόγω της χρήσης του CDN τους και εξυπηρετώντας μόνο τις μορφές WOFF. Το Open Sans ήταν το ταχύτερο από τις 10 πιο δημοφιλείς γραμματοσειρές. Εάν μιλάμε για καθαρή ταχύτητα και εξακολουθείτε να θέλετε να χρησιμοποιείτε τις γραμματοσειρές της Google, ο καλύτερος συνδυασμός στο WordPress θα ήταν να χρησιμοποιήσετε το Open Sans και στη συνέχεια μια γραμματοσειρά ασφαλείας για web, όπως η Arial.

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

Μπορείτε να το πάτε ένα βήμα παραπέρα κωδικοποιώντας σε base64 τις γραμματοσειρές σας σε ένα μόνο αρχείο CSS και αποθηκεύοντάς τες στο localStorage. Η εγγενής κρυφή μνήμη του προγράμματος περιήγησης εκκενώνεται αρκετά συχνά, ειδικά σε κινητές συσκευές. Επομένως, αποθηκεύοντας στο localStorage, το αρχείο αποθηκεύεται συνεχώς. Το Smashing Magazine απέφυγε μια καθυστέρηση 700ms χρησιμοποιώντας το localStorage.

Συνιστούμε να ρίξετε μια ματιά στο εργαλείο localFont από τον Jaime Caballero. Μπορείτε να μεταφέρετε γρήγορα τις γραμματοσειρές WOFF στο εργαλείο του και θα τις κωδικοποιήσει σε base64 και θα σας δώσει τα CSS και Javascript για να τα τοποθετήσετε στον ιστότοπό σας στο WordPress.

Η ταχύτητα φόρτωσης ενός ιστότοπου είναι μία από τις σημαντικότερες παραμέτρους για την προώθηση της ιστοσελίδας. Σύμφωνα με πολλές ανακοινώσεις της Google όταν ένας ιστότοπος αργεί να φορτώσει τότε η Google θα αποφύγει να τον εμφάνιση στην πρώτη σελίδα των αποτελεσμάτων. Ο λόγος είναι απλός. Η Google θέλει να δίνει στον πελάτη της την καλύτερη εμπειρία πλοήγησης. Δεν θα ήθελε να σερβίρει στους επισκέπτες της έναν ιστότοπο ο οποίος θα τους ταλαιπωρήσει στην πλοήγηση. Είναι μία πάρα πολύ λογική σκέψη εάν βάλουμε πάνω από όλα την εμπειρία του χρήστη που κάνει αναζήτηση στη μηχανή αναζήτησης της Google. Κάθε ενέργεια προώθησης της ιστοσελίδας καλό είναι να περιστρέφεται γύρω από αυτή τη σκέψη. Δηλαδή να αναρωτηθείτε: Αυτό που κάνω τώρα θα ήθελε η google να το δείξει στους επισκέπτες της; Αποτελεί αξιόλογη εμπειρία για το χρήστη; Παρέχει χρήσιμη πληροφορία στο χρήστη; Αυτό είναι το Α και το Ω για την προώθηση ιστοσελίδων. Όλα τα υπόλοιπα είναι οι επιμέρους τεχνικές οι οποίες αλλάζουν μέρα με τη μέρα η χρόνο με το χρόνο. Ο βασικός πυρήνας όμως της λογικής που αφορά την προώθηση ιστοσελίδας παραμένει σταθερός. Περισσότερα περί του θέματος θα διαβάσετε εδώ.

Όταν φτιάχνουμε μία ιστοσελίδα σαφώς και θα πρέπει να φροντίσουμε ώστε αυτή να φορτώνει γρήγορα. Αυτό δεν το κάνουμε αποκλειστικά και μόνο για προωθητικούς λόγους. Ο σημαντικότερος λόγος για τον οποίο πρέπει να φροντίσουμε ώστε όταν κατασκευάζουμε μία ιστοσελίδα αυτή να φορτώνει οσο το δυνατό γρηγορότερα είναι διότι θέλουμε να αρέσει στον επισκέπτη. Η ταχύτητα είναι ένας πολύ σημαντικός παράγοντας κατά την κατασκευή ιστοσελίδων. Θέλουμε να παρέχει η κορυφαία εμπειρία πλοήγησης στον επισκέπτη. Εάν φτιάξουμε έναν ιστότοπο οποίο να καθυστερεί πολύ τότε Το σίγουρο είναι ότι θα διώξουμε πολλούς από τους επισκέπτες μας. Τι να το κάνω αν έχω ένα site με κορυφαία γραφικά και πάρα πολλές πληροφορίες οι οποίες όπως αργούν πάρα πολύ να φορτώσουν. Ο επισκέπτης θα κουραστεί και θα φύγει και θα πάει στην επόμενη ιστοσελίδα που θα του βγάλει η μηχανή αναζήτησης. Δεν θα μείνει να ταλαιπωρείται με έναν αργό ιστότοπο. Στο σύνδεσμο που ακολουθεί μπορείτε να μάθετε περισσότερα για τη δημιουργία ιστοσελίδων.

Όταν κάνουμε βελτιστοποίηση ιστοσελίδας καλό είναι να μην παραβλέπουμε έχετε ταχύτητα φόρτωσης αυτής. Συνήθως το εργαλείο βελτιστοποίησης ιστοσελίδας δεν εξετάζονται ταχύτητα φόρτωσης. Εξεταστούν άλλες παραμέτρους όπως είναι για παράδειγμα Εάν η λέξη-κλειδί υπάρχει σε κρίσιμα σημεία του ιστότοπου. Βεβαίως και αυτές αποτελούν πολύ σημαντικές παραμέτρους για τη βελτιστοποίηση σελίδας. Όμως πάντα πρέπει να φροντίζουμε ώστε ο ιστότοπος να φορτώνει γρήγορα. Αυτό πρέπει να το μετρήσουμε εμείς με άλλους τρόπους πέραν του συνηθισμένου εργαλείου βελτιστοποίησης ιστοσελίδων που είναι το yoast seo. Παραθέτουμε σύνδεσμο που οδηγεί σε άρθρο μας σχετικό με τη βελτιστοποίηση σελίδων.

Βελτιστοποιήστε τα Εικονίδια του Font Awesome

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

Επιλογή 1. Χρησιμοποιήστε Font Awesome CDN που φιλοξενείται από ανοιχτό κώδικα.

Μία μέθοδος είναι να χρησιμοποιήσετε ένα φιλοξενούμενο Font Awesome CDN. Αυτό το έργο στην πραγματικότητα φιλοξενείται από το KeyCDN και έτσι μπορείτε να επωφεληθείτε από 25+ διακομιστές που είναι ενεργοποιημένοι για HTTP/2 και CORS δωρεάν. Απλά χρησιμοποιήστε τον ακόλουθο κώδικα και τοποθετήστε τον στο αρχείο header.php του WordPress μεταξύ των ετικετών <head>.

https://opensource.keycdn.com/fontawesome/4.6.1/font-awesome.min.css

Στη συνέχεια, μπορείτε να χρησιμοποιήσετε τα εικονίδια Font Awesome οπουδήποτε στον WordPress ιστότοπό σας με την ετικέτα <i>. Ακολουθεί ένα παράδειγμα με χρήση του CSS Prefix <fa> και το όνομα του εικονιδίου.

<i class=”fa fa-database fa-lg”></i>

Επιλογή 2. Φιλοξενήστε το Font Awesome Στο Δικό Σας CDN (Συνιστάται).

Η δεύτερη επιλογή σας, την οποία συνιστούμε, είναι να χρησιμοποιήσετε το δικό σας CDN για να το φιλοξενήσετε. Ο κύριος λόγος είναι επειδή θα φορτωθεί από την ίδια σύνδεση με τα άλλα στοιχεία σας, με αποτέλεσμα μια αναζήτηση DNS λιγότερη. Και αν τρέχετε μέσω HTTPS και είστε σε διακομιστή CDN που υποστηρίζεται από HTTP/2, τότε είναι καλύτερο να ενοποιήσετε τα αιτήματά σας σε μία μόνο σύνδεση H2.

Το πρώτο πράγμα που πρέπει να κάνετε είναι να βεβαιωθείτε ότι το αρχείο Font Awesome είναι φορτωμένο σε σχέση με την αρχική σας CSS διαδρομή. Με αυτή τη μέθοδο, εφόσον το CSS αρχείο Font Awesome φορτώνεται από το CDN, το ίδιο θα γίνει και με το αρχείο γραμματοσειράς. Ακολουθεί ένα παράδειγμα όπως χρησιμοποιείται στη σελίδα μας.

Ο σύνδεσμος στο αρχείο Font Awesome σας, χρησιμοποιώντας τη διεύθυνση URL του CDN, θα πρέπει να μοιάζει με το απόσπασμα <link> που εμφανίζεται παρακάτω:

<link href=”https://cdn.keycdn.com/css/font-awesome-4.4.0.min.css” rel=”stylesheet”>

Και αυτό είναι. Τώρα έχετε σούπερ γρήγορη φόρτωση εικονιδίων Font Awesome!

Κάντε Lazy Load Εικόνων, Βίντεο και Disqus

Το Lazy Loading είναι μια ιδέα όπου καθυστερείτε τη φόρτωση της μονάδας αντικειμένων στο σημείο όπου είναι απαραίτητο. Στο WordPress, αυτό συνήθως αναφέρεται στη μη φόρτωση του αντικειμένου μέχρι ο χρήστης να κυλίσει προς τα κάτω στη σελίδα ή χρησιμοποιώντας ένα συμβάν μέσω ενός κλικ. Μπορείτε να κάνετε lazy load όλα τα είδη περιεχομένου, από εικόνες μέχρι βίντεο και ακόμη και το σύστημα σχολιασμού Disqus.

Lazy Load Εικόνων

Για να κάνετε lazy load εικόνων, υπάρχει ένα σπουδαίο δωρεάν plugin που ονομάζεται BJ Lazy Load. Αυτό το πρόσθετο αντικαθιστά όλες τις εικόνες, τις μικρογραφίες, τις εικόνες gravatar και τα περιεχόμενα iframes των αναρτήσεων με ένα σύμβολο κράτησης θέσης και φορτώνει το περιεχόμενο καθώς πλησιάζει στο σημείο εισαγωγής, στο παράθυρο του προγράμματος περιήγησης όταν ο επισκέπτης μετακινηθεί στη σελίδα. Επίσης λειτουργεί με widgets κειμένου. Εάν χρησιμοποιείτε το plugin WP Rocket caching, έχει κι αυτό την επιλογή να κάνετε lazy load εικόνες.

Lazy Load Βίντεο

Για να κάνετε lazy load τα βίντεό σας υπάρχει ένα δωρεάν plugin που ονομάζεται Lazy Load for Videos. Αντικαθιστά τα ενσωματωμένα βίντεο Youtube και Vimeo με μια εικόνα προεπισκόπησης με τη δυνατότητα κλικ. Αν ο ιστότοπός σας είναι γεμάτος βίντεο, αυτό το plugin και μόνο μπορεί να τον επιταχύνει δραματικά. Μετά την εγκατάσταση ο χρόνος φόρτωσης της σελίδας πήγε από τα 3,5 στα 1,5 δευτερόλεπτα και δεν θα μπορούσα να είμαι πιο ευτυχισμένος (James Crowd Convergence).

Lazy Load Disqus

Το Disqus είναι ένα εξαιρετικό σύστημα σχολιασμού και μπορεί να αποδειχθεί εξαιρετικά αποτρεπτικό για το spam, καθώς περικόπτει σχεδόν το 99% του. Ωστόσο, το προεπιλεγμένο Disqus plugin δημιουργεί 10 αιτήματα HTTP που μπορούν να επιβραδύνουν δραστικά τον ιστότοπό σας. Ευτυχώς, ο James Joel ανέπτυξε ένα plugin, το Disqus Conditional Load, το οποίο αποσυνδέει όλα αυτά τα αιτήματα HTTP κατά την αρχική φόρτωση. Είναι επίσης τώρα SEO φιλικό, που σημαίνει ότι η Google θα συνεχίσει να ανιχνεύει τα σχόλιά σας. Χρησιμοποιούμε αυτό το plugin μέχρι και στο blog μας!

Δημιουργία e-shop

Η παράμετρος της ταχύτητας παίζει τεράστιο ρόλο και στη δημιουργία e-shop. Εάν ένα ηλεκτρονικό κατάστημα είναι αργό τότε πολύ απλά θα απωθήσει τους υποψήφιους αγοραστές. Όποιο και να είναι το αντικείμενο το οποίο πουλάει το e-shop σίγουρα υπάρχουν και ανταγωνιστές αυτού. Καλό είναι να φροντίζουμε κατά την κατασκευή e-shop να το κάνουμε αρκετά γρήγορα ώστε να μην ταλαιπωρεί τον επισκέπτη. Αλλιώς ο επισκέπτης θα το εγκαταλείψει και θα πάει να ψωνίσει από τα ηλεκτρονικά καταστήματα των ανταγωνιστών. Η ταχύτητα φόρτωσης είναι μία παράμετρος πολύ σημαντική για την κατασκευή ηλεκτρονικού καταστήματος. Συνήθως όμως παραβλέπεται στις συζητήσεις που γίνονται όταν κάποιος αναθέσει την κατασκευή του ηλεκτρονικού του καταστήματος σε μία εταιρεία κατασκευής ιστοσελίδων. Και δυστυχώς όταν το ηλεκτρονικό κατάστημα παραδοθεί και μπει σε λειτουργία θα είναι πλέον αργά για να αλλάξει η τεχνολογία που τρέχει από κάτω και η οποία οδηγεί σε καθυστερήσεις και σε αργή φόρτωση του ηλεκτρονικού καταστήματος. Για να αποφύγετε τέτοια προβλήματα καλό θα είναι η ανάθεση κατασκευής ηλεκτρονικού καταστήματος να γίνεται σε εταιρείες δοκιμασμένες επί πολλά χρόνια στην ελληνική αγορά. Η κορυφαία ελληνική εταιρεία στην κατασκευή e-shop είναι dreamweaver. Μπορείτε να μεταβείτε κατευθείαν στη σελίδα του ιστότοπου της dreamweaver που αναφέρεται στην κατασκευή e-shop πατώντας εδω.

Οι παράμετροι βελτίωσης ταχύτητας δεν συγκαταλέγονται στις βασικές γνώσεις κατασκευής ιστοσελίδων. Είναι όμως Ίσως η πρώτη από τις μη βασικές γνώσεις που θα πρέπει να εμβαθύνετε. Κορυφαίος σύμβουλος σε αυτή την προσπάθεια είναι το βιβλίο κατασκευής ιστοσελίδων με τίτλο “ανάπτυξη ιστοσελίδων με το wordpress” το οποίο κυκλοφορεί από τις εκδόσεις φυλάτος. Στο βιβλίο κατασκευής ιστοσελίδων περιγράφονται λεπτομερώς όλες οι τεχνικές που μπορείτε να χρησιμοποιήσετε για να βελτιώσετε και να μεγιστοποιήσετε την ταχύτητα φόρτωσης της ιστοσελίδας σας. Μπορείτε να προμηθευτείτε το βιβλίο ανάπτυξη ιστοσελίδων με το wordpress πατώντας εδω.

Όλες αυτές οι τεχνικές επίσης διδάσκονται στα σεμινάρια ηλεκτρονικού εμπορίου. Τις απλές παιδικές γνώσεις τους πώς εισάγουμε επεξεργαζόμαστε και διαγράφουν προϊόντα από ηλεκτρονικά καταστήματα τις μαθαίνει κανείς εύκολα και μόνος του. Εκεί που χρειάζεται την πολύτιμη βοήθειά του εκπαιδευτή στα σεμινάρια e-commerce είναι όταν θέλει να εφαρμόσει πιο προηγμένες τεχνικές όπως είναι εκείνες οι τεχνικές που βοηθούν στην αύξηση σε ταχύτητα φόρτωσης του ιστότοπου. Εάν ψάχνετε για σεμινάρια ηλεκτρονικού εμπορίου υψηλής ποιότητας και ολοκληρωμένης κατάρτισης τότε δεν έχετε παρά να πατήσετε εδω.

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