Ταχύτερη Ιστοσελίδα WordPress Χωρίς Χρήση Cache και CDN

by / Παρασκευή, 12 Δεκεμβρίου 2014 / Published in Κατασκευή Ιστοσελίδων

Είναι δεδομένο πια και γνωστό σε όσους αποφασίζουν να προχωρήσουν σε κατασκευή ιστοσελίδας  ότι η ταχύτητα ιστοσελίδας παρέχει πολλαπλά οφέλη. Μερικά από αυτά είναι άμεσα και άλλα έμμεσα και συνδυαστικά. Θα αναφέρουμε ενδεικτικά ότι μια ιστοσελίδα που εμφανίζεται ταχύτερα στον browser βοηθά στην υψηλότερη κατάταξή της στην μηχανή αναζήτησης Google, μειώνει το ποσοστό εγκατάλειψης (Bounce rate), αυξάνει τις πωλήσεις σε περίπτωση eshop και πολλά ακόμα. Πώς όμως επιτυγχάνεται και ποιοι είναι οι παράγοντες που προκαλούν καθυστέρηση στην εμφάνισή της;

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

Τα αρνητικά αποτελέσματα από την χρήση Cache και CDN

Η συνήθης τακτική που ακολουθείται από τους webmasters, με σκοπό την ταχύτερη φόρτωση μιας ιστοσελίδας WordPress, είναι μέσω της ενεργοποίησης του μηχανισμού προσωρινής αποθήκευσης περιεχομένου (caching) όπως και με την φιλοξενία τμημάτων της ιστοσελίδας σε άλλον server (CDN). Η χρήση αυτών των τεχνικών ναι μεν αυξάνει την ταχύτητα της ιστοσελίδας, αλλά από την εμπειρία μου σας λέω ότι δημιουργεί άλλα προβλήματα. Μερικά από αυτά είναι :

  • Το νέο περιεχόμενο αργεί να εμφανιστεί
  • Malware και Hackers προσβάλουν το προσωρινό περιεχόμενο
  • Οι εικόνες που φιλοξενούνται στον CDN server δεν οδηγούν στην κυρία ιστοσελίδα (κακό seo)
  • Ασυμβατότητα plugins και θεμάτων με τον μηχανισμό caching
  • Μηδενική παραμετροποίηση από τον χρήση

Η σχέση μου με τους μηχανισμούς caching και plugins όπως το W3 Total Cache είναι κάτι σαν το λεγόμενο “Love to hate you”. Όσες φορές τους χρησιμοποίησα με εντυπωσιακά αρχικά αποτελέσματα, τόσες φορές τους απέρριψα στην συνέχεια λόγω των προβλημάτων που προκαλούσαν, προβλήματα που με την πρώτη ματιά δεν φαίνονταν.

Μέθοδος αύξησης ταχύτητας ιστοσελίδας WordPress χωρίς την χρήση Cache και CDN

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

Μέτρηση ταχύτητας ιστοσελίδας

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

Οι εφαρμογές μέτρησης ταχύτητας είναι οι ακόλουθες και η χρήση τους είναι δωρεάν :

Google Pagespeed Insights
GTmetrix
Pingdom Test Tools

Βελτίωση ταχύτητας ιστοσελίδας

Οι βελτιώσεις που προτείνουμε αφορούν στα σημεία της βελτιστοποίησης εικόνων, της ασύγχρονης φόρτωσης java scripts, της συρρίκνωσης αρχείων .js και .css και στον ορισμό του χρόνου παραμονής περιεχομένου στην μνήμη cache του browser.

Βελτιστοποίηση εικόνων

Προγράμματα διαχείρισης εικόνων όπως το Photoshop, το Fireworks, το Gimp κ.α. έχουν φτάσει σε πολύ καλά επίπεδα συμπίεσης για εικόνες τύπου .jpg που πρόκειται να χρησιμοποιηθούν στο Web. Μικρή είναι όπως η πρόοδος που έχει γίνει αναφορικά με την συμπίεση εικόνων τύπου .png χωρίς background. Έτσι καταλήγουμε σε εικόνες png πλάτους και ύψους μερικών δεκάδων pixels να έχουν μέγεθος 100-200kb. Την λύση έρχεται να δώσει το πρόσθετο Compress PNG for WP το οποίο χρησιμοποιεί το API της δημοφιλούς υπηρεσίας συμπίεσης εικόνων TinyPNG. Το plugin προσφέρει επιπλέον συμπίεση για τις υπάρχουσες εικόνες png τις ιστοσελίδας όπως και αυτόματη βελτίωση των νέων. Στην έκδοση 1.3 η οποία κυκλοφόρησε πριν από μερικές ημέρες προσφέρει βελτίωση και σε εικόνες τύπου jpg με άριστα αποτελέσματα.

Ασύγχρονη φόρτωση και συρρίκνωση java scripts

Είναι σύνηθες κάθε plugin να διαθέτει το δικό του java script το οποίο απαιτείται για την λειτουργία του. Ακόμα μπορεί και το ίδιο το θέμα που χρησιμοποιεί η ιστοσελίδα, να περιλαμβάνει κάποιο java script ή να χρησιμοποιεί βιβλιοθήκες jquery. Έτσι για παράδειγμα αν η ιστοσελίδα σας διαθέτει ένα μέσο αριθμό 10 plugins συν το θέμα της ιστοσελίδας, τότε κατά την φόρτωση της εκτελούνται περισσότερα από 10 java scripts. Η εκτέλεση όλων των scripts πραγματοποιείται κατά την φόρτωση της ιστοσελίδας. Ο χρόνος που χρειάζονται τα scripts για να εκτελεστούν επιβαρύνει τον συνολικό χρόνο φόρτωσης της ιστοσελίδας. Την λύση στο πρόβλημα έρχεται να δώσει η τεχνική της ασύγχρονης εκτέλεσης java script. Με απλά λόγια ορίζουμε της σειρά εκτέλεσης των java scripts και αποτρέπουμε την ταυτόχρονη εκτέλεση τους. Ακόμα ορίζουμε ποια θα εκτελούνται στο header της ιστοσελίδας και πια στο footer. Ορισμός προτεραιοτήτων επιτυγχάνεται με την χρήση του plugin Better WordPress Minify. Ακόμα το plugin προσφέρει την αυτόματη συρρίκνωση πολλών java script σε ένα μεγάλο για περαιτέρω αύξηση της ταχύτητας φόρτωσης.

Χρόνος παραμονής περιεχομένου στην μνήμη cache του Browser

Είναι αναγκαίος ο ορισμός χρόνου παραμονής των στατικών στοιχείων της ιστοσελίδας μας στην προσωρινή μνήμη του browser του χρήστη. Έτσι σε περίπτωση που οι χρήστες της ιστοσελίδας μας, την επισκέπτονται ανά τακτά χρονικά διαστήματα, τα στατικά στοιχεία της όπως λογότυπα, backgrounds, εικονίδια, κ.α. δεν θα φορτώνονται από τον server αλλά από την προσωρινή μνήμη του browser αυξάνοντας έτσι την ταχύτητα φόρτωσης. Για την εφαρμογή αυτής της τεχνικής θα πρέπει να εισάγετε τις παρακάτω εντολές στο αρχείο .htaccess της ιστοσελίδας σας. Το αρχείο .htaccess βρίσκεται στον root φάκελο της ιστοσελίδας σας.

<FilesMatch "(?i)^.*\.(ico|flv|jpg|jpeg|png|gif|js|css|woff)$">
ExpiresActive On
ExpiresDefault A2592000

Περαιτέρω βελτίωση ταχύτητας ιστοσελίδας

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

AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

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

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

Ταχύτερη Ιστοσελίδα WordPress Χωρίς Χρήση Cache και CDN

 

Follow me

Ντίνος Κρεούζης

Web Designer & SEO Professional at Creative Shop
Υπεύθυνος κατασκευής ιστοσελίδων και internet marketing στο Creative Shop, ειδικός σε θέματα SEO, Social Media Marketing και διαφήμισης PPC, συγγραφέας του βιβλίου SEO Master Using the Power of WordPress
140 σελίδων στο οποίο εξηγεί πως μια ιστοσελίδας μπορεί να εμφανίζεται στις πρώτες σελίδες του Google. Το βιβλίο διατίθεται από τα μεγαλύτερα ηλεκτρονικά βιβλιοπωλεία όπως το Amazon, iBookstore, Barnes & Noble, Kobo, Google Books, Sony Books.
Follow me
TOP