Speed Hacks

Για οποιαδήποτε βοήθεια ή διευκρίνηση παρακαλώ στείλτε μας μήνυμα στο support@istotexniki.gr

ΓΕΝΙΚΑ

Με ποιους τρόπους βελτιώνουμε την ταχύτητα φόρτωσης και επιτυγχάνουμε καλύτερα αποτελέσματα στο Pagespeed Insights Tool.

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

ΤΙ ΠΡΟΣΕΧΟΥΜΕ

Συμπίεση

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

Εικόνες

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

Minify

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

Extension

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

Cache

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

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 (Δωρεάν)

https://wordpress.org/plugins/robin-image-optimizer/

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

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

ΕΝΕΡΓΟΠΟΙΗΣΗ ΕΝΤΟΛΩΝ ΣΤΟ .HTACCESS

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

# BEGIN Istotexniki-Speed Hacks
Options All -Indexes

# Disable ETags

Header unset ETag
Header set Connection keep-alive

FileETag None

############## MaxCDN Fix #############


Header set Access-Control-Allow-Origin “*”

########### REDIRECT TRAFFIC TO HTTPS ############
# RewriteEngine On
# RewriteCond %{HTTPS} off
# RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI} [R=301,L]

############ SECURITY ###########

Order allow,deny
Deny from all


Allow from all

############## CACHING-GZIP ############

ExpiresActive On
ExpiresDefault A2592000


ExpiresDefault A2592000


ExpiresDefault A2592000


ExpiresDefault A2592000


ExpiresDefault A2592000



Header set Cache-Control “max-age=2592000”


Header set Cache-Control “max-age=2592000”


Header set Cache-Control “max-age=2592000”


Header set Cache-Control “max-age=2592000”




SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding “gzip,deflate” env=HAVE_Accept-Encoding



AddOutputFilterByType DEFLATE “application/atom+xml” \
“application/javascript” \
“application/json” \
“application/ld+json” \
“application/manifest+json” \
“application/rdf+xml” \
“application/rss+xml” \
“application/schema+json” \
“application/vnd.geo+json” \
“application/vnd.ms-fontobject” \
“application/x-font-ttf” \
“application/x-javascript” \
“application/x-web-app-manifest+json” \
“application/xhtml+xml” \
“application/xml” \
“font/eot” \
“font/opentype” \
“image/bmp” \
“image/svg+xml” \
“image/vnd.microsoft.icon” \
“image/x-icon” \
“text/cache-manifest” \
“text/css” \
“text/html” \
“text/javascript” \
“text/plain” \
“text/vcard” \
“text/vnd.rim.location.xloc” \
“text/vtt” \
“text/x-component” \
“text/x-cross-domain-policy” \
“text/xml”



AddEncoding gzip svgz

 

BLOG

Νέα απο το blog
istotexniki

GDPR

Πώς θα επηρεάσει ο κανονισμός GDPR την επιχείρησή σας; Γενικές οδηγίες & τι πρέπει να προσέξετε Ο Γενικός Κανονισμός για την Προστασία Δεδομένων (GDPR) είναι ο νέος νόμος περί προστασίας δεδομένων της Ευρωπαϊκής Ένωσης. Έχει σχεδιαστεί για να επιτρέπει σε …

Συνέχεια »
wordpress minimal design
Web Development
istotexniki

Πως βελτιώνουμε μία ιστοσελίδα

Βασικοί κανόνες για καλύτερη κατάταξη και απόδοση μίας ιστοσελίδας Βελτιώστε την ταχύτητα φόρτωσης! Η ταχύτητα μίας ιστοσελίδας είναι ένα από τα πιο σημαντικά στοιχεία καά τον σχεδιασμό και δημιουργία μίας νέας ιστοσελίδας και η βελτίωσή της μπορεί να προκαλέσει μεγάλη …

Συνέχεια »
Web Development
istotexniki

Πως δουλεύει το Google Analytics ;

Δημιούργησες το νέο σου blog με τόσο μεράκι και όρεξη! Ενημερώνεσαι τακτικά για την θεματολογία που σε ενδιαφέρει ώστε να συντάσσεις άρθρα “φρέσκα” και ποιοτικά, χωρίς να επαναλαμβάνεσαι και φροντίζεις να προσφέρεις αξία και ουσία στον αναγνώστη. Λαμβάνεις τα πρώτα σχόλια, …

Συνέχεια »