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

Στην περίπτωση των e-commerce sites είτε σε WordPress ή OpenCart, ειναι ένας παράγοντας που μπορεί να οδηγήσει σε μεγάλη αύξηση πωλήσεων.

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

Τις περισσότερες φορές οι εικόνες που ανεβάζουν οι χρήστες είναι είτε τεράστιας ανάλυσης είτε σε λάθος πρότυπο όπως αρχεία *.png.

Ένας εύκολος τρόπος να έχουμε βελτιστοποιημένες εικόνες είναι να μειώσουμε την ανάλυση τους σε μεγέθη που πραγματικά χρειάζεστε. Παράδειγμα σε ένα eshop μια εικόνα προϊόντος αρκεί να έχει ανάλυση 1000×1000 pixels για να φαίνεται τέλεια!

Σημαντικό επίσης να συμπιέζετε κάθε μια πριν την ανεβάσετε στην ιστοσελίδα σας. Η διαδικασία μπορεί να γίνει μαζικά απλά μπαίνοντας στο tinypng.com όπου συμπιέζει κάθε εικόνα έως και 5mb σε μέγεθος έως 3 – 4 φορές πιο λίγο.

Κάνοντας την διαδικασία αυτή, σίγουρα έχετε αλλάξει προς το καλύτερο το loading της ιστοσελίδας σας.

Βελτιστοποίηση του αρχείου .htaccess

Εάν προσθέσετε τις παρακάτω γραμμές στο αρχείο .htaccess (βρίσκεται στον φάκελο public_html ή httpdocs στον server σας) θα δείτε άμεση βελτίωση των επιδόσεων του website σας.

Leverage Browser Caching

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

Υπάρχουν δύο βασικοί τρόποι για να ρυθμίσετε την προσωρινή αποθήκευση του προγράμματος περιήγησης. Το πρώτο βήμα είναι να χρησιμοποιήσετε το ExpiresByType για να ορίσετε το χρονικό πλαίσιο προσωρινής αποθήκευσης για κάθε τύπο. Το δεύτερο είναι να χρησιμοποιήσετε την κεφαλίδα Cache-Control.

ExpiresByType

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

##### Optimize default expiration time - BEGIN
<IfModule mod_expires.c>
    ## Enable expiration control
    ExpiresActive On

    ## CSS and JS expiration: 1 week after request
    ExpiresByType text/css "now plus 1 week"
    ExpiresByType application/javascript "now plus 1 week"
    ExpiresByType application/x-javascript "now plus 1 week"

    ## Image files expiration: 1 month after request
    ExpiresByType image/bmp "now plus 1 month"
    ExpiresByType image/gif "now plus 1 month"
    ExpiresByType image/jpeg "now plus 1 month"
    ExpiresByType image/jp2 "now plus 1 month"
    ExpiresByType image/pipeg "now plus 1 month"
    ExpiresByType image/png "now plus 1 month"
    ExpiresByType image/svg+xml "now plus 1 month"
    ExpiresByType image/tiff "now plus 1 month"
    ExpiresByType image/x-icon "now plus 1 month"
    ExpiresByType image/ico "now plus 1 month"
    ExpiresByType image/icon "now plus 1 month"
    ExpiresByType text/ico "now plus 1 month"
    ExpiresByType application/ico "now plus 1 month"
    ExpiresByType image/vnd.wap.wbmp "now plus 1 month"

    ## Font files expiration: 1 week after request
    ExpiresByType application/x-font-ttf "now plus 1 week"
    ExpiresByType application/x-font-opentype "now plus 1 week"
    ExpiresByType application/x-font-woff "now plus 1 week"
    ExpiresByType font/woff2 "now plus 1 week"
    ExpiresByType image/svg+xml "now plus 1 week"

    ## Audio files expiration: 1 month after request
    ExpiresByType audio/ogg "now plus 1 month"
    ExpiresByType application/ogg "now plus 1 month"
    ExpiresByType audio/basic "now plus 1 month"
    ExpiresByType audio/mid "now plus 1 month"
    ExpiresByType audio/midi "now plus 1 month"
    ExpiresByType audio/mpeg "now plus 1 month"
    ExpiresByType audio/mp3 "now plus 1 month"
    ExpiresByType audio/x-aiff "now plus 1 month"
    ExpiresByType audio/x-mpegurl "now plus 1 month"
    ExpiresByType audio/x-pn-realaudio "now plus 1 month"
    ExpiresByType audio/x-wav "now plus 1 month"

    ## Movie files expiration: 1 month after request
    ExpiresByType application/x-shockwave-flash "now plus 1 month"
    ExpiresByType x-world/x-vrml "now plus 1 month"
    ExpiresByType video/x-msvideo "now plus 1 month"
    ExpiresByType video/mpeg "now plus 1 month"
    ExpiresByType video/mp4 "now plus 1 month"
    ExpiresByType video/quicktime "now plus 1 month"
    ExpiresByType video/x-la-asf "now plus 1 month"
    ExpiresByType video/x-ms-asf "now plus 1 month"
</IfModule>
##### Optimize default expiration time - END

Το χρονικό πλαίσιο λέει στο πρόγραμμα περιήγησης του επισκέπτη πόσο καιρό θα χρησιμοποιήσει το τοπικά αποθηκευμένο αντίγραφο. Μπορείτε να το ρυθμίσετε στην ώρα που προτιμάτε. Τα πιο συνηθισμένα είναι “τώρα + 1 ημέρα”, “τώρα + 1 εβδομάδα”, “τώρα + 1 μήνα”, “τώρα + 1 έτος”.

Cache-Control

Η δεύτερη μέθοδος είναι να χρησιμοποιήσετε την οδηγία Header για να δηλώσετε μια προσαρμοσμένη κεφαλίδα.

Για να ορίσετε την κεφαλίδα HTTP Cache-Control χρησιμοποιήστε τον παρακάτω κώδικα.

##### 1 Month for most static resources
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
    Header set Cache-Control "max-age=2592000, public"
</filesMatch>

Compress your site

Ένας άλλος τρόπος με τον οποίο μπορείτε να επιταχύνετε τον ιστότοπό σας είναι να τον κάνετε μικρότερο. Φυσικά εάν μπορείτε να μειώσετε ή να συμπιέσετε τις εικόνες, θα ήταν πολύ σωστή επιλογή.

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

Η ενεργοποίηση του gzip μέσω του αρχείου .htaccess γίνετε με τον παρακάτω κώδικα.

##### Compress resources
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

##### Set Header Vary: Accept-Encoding
<IfModule mod_headers.c>
    <FilesMatch ".(js|css|xml|gz|html)$">
        Header append Vary: Accept-Encoding
    </FilesMatch>
</IfModule>

Και οι δύο μέθοδοι, του caching και του compress κρίνονται ως απόλυτα απαραίτητοι για να δείτε άμεσα αποτελέσματα.