Σε αρκετές από τις αναρτήσεις μας έχουμε αναφέρει πόσο σημαντικό είναι να εξασφαλίζεις για το site σου υψηλούς χρόνους φόρτωσης. Ένα γρήγορο site μπορεί να ωφελήσει τα conversions που γίνονται μέσα από αυτό, το SEO αλλά και την εμπειρία των πελατών σου.
Σε συνέχεια του post “10 tips για να αυξήσεις την ταχύτητα του site σου”, θα σου παρέχουμε σήμερα 8 ακόμη συμβουλές που θα σε βοηθήσουν προς την κατεύθυνση αυτή.
1. Όρισε τις διαστάσεις στις εικόνες σου
Για να μπορέσει ο browser να προβάλει τη σελίδα σου, όταν την επισκέπεται κάποιος χρήστης, πρέπει πρώτα να υπολογίσει πώς θα κατανεμηθεί ο χώρος της σελίδας ανάμεσα σε εικόνες και κείμενο. Σε περίπτωση που δεν έχεις ορίσει από πριν τις διαστάσεις των εικόνων, ο browser θα χρειαστεί περισσότερο χρόνο, καθώς θα πρέπει πρώτα να τις φορτώσει για να αντιληφθεί ποιες είναι οι διαστάσεις τους, με αποτέλεσμα αυτό να κοστίζει σε χρόνο φόρτωσης της σελίδας γενικότερα.
Για να ορίσεις τις διαστάσεις κάθε εικόνας, δεν έχεις παρά να προσθέσεις width=”xxxx” και height=”xxxx” μέσα στο <img>.
Είναι σημαντικό οι διαστάσεις αυτές να είναι και οι πραγματικές, καθώς σε περίπτωση που η εικόνα είναι μεγαλύτερης διάστασης και χρησιμοποιείται ο παραπάνω κώδικας απλά για να κάνει scaling του image, και πάλι θα επηρεαστεί αρνητικά ο χρόνος φόρτωσης.
2. Χρησιμοποίησε CSS Sprites
Όπως έχουμε αναφέρει και στο post για τα εργαλεία που χρησιμοποιούν οι designers μας, τα CSS Sprites χρησιμοποιούνται για να μειωθεί το μέγεθος, ο χώρος που θα χρειαστούν αλλά και η ταχύτητα με την οποία θα φορτώσουν οι εικόνες στο site σου. Αφού επιλέξεις τις εικόνες που θέλεις να ανεβάσεις σε μια σελίδα, αρκεί να τις εισάγεις σε έναν css sprite generator. Ο generator θα σου παράξει τόσο ένα συνολικό αρχείο, το οποίο θα περιέχει τις εικόνες που θέλεις να προσθέσεις, όσο και τον κώδικα που θα χρειαστείς για να τις διαχειριστείς μέσα στο sprite.
Ανεβάζοντας ένα CSS sprite αντί πολλών εικόνων, θα παρατηρήσεις αρκετά μεγάλη διαφορά στην ταχύτητα φόρτωσης, αφού ο browser επεξεργάζεται μόνο μία εικόνα και όχι ξεχωριστά όλες όσες τελικά εμφανίζονται στη σελίδα σου.
3. Πρόσθεσε Expires headers
Τα expires headers ενημερώνουν τον browser για το αν πρέπει να ζητήσει ένα αρχείο από τον server ή αν μπορεί να το ανακαλέσει από την cache. Όταν προσθέτεις expires headers σε ένα στοιχείο (π.χ. τις εικόνες στο site σου), εκείνο αποθηκεύεται στην cache του browser, με αποτέλεσμα να μειώνονται τα HTTP requests και να φορτώνει το αρχείο ταχύτερα κατά την επόμενη επίσκεψη του χρήστη.
Γενικά συνίσταται η προσθήκη expires headers σε στοιχεία που δεν αλλάζουν συχνά, όπως οι εικόνες, τα favicons ή το CSS. Αφού αποφασίσεις πού θα προστεθούν, ανάλογα με τις ανάγκες του site σου, δεν έχεις παρά να εγκαταστήσεις το Far Future Expiry Header ή να ανοίξεις το .htaccess αρχείο και να προσθέσεις τον παρακάτω κώδικα, ο οποίος θέτει μια default τιμή ενός μήνα για τη διατήρηση των στοιχείων στην cache:
<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault “access plus 1 month”
</IfModule>
Για κάθε στοιχείο στο οποίο θέλεις να προσθέσεις expires headers, εισάγεις πάνω από το </IfModule> τις ανάλογες εντολές:
# My favicon
ExpiresByType image/x-icon “access plus 1 year”
# Images
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
4. Διόρθωσε τα broken links του site σου
Τα broken links εκτός από το SEO του site σου, μπορούν να επηρεάσουν αρνητικά το traffic, ενώ είναι πολύ πιθανό να προτρέψουν το χρήστη να εγκαταλείψει το site σου. Καλό θα ήταν, λοιπόν, να κάνεις περιοδικούς ελέγχους για να τα εντοπίζεις και να τα διορθώνεις ή να προσθέτεις 301 redirects όπου είναι απαραίτητο.
Στο blog της Top.Host χρησιμοποιούμε το Broken Link Checker, το οποίο μας ενημερώνει με email κάθε φορά που εντοπίζει ένα link που οδηγεί σε 404 error, ώστε να προχωράμε άμεσα σε διορθωτικές κινήσεις και να είμαστε σίγουροι ότι δεν ρισκάρουμε την ταχύτητά του.
[optin-monster-shortcode id=”qh0dnjx0tmx4pex335qh”]
5. Εφάρμοσε το Lazy Load για τις εικόνες σου
Η λογική πίσω από το Lazy Load είναι η σταδιακή φόρτωση των εικόνων στο site σου, ανάλογα με το ποιες από αυτές είναι ορατές στον χρήστη. Αν, δηλαδή, υπάρχουν εικόνες προς το τέλος της σελίδας, δεν θα φορτώσουν μέχρι να κάνει scroll down ο επισκέπτης.
Έτσι, μειώνεται ο όγκος των αρχείων που πρέπει να εμφανιστούν άμεσα και αυξάνεται η συνολική ταχύτητα φόρτωσης. Ανάλογα με το ποια CMS πλατφόρμα χρησιμοποιείς, υπάρχουν και τα ανάλογα plugins ή extensions που μπορείς να εγκαταστήσεις, γι’ αυτήν τη διαδικασία. Ενδεικτικά, για το WordPress μπορείς να εγκαταστήσεις το Lazy Load και για το Drupal το Image Lazyloader.
6. Φρόντισε για την ταχύτητα της home page
Κατά πάσα πιθανότητα, οι περισσότεροι επισκέπτες του site σου θα φτάσουν πρώτα στην αρχική σου σελίδα. Για να τους κρατήσεις και να εξασφαλίσεις ένα χαμηλό bounce rate, είναι απαραίτητο να τη βελτιστοποιήσεις, ώστε να φορτώνει όσο γίνεται πιο γρήγορα. Πώς θα το καταφέρεις αυτό;
- Φρόντισε να διατηρήσεις ένα minimal σχεδιασμό. Είναι περισσότερο καλαίσθητο ως επιλογή και παράλληλα δεν επιβαρύνει την ταχύτητα φόρτωσης.
- Χρησιμοποιήσε CSS για τα μονόχρωμα backgrounds, καθώς φορτώνει πολύ πιο γρήγορα από μία εικόνα.
- Αν διατηρείς blog, εμφάνισε λίγα posts στην αρχική σου σελίδα.
7. Μείωσε τα HTTP requests
Ήδη με αρκετές από τις παραπάνω ενέργειες, έχεις μειώσει χωρίς πολύ κόπο τα HTTP requests που αποστέλλει ο browser στον web server. Κάτι ακόμα που μπορείς να κάνεις προς αυτήν την κατεύθυνση, είναι να εκμεταλλευτείς το νέο πρωτόκολλο επικοινωνίας HTTP/2.
Αφού βεβαιωθείς ότι ο server στον οποίον φιλοξενείται το site σου υποστηρίζει το HTTP/2 και ενεργοποιήσεις ένα SSL πιστοποιητικό, μπορείς να επωφεληθείς από τις ταχύτητες που προσφέρει το πρωτόκολλο, βασικό χαρακτηριστικό του οποίου είναι τα μειωμένα HTTP requests.
8. Προτίμησε σελίδες μικρές σε έκταση
Το να διατηρείς στο site σου σελίδες μεγάλες σε έκταση μπορεί να επηρεάσει δύο σημαντικά σημεία:
- την ταχύτητα φόρτωσης, καθώς θα χρειαστεί να εμφανιστεί μεγάλος όγκος πληροφορίας στον τελικό χρήστη,
- την εμπειρία του ίδιου του χρήστη, ο οποίος είναι πιθανό να αποθαρρυνθεί κάνοντας ατελείωτο scroll down.
Κρατώντας τις σελίδες σου μικρές σε έκταση, συμβάλλεις αποτελεσματικά στην μείωση του χρόνου φόρτωσης, και παράλληλα παρέχεις στον επισκέπτη σου την πληροφορία που πραγματικά χρειάζεται.
Εφάρμοσε τις παραπάνω πρακτικές στο site σου και δες την επισκεψιμότητα και τα conversions να ανεβαίνουν! Και, βέβαια, φρόντισε να προσθέσεις στα σχόλια τα δικά σου tips για γρήγορες ταχύτητες!
Thelo na kano tis exis paratirisis se kapia tips pou pisteuo oti ine kalitera apo ta parapano
1. den xriazete diastasi tis ikonas otan tin ikona tin kanis img compress auto apo mono kani elafri mia selida otan mionis tin xoritikotita tis ikonas sto stie.
2. den xriazete to CSS Sprites afou exis kani compress tin ikona prepi na kanis MINIFY TO CSS sou. etsi mionis ta request sta css auto to kanoun polla ergalia pou kanoun css minify edo fisika tithete ENA EONIO PROVLIMA ta .css arxia ine diskolo na sinxronistoun me entoles REL i PRELOAD kati pou ine ANEKTO sta arxia .JS eki me mia apli entoli ASYNC kani ta JS pio grigora enoite kai ekina me js minify prota kai meta asinxroni zeuxi px
3. auti ine mia kali methodos me to arxio .htaccess
4. mia methodos css ala me dimiourgia polon provlimaton
pio ine omos to provlima to anafero sto 2 me auton to tropo to page speed mpori na ftasi sta 95/100 ala dimiourgi provlimata stin emfanisi tis selidas.
en oligis sinopsizoume px gia wordpress site ine ta plugin cache
gia otidipote alo site ine kalo enas server vps i dedicated na exi pano to VARNISH.
auta…….
Στο 2 κάνεις λάθος. Μια σελίδα με 15 εικόνες (UI στοιχεία και περιεχόμενο) θα προκαλέσει ισάριθμα http requests, κάτι πολύ χρονοβόρο, ειδικά αν ο client είναι σε mobile συσκευή όπου μπαινοβγαίνει η κλήση σε GSM δίκτυο και internet. Αν τα έχεις σε ένα αρχείο θα γίνει μία μόνο κλήση.
enois me css @ import ok ALA NA ISE SIGOUROS DEN PETIXENI SE OLA TA SITE GIA POLOUS LOGOUS AUTO ego dokimasa ola mou ta css na ta kano me entoli @ imoport sto telos i selida mou itan KENI kai den emfanizotan to periexomeno…….
Αυτό που εννοώ το γράφει καθαρά στο 2 του αρχικού άρθρου. Ενοποιείς τα bitmap σου σε ένα μεγάλο bitmap ώστε να χρειάζεται μία μόνο http κλήση. Μετά με CSS παίρνεις από το μεγάλο bitmap το κομμάτι που θες (σε client side). Είναι λειτουργεία του browser – δεν τίθεται θέμα “να μην πετύχει σε όλα τα site”.
Όλα αυτά είναι αν γράφεις κώδικα. Αν χρησιμοποιείς πλατφόρμες όπως joomla & wordpress τι από τα παραπάνω μπορείς να κάνεις? Υπάρχουν κάποια plugin που σου δίνετε η δυνατότητα αυτή?
Καλημέρα Νίκο!
Μπορείς να εφαρμόσεις αρκετές από τις παραπάνω συμβουλές, χωρίς ούτε μια γραμμή κώδικα 😉 Για ακόμα περισσότερα tips και plugins, μπορείς να διαβάσεις το προηγούμενο post μας σχετικά με την ταχύτητα >> https://top.host/blog/10-tips-ταχύτητα/
Σε ευχαριστώ πολύ!
Εγω μόνο με την αλλαγή των servers απο mediahost.gr σε top.host έπεσα 3 δευτερόλεπτα σε page speed και 40 λιγότερα request!!! Μεγάλη διαφορά ! Μπράβο σε όλους.