speed hacks

βελτιστοποίηση ταχύτητας

γενικοί κανόνες

ΤΑ ΒΑΣΙΚΑ ΒΗΜΑΤΑ

6 βασικοί κανόνες

Τι προσέχουμε

  • gzip-open-file-format-with-box

    Ενεργοποίηση συμπίεσης

    Μέσω της ενεργοποίησης του gzip

  • image

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

    Προσοχή όταν ανεβάζετε νέες εικόνες, να έχουν βελτιστοποιηθεί πρώτα

  • optimize

    Αφαίρεση κενών

    Αφαιρείτε τα περιττά κενά από αρχεία css και javascript

  • video-file

    Extension

    Συνετή χρήση εξωτερικών extensions

  • performance

    Cache

    Ενεργοποιήστε το caching είτε μέσω cpanel ή μέσω κάποιου σχετικού extension

  • browser

    Browser Cache

    Ενεργοποιήστε το leverage browser caching για ταχύτατο Loading

ΑΝΑΛΥΤΙΚΑ

Πως γίνονται οι βελτιώσεις

Διαχείριση των εικόνων

Οι εικόνες σε μία ιστοσελίδα / e-shop είναι συνήθως ο πρώτος παράγοντας που μια σελίδα φορτώνει αργά. Τις περισσότερες φορές ο χρήστης ανεβάζει μια εικόνα στην ανάλυση που την τράβηξη με τη φωτογραφική μηχανή ή με το κινητό. Το μέγεθος μπορεί να είναι πολύ μεγάλο και μπορεί να φτάσει τα 6-7 mb / εικόνα.

Φανταστείτε τώρα μια αρχική σελίδα με 15-20 εικόνες (Αρκετά συνηθισμένο σε e-shop ειδικά) οπότε φτάνουμε εύκολα τα 120-140mb.

Η λύση σε αυτό το πρόβλημα είναι η εξής:

  • Resizing 

Πριν να ανεβάσετε οποιαδήποτε εικόνα στην ιστοσελίδα/ e-shop σας χαμηλώνετε την ανάλυσή της σε κάτι της μορφής 1024×768, 800×600.

Εξαιρούνται οι εικόνες που προορίζονται για slides στην αρχική σελίδα που θα πρέπει να είναι τουλάχιστον 1920×500 και οι ιστοσελίδες που θέλουν να αναδείξουν το περιεχόμενό τους οπότε και θα κάνουν σμίκρυνση σε λίγο πιο υψηλή ανάλυση

  • Scaling

Το scaling είναι επίσης πολύ σημαντικό πρόβλημα που πολλοί χρήστες αγνοούν.

Τι είναι λοιπόν το scaling; Με απλά λόγια, έναν στο theme που χρησιμοποιείτε, έχετε ορίσει πχ 3 εικόνες στην αρχική σελίδα η κάθε μια να είναι 300×250 και εσείς αυτές τις 3 εικόνες τις έχετε ανεβάσει με ανάλυση 1024×768 τότε Κατά το Loading της σελίδας θα γίνει η σμίκρυνση στα 300×250. Αυτό συνεπάγεται ότι θα δημιουργηθεί μια επιπλέον καθυστέρηση για να ολοκληρωθεί αυτή η διαδικασία.

Χαρακτηριστικό παράδειγμα είναι το λογότυπο, τις περισσότερες φορές ανεβαίνει σε υψηλή ανάλυση του τύπου 3200×1800 ενώ το theme μας, είναι ρυθμισμένο να το προβάλει πχ σε 200×70.

Οπότε προσοχή σε τι ανάλυση είναι ρυθμισμένη μια εικόνα στην ιστοσελίδα, άρα να ανεβαίνει και ακριβώς στην ίδια ανάλυση.

  • Συμπίεση

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

Προτείνουμε τα εξής

Για WordPress (Δωρεάν)

Για Opencart (Δωρεάν)

https://www.opencart.com/index.php?route=marketplace/extension/info&extension_id=18138

Η ομάδα μας θα σας βοηθήσει στα πρώτα βήματα Τι απαιτείται από τον πελάτη

ΜΟΝΟ ΓΙΑ ΠΡΟΧΩΡΗΜΕΝΟΥΣ ΧΡΗΣΤΕΣ

Με τις παρακάτω προσθήκες ενεργοποιούμε το gzip (συμπίεση) και το browser caching. (Για Apache Servers)

<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>

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

<filesMatch “.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$”>
Header set Cache-Control “max-age=604800, public”
</filesMatch>

## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access 1 year”
ExpiresByType image/jpeg “access 1 year”
ExpiresByType image/gif “access 1 year”
ExpiresByType image/png “access 1 year”
ExpiresByType text/css “access 1 month”
ExpiresByType application/pdf “access 1 month”
ExpiresByType application/javascript “access 1 month”
ExpiresByType application/x-javascript “access 1 month”
ExpiresByType application/x-shockwave-flash “access 1 month”
ExpiresByType image/x-icon “access 1 year”
ExpiresDefault “access 7 days”
</IfModule>
## EXPIRES HEADER CACHING ##

# TN – BEGIN Turn ETags Off
FileETag None
# TN – END Turn ETags Off

Η βελτιστοποίηση της ταχύτητας φόρτωσης είναι από τους κύριους παράγοντες που "ανεβάζουν" μια ιστοσελίδα σε υψηλότερες θέσεις κατάταξης.
ΣΥΜΒΟΥΛΗ