Έχοντας έναν αργό ιστοχώρο είναι μια απογοητευτική εμπειρία. Όχι μόνο θα κατατάσσεται ανεπαρκώς στις μηχανές αναζήτησης (η ταχύτητα φόρτωσης είναι ένας από τους παράγοντες κατάταξης στην Google), αλλά δίνει στον επισκέπτη σας κακή εμπειρία χρήστη. Ωστόσο, ενώ οι περισσότεροι webmasters θα ήθελαν να επιταχύνουν τους ιστοτόπους τους, οι περισσότεροι από αυτούς δεν έχουν τις τεχνικές γνώσεις για να το κάνουν. Εάν πέσετε σε αυτό το στρατόπεδο και χρησιμοποιείτε το WordPress, έχουμε έναν πλήρη οδηγό βελτιστοποίησης ταχύτητας για εσάς. Τα παρακάτω βήματα είναι αυτά που έχουμε κάνει για αυτόν τον ιστότοπο και έχουν δουλέψει καλά για εμάς.

Αφαιρέστε τον ιστότοπο

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

1. Περάστε στο σχεδιασμό θέματος του ιστότοπού σας

Επαναξιολογήστε τον σχεδιασμό του ιστότοπού σας και δείτε αν μπορείτε να καταργήσετε περιττά στοιχεία από τον ιστότοπο. Δεν έχει νόημα να γεμίζεις υπερβολικά πολλές πληροφορίες στην πλαϊνή μπάρα όταν ο επισκέπτης ενδιαφέρεται μόνο για το πραγματικό περιεχόμενο. Ακολουθούν μερικά πράγματα που μπορείτε να καταργήσετε:

  • Φανταστικό ρυθμιστικό, κινούμενα σχέδια και εφέ.
  • Διάφορα γραφικά στοιχεία στην πλαϊνή γραμμή
  • Διαφημίσεις - Μόνο αν έχετε προσθέσει πάρα πολλές διαφημίσεις. Σε ορισμένες περιπτώσεις, μπορείτε να κερδίσετε περισσότερα με λιγότερες διαφημίσεις

2. Απαλλαγείτε από τα περιττά πρόσθετα

Είστε δύο κύριοι τύποι plug-ins του WordPress: ένας που επηρεάζει μόνο την περιοχή διαχείρισης και μία που προσθέτει επιπλέον περιεχόμενο στον ιστότοπο. Για τους τελευταίους, συνοδεύεται πάντα από επιπλέον αρχεία javascript και css, τα οποία θα προσθέσουν επιπλέον βάρος στον ιστότοπο.

Ρίξτε μια ματιά στη λίστα των plugin σας και απενεργοποιήστε τα παλιά πρόσθετα που είναι αναποτελεσματικά και δεν χρησιμοποιούνται πλέον. Αν ένα plugin δεν έχει ενημερωθεί για μεγάλο χρονικό διάστημα, ίσως θελήσετε επίσης να ελέγξετε εναλλακτικά πρόσθετα που είναι ελαφρύτερα και ακόμα μπορούν να κάνουν την εργασία πιο αποτελεσματικά.

3. Μειώστε το μέγεθος του αρχείου HTML, CSS και Javascript

Υπάρχουν δύο τρόποι για να μειώσετε το συνολικό μέγεθος του ιστότοπού σας. Το πρώτο είναι να συνδυάσετε πολλαπλά φύλλα στυλ και αρχεία javascript σε ένα και το δεύτερο να ελαχιστοποιήσετε τα αρχεία. Η ελάττωση σημαίνει απομάκρυνση περιττών χώρων και σχολίων και συνδυασμός πολλαπλών επαναλαμβανόμενων κωδίκων σε ένα. Ένα καλό plugin που μπορείτε να χρησιμοποιήσετε για να το επιτύχετε είναι το W3 Total Cache plugin.

Στη σελίδα ρυθμίσεων συνολικής προσωρινής μνήμης W3, κάτω από τις "Γενικές ρυθμίσεις", ενεργοποιήστε τη λειτουργία "Minify".

Στη συνέχεια, μεταβείτε στην ενότητα "Μείωση -> HTML & XML", επιλέξτε τα πλαίσια δίπλα στην επιλογή "Ενεργοποίηση", "Ενσωμάτωση CSS Minification", "Inline JS Minification" και "Κατάργηση διάλειμμα γραμμής".

Ακολουθεί η ενότητα "Εξόρυξη JS". Αυτό είναι ένα δύσκολο κομμάτι δεδομένου ότι λειτουργεί για ορισμένα θέματα, αλλά όχι για άλλους. Προσωπικά, δεν έχω τύχη με αυτή τη ρύθμιση, αλλά ίσως θελήσετε να το δοκιμάσετε και να δείτε αν λειτουργεί για τον ιστότοπό σας.

Ένα πράγμα που συστήνω για αυτή τη ρύθμιση είναι να χρησιμοποιήσετε το "Minify" αντί για το "Combine only." Συνδυάζοντας πολλά javascripts μαζί μπορεί να προκαλέσει ανεπιθύμητα αποτελέσματα και να σπάσει το site.

Το τελευταίο μέρος που πρέπει να ρυθμίσετε εδώ είναι η ενότητα "Εξομάλυνση CSS". Αυτό σας επιτρέπει να διαχωρίζετε και να συνδυάζετε όλο το CSS που χρησιμοποιείται στο θέμα.

Για να έχετε το καλύτερο από αυτό, είναι καλύτερο να ανοίξετε τον ιστότοπό σας, να δείτε τον πηγαίο κώδικα και να αντιγράψετε όλες τις συνδέσεις CSS στο πεδίο "File URI" στην ενότητα "Διαχείριση αρχείων CSS". Όλα τα αρχεία CSS που προσθέσατε σε αυτό το πεδίο θα εξομαλυνθούν και θα συνδυαστούν σε ένα μόνο αρχείο CSS.

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

Τα αρχεία εικόνων είναι συνήθως αυτά που αποτελούν το μεγαλύτερο μέρος του μεγέθους του αρχείου του ιστότοπου, οπότε είναι σημαντικό να βελτιστοποιήσετε τις εικόνες και να τις διατηρήσετε στο ελάχιστο δυνατό μέγεθος. Wp Το Smush.it είναι ένα εξαιρετικό plugin που βελτιστοποιεί τις εικόνες σας όταν τα φορτώνετε. Έρχεται επίσης με μια λειτουργία χύμα-smush που μπορεί να βελτιστοποιήσει όλες τις εικόνες που φορτώθηκαν προηγουμένως.

Επιταχύνετε την ταχύτητα φόρτωσης του ιστότοπου

Μερικοί από τους τρόπους που μπορείτε να χρησιμοποιήσετε για να επιταχύνετε την ταχύτητα φόρτωσης του ιστότοπου περιλαμβάνουν:

  • cache της τοποθεσίας
  • ορίστε την προσωρινή μνήμη του προγράμματος περιήγησης
  • μεταβείτε στη jquery της Google
  • αναβαλλόμενη φόρτωση javascript
  • χρησιμοποιήστε τεμπέληνη φόρτωση εικόνων
  • χρησιμοποιήστε ασύγχρονο javascript
  • χρησιμοποιήστε το CDN

Ακολουθούν μερικά πρόσθετα που μπορούν να κάνουν την παραπάνω εργασία για εσάς.

1. W3 Total Cache

Έχουμε καλύψει τη μικροποίηση στην παραπάνω ενότητα, αλλά αυτό που κάνει το W3 Total Cache ισχυρό είναι το module caching του. Αρχικά, ενεργοποιήστε τη λειτουργική μονάδα "Cache σελίδας" στην ενότητα "Γενικές ρυθμίσεις". Σε μια κοινή φιλοξενία, επιλέξτε "Disk: Basic" για τη λειτουργία cache σελίδας. Για VPS ή αποκλειστικό διακομιστή, επιλέξτε "Disk: Enhanced."

Μετακινηθείτε προς τα κάτω στη σελίδα μέχρι να δείτε την ενότητα "Cache Browser". ελέγξτε το πλαίσιο για να το ενεργοποιήσετε επίσης.

Αυτό θα επιτρέψει τόσο την προσωρινή μνήμη σελίδων όσο και την προσωρινή μνήμη του ιστοτόπου για τον ιστότοπό σας. Η προσωρινή μνήμη σελίδας είναι απλά μια στατική σελίδα HTML που θα προβάλλεται αντί της δυναμικής σελίδας PHP. Η μνήμη cache του προγράμματος περιήγησης ενημερώνει το πρόγραμμα περιήγησης για την προσωρινή μνήμη της σελίδας σας και για την προβολή της από την προσωρινή μνήμη όταν ο αναγνώστης επισκέπτεται ξανά την ίδια σελίδα.

2. WP Deferred Script

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

Το WP Deferred Script είναι ένα χρήσιμο plugin που μετακινεί όλα τα κρυμμένα σενάρια στο κάτω μέρος της σελίδας. Χρησιμοποιεί το lab.js στο backend και θα λειτουργήσει με τα περισσότερα plugins. Δεν υπάρχουν ρυθμίσεις για τη ρύθμιση παραμέτρων. Μόλις ενεργοποιηθεί, θα αναβάλει αυτόματα τη φόρτωση του javascript στο τέλος της σελίδας. Ένα άλλο καλό είναι ότι φορτώνει javascripts ασύγχρονα, πράγμα που σημαίνει ότι φορτώνει javascript παράλληλα με το περιεχόμενο.

3. Jetpack Photon

Ένας άλλος καλός τρόπος για να μειώσετε την ταχύτητα φόρτωσης είναι να φορτώσετε όλες τις εικόνες από μια πηγή CDN. Αν έχετε εγκαταστήσει την προσθήκη Jetpack, η ενεργοποίηση της μονάδας Photon θα προσθέσει αυτόματα μια εικόνα CDN στον ιστότοπό σας.

Εναλλακτικά, εάν χρησιμοποιείτε εξωτερικά CDN, όπως το MaxCDN ή το Amazon CloudFront, μπορείτε να διαμορφώσετε επίσης την ενότητα CDN στο plugin W3 Total Cache για να χρησιμοποιήσετε τις υπηρεσίες CDN.

4. Lazy Load

Παρατηρήσατε πώς φορτώνονται οι εικόνες κατά παραγγελία όταν κάνετε κύλιση προς τα κάτω στη σελίδα; Αυτό ονομάζεται Lazy φόρτωση, και είναι ένας καλός τρόπος για την επιτάχυνση του χώρου επίσης. Το plugin που χρησιμοποιούμε εδώ είναι το Unveil Lazy Load, αλλά εάν κάνετε μια αναζήτηση για τεμπέληνη φόρτωση, υπάρχουν πολλά τεχνητά plugins που μπορείτε να χρησιμοποιήσετε. Μερικοί είναι ακόμα βελτιστοποιημένοι για βίντεο και iframe.

5. DFP

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

Σε αυτόν τον ιστότοπο, χρησιμοποιούμε το σενάριο jquery.dfp.js για να φορτώσετε όλες τις ετικέτες του DFP κατόπιν ζήτησης, έτσι ώστε να μην επιβραδύνεται η φόρτωση του ιστότοπου. Η εφαρμογή μπορεί να είναι μάλλον πολύπλοκη και δεν θα την καλύψουμε εδώ. Εάν υπάρχει αρκετό ενδιαφέρον (μπορείτε να εκφράσετε το ενδιαφέρον σας για τα σχόλια), θα κάνω ένα άλλο σεμινάριο που θα περιγράφει λεπτομερώς τη διαδικασία βήμα προς βήμα στην εφαρμογή του στον ιστότοπό σας.

συμπέρασμα

Αν ακολουθήσατε τα παραπάνω βήματα, μπορώ να σας διαβεβαιώσω ότι ο ιστότοπός σας τρέχει τώρα πιο γρήγορα από ό, τι πριν, ακόμα και αν βρίσκεστε σε κοινή φιλοξενία. Ένας καλός τρόπος για να ελέγξετε την ταχύτητα φόρτωσης του ιστότοπού σας είναι το εργαλείο Google PageSpeed ​​Insights. Απλά πληκτρολογήστε τη διεύθυνση URL και θα αναλύσει τον ιστότοπό σας για εσάς. Κάντε το πριν και μετά τη βελτιστοποίηση και δείτε τις τεράστιες διαφορές.

Image Credit: Πάμε πουθενά γρήγορα