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

1ο ΒΗΜΑ

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

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

Οι εικόνες σε μία ιστοσελίδα / 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 (Δωρεάν)

2ο ΒΗΜΑ

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

Μόνο για προχωρημένους χρήστες

Τοποθετήστε τον παρακάτω κώδικα στο αρχείο .htaccess στο κάτω μέρος. (Θα το βρείτε στον φάκελο Public_html)

## Istotexniki Speed Hacks##

ExpiresActive On
ExpiresByType image/jpg «access 1 month»
ExpiresByType image/jpeg «access 1 month»
ExpiresByType image/gif «access 1 month»
ExpiresByType image/png «access 1 month»
ExpiresByType image/x-icon «access plus 1 week»
ExpiresByType image/svg+xml «access plus 1 month»
ExpiresByType text/xml «access plus 0 seconds»
ExpiresByType text/css «access 1 month»
ExpiresByType text/html «access 1 month»
ExpiresByType text/xml «access plus 0 seconds»
ExpiresByType text/x-javascript «access 1 month»
ExpiresByType text/x-component «access plus 1 month»
ExpiresByType application/xml «access plus 0 seconds»
ExpiresByType application/json «access plus 0 seconds»
ExpiresByType application/rss+xml «access plus 1 hour»
ExpiresByType application/atom+xml «access plus 1 hour»
ExpiresByType application/pdf «access 1 month»
ExpiresByType application/x-shockwave-flash «access 1 month»
ExpiresByType application/x-font-ttf «access plus 1 month»
ExpiresByType font/opentype «access plus 1 month»
ExpiresByType application/x-font-woff «access plus 1 month»
ExpiresByType application/x-font-woff2 «access plus 1 month»
ExpiresByType application/vnd.ms-fontobject «access plus 1 month»
ExpiresByType video/ogg «access plus 1 month»
ExpiresByType audio/ogg «access plus 1 month»
ExpiresByType video/mp4 «access plus 1 month»
ExpiresByType video/webm «access plus 1 month»
ExpiresDefault «access 1 month»

## Istotexniki Speed Hacks ##

mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*

### mobile ##

RewriteCond %{HTTP:Cookie} !^safirmobilswitcher=mobil
RewriteCond %{HTTP:Cookie} !^safirmobilswitcher=masaustu

# 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 env=!dont-vary

# Enable Vary: Accept-Encoding Start

<FilesMatch «\.(js|css|xml|gz)$»>
Header append Vary: Accept-Encoding

# Use UTF-8 encoding Start
AddDefaultCharset utf-8

# Caching of common files Start

<FilesMatch «\.(ico|pdf|flv|swf|js|css|gif|png|jpg|jpeg|ico|txt|html|htm)$»>
Header set Cache-Control «max-age=2592000, public»

AddType text/html .html_gzip
AddEncoding gzip .html_gzip

SetEnvIfNoCase Request_URI \.html_gzip$ no-gzip

RewriteCond %{HTTP:Accept-Encoding} gzip
RewriteCond %{HTTP:X-Wap-Profile} !^[a-z0-9\»]+ [NC]
RewriteCond %{HTTP:Profile} !^[a-z0-9\»]+ [NC]
RewriteCond %{HTTP_USER_AGENT} !^.*(2.0\ MMP|240×320|400X240|AvantGo|BlackBerry|Blazer|Cellphone|Danger|DoCoMo|Elaine/3.0|EudoraWeb|Googlebot-Mobile|hiptop|IEMobile|KYOCERA/WX310K|LG/U990|MIDP-2.|MMEF20|MOT-V|NetFront|Newt|Nintendo\ Wii|Nitro|Nokia|Opera\ Mini|Palm|PlayStation\ Portable|portalmmm|Proxinet|ProxiNet|SHARP-TQ-GX10|SHG-i900|Small|SonyEricsson|Symbian\ OS|SymbianOS|TS21i-10|UP.Browser|UP.Link|webOS|Windows\ CE|WinWAP|YahooSeeker/M1A1-R2D2|iPhone|iPod|Android|BlackBerry9530|LG-TU915\ Obigo|LGE\ VX|webOS|Nokia5800).* [NC]
RewriteCond %{HTTP_USER_AGENT} !^(w3c\ |w3c-|acs-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd-|dang|doco|eric|hipt|htc_|inno|ipaq|ipod|jigs|kddi|keji|leno|lg-c|lg-d|lg-g|lge-|lg/u|maui|maxo|midp|mits|mmef|mobi|mot-|moto|mwbp|nec-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch-|sec-|send|seri|sgh-|shar|sie-|siem|smal|smar|sony|sph-|symb|t-mo|teli|tim-|tosh|tsm-|upg1|upsi|vk-v|voda|wap-|wapa|wapi|wapp|wapr|webc|winw|winw|xda\ |xda-).* [NC]

# Gzip compression

# Active compression
SetOutputFilter DEFLATE

<FilesMatch «\\.(js|css|html|htm|php|xml|)$»>
SetOutputFilter DEFLATE

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

# Compress all output labeled with one of the following MIME-types

AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml

Header append Vary: Accept-Encoding

<FilesMatch «\.(html|htm|rtf|rtx|svg|svgz|txt|xsd|xsl|xml)$»>

Header set X-Powered-By «wpCache(?:/([\d.]+))?\;version:\1»
Header unset Pragma
Header append Cache-Control «public»
Header unset Last-Modified

Header unset Pragma
Header append Cache-Control «public»

# FileETag None is not enough for every server.

Header unset ETag

# Since we’re sending far-future expires, we don’t need ETags for static content.
# developer.yahoo.com/performance/rules.html#etags
FileETag None

# Send CORS headers if browsers request them; enabled by default for images.

# mod_headers, y u no match by Content-Type?!
<FilesMatch «\.(cur|gif|png|jpe?g|svgz?|ico|webp)$»>
SetEnvIf Origin «:» IS_CORS
Header set Access-Control-Allow-Origin «*» env=IS_CORS

# Allow access to web fonts from all domains.
<FilesMatch «\.(eot|otf|tt[cf]|woff2?)$»>

Header set Access-Control-Allow-Origin «*»

<filesMatch «.(woff|woff2|ttf)$»>
Header set Cache-Control «max-age=2592000, public»

# Fonts
# Add correct content-type for fonts
AddType application/vnd.ms-fontobject .eot
AddType application/x-font-ttf .ttf
AddType application/x-font-opentype .otf
AddType application/x-font-woff .woff
AddType image/svg+xml .svg

# Compress compressible fonts
# only uncomment if you dont have compression turned on already. Otherwise it will cause all other filestypes not to get compressed
# AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml

ExpiresActive on

# Add a far future Expires header for fonts
ExpiresByType application/vnd.ms-fontobject «access plus 1 year»
ExpiresByType application/x-font-ttf «access plus 1 year»
ExpiresByType application/x-font-opentype «access plus 1 year»
ExpiresByType application/x-font-woff «access plus 1 year»
ExpiresByType image/svg+xml «access plus 1 year»

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

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