TIPS ΒΕΛΤΙΩΣΗΣ

Speed
Optimization

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

0
Tips

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

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

Καθαρός
Κώδικας

Χρησιμοποιούμε μόνο τα απολύτως απαραίτητα, ελάχιστα extensions για αποφυγή καθυστερήσεων.

Γιατί
εμείς

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

ΒΕΛΤΙΩΣΗ
ΤΑΧΥΤΗΤΑΣ

ΓΕΝΙΚΑ

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

Οι εικόνες σε μία ιστοσελίδα / 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.

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

  • Συμπίεση

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

ΒΑΣΙΚΑ ΣΗΜΕΙΑ

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

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

Μέσω της ενεργοποίησης του gzip στο αρχείο .htaccess επιτυγχάνεται αύξηση ταχύτητας

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

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

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

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

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

Αφαιρείτε τα περιττά κενά από αρχεία css και javascript μέσω κάποιας εφαρμογής

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

Extension

Συνετή χρήση εξωτερικών extensions για ελαχιστοποίηση ασυμβατοτήτων

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

Cache

Ενεργοποιήστε το caching για να βλέπουν οι χρήστες στατικά αρχεία

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

Browser Cache

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

ΚΩΔΙΚΑΣ

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


# 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



Header append Vary: Accept-Encoding


Header set Cache-Control “max-age=604800, public”

## EXPIRES HEADER CACHING ##

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”

## EXPIRES HEADER CACHING ##

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

0
Βήμα.

Επικοινωνία

Ενδιαφέρεστε για
βελτιστοποίηση;

Μπορείτε να επικοινωνήσετε μαζί μας στο info@istotexniki.gr ή τηλεφωνικά στο 2310 525007