WordPress Optimization σε Plesk Shared Hosting

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

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

Δεν θα αναφερθώ σε αυτο το blog post σχετικά με digital marketing και τα δέοντα.
Μας ενδιαφέρει εδώ να δούμε τις επιδόσεις ενός WordPress eshop, σε περιβάλλον Shared Hosting με έτοιμο theme απο την Themeforest.

Google PageSpeed Insights 98/100

Χρησιμοποιήσαμε ένα έτοιμο wordpress template απο την Themeforest. Συνήθως αυτά τα templates αν είναι προσεγμένα απο τον developer, εφαρμόζουν τις σωστές πρακτικές σε CSS, JQuery και Javascript.

Βέβαια το άθροισμα των plugins που χρησιμοποιούνται επιβαρύνουν στο σύνολο το ίδιο το wordpress με επιπλέον ΜΒ/GB αλλά και επιπλέον requests που κάνει ένας browser για να κατεβάσει το περιεχόμενο. Αν όμως τηρούνται οι σωστές πρακτικές δεν θα συναντήσουμε πρόβλημα σε οποιοδήποτε περιβάλλον.

Τι κάνουμε όμως όταν ένα WordPress template είναι γεμάτο απο plugins, javascripts και css? Πως μπορούμε να πετύχουμε ένα αξιοπρεπές αποτέλεσμα στις επιδόσεις του WordPress μας?

Ποια είναι τα εργαλεία μας:

– Εφόσον είμαστε σε περιβάλλον Shared Hosting, συνήθως θα είμαστε είτε με Plesk είτε με cPanel ως πίνακα διαχείρισης του hosting λογαριασμού μας. Στην περίπτωση που σας περιγράφω εδώ είμαστε με Plesk Onyx 17.5 σε Cloudlinux 7.

To Plesk είναι ένα αρκετά δυνατό εργαλείο διαχείρισης και στις τελευταίες εκδόσεις έχει βελτιωθεί αρκετά. Ταυτόχρονα έχει δημιουργηθεί ένα extension με την ονομασία WordPress Toolkit όπου τους hosting πελάτες τους βοηθάει αρκετά στην διαχείριση του WordPress απο θέμα αναβάθμισης, ασφάλειας, και backup.

Στην WebHosting|4U στην υπηρεσία Shared Hosting, τα χαρακτηριστικά είναι : Servers με Intel Xeon CPU E3-1245 V2, εξωτερικό storage οπτικών ινών, Cloudlinux 7.4 λειτουργικό, Apache με τον Nginx ώς Reverse Proxy όπως ακριβώς έχει σχεδιαστεί απο τους developers της Plesk.

Nginx High-Perfomance HTTP Server:

– Το πιό βασικό είναι να αξιοποιήσουμε τον Nginx ως reverse proxy πίσω απο τον Apache. Ο nginx θα σερβίρει το στατικό περιεχόμενο, ενώ ο Apache μόνο το δυναμικό. Στην δική μας υπηρεσία φιλοξενίας επίσης έχουμε ενεργοποιημένη την λειτουργία η PHP να τρέχει ως FPM application απο τον Nginx.

Cloudlinux Operating System.

Ένα τρομερό εργαλείο για εμάς τους παρόχους αλλά και τους ίδιους τους πελάτες. Ένα απο τα εργαλεία του Cloudlinux είναι να εγκαθιστά το extension PHP-Selector. Eπιτρέπει στους τελικούς χρήστες να επιλέξουν τη συγκεκριμένη έκδοση της PHP που χρειάζονται. Επιτρέπει την απόλυτη ευελιξία, προσφέροντας όλες τις δημοφιλείς εκδόσεις της PHP, με περισσότερα από 120 extensions PHP για να διαλέξετε.

Στην δική μας shared hosting υπηρεσία έχουμε ενεργοποιημένα (πέρα των απαραιτήτων) απο default, τα extensions memcached, memcache, redis, opcache. Κάποια μικρά tweaks έχουν γίνει στην συνολική υποδομή για να αντιμετωπίσουν τις απαιτήσεις στο σύνολο τον φιλοξενούμενων domains.
Για το συγκεκριμένο domain μιας και το διαχειρίζομαι εγώ, έχω επιλέξει έκδοση PHP 7.1.x (Υπόψιν η php 5.6.31 απο 01/01/2018 θεωρείτε end of life, θα βγαίνουν περιοδικά κάποια security patches)

Μέχρι στιγμής στο WordPress δεν έχουμε εγκαταστήσει κάποιο caching plugin.

Όλες τις caching gzipped λειτουργίες μέχρι στιγμής τις ελέγχουμε απο τον Nginx.

Για το αν θα χρησιμοποιήσουμε caching plugin θα εξαρτηθεί απο το μέγεθος του e-Shop, την επισκεψιμότητα και τις ανάγκες σε πόρους που μπορεί να προκύψουν.

Ο Nginx όμως ως Reverse Proxy σε συνδιασμό με την PHP να τρέχει ώς FPM Application μπορεί να σηκώσει αρκετό βάρος.

Σαν μια μικρή παραμετροποίηση, πρόσθεσα στο πεδίο Apache & nginx Settings, εντός του Plesk panel, τις εξής ρυθμίσεις :

Expires : 7 Days

Additional headers : Cache-Control “public”;

Nginx Settings : Serve static files directly by nginx

Συμπέρασμα:

Ακόμα και σε γυμνό μάτι θα δείτε αισθητή διαφορά στην ιστοσελίδα μετά τις παραπάνω ρυθμίσεις.
Στην δική μας Shared Hosting υπηρεσία, όποιο πακέτο κι αν διαλέξει ο πελάτης οι παραπάνω λειτουργίες είναι ενεργοποιημένες ως default.

Οπότε μέχρι στιγμής έχουμε πάρει καλά αποτελέσματα απο τις μετρήσεις που κάναμε σε gtmetrix & Google pagespeed insights. Μας βγάζει όμως ακόμα χαμηλό σκορ γύρω στο 75/100 εξαιτίας των πολλαπλών requests σε javascript και css.
Ένας developer με εμπειρία θα έβαζε σε 1-2 αρχεία ότι χρειαζόταν το theme μας απο απαιτήσεις css/javascript. Με τα έτοιμα όμως themes σπάνια συμβαίνει αυτό.

Το πιό απλό plugin που βρήκα, χωρίς να χαλάει το layout του WordPress ή οποιαδήποτε άλλη λειτουργία είναι το Autoptimize.
Μετά την εγκατάσταση ενεργοποίησα τις παρακάτω ρυθμίσεις :
Optimize JavaScript Code
Optimize CSS Code

Δεν πείραξα τίποτα άλλο απο τις advanced ρυθμίσεις του plugin.
Αν χρειαστεί να ενεργοποιήσετε κι άλλες επιλογές, κάντε πρώτα τις δοκιμές σας.

Η υπερβολική συμπίεση ή η μεγάλη cache δημιουργεί προβλήματα στην πλοήγηση απο έναν απλό χρήστη.