Τα βασικά βήματα για ένα ταχύτερο WordPress

Πρώτα απ όλα κάντε ένα backup  ιστοσελίδας σας.

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

Σύμφωνα με αυτή την έρευνα το 40% των επισκεπτών, εγκαταλείπει μια σελίδα εάν κάνει περισσότερα από 3 δευτερόλεπτα για να φορτώσει. Σαράντα τοις εκατό;; Όπα, για κάτσε. Αυτό είναι πολύ!

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

Ωραία. Στο ζουμί τώρα. Πως ξεκινάμε;

1. Επιλέξτε ένα γρήγορο server φιλοξενίας

Η επιλογή του σωστού hosting είναι ίσως ένας από τους σημαντικότερους παράγοντες που επηρεάζουν την ταχύτητα φόρτωσης της ιστοσελίδας. Με δεδομένο ότι συνήθως υπάρχει ένα συγκεκριμένο budget για κάλυψη των εξόδων φιλοξενίας, θα πρέπει να βρείτε μια εταιρεία που να προσφέρει καλή σχέση απόδοσης/τιμής, καλό και γρήγορο support, αντίγραφα ασφαλείας και το βασικότερο, να έχει τους server της κοντά στην περιοχή που εξυπηρετείται. Τι να το κάνω αν φορτώνει σφαίρα τη σελίδα στην Αμερική, όταν όλοι μου οι επισκέπτες είναι από Ελλάδα.

Τα πακέτα hosting χωρίζονται συνήθως σε 3 βασικές κατηγορίες, χωρίς αυτό να είναι πανάκεια:

• Shared Hosting: δηλαδή φιλοξενία σε ένα server όπου θα συζούν μαζί σου κι άλλα site τα οποία μοιράζονται τους πόρους του server. Σε αυτή τη λύση καταφεύγουμε συνήθως όταν έχουμε μια μικρής κλίμακας ιστοσελίδα, με μικρό όγκο επισκεπτών. Πολλές φορές όμως, οι εταιρείες παροχής hosting υπερφορτώνουν τους κοινόχρηστους server με αποτέλεσμα να αργούν όλα τα site που βρίσκονται σε αυτούς.
• VPS Hosting: είναι η φιλοξενία σε “εικονικό” server όπου στην ουσία χειρίζεσαι ένα virtual machine, με σχετικά περιορισμένους αλλά δικούς σου πόρους. Είναι ιδανική λύση για μεσαίου μεγέθους ιστοσελίδες.
• Dedicated Server Hosting: είναι η λύση στα site μεγάλης κλίμακας, όπου δεν μπορούν να υπάρχουν εκπτώσεις στην ταχύτητα. Ουσιαστικά, νοικιάζεις έναν ολόκληρο server και χρησιμοποιείς όλους του τους πόρους.

Γενικά, καλό είναι πριν αγοράσετε κάποιο πακέτο hosting, να ψάξετε για κρυμμένα ψιλά γράμματα που βάζουν καπέλο στα διαφημιζόμενα χαρακτηριστικά του server, όπως το unlimited bandwidth που δεν είναι ποτέ unlimited ή οι “δίσκοι SSD για γρήγορα reads & writes” που στην πραγματικότητα έχουν limit στο πόσα MB/sec σε αφήνουν να χρησιμοποιήσεις.

ξεκινάτε να ψάχνετε;

Ξεκινήστε διαβάζοντας reviews με κριτικό μάτι, γιατί παίζουν διάφορα συμφέροντα και sponsored άρθρα. Μη βασιστείτε στη γνώμη ενός και μόνο site, αλλά κάντε πιο σφαιρική έρευνα. Δοκιμάστε και μια αναζήτηση στο Ελληνικό Group του WordPress στο Facebook, όπου η συζήτηση για hosting είναι συχνή και… εποικοδομητική!

ΟK, βρήκα τον server και έστησα το site μου. Τώρα τι;

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

• Pingdom Tools: Διευκολύνει γιατί δίνει την επιλογή τοποθεσίας. Μπορείτε να δείτε δηλαδή την ταχύτητα φόρτωσης που θα έχει π.χ. ένας επισκέπτης από Αμερική και ένας από Αγγλία. Το κακό του είναι ότι έχει κάπως παρωχημένες προτάσεις αναφορικά με τις προτεινόμενες βελτιώσεις.
• GTmetrix: Έχει έδρα τον Καναδά, με αποτέλεσμα να μην αντικατοπτρίζει αποτελέσματα επισκεπτών από Ελλάδα, όμως έχει πολύ καλό σύστημα σε ότι αφορά τις προτεινόμενες ενέργειες για αύξηση της ταχύτητας.
• sitepeed.gr: Είναι βασισμένο στο πολύ καλό WebPageTest.org αλλά χρησιμοποιεί test server από Ελλάδα, είναι ιδανικό δηλαδή εάν το μεγαλύτερο μέρος των επισκεπτών είναι από τη χώρα μας.
• Google Page Speed Insights: Το πιο αυστηρό από τα τέσσερα, ειδικά κατά τη δοκιμή σε κινητές συσκευές, μιας και προσομοιάζει mid-range συσκευή με 3G δίκτυο. Μάλλον μας ωθεί να το γυρίσουμε σε AMP…

Επομένως, διαλέγουμε το test ή τα test που μας ταιριάζουν και δοκιμάζουμε την τύχη μας.

2. Χρησιμοποιείστε την πιο πρόσφατη έκδοση Wordpress και php

Ένα πακέτο hosting που σέβεται τον εαυτό του, θα έχει σίγουρα την επιλογή χρήσης μιας πρόσφατης έκδοσης php. Θα πρότεινα την php 7.3 καθώς η έκδοση 7.4 είναι τόσο νέα που κάποια plugins μπορεί να μη δουλεύουν ακόμα σωστά. Η php, από έκδοση σε έκδοση καταφέρνει να γίνεται ακόμα πιο γρήγορη, με το πιο εντυπωσιακό άλμα σε ταχύτητα να συνέβη μεταβαίνοντας από την έκδοση 5.6 στην έκδοση 7.0.

Για να αλλάξετε την έκδοση της php, συνήθως θα πρέπει να μπείτε στο panel διαχείρισης (cpanel, plesk κ.λπ.) που σας προσφέρει ο πάροχος hosting και να εντοπίσετε την κατάλληλη επιλογή. Αν δεν βρίσκετε τρόπο να την αλλάξετε, δοκιμάστε να επικοινωνήσετε με το support του server και να ζητήσετε την αλλαγή.

Συμπέρασμα: δεν θα χρησιμοποιήσω ξανά php 5.6. Είναι αρχαία σαν την Σαπουντζάκη Ακρόπολη.

3. Χρησιμοποιήστε ένα γρήγορο theme

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

Στην περίπτωσή του παρόντος site, επειδή είναι φτιαγμένο με τον pagebuilder “Elementor Pro” δεν υπάρχει ανάγκη για χρήση περίπλοκου theme, καθώς ο builder προσφέρει πληθώρα ευκολιών για τη σχεδίαση τόσο των επιμέρους σελίδων όσο και της κεφαλίδας και του υποσέλιδου. Έτσι διάλεξα ένα πολύ απλό, από τους δημιουργούς του Elementor, το Hello Theme, το οποίο είναι as minimal as it gets. Για να καταλάβετε πόσο απλό είναι, το πακέτο εγκατάστασής του είναι 380 KB! Ρίξτε και μια ματιά στον customizer:

Hello Theme Customizer

Ουσιαστικά, μόνο το λογότυπο και το favicon δηλώνεις! Τόσο barebone.

4. Χρησιμοποιήστε ένα plugin για Caching

Ίσως είναι το δεύτερο σημαντικότερο βήμα, έπειτα από την επιλογή καλού hosting. Η σελίδες που παράγονται από το WordPress είναι δυναμικές, δηλαδή δημιουργούνται από την αρχή κάθε φορά που κάποιος τις επισκέπτεται. Τα caching plugins ουσιαστικά φτιάχνουν μια στατική έκδοση της κάθε σελίδας και σερβίρουν αυτή στους επισκέπτες. Τα οφέλη από τη χρήση του caching μπορεί να είναι εντυπωσιακά, προσφέροντας δραματικά μειωμένους χρόνους φόρτωσης.

Έπειτα από αρκετές δοκιμές, κατέληξα να βάλω το LiteSpeed Cache στη σελίδα αυτή, καθώς ο server μου χρησιμοποιεί LiteSpeed και όχι Apache ή NGiNX, με αποτέλεσμα να δω και τη μεγαλύτερη διαφορά. Εναλλακτικά, μπορείτε να χρησιμοποιήσετε το ανερχόμενο WP Fastest Cache, το οποίο κάνει εξίσου εξαιρετική δουλειά, ή ένα από τα πιο παλιά και δημοφιλή plugins, όπως το WP Super Cache ή το W3 Total Cache.

Τα περισσότερα από τα caching plugins προσφέρουν μια σειρά από επιπλέον ευκολίες που μπορούν να δώσουν έξτρα ώθηση στην ταχύτητα της σελίδας σας:

Ελαχιστοποίηση των αρχείων CSS και Javascript

Είναι η διαδικασία κατά την οποία από τα αρχεία CSS και JS που κασάρονται, αφαιρούνται οι περιττοί χαρακτήρες (τα κενά, τα tab κλπ), με αποτέλεσμα τα τελικά αρχεία να μειώνονται σε μέγεθος.

Εάν το caching plugin σας δεν προσφέρει δυνατότητα ελαχιστοποίησης των CSS και JS, δοκιμάστε το Autoptimize.

Μην ξεχνάτε, κάθε χαρακτήρας είναι και ένα byte. Όμως σε μερικές δεκάδες χιλιάδες γραμμές κώδικα, το minificaton μπορεί να κάνει διαφορά. Φασούλι το φασούλι…

Συνδυασμός των αρχείων CSS και Javascript

Κάθε πήγαινε-έλα μεταξύ του server και του προγράμματος περιήγησης του εκάστοτε επισκέπτη μετράει ως ένα request. Όταν η σελίδα σας αποτελείται από πολλά αρχεία, ο όγκος των request αυξάνεται, με αποτέλεσμα η ταχύτητα φόρτωσης να μειώνεται. Η αλόγιστη χρήση διαφόρων plugins ή η επιλογή κακογραμμένου theme, μπορεί να δημιουργήσει πολλαπλά request και αργούς χρόνους φόρτωσης. Τα περισσότερα caching plugins προσφέρουν τη δυνατότητα συνδυασμού των αρχείων CSS και JS, με αποτέλεσμα να διακινούνται λιγότερα αρχεία. Προσοχή, πολλές φορές ο συνδυασμός αρχείων JavaScript μπορεί να οδηγήσει σε λειτουργικά προβλήματα στις σελίδες μας, οπότε testing, testing και ξανά testing.

Προσωρινή αποθήκευση του προγράμματος περιήγησης (Leverage browser caching)

Μπορούμε να “πούμε” στον κάθε browser να κρατήσει κάποια από τα αρχεία τα οποία απαρτίζουν τη σελίδα μας στην τοπική cache του περιηγητή του χρήστη. Έτσι, οι επαναλαμβανόμενοι χρήστες δεν χρειάζεται να κατεβάσουν ξανά όλη την ιστοσελίδα, κάθε φορά που την επισκέπτονται. Τα caching plugins συνήθως έχουν επιλογή για ενεργοποίηση του Browser Caching αλλά μπορείτε να το κάνετε και χειροκίνητα, εισάγοντας τον παρακάτω κώδικα στο τέλος του αρχείου .htaccess που βρίσκεται στον βασικό κατάλογο του site σας, μαζί με τα υπόλοιπα αρχεία του WordPress.

<IfModule mod_expires.c>
  ExpiresActive On

  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

Μικρό τιπ: το αρχείο .htaccess ξεκινάει με τελεία, που στον κόσμο του linux σημαίνει ότι είναι κρυφό αρχείο. Έτσι, ίσως θα πρέπει να ρυθμίσετε τον file manager ή τον FTP Client που χρησιμοποιείτε, ώστε να εμφανίζει κρυφά αρχεία.

Συμπίεση (gzip ή brotli)

Αντίστοιχα πάλι, μπορείτε να ενεργοποιήσετε την συμπίεση των αρχείων που είναι text-based (HTML, CSS, php, JavaScript, SVG, TTF κλπ.) από την επιλογή του plugin που χρησιμοποιείτε για caching. Αν και πάλι δεν σας προσφέρει τέτοια επιλογή, θα πρέπει να καταφύγετε στον manual τρόπο, δηλαδή να προσθέσετε στο αρχείο .htaccess τον παρακάτω κώδικα:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Ορισμένες φορές, η συμπίεση γίνεται σε επίπεδο server, οπότε το παραπάνω βήμα ίσως να μη χρειάζεται. Σε κάθε περίπτωση, μπορείτε να κάνετε ένα τσεκ εάν η σελίδα σας διακινείτε συμπιεσμένη ή όχι κάνοντας μια επίσκεψη στο Gift Of Speed.

Caching επίλογος…

Παίξτε με τις επιλογές που σας δίνουν τα Caching plugins και δείτε ποιες δουλεύουν καλύτερα για εσάς και τον server σας.

Εγώ μάλλον κατέληξα στις ιδανικές ρυθμίσεις. Μια δοκιμή θα σας πείσει λοιπόν. Απενεργοποιώ το LiteSpeed που χρησιμοποιώ για caching και το αποτέλεσμα στο Pingdom Tools έχει ως εξής:

LiteSpeed απενεργοποιημένο

Ενεργοποιώ το Litespeed και ξανατρέχω το test:

LiteSpeed Ενεργοποιημένο

Το αποτέλεσμα; Κερδίσαμε ένα δευτερόλεπτο και τα requests μειώθηκαν κατά 25! Νοτ μπαντ, νοτ μπαντ. 

5. Βελτιστοποιήστε τις εικόνες

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

Τύπος Αρχείων

Οι συχνότεροι τύποι αρχείων που χρησιμοποιούμε για την κατασκευή ιστοσελίδων είναι δύο, τα αρχεία με κατάληξη jpg και τα αρχεία png. Όμως, τελευταία συναντάμε ακόμα δύο τύπους αρχείων εικόνας, τα svg και τα webp.

• Τα jpg είναι συμπιεσμένα αρχεία εικόνας και χρησιμοποιούνται συνήθως για μεγάλου μεγέθους εικόνες. Έχουν όμως το μειονέκτημα ότι δεν διαθέτουν alpha chanel, δηλαδή δεν μπορούν να απεικονίσουν τη διαφάνεια.
• Τα png είναι ιδανικά για εικόνες που δεν διαθέτουν background, δηλαδή για λογότυπα, εικονίδια κλπ. Δεν τα καταφέρνουν και τόσο καλά στη συμπίεση, οπότε προτιμάμε να τα χρησιμοποιούμε σε μικρότερου μεγέθους εικόνες.
• Τα αρχεία svg τα αγαπάμε. Είναι αρχεία που χρησιμοποιούμε κυρίως σε γραφικά (όχι σε φωτογραφίες), όπως λογότυπα και εικονίδια. Ο έρωτας μου για αυτά προέρχεται από πολλούς λόγους. Ο κυριότερος είναι ότι πρόκειται για αρχεία vector, τα οποία όσο και να τους αλλάζουμε μέγεθος, δεν αλλοιώνεται η ποιότητά τους. Στην ουσία, πίσω από ένα αρχείο svg κρύβεται κώδικας hmtl που απεικονίζει συντεταγμένες πάνω σε ένα καμβά, έχοντας σαν αποτέλεσμα αρχεία πολύ μικρού μεγέθους. Ο δεύτερος λόγος που αγαπάω τα svg είναι ότι μπορούμε να ανοίξουμε τα αρχεία με έναν text editor, να αντιγράψουμε τον κώδικα που τα απαρτίζει και να τον εισάγουμε κατευθείαν στη σελίδα. Έτσι κερδίζουμε δύο πράγματα: α) έχουμε λιγότερα request και β) μπορούμε να μορφοποιησουμε δυναμικά τις εικόνες, με χρήση css (σκεφθείτε τις πιθανότητες: δυναμικές αλλαγές στα χρώματα των εικόνων, στα μεγέθη, ακόμα και animations)
• Τα αρχεία webp είναι μια σύγχρονη έκδοση του παλαιού πια jpg, καθώς πετυχαίνει καλύτερη συμπίεση των αρχείων εικόνας, κρατώντας την ποιότητα σε ικανοποιητικά επίπεδα. Τα βασικότερα προβλήματα των αρχείων αυτών είναι ότι α) δεν υποστηρίζονται από παλαιότερους browsers -κάτι που έχει πάψει πια να με ενδιαφέρει- και β) δεν είναι συμβατά για επεξεργασία με τα δημοφιλέστερα προγράμματα επεξεργασίας εικόνας.

Από τα παραπάνω καταλαβαίνετε ότι είναι κρίσιμο να επιλέξετε τους τύπους των αρχείων που ικανοποιούν τις ανάγκες σας ανά περίπτωση.

Μέγεθος και ποιότητα εικόνων

Αναφορικά με το μέγεθος των εικόνων, υπάρχουν δύο πράγματα που πρέπει να προσέξουμε:

• το μέγεθος των αρχικών εικόνων που ανεβάζουμε στον server μας: Για παράδειγμα, μια σύγχρονη DSLR φωτογραφική μηχανή μπορεί να παράξει αρχεία μεγέθους 20MB. Καταλαβαίνετε ότι εάν ανεβάσετε 10 τέτοιες εικόνες σε ένα gallery, κατά το άνοιγμα της σελίδας ο server θα κληθεί να μας εμφανίσει 200MB εικόνων, κάτι που θα κάνει τη φόρτωση της σελίδας να πάρει μερικά λεπτά. Κρίνοντας ανάλογα με τις ανάγκες μας, θα πρέπει να αλλάξουμε μέγεθος και dpi στις εικόνες που πρόκειται να ανεβάσουμε στη σελίδα μας. Συνήθως, δεν ανεβάζω εικόνες μεγαλύτερες από 1280pixel/72dpi στο πλάτος. Επίσης, κατά την αλλαγή μεγέθους των jpg εικόνων, καλούμαστε να επιλέξουμε και τη σχέση ποιότητας/συμπίεσης. Σε μια κλίμακα από το μηδέν έως το εκατό, συνήθως επιλέγω να σώσω τις εικόνες με ποιότητα γύρω 80%. Μια εικόνα πλάτους 1280p με τις παραπάνω ρυθμίσεις καταλήγει να έχει μέγεθος γύρω στα 300-500kb.
• το μέγεθος των εικόνων που επιλέγουμε να εμφανίσουμε σε κάθε σημείο της σελίδας μας: το καλό μας το WordPress χρησιμοποιεί μια questionable μέθοδο αποθήκευσης των εικόνων, όπου κατά το ανέβασμα τους, δημιουργεί μερικές ακόμα εκδόσεις της ίδιας εικόνας, με μικρότερα μεγέθη. Συνήθως τα μεγέθη είναι thumbnail, medium και large, αλλά μπορεί το theme σας να έχει ορίσει ακόμα περισσότερα. Για να δείτε τα μεγέθη αυτά, πηγαίνετε στις ρυθμίσεις του WordPress και μετά στο μενού Media (Πολυμέσα). Έτσι λοιπόν, κατά τη δημιουργία των σελίδων σας, θα πρέπει να επιλέξετε το κατάλληλο μέγεθος για τον αντίστοιχο σκοπό. Για παράδειγμα, δεν έχει νόημα σε μια λίστα με τα προϊόντα ενός eshop, όπου οι εικόνες που εμφανίζονται καταλαμβάνουν ένα μικρό μέρος της οθόνης μας, εμείς να χρησιμοποιούμε την πλήρη εικόνα των 1280p. Θα μπορούσαμε να χρησιμοποιήσουμε την έκδοση thumbnail ή medium.

Lazy Loading

Το lazy loading είναι μια τεχνική κατά την οποία οι εικόνες δεν φορτώνονται κατά το άνοιγμα της σελίδας, αλλά μόνο όταν πρόκειται να εμφανιστούν στο viewport του χρήστη, κάνοντας την αρχική φόρτωση της σελίδας ταχύτερη.

Ώρα να τα εφαρμόσουμε! 

Καταρχήν, βρείτε ένα πρόγραμμα επεξεργασίας εικόνας που σας βολεύει, για να κάνετε τις αλλαγές μεγέθους των εικόνων. Ένα ωραίο online εργαλειάκι είναι το Bulk Resize Photos, το οποίο κάνει τα resizes τοπικά και είναι αρκετά γρήγορο.

Τώρα, για να βελτιστοποιήσετε τις φωτογραφίες εντός του WordPress υπάρχουν αρκετά free plugins που κάνουν καλά τη δουλειά τους. Μερικά παραδείγματα είναι το Smush, το EWWW Image Optimizer και το ShortPixel Image Optimizer.

Προσωπικά, χρησιμοποιώ το Image optimization & Lazy Load by Optimole. Τα περισσότερα, αν όχι όλα, από τα παραπάνω κάνουν optimizations στις εικόνες, αυτόματη αλλαγή μεγέθους, μετατροπή σε webp αλλά και lazy loading.

Gimme some optimized love

6. Κρατήστε την πλατφόρμα ενημερωμένη

Το WordPress, έχοντας από πίσω του μια τόσο ενεργή κοινότητα από χρήστες και developers, παρέχει συνεχώς νέες αναβαθμίσεις. Κάθε μια από αυτές τις αναβαθμίσεις, εκτός από τα νέα χαρακτηριστικά που εισάγει, λύνει διάφορα θέματα ασφαλείας και bugs αλλά πολλές φορές εισάγει και βελτιώσεις στην ταχύτητα της ιστοσελίδας. Το ίδιο ισχύει και για τα plugins και τα θέματα.

Έτσι, θα ήταν καλό να επισκεπτόμαστε ανά τακτά χρονικά διαστήματα το κέντρο ενημερώσεων και να πραγματοποιούμε τις διαθέσιμες ενημερώσεις, τόσο στο WordPress όσο και στα υπόλοιπα εγκατεστημένα πακέτα. #updatefreak

Μηδέν updates. Μια ομορφιά!

7. Αφαιρέστε τα κακογραμμένα plugins

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

Στη σελίδα αυτή, χρησιμοποιώ 19 plugins αυτή τη στιγμή, αλλά η σελίδα φορτώνει σε λιγότερο από ένα δευτερόλεπτο.

Πρακτικά, αυτό που πρέπει να κάνετε είναι να διαλέξετε plugins που να προσφέρουν μόνο τις λειτουργίες που επιθυμείτε και να είναι καλογραμμένα. Για παράδειγμα, τα περισσότερα themes στο themeforest έρχονται πακέτο με ένα plugin για slideshow, το Slider Revolution. Το plugin αυτό είναι πολύ πλούσιο σε χαρακτηριστικά, είναι όμως βαρύ και επιβαρύνει τη σελίδα σας με περίπου 1MB επιπλέον κώδικα. Αν’ αυτού, δοκιμάστε το Meta Slider που είναι αρκετά πιο ελαφρύ (δείτε περισσότερα για τη σύγκριση των slider σε αυτό το άρθρο). Ή, στην τελική, φτιάξτε το δικό σας slideshow με ένα από τα άπειρα scripts που κυκλοφορούν στα ίντερνετσ! 

Bonus: χρησιμοποιήστε το Asset Cleanup -με προσοχή- για να απενεργοποιήσετε τα άχρηστα αρχεία JS και CSS των διαφόρων plugins που φορτώνουν με τη σελίδας σας.

8. Απεγκαταστήστε τα άχρηστα plugins

Μερικές φορές, ακόμα και οι πιο έμπειροι Γουορντπρεσάκιδες ξεχνιούνται. Μου έχει συμβεί πολλές φορές να αφήσω ενεργοποιημένα plugins που δεν χρησιμοποιώ. Για παράδειγμα, μπορεί να κάνω μια μεταφορά ενός site σε νέο server και να χρησιμοποιήσω το Better Search Replace για να αντικαταστήσω τα URL’s με τα καινούρια. Ή να εγκαταστήσω το WP All Import (Pro) για να εισάγω μαζικά προϊόντα σε ένα eshop. Ε, όταν τελειώσω τη δουλειά μου, σπάνια θα τα απενεργοποιήσω.

Τέτοια παραδείγματα υπάρχουν πολλά κατά τη φάση του development μιας ιστοσελίδας, οπότε καλό είναι με την ολοκλήρωσή της, να κοιτάμε τα plugins μας και να απενεργοποιούμε και να απεγκαθιστούμε όσα δεν χρειαζόμαστε πλέον. Λέω να απεγκαθιστούμε, επειδή ένα plugin, εάν μένει αποθηκευμένο στον server μας, έστω και απενεργοποιημένο, υπάρχει περίπτωση να μας δημιουργήσει πρόβλημα (εάν για παράδειγμα που έχει κάποιο κενό ασφαλείας σε ένα από τα αρχεία του).

9. Ελαχιστοποιήστε τα εξωτερικά scripts

Η χρήση εξωτερικών scripts μπορεί να ανεβάσει κατά πολύ τον χρόνο φόρτωσης της σελίδας σας. Εξωτερικά scripts είναι αυτά για τα οποία ο browser μας ανατρέχει σε τρίτους server ώστε να τα φορτώσει, για παράδειγμα, το Google Analytics & Tag Manager, τα Google Fonts αλλά και τα Facebook Pixel και Skroutz Analytics που συναντάμε στα eshop.

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

10. Μην ανεβάζετε αρχεία βίντεο και ήχου απευθείας στο WordPress

Παρά το γεγονός ότι το WordPress επιτρέπει να ανεβάσετε αρχεία βίντεο και ήχου στη σελίδα σας, τα οποία θα παίζουν μετά ωραιότατα με HTML5 player (#ripflashplayer), δεν σημαίνει ότι θα πρέπει να το κάνετε κιόλας.

Η μάλλον να το θέσω αλλιώς: ΜΗΝ ΑΝΕΒΑΖΕΤΕ ΠΟΤΕ ΑΡΧΕΙΑ ΒΙΝΤΕΟ ΚΑΙ ΗΧΟΥ ΣΤΟΝ SERVER ΣΑΣ!

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

Έτσι, για να ανεβάσετε βίντεο, δοκιμάστε τα YouTube, Vimeo και DailyMotion. Για αρχεία ήχου, δείτε τα SoundCloud και MixCloud. Όλα τα παραπάνω είναι δωρεάν, οπότε μην το πολυσκέπτεστε.

Έπειτα, μπορείτε να επικολλήσετε τις διευθύνσεις URL των βίντεο και των ήχων απευθείας στον editor του WordPress και η πλατφόρμα θα φροντίσει να τα ενσωματώσει στα άρθρα σας! #oloikerdizoun

11. Σταματήστε το hotlinking και το leeching του περιεχομένου σας

Το Hotlinking είναι με απλά λόγια “κλοπή” του bandwidth και συμβαίνει όταν ένα τρίτο site ενσωματώνει απευθείας αρχεία (συνήθως φωτογραφίες) που βρίσκονται στον server μας. Τι κάνει δηλαδή; Αντί να ανεβάσει π.χ. μια εικόνα στον δικό του server ώστε να την εμφανίσει σε ένα άρθρο, ανεβάζει απευθείας το url της δικής μας εικόνας. Με τον τρόπο αυτό, καταναλώνονται πόροι του server, όχι από τους επισκέπτες στη σελίδα μας αλλά από τρίτους, που ενδεχομένως και να μη μάθουν ποτέ την προέλευση των εν λόγω αρχείων.

Για να σταματήσετε το leeching του bandwidth σας και την ενδεχόμενη λανθασμένη και μη αδειοδοτημένη χρήση των εικόνων σας, απλά προσθέστε τον παρακάτω κώδικα στο αρχείο .htaccess που βρίσκεται στο root του server σας.

#disable hotlinking of images with forbidden or custom image optionRewriteEngine onRewriteCond %{HTTP_REFERER} !^$RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?ttrp.gr [NC]RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC]RewriteRule \.(jpg|jpeg|png|gif)$ – [NC,F,L] 

Προσοχή: Μην ξεχάσετε να αλλάξετε το ttrp.gr με το δικό σας domain!

12. Χρησιμοποιήστε ένα CDN

Οι χρήστες που επισκέπτονται το site σας, μάλλον, προέρχονται από πολλά και διάφορα μέρη. Ακόμα και ελληνικές ιστοσελίδες με ελληνικό περιεχόμενο μπορεί να καταγράφουν επισκέψεις και από το εξωτερικό, π.χ. από ομογενείς κ.λπ. Αν χρησιμοποιείτε Google Analytics μπορείτε να εξάγετε χρήσιμα συμπεράσματα σχετικά με την προέλευση των επισκεπτών σας.

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

Στις περιπτώσεις αυτές, συνίσταται η χρήση δικτύων CDN (Content Delivery Networks), τα οποία βοηθούν να κρατήσουμε τους χρόνους φόρτωσης σε χαμηλά επίπεδα, σε όποιο σημείο της γης και αν βρίσκεται ο επισκέπτης μας. Πως το κάνουν αυτό; Ουσιαστικά κάνουν Caching τη σελίδα μας σε διάφορα Datacenters ανά τον κόσμο, με αποτέλεσμα να τη σερβίρουν ταχύτερα. Επιπλέον, τα CDN προσφέρουν διάφορες ακόμα ευκολίες που μπορούν να βελτιώσουν τόσο την ταχύτητα φόρτωσης της σελίδας, όσο και την ασφάλειά της. Από τα πιο γνωστά CDN είναι το Cloudflare, του οποίου την free έκδοση χρησιμοποιώ κι εγώ, και το Stackpath (πρώην MaxCDN). Δείτε τη διαφορά που κάνει η ενεργοποίηση του Cloudflare στην ιστοσελίδα μου.

CDN Απενεργοποιημένο

CDN Ενεργοποιημένο

Σημείωση: Εάν ο Server σας είναι στην ίδια τοποθεσία με το μεγαλύτερο ποσοστό των επισκεπτών σας, ίσως να μην έχει νόημα να ενεργοποιήσετε το CDN. Δεν χάνετε βέβαια τίποτα να δοκιμάσετε! 

Επίλογος

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

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

Αν πάλι έχετε E-shop διαβάστε οπωσδήποτε και το επόμενο άρθρο.

Reblog :
https://ttrp.gr/12-vimata-gia-ena-tachytero-wordpress/
https://www.readmore.gr/blog/taxytita-istoselidas/ 

https://urbanweb.gr/seo/

https://paramarketing.gr/taxytita-fortosis-istoselidas
https://nextnet.gr/027-poso-shmantikh-einai-h-taxythta-fortvshs-toy-site-moy.php

https://pixelone.gr/blog/kataskevi-istoselidon/

NEW !!! Μπορείτε να συμμετέχετε ενεργά στην ομάδα wordpress911 να κάνετε και να απαντάτε ερωτήσεις να ανεβάζετε άρθρα και video κάντε εγγραφή » Here

Links: Μορείτε να κατεβάσετε τα καλύτερα WordPress Woocommerce Templates ΕΔΩ