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

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

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

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

Τι πρέπει να προσέξω και πως επιλέγω έναν γρήγορο server

Βασικό ρόλο στην γρήγορη φόρτωση μιας ιστοσελίδας έχει ο server που φιλοξενείται, τα πακέτα φιλοξενίας ποικίλουν σίγουρα μια φιλοξενία σε εναν VPS ή  dedicated server είναι καλύτερη απο ότι σε έναν shared αλλά για μικρή επιχείρηση το κόστος ενός VPS ή dedicated ίσως να είναι απαγορευτικό.

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

Πως θα γνωρίζουμε αν έχουμε επιλέξει έναν σωστά στημένο server για Wordpress έστω και shared hosting και πια είναι τα χαρακτηριστικά που πρέπει να έχει ο server για να πάρουμε το μέγιστο δυνατό αποτέλεσμα.

Ο server που θα επιλέξουμε πρέπει να έχει τα παρακάτω χαρακτηριστικά για να πάρουμε το μέγιστο δυνατό αποτέλεσμα.

  • PHP 7 ή μεγαλύτερη
  • Να υποστηρίζει την τεχνολογία Litespeed
  • Το πακέτο φιλοξενίας να σας παρέχει CPanel έτσι ώστε να επωφεληθείτε απο τις δυνατότητες βελτιστοποίησης που παρέχει.

Ok βρήκα τον κατάλληλο server, τώρα τι ;

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

  1. Ενας βασικός κανόνας είναι όσο το δυνατόν λιγότερα plugin-πρόσθετα τόσο καλύτερα, προσωπικά αποφεύγω να χρησιμοποιώ (όπου μπορώ) plugins και χρησιμοποιώ απευθείας δικό μου κώδικα, το ίδιο ισχύει και για τα themes κρατήστε μόνο το βασικό theme του Wordpress και φυσικά το theme που χρησιμοποιείτε και διαγράψτε όλα τα υπόλοιπα.
  2. Σημαντικό ρόλο παίζει και η βελτίωση των φωτογραφιών αν το πακέτο φιλοξενίας που έχετε δεν υποστηρίζει Litespeed μπορείτε να χρησιμοποιήστε το πρόσθετο WP Smush it ή κάποιο άλλο παρόμοιο για βελτιστοποίηση των φωτογραφιών, το Litespeed έχει δικό του μηχανισμό βελτιστοποίησης οπότε δεν έχετε την ανάγκη κάποιου έξτρα πρόσθετου.
  3. Αν ο server που έχετε επιλέξει υποστηρίζει το Litespeed εγκαταστήστε αυτό σαν caching plugin και είστε έτοιμοι διαφορετικά μπορείτε να εγκαταστήσετε κάποιο άλλο caching plugin (WP Fastest Cache, WP Super Cache κλπ), τα περισσότερα από τα caching plugins προσφέρουν μια σειρά από επιπλέον ευκολίες που μπορούν να δώσουν έξτρα ώθηση στην ταχύτητα της σελίδας σας. Τα caching plugins ουσιαστικά φτιάχνουν μια στατική έκδοση της κάθε σελίδας και σερβίρουν αυτή στους επισκέπτες, τα οφέλη από τη χρήση του caching είναι σημαντικά γιατί μειώνουν αρκετά το χρόνο φόρτωσης της ιστοσελίδας σας.
  4. Καλό είναι να μην μένουν άρθρα οι σελίδες που δεν σας είναι χρήσιμα οπότε όταν ολοκληρώσετε την ιστοσελίδα που δημιουργήσατε διαγράψτε μέσα απο το περιβάλλον διαχείρισης τα περιττά άρθρα ή και σελίδες.
  5. Χρησιμοποιήστε ενα γρήγορο και καλογραμμένο theme-θέμα. Η εμφάνιση της σελίδας σας είναι σημαντική και η σωστή επιλογή θέματος είναι κρίσιμη για τη σχεδίαση μια ιστοσελίδας, εδώ πρέπει να προσέξετε διότι υπάρχουν multipurpose θέματα που προσπαθούν να τα κάνουν όλα, με αποτέλεσμα να είναι μεγάλα σε μέγεθος, βαριά για τον server και να σας φορτώνουν με πολλά και άχρηστα αρχεία.

Συνεχίζοντας θα αναφέρω τρόπους βελτιστοποίησης του Wordpress που για να τους εφαρμόσετε θα χρειαστεί να γράψετε κάποιες εντολές (όπως ανέφερα αποφεύγω τα plugin-πρόσθετα) οπότε πριν προχωρήσετε καλό θα ήταν να έχετε ένα backup.

Πειράζοντας το wp-config.php

To αρχείο wp-config.php βρίσκεται στον αρχικό φάκελλο ή home folder της εγκατάστασης του wordpress, ανοίγουμε αυτό το αρχείο με έναν text editor και προσθέτουμε στην αρχή τις παρακάτω εντολές

1define( 'WP_POST_REVISIONS', 3 );  
2
3define('WP_HOME', 'https://www.yoursite.com');   //add your website URL
4define('WP_SITEURL', 'https://www.yoursite.com');

Η εντολή WP_POST_REVISIONS ορίζει πόσα post θα κρατάει το Wordpress στην βάση δεδομένων, έβαλα 3 αλλά μπορείτε να το αλλάξετε σε 2 αν θέλετε, ο λόγος που το κάνουμε αυτό είναι γιατί το Wordpress κρατάει όλα τo ιστορικό ενός post-page στην βάση του με αποτέλεσμα να μεγαλώνει η βάση δεδομένων χωρίς να υπάρχει λόγος.

Οι επόμενες δύο εντολές βοηθούν γιατί ορίζουμε ποια είναι η διεύθυνση της ιστοσελίδας μας, με αυτό το τρόπο αποφεύγουμε τα περιττά ερωτήματα προς την βάση δεδομένων(αντικαταστήστε το www.yoursite.com με το δικό σας url).

Προσαρμόζοντας το functions.php με σκοπό την περαιτέρω βελτιστοποίηση

Το αρχείο functions.php βρίσκεται στον αρχικό φάκελλο εγκατάστασης του θέματος που χρησιμοποιείτε, σας υπενθυμίζω οτι κάνοντας αλλαγές στο συγκεκριμένο αρχείο μετά από ενημέρωση/αναβάθμιση του θέματος αυτές θα χαθούν οπότε για αυτό το λόγο χρησιμοποιούμαι πάντα child theme του θέματος που έχουμε ενεργό ώστε με την όποια ενημέρωση αναβάθμιση να μην χαθούν οι αλλαγές που έχουμε κάνει.

Μερική απενεργοποίηση του Heartbeat API

To Heartbeat API του WordPress είναι μια υπηρεσία που στέλνει συνεχώς εντολές για την εκτέλεση περιοδικών εργασιών.Αυτό βοηθά το πρόγραμμα περιήγησης να επικοινωνεί με τον διακομιστή χρησιμοποιώντας κλήσεις ajax, παρέχοντας πληροφορίες σε πραγματικό χρόνο στον πίνακα ελέγχου του WordPress.Το πρόβλημα είναι ότι το Hearbeat API στέλνει συνεχείς αιτήσεις ajax στον server και έτσι μπορεί να στείλει μεγάλο αριθμό αιτημάτων στον διακομιστή φιλοξενίας, με αποτέλεσμα να έχουμε υψηλά επίπεδα χρήσης του επεξεργαστή του server.
Μπορούμε να περιορίσουμε αυτήν την υπηρεσία API, επιτρέποντάς της να εκτελείται μόνο κατά τη δημιουργία ή την επεξεργασία μιας ανάρτησης έτσι ώστε να διατηρούμε ενεργή τη λειτουργία αυτόματης αποθήκευσης, αυτό θα το επιτύχουμε προσθέτοντας στο αρχείο functions.php τις παρακάτω εντολές.

1add_action( 'init', 'my_deregister_heartbeat', 1 );
2function my_deregister_heartbeat() {
3    global $pagenow;
4
5    if ( 'post.php' != $pagenow && 'post-new.php' != $pagenow )
6        wp_deregister_script('heartbeat');
7}

Από προεπιλογή το WordPress φορτώνει όλα τα αρχεία JavaScript στοτου HTML, μεταφέροντας τα αρχεία JavaScript στο υποσέλιδο-footer είναι μία συνηθισμένη πρακτική προκειμένου να αποφευχθεί ο αποκλεισμός του προγράμματος ανάλυσης HTML και να βελτιστοποιηθεί ο χρόνος φόρτωσης της ιστοσελίδας σας.Αυτό μπορούμε να το επιτύχουμε αν προσθέσουμε τον ακόλουθο κώδικα στο αρχείο functions.php

 1// Custom Scrip to Move JavaScript from the Head to the Footer
 2function remove_head_scripts() {
 3remove_action(‘wp_head’, ‘wp_print_scripts’);
 4remove_action(‘wp_head’, ‘wp_print_head_scripts’, 9);
 5remove_action(‘wp_head’, ‘wp_enqueue_scripts’, 1);
 6
 7add_action(‘wp_footer’, ‘wp_print_scripts’, 5);
 8add_action(‘wp_footer’, ‘wp_enqueue_scripts’, 5);
 9add_action(‘wp_footer’, ‘wp_print_head_scripts’, 5);
10}
11add_action( ‘wp_enqueue_scripts’, ‘remove_head_scripts’ );
12
13// END Custom Script to Move JavaScript

Φόρτωση των αρχείων javascript ασύγχρονα

Η φόρτωση των αρχείων javascript στο υποσέλιδο-footer δεν αρκεί, πρέπει να τα κάνετε να φορτώνουν ασύγχρονα.Οταν ξεκινά η φόρτωση μιας σελίδας εγγράφου HTML και ο περιηγητής συναντήσει μια ετικέτα <script> την εκτελεί προτού ολοκληρώσει την φόρτωση του HTML αυτό δεν είναι σωστό γιατί δημιουργεί καθυστέρηση στην φόρτωση της σελίδας, η λύση σε αυτό είναι είτε να χρησιμοποιήσετε το DEFER είτε το ASYNC για τα αρχεία JavaScript.Η τεχνική Async δεν μπορεί να εγγυηθεί τη σειρά με την οποία θα εκτελεστούν τα αρχεία JavaScript, σε αντίθεση η Defer θα φορτώσει τα αρχεία ασύγχρονα αλλά θα εκτελεστούν με τη σειρά που καθορίζεται από την σελίδα σας.Οπότε προσθέτουμε τον παρακάτω κώδικα στο αρχείο functions.php

1//Defer parsing of JavaScript
2if (!is_user_logged_in()){
3	function add_defer_attribute($tag, $handle) {
4		return str_replace(' src', ' defer src', $tag);	
5	}
6	add_filter('script_loader_tag', 'add_defer_attribute', 10, 2);
7}
8//End Defer parsing of JavaScript

Αφαιρέστε τα περιττά στοιχεία από την κεφαλίδα header

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

 1// REMOVE UNNEEDED STUFF FROM HEADER
 2remove_action('wp_head', 'rsd_link');
 3remove_action('wp_head', 'wp_generator');
 4remove_action('wp_head', 'feed_links', 2);
 5remove_action('wp_head', 'index_rel_link');
 6remove_action('wp_head', 'wlwmanifest_link');
 7remove_action('wp_head', 'feed_links_extra', 3);
 8remove_action('wp_head', 'start_post_rel_link', 10);
 9remove_action('wp_head', 'parent_post_rel_link', 10);
10remove_action('wp_head', 'adjacent_posts_rel_link', 10);
11
12// REMOVE WP EMOJI
13remove_action('wp_head', 'print_emoji_detection_script', 7);
14remove_action('wp_print_styles', 'print_emoji_styles');
15remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
16remove_action( 'admin_print_styles', 'print_emoji_styles' );

Κρατήστε το Wordpress ενημερωμένο

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

Πως ελέγχω την ταχύτητα της ιστοσελίδας μου

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

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

Επίλογος

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