10 Συμβουλές για βελτιστοποίηση της ταχύτητας της ιστοσελίδας σας

Η ταχύτητα και γενικότερα οι επιδόσεις μιας ιστοσελίδας θεωρούνται αρκετά σημαντικές παράμετροι. Αν μια ιστοσελίδα είναι αργή, όχι μόνο υπάρχει δυνατότητα να χάσουμε επισκέπτες άλλα και πιθανούς πελάτες. Οι μηχανές αναζήτησης όπως η Google μας δίνουν την δυνατότητα να ελέγχουμε την ταχύτητα της ιστοσελίδα μας μέσω σύνδεσης στον λογαριασμό μας. Οπότε όταν εκτελούμε εργασίες βελτιστοποίησης μπορούμε να λαμβάνουμε υπόψιν αρκετούς παραμέτρους που την επηρεάζουν. Κάθε χιλιοστό του δευτερολέπτου μετράει!

Προτάσεις βελτίωσης χρόνων φόρτωσης μιας ιστοσελίδας

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

Η τεχνολογία Ajax μας επιτρέπει να δημιουργήσουμε ιστοσελίδες όπου ασύγχονα μπορούν να φορτώσουν συγκεκριμένη πληροφορία οποιαδήποτε στιγμή. Αυτό σημαίνει ότι μια εργασία εκτελείτε όταν ο χρήστης δώσει εντολή να εκτελεστεί. Με τον τρόπο αυτό επιτυγχάνουμε την φόρτωση επιμέρους στοιχείων μιας ιστοσελίδας.

Μπορείτε να φανταστείτε για παράδειγμα μια εικονοθήκη όπου οι εικόνες είναι μεγάλες σε όγκο και διαστάσεις. Κάτι τέτοιο μπορεί να μειώσει αρκετά την ταχύτητα φόρτωσης της ιστοσελίδας μας. Εκτός της διαδικασίας να φορτώσουμε όλες τις φωτογραφίες αυτές με το που εισέρχεται ο επισκέπτης στην ιστοσελίδα μας μπορούμε απλά να δημιουργήσουμε μικρογραφίες των φωτογραφιών αυτών έτσι ώστε με ένα κλικ να επιλέγουμε την εκάστωτε φωτογραφία στο κανονικό της μέγεθος. Αυτό το αίτημα ονομάζεται ασύγχρονο δίνει στον επισκέπτη την δυνατότητα να δει όποιες φωτογραφίες τον ενδιαφέρουν χωρίς να χρειάζεται να περιμένει μέχρις ότου ολοκληρωθεί η φόρτωση όλων των εικόνων.

Στον προγραμματισμό ιστοσελίδων χρησιμοποιούνται βιβλιοθήκες για την εκτέλεση παρόμοιων εργασιών όπως : jQuery, Prototype ή Mootools.

Χρησιμοποιήστε εξωτερικά αρχεία JS και CSS

Όταν ένας επισκέπτης έρχεται πρώτη φορά στην ιστοσελίδα μας, ο εκάστωτε πλοηγός που χρησιμοποιεί θα αποθηκεύσει στην Cache πληροφορίες που εμπεριέχουν αρχεία όπως CSS και Javascripts. Έτσι αντί να αποθηκεύουμε τα αρχεία αυτά στον Server μας είναι προτιμότερο να τα καλούμε "εξωτερικά" (= αποθηκευμένα σε άλλο Server). Χρησιμοποιώντας "εσωτερικά" αρχεία αυξάνουμε τον χρόνο απόκρισης της ιστοσελίδας. Σαν περαιτέρω πληροφορία στην εν λόγω πρόταση μην ξεχνάμε ότι η χρήση εξωτερικών αρχείων μας βοηθάει αρκετά στην περίπτωση συντήρησης μιας ιστοσελίδας όπου θα χρειαστεί να δουλέψουμε πάνω στα "βασικά" αρχεία.

Χρήση συστήματος μνήμης Cache

Αν ανακαλύψετε ότι η ιστοσελίδα σας συνδέεται στην βάση δεδομένων με σκοπό να δημιουργήσει περιεχόμενο με ένα ήδη υπάρχον τότε ήθρε η ώρα να χρησιμοποιήσετε συστήματα κάνωντας χρήση της μνήμης Cache. Έτσι με την χρήση του συστήματος το περιεχόμενο θα φορτώνεται μια φορά. Μην ανησυχείτε. Τα συστήματα Chache ανανεώνουν περιοδικά το περιεχόμενο της σελίδα σας ανάλογα όπως το έχετε ρυθμίσει.

Δημοφιλή συστήματα περιεχομένου όπως το Elxis, WordPress και το Drupal έχουν την δυνατότητα της χρήσης στατικής Cache όπου μπορούν να μετατρέψουν μια δυναμική σελίδα σε στατική μειώνοντας παράλληλα τα άχρηστα προς τον Server αιτήματα. Υπάρχουν επίσης συστήματα Cache και για τις Βάσεις Δεδομένων καθώς και Script τα οποία εγκαθίστονται στον Server. Για παράδειγμα η γλώσσα προγραμματισμού PHP έχει επεκτάσεις όπου τις καλούμε PHP Accelerators δίνοντας μας την δυνατότητα να βελτιστοποιήσουμε τον χρόνο απόκρισης κάνωντας χρήση συστήματος Cache σε συνδιασμό με άλλες μεθόδους. Ένα παράδειγμα PHP Accelerator είναι το APC. Το σύστημα Cache για βάσεις δεδομένων βελτιώνει την απόδοση και την επεκτασιμότητα των εφαρμογών σας μειώνοντας τον αριθμό των εργασιών που συνδέονται με την βάση δεδομένων. Αιτήματα που πραγματοποιούνται μπορεί να είναι : ανάγνωση / εγγραφή / διαδικασίες πρόσβασης κτλ.

Αποφύγεται την αλλαγή διαστάσεων των εικόνων μέσω HTML

Αν μια εικόνα που έχετε ανεβάσει στον Server σας έχει διαστάσεις 1280x900px, άλλα θέλετε να μειώσετε τις διαστάσεις της σε 400x280px. θα πρέπει να μειώσετε την ανάλυση της εικόνας κάνωντας χρήση ανάλογου προγράμματος επεξεργασίας εικόνας όπως Photoshop, να αποθηκεύσετε την εικόνα και να ανεβάσετε την φωτογραφία με τις διαστάσεις της επιθυμίας σας. Σκοπός της πρότασής μας αυτής είναι η αποφυγή της χρήσης HTML κώδικα με συγκεκριμένα ορίσματα για το πλάτος και το ύψος της εικόνα. Για παράδειγμα : <img width="400" height="280" src="myimage.jpg" />. Και αυτό γιατί μια μεγάλη σε διάσταση εικόνα πάντα θα είναι το μέγεθος του αρχείου μεγαλύτερο σε σύγκριση με μια μικρότερη σε διαστάσεις εικόνα.

Μην χρησιμοποιείτε εικόνες για να δείξετε περιεχόμενο.

Όχι μόνο το κείμενο στις εικόνες είναι εντελώς άχρηστο για το SEO άλλα χρησιμοποιώντας εικόνες για να δείξουμε κείμενο μειώνει αισθητά τον χρόνο απόκρισης της ιστοσελίδας μας. Μην ξεχνάνε όσο μεγάλος είναι ο αριθμός των εικόνων τόσο "βαριά" γίνεται μια ιστοσελίδα.

Αν θέλετε να χρησιμοποιήσετε ορισμένες εξεδικευμένες γραμματοσειρές για την ιστοσελίδα σας μπορείτε να κάνετε χρήση CSS @font-face. Η ιστοσελίδα της εταιρείας μας κάνει χρήση της γραμματοσειράς Ubuntu χρησιμοποιώντας την μέθοδο @font-face.

Βελτιστοποιήστε το μέγεθος των αρχείων εικόνας χρησιμοποιώντας τους κατάλληλους τύπους αρχείων

Επιλέγοντας τον σωστό τύπο της εκάστωτε εικόνας που ανεβάζεται στον Server σας μπορείτε να βελτιστοποιήσετε τόσο το μέγεθος των αρχείων εικόνας χωρίς παράλληλα να χάνεται από την ποιότητα αυτής. Υπάρχουν αρκετά εργαλεία στο διαδίκτυο όπου μπορούν να σας βοηθήσουν να μειώσετε το μέγεθος των αρχείων εικόνας.

Βελτιστοποιήστε τον τρόπο που γράφεται κώδικα

Κοιτάχτε τον πηγαίο κώδικά σας. Χρειάζεστε πραγματικά όλα αυτά τα tags εμφάνισης ή μπορείτε να τα συμπεριλάβεται κάνοντας χρήση αρχείου CSS ; Για παράδειγμα : αντί για <h1><em>Your heading</em></h1>, μπορείτε εύκολα να χρησιμοποιήσετε CSS με σκοπό να δώσετε στις επικεφαλίδες σας τύπου H1 την μορφή της πλάγιας γραφής. Γράφοντας κώδικα αποδοτικά όχι μόνο μειώνεται τον όγκο των αρχείων HTML και CSS άλλα σας βοηθάει να συντηρήσετε ευκολότερα την ιστοσελίδα.

Φορτώστε τα Javascripts στο τέλος του αρχείου

Προτιμάτε να φορτώνουμε τα Script αρχεία στο τέλος της εκάστωτε σελίδας σε σύγκριση με την αρχή αυτού. Επιτρέπει στους πλοηγούς να φορτώσει πρώτα το περιεχόμενο πριν αρχίσει την ανάγνωση των JavaScript αρχείων. Με την χρήση της συμβουλής αυτής η ιστοσελίδα μας θα αποκρίνεται γρηγορότερα μια και ο τρόπος ανάγνωσης των JavaScript αρχείων προδιαθέτει την άμεση λήψη αυτών. Αν είναι δυνατόν καλέστε τα JavaScript αρχεία σας ακριβώς πριν από το tag <body>.

Χρήση Δικτύου παράδοσης περιεχομένου / Content Delivery Network (CDN)

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

Βελτιστοποίηση Cache ιστοσελίδων

Εκτός από την χρήση συστημάτων cache μπορείτε να δημιουργήσετε ιστοσελίδες όπου κάνουν χρήση cache όπου είναι δυνατόν. Η χρήση Cache υλοποιείτε από τους πλοηγούς για μελλοντική χρήση της σελίδας. Οι πλοηγοί μπορούν να κάνουν Cache αρχεία όπως CSS, JavaScripts και εικόνες.

Εκτός από τα βασικά όπως το να γράψουμε CSS και JavaScript κώδικα που συνηθίζετε σε πολλαπλές σελίδες εξωτερικών αρχείων, υπάρχουν διάφοροι τρόποι όπου μπορούμε να κάνουμε Cache αρχεία με πλέον αποδοτικότερους τρόπους όπου είναι δυνατόν.

Για παράδειγμα μπορούμε να θέσουμε HTTP αιτήματα στις επικεφαλίδες των εκάστωτε αρχείων με εντολές όπως Expires και Last-Modified με σκοπό να μειώσουμε την χρήση επαναλαμβανόμενων λήψεων αρχείων όταν κάποιος επισκέπτης επιστρέφει στην σελίδα μας.

Μεταφρασμένο κείμενο από : SixRevisions.com