10 Συμβουλές για τη Βελτιστοποίηση της Ταχύτητας του Ιστότοπού σας
Η ταχύτητα και η απόδοση της ιστοσελίδας είναι πολύ σημαντική για την εμπειρία του χρήστη. Εάν ο ιστότοπός σας είναι πολύ αργός, όχι μόνο θα χάσετε επισκέπτες, αλλά και πιθανούς πελάτες. Οι μηχανές αναζήτησης όπως το Google λαμβάνουν υπόψη την ταχύτητα ενός ιστότοπου στις κατατάξεις αναζήτησης, οπότε κατά τη βελτιστοποίηση της ταχύτητας του ιστότοπού σας, θα πρέπει να λάβετε υπόψη τα πάντα. Κάθε χιλιοστό του δευτερολέπτου μετράει.
Ακολουθούν μερικές γενικές συμβουλές βελτιστοποίησης ιστότοπων για τη βελτίωση της απόδοσης και της ταχύτητας ενός ιστότοπου.
1. Αναβολή φόρτωσης περιεχομένου όταν είναι δυνατόν
Το Ajax μας επιτρέπει να δημιουργούμε ιστοσελίδες που μπορούν να ενημερώνονται ασύγχρονα ανά πάσα στιγμή. Αυτό σημαίνει ότι αντί να φορτώσουμε ξανά μια ολόκληρη σελίδα όταν ένας χρήστης εκτελεί μια ενέργεια, μπορούμε απλώς να ενημερώσουμε τμήματα αυτής της σελίδας.
Μπορούμε να χρησιμοποιήσουμε μια συλλογή εικόνων ως παράδειγμα. Τα αρχεία εικόνας είναι μεγάλα και βαριά. Μπορούν να επιβραδύνουν τις ταχύτητες φόρτωσης σελίδων των ιστοσελίδων. Αντί να φορτώνουμε όλες τις εικόνες όταν ένας χρήστης επισκέπτεται για πρώτη φορά την ιστοσελίδα, μπορούμε απλώς να εμφανίσουμε μικρογραφίες των εικόνων και, στη συνέχεια, όταν ο χρήστης κάνει κλικ σε αυτές, μπορούμε να ζητήσουμε ασύγχρονα εικόνες πλήρους μεγέθους από το διακομιστή και να ενημερώσουμε τη σελίδα. Με αυτόν τον τρόπο, εάν ένας χρήστης θέλει να δει μόνο μερικές φωτογραφίες, δεν χρειάζεται να υποστεί αναμονή για λήψη όλων των εικόνων. Αυτό το μοτίβο ανάπτυξης ονομάζεται τεμπέλης φόρτωσης.
Οι βιβλιοθήκες Ajax / ανάπτυξης ιστοσελίδων όπως το jQuery, το Prototype και το MooTools μπορούν να διευκολύνουν την εφαρμογή της αναβαλλόμενης φόρτωσης περιεχομένου.
2. Χρησιμοποιήστε εξωτερικά αρχεία JS και CSS
Όταν ο χρήστης φορτώνει για πρώτη φορά την ιστοσελίδα σας, το πρόγραμμα περιήγησης θα αποθηκεύει προσωρινά τους εξωτερικούς πόρους, όπως αρχεία CSS και JavaScript. Έτσι, αντί για ενσωματωμένα αρχεία JavaScript και CSS, είναι καλύτερο να τα τοποθετήσετε σε εξωτερικά αρχεία.
Η χρήση ενσωματωμένου CSS αυξάνει επίσης τον χρόνο απόδοσης μιας ιστοσελίδας. Το να ορίσετε όλα όσα ορίζονται στο κύριο αρχείο CSS σας επιτρέπει στο πρόγραμμα περιήγησης να κάνει λιγότερη δουλειά κατά την απόδοση της σελίδας, καθώς γνωρίζει ήδη όλους τους κανόνες στυλ που πρέπει να εφαρμόσει.
Ως μπόνους, η χρήση εξωτερικών αρχείων JavaScript και CSS καθιστά ευκολότερη τη συντήρηση του ιστότοπου, επειδή χρειάζεται μόνο να διατηρείτε καθολικά αρχεία αντί να διασκορπίζετε κώδικα σε πολλές ιστοσελίδες.
3. Χρησιμοποιήστε συστήματα προσωρινής αποθήκευσης
Εάν διαπιστώσετε ότι ο ιστότοπός σας συνδέεται με τη βάση δεδομένων σας για να δημιουργήσετε το ίδιο περιεχόμενο, ήρθε η ώρα να ξεκινήσετε να χρησιμοποιείτε ένα σύστημα προσωρινής αποθήκευσης. Διαθέτοντας ένα σύστημα προσωρινής αποθήκευσης, ο ιστότοπός σας θα πρέπει να δημιουργήσει το περιεχόμενο μόνο μία φορά αντί να δημιουργεί το περιεχόμενο κάθε φορά που επισκέπτονται τη σελίδα τους οι χρήστες σας. Μην ανησυχείτε, τα συστήματα προσωρινής αποθήκευσης ανανεώνουν περιοδικά τις κρυφές μνήμες τους ανάλογα με τον τρόπο που τη ρυθμίζετε – έτσι ώστε ακόμη και οι συνεχώς μεταβαλλόμενες ιστοσελίδες (όπως μια ανάρτηση ιστολογίου με σχόλια) να μπορούν να αποθηκευτούν προσωρινά.
Τα δημοφιλή συστήματα διαχείρισης περιεχομένου όπως το WordPress και το Drupal θα διαθέτουν δυνατότητες στατικής προσωρινής αποθήκευσης που μετατρέπουν δυναμικά δημιουργημένες σελίδες σε στατικά αρχεία HTML για τη μείωση της περιττής επεξεργασίας διακομιστή. Για το WordPress, ελέγξτε το WP Super Cache (ένα από τα έξι κρίσιμα πρόσθετα WordPress που έχει εγκαταστήσει το Six Revisions). Το Drupal έχει μια δυνατότητα αποθήκευσης σελίδας στον πυρήνα.
Υπάρχουν επίσης συστήματα προσωρινής αποθήκευσης βάσεων δεδομένων και σενάρια διακομιστή που μπορείτε να εγκαταστήσετε στον διακομιστή ιστού σας (εάν έχετε τη δυνατότητα να το κάνετε). Για παράδειγμα, η PHP διαθέτει επεκτάσεις που ονομάζονται επιταχυντές PHP που βελτιστοποιούν την απόδοση μέσω προσωρινής αποθήκευσης και διάφορες άλλες μεθόδους. ένα παράδειγμα ενός επιταχυντή PHP είναι το APC. Η προσωρινή αποθήκευση βάσης δεδομένων βελτιώνει την απόδοση και την επεκτασιμότητα των εφαρμογών Ιστού σας μειώνοντας την εργασία που σχετίζεται με τις διαδικασίες ανάγνωσης / εγγραφής / πρόσβασης βάσης δεδομένων, memcached, για παράδειγμα, προσωρινά αποθηκεύονται ερωτήματα βάσης δεδομένων που χρησιμοποιούνται συχνά.
4. Αποφύγετε την αλλαγή μεγέθους εικόνων σε HTML
Εάν μια εικόνα έχει αρχικά διάσταση 1280×900 pixel, αλλά πρέπει να την έχετε 400×280 pixel, θα πρέπει να αλλάξετε το μέγεθος και να αποθηκεύσετε ξανά την εικόνα χρησιμοποιώντας ένα πρόγραμμα επεξεργασίας εικόνας όπως το Photoshop αντί να χρησιμοποιήσετε χαρακτηριστικά πλάτους και ύψους HTML (δηλ. <Img width = “400” height = “280” src = “myimage.jpg” />). Αυτό συμβαίνει επειδή, φυσικά, μια μεγάλη εικόνα θα είναι πάντα μεγαλύτερη σε μέγεθος αρχείου από μια μικρότερη εικόνα.
Αντί να αλλάξετε το μέγεθος μιας εικόνας χρησιμοποιώντας HTML, αλλάξτε το μέγεθος χρησιμοποιώντας ένα πρόγραμμα επεξεργασίας εικόνας όπως το Photoshop και, στη συνέχεια, αποθηκεύστε το ως νέο αρχείο.
5. Διακοπή χρήσης εικόνων για εμφάνιση κειμένου
Όχι μόνο το κείμενο σε μια εικόνα γίνεται απρόσιτο στους αναγνώστες οθόνης και εντελώς άχρηστο για SEO, αλλά η χρήση εικόνων για την εμφάνιση κειμένου αυξάνει επίσης τους χρόνους φόρτωσης των ιστοσελίδων σας, επειδή περισσότερες εικόνες σημαίνουν βαρύτερη ιστοσελίδα.
Εάν πρέπει να χρησιμοποιήσετε πολλές προσαρμοσμένες γραμματοσειρές στον ιστότοπό σας, μάθετε σχετικά με το CSS @ font-face για να εμφανίσετε το κείμενο με προσαρμοσμένες γραμματοσειρές πιο αποτελεσματικά. Είναι αυτονόητο ότι πρέπει να καθορίσετε εάν η προβολή αρχείων γραμματοσειρών θα ήταν πιο βέλτιστη από την προβολή εικόνων.
6. Βελτιστοποιήστε τα μεγέθη εικόνας χρησιμοποιώντας τη σωστή μορφή αρχείου
Επιλέγοντας τη σωστή μορφή εικόνας, μπορείτε να βελτιστοποιήσετε τα μεγέθη αρχείων χωρίς να χάσετε την ποιότητα της εικόνας. Για παράδειγμα, εκτός εάν χρειάζεστε διαφάνεια εικόνας (επίπεδα άλφα) που έχει η μορφή PNG, η μορφή JPG εμφανίζει συχνά φωτογραφικές εικόνες σε μικρότερα μεγέθη αρχείων.
7. Βελτιστοποιήστε τον τρόπο που γράφετε τον κώδικα
Κοιτάξτε γύρω από τον πηγαίο κώδικα. Χρειάζεστε πραγματικά όλες τις ετικέτες που χρησιμοποιείτε ή μπορείτε να χρησιμοποιήσετε το CSS για να βοηθήσετε στην οθόνη; Για παράδειγμα, αντί να χρησιμοποιήσετε το <h1> <em> Η επικεφαλίδα σας </em> </h1>, μπορείτε εύκολα να χρησιμοποιήσετε το CSS για να κάνετε πλάγιους τίτλους χρησιμοποιώντας την ιδιότητα στυλ γραμματοσειράς. Η αποτελεσματική σύνταξη κώδικα όχι μόνο μειώνει τα μεγέθη αρχείων των εγγράφων HTML και CSS, αλλά διευκολύνει επίσης τη συντήρηση.
8. Φόρτωση JavaScript στο τέλος του εγγράφου σας
Είναι καλύτερο εάν έχετε τα σενάρια σας να φορτώνουν στο τέλος της σελίδας και όχι στην αρχή. Επιτρέπει στο πρόγραμμα περιήγησης να αποδίδει τα πάντα πριν ξεκινήσετε με τη JavaScript. Αυτό κάνει τις ιστοσελίδες σας να αισθάνονται πιο ανταποκρινόμενες, επειδή ο τρόπος λειτουργίας της JavaScript είναι ότι αποκλείει οτιδήποτε από κάτω από την απόδοση έως ότου ολοκληρωθεί η λήψη. Εάν είναι δυνατόν, ανατρέξτε στο JavaScript πριν από την ετικέτα κλεισίματος <body> των εγγράφων HTML.
9. Χρησιμοποιήστε ένα δίκτυο παράδοσης περιεχομένου (CDN)
Η ταχύτητα του ιστότοπού σας επηρεάζεται σημαντικά από το πού βρίσκεται η τοποθεσία του χρήστη, σε σχέση με τον διακομιστή ιστού σας. Όσο πιο μακριά βρίσκονται, τόσο μεγαλύτερη απόσταση πρέπει να διανύσουν τα δεδομένα που διαβιβάζονται. Έχοντας προσωρινά αποθηκευμένο το περιεχόμενό σας σε πολλές, στρατηγικά τοποθετημένες γεωγραφικές τοποθεσίες βοηθάτε να αντιμετωπίσετε αυτό το πρόβλημα. Ένα CDN θα κάνει συχνά το κόστος λειτουργίας σας λίγο υψηλότερο, αλλά σίγουρα κερδίζετε ένα μπόνους ταχύτητας.
10. Βελτιστοποίηση προσωρινής αποθήκευσης στο Web
Μαζί με τη χρήση συστημάτων προσωρινής αποθήκευσης, θα πρέπει να δημιουργήσετε ιστότοπους που χρησιμοποιούν όσο το δυνατόν περισσότερο την προσωρινή αποθήκευση ιστού. Η προσωρινή αποθήκευση ιστού είναι όταν τα αρχεία αποθηκεύονται προσωρινά στο πρόγραμμα περιήγησης ιστού για μελλοντική χρήση. Τα πράγματα που τα προγράμματα περιήγησης μπορούν να αποθηκεύσουν στην κρυφή μνήμη περιλαμβάνουν αρχεία CSS, αρχεία JavaScript και εικόνες.
Εκτός από τα βασικά, όπως η τοποθέτηση κώδικα CSS και JavaScript που χρησιμοποιούνται σε πολλές σελίδες σε εξωτερικά αρχεία, υπάρχουν πολλοί τρόποι για να βεβαιωθείτε ότι αποθηκεύετε τα αρχεία σας με τον πιο αποτελεσματικό τρόπο.
Για παράδειγμα, μπορείτε να ορίσετε κεφαλίδες απόκρισης HTTP όπως Λήξη και Τελευταία τροποποίηση για να μειώσετε την ανάγκη επαναφόρτωσης ορισμένων αρχείων όταν ο χρήστης επιστρέψει στον ιστότοπό σας. Για να μάθετε περισσότερα, διαβάστε σχετικά με την προσωρινή αποθήκευση στο HTTP και την αξιοποίηση της προσωρινής αποθήκευσης του προγράμματος περιήγησης.
Για να ρυθμίσετε τις κεφαλίδες HTTP Expires στο Apache, διαβάστε αυτό το σεμινάριο σχετικά με την προσθήκη μελλοντικών κεφαλίδων λήξης.
