Τελευταίος Οδηγός Βελτιστοποίησης Web (Συμβουλές & Βέλτιστες Πρακτικές)

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

Αν δεν έχετε πραγματοποιήσει καμία βελτιστοποίηση στον ιστότοπό σας (ή το ιστολόγιο) μέχρι στιγμής ή απλά περίεργος πώς μπορεί να συμβάλει στην επιτάχυνση του ιστότοπού σας, παρακαλώ ρίξτε μια ματιά σε αυτή τη λίστα συμβουλών βελτιστοποίησης που έχουμε δημιουργήσει.

Έχουμε χωρίσει τα πράγματα σε 3 ξεχωριστά τμήματα για καλύτερη αναγνωσιμότητα - αντίστοιχα βελτιστοποίηση από πλευράς διακομιστή, βελτιστοποίηση περιουσιακών στοιχείων (που περιλαμβάνει στοιχεία ιστού όπως CSS, Javascript, εικόνες κ.λπ.) και πλατφόρμα, όπου θα επικεντρωθούμε Βελτιστοποίηση του WordPress. Στο τελευταίο τμήμα, ρίχνουμε σε μερικές συνδέσεις που θεωρήσαμε χρήσιμες. Πλήρης λίστα μετά από άλμα.

Βελτιστοποίηση: Από πλευράς διακομιστή

1. Επιλέξτε ένα αξιοπρεπή οικοδεσπότη Ιστού

   Λογαριασμός σας web hosting δεν έχει καμία άμεση σχέση με τις βελτιστοποιήσεις που πρόκειται να εκτελέσετε αλλά υπολογίσαμε την επιλογή του σωστού web hosting λογαριασμού τόσο σημαντικό αποφασίσαμε να το φέρουμε στην προσοχή σας πρώτα. Ο λογαριασμός φιλοξενίας είναι το θεμέλιο του δικτυακού σας τόπου / ιστολογίου, όπου η ασφάλεια, η προσβασιμότητα (cPanel, FTP, SSH), η σταθερότητα των διακομιστών, οι τιμές και οι υποστήριξη των πελατών διαδραματίζουν σημαντικό ρόλο. Πρέπει να βεβαιωθείτε ότι είστε σε καλά χέρια.

   Προτεινόμενη ανάγνωση: Πώς να επιλέξετε έναν οικοδεσπότη Ιστού με wikiHow είναι ένα μεγάλο άρθρο που σας δίνει βήματα και συμβουλές που πρέπει να γνωρίζετε πριν από την αγορά οποιουδήποτε web hosting λογαριασμό.

2. Υποστηρίζει τα περιουσιακά στοιχεία ξεχωριστά

   Όταν αναφέρουμε τα περιουσιακά στοιχεία, εννοούσαμε συστατικά ιστού όπως εικόνες και στατικά σενάρια που δεν απαιτούν επεξεργασία από την πλευρά του διακομιστή. Αυτά περιλαμβάνουν οποιαδήποτε γραφικά διαδικτύου, εικόνες, Javascripts, CSS, κλπ. Η φιλοξενία περιουσιακών στοιχείων ξεχωριστά δεν είναι απαραίτητη, αλλά έχουμε δει ένα τεράστιο αποτέλεσμα από την άποψη της σταθερότητας του διακομιστή με αυτήν την εφαρμογή όταν το blog είχε μια κίνηση ακίδα.

   Συνιστώμενη ανάγνωση: Μεγιστοποίηση παράλληλων λήψεων στη λωρίδα Carpool.

3. Συμπίεση με GZip

   Εν ολίγοις, τα περιεχόμενα μετακινούνται από την πλευρά του διακομιστή στην πλευρά του πελάτη (vicet versa) κάθε φορά που γίνεται ένα αίτημα HTTP. Η συμπίεση του περιεχομένου για αποστολή μειώνει σημαντικά το χρόνο που απαιτείται για την επεξεργασία κάθε αιτήματος.

   GZip είναι ένας από τους καλύτερους τρόπους για να γίνει αυτό και ποικίλλει ανάλογα με τον τύπο διακομιστών που χρησιμοποιείτε. Για παράδειγμα, Apache 1.3 χρησιμοποιεί mod_zip, Apache 2.x χρησιμοποιεί mod_deflate και εδώ είναι πώς το κάνεις Nginx. Ακολουθούν μερικά πολύ καλά άρθρα για να εξοικειωθείτε με τις συμπιέσεις του διακομιστή:

   • Επιταχύνετε έναν ιστότοπο ενεργοποιώντας τη συμπίεση αρχείων Apache
   • Συμπίεση εξόδου ιστού Χρησιμοποιώντας mod_gzip και Apache
   • Πώς να βελτιστοποιήσετε τον ιστότοπό σας με συμπίεση GZIP
   • Συμπίεση διακομιστή για ASP

4. Ελαχιστοποίηση ανακατευθύνσεων

   Οι webmasters κάνουν ανακατεύθυνση διευθύνσεων URL (είτε πρόκειται για Javascript είτε για ανακατευθύνσεις META) όλη την ώρα. Μερικές φορές σκοπός είναι να οδηγεί τους χρήστες από μια παλιά σελίδα σε μια νέα σελίδα ή απλώς να καθοδηγεί τους χρήστες στη σωστή σελίδα. Κάθε ανακατεύθυνση δημιουργεί ένα επιπλέον αίτημα HTTP και RTT (round-trip-time). Όσο περισσότερη ανακατεύθυνση έχετε, τόσο πιο αργός χρήστης θα φτάσει στη σελίδα προορισμού.

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

5. Μειώστε τις αναζητήσεις DNS

   Σύμφωνα με Yahoo! Ιστολόγιο δικτύου προγραμματιστών, διαρκεί περίπου 20-120 χιλιοστά του δευτερολέπτου για το DNS (Domain Name System) για την επίλυση της διεύθυνσης IP για ένα συγκεκριμένο όνομα κεντρικού υπολογιστή ή όνομα τομέα και το πρόγραμμα περιήγησης δεν μπορεί να κάνει τίποτα μέχρι να ολοκληρωθεί σωστά η διαδικασία.

   Συντάκτης Steve Souders πρότεινε ότι ο διαχωρισμός αυτών των στοιχείων σε τουλάχιστον δύο αλλά όχι περισσότερα από τέσσερα ονόματα κεντρικών υπολογιστών μειώνει τις αναζητήσεις DNS και επιτρέπει παράλληλες λήψεις υψηλού βαθμού. Διαβάστε περισσότερα στο άρθρο.

Βελτιστοποίηση: Τα στοιχεία ενεργητικού (CSS, Javascripts, Εικόνες)

1. Συγχώνευση πολλαπλών Javascripts σε ένα

   Οι λαοί στο rakaz.nl μοιράζεται πώς μπορείτε να συνδυάσετε πολλές Javascripts όπως:

    http://www.creatype.nl/javascript/prototype.js http://www.creatype.nl/javascript/builder.js http://www.creatype.nl/javascript/effects.js http: // www .creatype.nl / javascript / dragdrop.js http://www.creatype.nl/javascript/slider.js 

   Σε ένα μόνο αρχείο, αλλάζοντας τη διεύθυνση URL σε:

    http://www.creatype.nl/javascript/prototype.js,builder.js,effects.js,dragdrop.js,slider.js 

   με το χειρισμό του .htaccess και τη χρήση της PHP. Κάντε κλικ ΕΔΩ για να διαβάσετε περισσότερα.

2. Συμπίεση Javascript & CSS

   Μείωση είναι μια εφαρμογή PHP5 που μπορεί να συνδυάσει πολλαπλά αρχεία CSS και Javascript, να συμπιέσει τα περιεχόμενά τους (δηλαδή να αφαιρέσει περιττά κενά / σχόλια) και να προβάλει τα αποτελέσματα με κωδικοποίηση HTTP (gzip / deflate) και κεφαλίδες που επιτρέπουν την βέλτιστη προσωρινή μνήμη πελάτη.

   

   Συμπιέστε τους στο διαδίκτυο!Υπάρχουν επίσης κάποιες υπηρεσίες ιστού που σας επιτρέπουν να συμπιέζετε χειροκίνητα τα Javascript και τα αρχεία CSS σας στο διαδίκτυο. Εδώ είναι λίγοι που γνωρίζουμε:

   • compressor.ebiene (Javascript, CSS)
   • javascriptcompressor.com (Javascript)
   • jscompress.com (Javascript)
   • CleanCSS (CSS)
   • CSS Optimizer (CSS)

3. Προσαρμογή λήξης κεφαλίδας / προσωρινής αποθήκευσης

   Πιστωτικό: httpwatch

   Χρησιμοποιώντας μια προσαρμοσμένη κεφαλίδα λήξης, τα στοιχεία του ιστού σας, όπως εικόνες, στατικά αρχεία, CSS, Javascript παρακάμπτηκαν το περιττό αίτημα HTTP όταν ο ίδιος χρήστης ξαναφορτώσει τη σελίδα για δεύτερη φορά. Μειώνει το απαιτούμενο εύρος ζώνης και βοηθά καθοριστικά στην καλύτερη εξυπηρέτηση της σελίδας.

   Συνιστώμενες αναγνώσεις:

   • Yahoo! Ιστολόγιο δικτύου προγραμματιστών - Προσθήκη κεφαλίδας λήξης
   • Πώς να προσθέσει το Good Expires headers σε εικόνες στο Apache 1.3
   • HTTP Caching
   • Caching Tutorial για τους συγγραφείς και τους webmasters

4. Εκφόρτωση των στοιχείων ενεργητικού

   Με την εκφόρτωση εννοούμε να χωρίζουμε τις Javascripts, εικόνες, CSS και στατικά αρχεία από τον κύριο διακομιστή όπου φιλοξενείται ο ιστότοπος και να τα τοποθετήσετε σε άλλο διακομιστή ή να βασιστείτε σε άλλες υπηρεσίες ιστού. Βλέπουμε σημαντική βελτίωση εδώ μέσα Χονγκκιάτ με την εκφόρτωση περιουσιακών στοιχείων σε άλλες διαθέσιμες υπηρεσίες Ιστού, αφήνοντας το διακομιστή να κάνει κυρίως την επεξεργασία PHP. Ακολουθούν μερικές προτάσεις των online υπηρεσιών για την εκφόρτωση:

   • Εικόνες: Flickr, Smugmug, Paid hostings *
   • Javascripts: Βιβλιοθήκη Google Ajax, Google App Engine, Αμειβόμενος φιλοξενία *
   • Διαδικτυακή φόρμαs: WuFoo, FormStack
   • RSS: Google Feedburner
   • Έρευνα και δημοσκοπήσεις: SurveyMonkey, PollDaddy

   * Αμειβόμενος φιλοξενία - Οι αμειβόμενες υπηρεσίες έχουν πάντα καλύτερη αξιοπιστία και σταθερότητα. Αν ο ιστότοπός σας ζητά συνεχώς τα στοιχεία, θα πρέπει να βεβαιωθείτε ότι είναι σε καλά χέρια. Σας συνιστούμε το Amazon S3 και το Front Cloud.

5. Διαχείριση των εικόνων Ιστού

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

   • Βελτιστοποιήστε τις εικόνες PNGΟι άνθρωποι στο Smashing Magazine περιγράφουν κάποιες έξυπνες τεχνικές που μπορεί να σας βοηθήσουν να βελτιστοποιήσετε τις εικόνες σας PNG.
   • Βελτιστοποίηση για ιστό - Τα πράγματα που πρέπει να γνωρίζετε (τις μορφές) Μάθετε περισσότερα σχετικά με το Jpeg, το GIF, το PNG και τον τρόπο με τον οποίο πρέπει να αποθηκεύσετε τις εικόνες σας για τον ιστό.
   • Μην κλιμακώσετε τις εικόνεςΠάντα ασκείτε την εισαγωγή του πλάτος και ύψος για κάθε εικόνα. Επίσης, μην μειώσετε την εικόνα μόνο επειδή χρειάζεστε μια μικρότερη έκδοση στον ιστό. Για παράδειγμα: Μην πιέζετε μια εικόνα 200 × 200 px σε 50 × 50 px για τον ιστότοπό σας, αλλάζοντας την πλάτος και ύψος. Πάρτε ένα αντίγραφο 50 × 50 px.

   Βελτιστοποίηση με υπηρεσίες και εργαλεία Web. Τα καλά νέα είναι ότι δεν χρειάζεται να είστε ειδικός του Photoshop για να βελτιστοποιήσετε τις εικόνες σας. Υπάρχουν πολλές υπηρεσίες ιστού και εργαλεία για να σας βοηθήσουμε να κάνετε τη δουλειά.

   • Smush.itΠιθανότατα ένα από τα πιο αποτελεσματικά online εργαλεία για τη βελτιστοποίηση των εικόνων. Υπάρχει ακόμη και ένα plugin WordPress για αυτό!
   • JPEG & PNG StripperΈνα εργαλείο των Windows για απογύμνωση / καθαρισμό / αφαίρεση περιττών μεταδεδομένων (junk) από αρχεία JPG / JPEG / JFIF & PNG.
   • Online Image OptimizerΣας επιτρέπει να βελτιστοποιήσετε εύκολα τις gifs, τις κινούμενες gifs, τα jpgs και τα pngs, ώστε να φορτωθούν όσο πιο γρήγορα γίνεται στον ιστότοπό σας, από το Dynamic Drive
   • SuperGIFΚαταβάλλετε με ευκολία όλες τις εικόνες και κινούμενα σχέδια GIF σας μικρότερες.
   • Εδώ είναι περισσότερα.

6. Διαχείριση του CSS

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

   • Κρατώντας τα Παιδιά των Στοιχείων σας σε Γραμμή με τους ΑπογόνουςΠώς να διατηρήσετε καθαρή τη σήμανσή σας με τους επιλογείς CSS.
   • Κρατήστε το CSS σύντομοΌταν δίνουν το ίδιο στυλ, οι κώδικες είναι καλύτεροι όσο μικρότεροι είναι. Εδώ είναι α CSS Οδηγός στενογραφίας πιθανώς θα χρειαστείτε.
   • Χρησιμοποιήστε το CSS SpriteΗ τεχνική CSS Sprite μειώνει το αίτημα HTTP κάθε φορά που φορτώνεται μια σελίδα συνδυάζοντας πολλές (ή όλες) εικόνες μαζί σε ένα αρχείο εικόνας και ελέγχει την έξοδο της με το CSS φόντο-θέση Χαρακτηριστικό. Εδώ είναι μερικοί χρήσιμοι οδηγοί και τεχνικές για τη δημιουργία CSS Sprites:
     • Ηλεκτρονική γεννήτρια CSS Sprite
     • Best Online και Offline CSS Sprites Generator
   • Χρησιμοποιώντας κάθε δήλωση μία φοράΌταν ψάχνετε να βελτιστοποιήσετε τα αρχεία σας CSS, ένα από τα πιο ισχυρά μέτρα που μπορείτε να χρησιμοποιήσετε είναι να χρησιμοποιήσετε κάθε δήλωση μία φορά.
   • Μειώστε το ποσό των αρχείων CSSΟ λόγος είναι απλός, τόσο περισσότερα αρχεία CSS έχετε το περισσότερο αίτημα HTTP που θα πρέπει να κάνει όταν ζητείται μια ιστοσελίδα. Για παράδειγμα, αντί να έχετε πολλαπλά αρχεία CSS όπως τα εξής:

     Μπορείτε να τα συνδυάσετε σε ένα ενιαίο CSS:

   Συνιστώμενες αναγνώσεις:

   • Χρήσιμα εργαλεία για να ελέγξετε, να καθαρίσετε και να βελτιστοποιήσετε το αρχείο CSSΜερικά από τα χρήσιμα εργαλεία που μπορείτε να χρησιμοποιήσετε για να βελτιστοποιήσετε τον κώδικα CSS, ακόμα κι αν δεν έχετε πλήρη γνώση της κωδικοποίησης CSS.
   • 7 αρχές του καθαρού και βελτιστοποιημένου κώδικα CSSΗ βελτιστοποίηση δεν απλώς ελαχιστοποιεί το μέγεθος του αρχείου - είναι επίσης οργανωμένη, χωρίς συσσώρευση και αποτελεσματική.
   • Βέλτιστες πρακτικές για τη βελτιστοποίηση του CSSΘεωρήστε αυτό το άρθρο περισσότερο σαν μια ακαδημαϊκή άσκηση αντί για συμβουλές βελτιστοποίησης της πραγματικής ζωής.

Βελτιστοποίηση για το WordPress

Από καιρό σε καιρό, παρακολουθούμε, συγκρίνουμε και αναλύουμε την απόδοση του blog του WordPress. Εάν ο ιστότοπος λειτουργεί αργά, πρέπει να ξέρουμε γιατί. Εδώ είναι μερικές βασικές αλλαγές που έχουμε κάνει και εμείς πιστεύουμε ότι θα αυξήσει σημαντικά την ταχύτητα του blog σας WordPress.

1. Cache το ιστολόγιό σας Worpress

   WP-Cache είναι ένα εξαιρετικά αποτελεσματικό σύστημα προσωρινής αποθήκευσης σελίδων του WordPress για να σας κάνει πολύ πιο γρήγορο και ευαίσθητο χώρο. Σας προτείνουμε επίσης WP Super Cache που ενισχύει από το προηγούμενο plugin και επίσης κάνει εξαιρετική δουλειά.

2. Απενεργοποίηση και διαγραφή αχρησιμοποίητων προσθηκών

   Όταν παρατηρήσετε ότι το ιστολόγιό σας φορτώνει πραγματικά αργά, δείτε εάν έχετε εγκαταστήσει πολλά plugins. Μπορεί να είναι ο ένοχος.

3. Καταργήστε τις περιττές ετικέτες PHP

   Εάν ρίξετε μια ματιά στους πηγαίους κώδικες του κειμένου, θα βρείτε πολλές ετικέτες όπως αυτές:

   Μπορούν να αντικατασταθούν σχεδόν με περιεχόμενο κειμένου που δεν προκαλεί φόρτωση στο διακομιστή. Ολοκλήρωση αγοράς Μιχαήλ Μάρτιν'μικρό 13 Ετικέτες που θέλετε να διαγράψετε από το WordPress Bloσολ

Συνιστώμενες αναγνώσεις:

• 3 πιο εύκολοι τρόποι για να επιταχύνετε το WordPressΟ John Pozadzides μοιράζεται το πώς το ιστολόγιό του ταξιδεύει ομαλά μέσα από την κορυφή της κυκλοφορίας του Digg.
• 13 μεγάλες συμβουλές και κόλπα ταχύτητας WordPress για MAX Performance Εδώ είναι μερικά πράγματα που μπορείτε να δοκιμάσετε αν διαπιστώσετε ότι ο ιστότοπός σας στο WordPress δεν λειτουργεί τόσο καλά όσο θα μπορούσε να οφείλεται σε υψηλή επισκεψιμότητα ή κρυμμένα προβλήματα που δεν γνωρίζετε.
• 40 Συμβουλές βελτιστοποίησης WordPressΣυμβουλές βελτιστοποίησης σε διαφάνειες. 40 συμβουλές σε 40 λεπτά.

Τελευταίο αλλά εξίσου σημαντικό…

Ακολουθούν ορισμένες χρήσιμες υπηρεσίες και εργαλεία ιστού που σας προσφέρουν μια ευρύτερη προοπτική και καλύτερη ανάλυση για να σας βοηθήσουν στη βελτιστοποίηση του ιστού.

• Yahoo! YSlow

  YSlow αναλύει ιστοσελίδες και προτείνει τρόπους βελτίωσης της απόδοσής τους βάσει ενός συνόλου κανόνων για ιστοσελίδες υψηλής απόδοσης. Σας δίνει μια καλή ιδέα για το τι πρέπει να γίνει για να φορτωθεί γρηγορότερα ο ιστότοπος.

  (Απαιτείται Firebug)

  

• PageSpeed

  Παρόμοιο με Yahoo! YSlow, Google Ταχύτητα σελίδας είναι ένα πρόσθετο Firebug ανοιχτού κώδικα για την αξιολόγηση των επιδόσεων του ιστότοπου και τον τρόπο βελτίωσής τους. (Απαιτείται Firebug)

  

• Εργαλεία Pingdom

  Εργαλεία Pingdom Πάρτε ένα πλήρες φορτίο του ιστότοπού σας, συμπεριλαμβανομένων όλων των αντικειμένων (εικόνες, CSS, JavaScript, RSS, Flash και frames / iframes) και σας εμφανίζει γενικά στατιστικά στοιχεία για τη φορτωμένη σελίδα, όπως ο συνολικός αριθμός αντικειμένων, ο συνολικός χρόνος φόρτωσης και το μέγεθος, αντικείμενα.

  

Συνιστώμενες αναγνώσεις:Ακολουθούν περισσότερες συμβουλές και εργαλεία που αξίζει τον έλεγχο.

• Google Web Optimizer
• 15 Εργαλεία που θα σας βοηθήσουν να αναπτύξετε ταχύτερες ιστοσελίδες
• 15+ Συμβουλές για να επιταχύνετε τον ιστότοπό σας και να βελτιστοποιήσετε τον κώδικα σας!