Πώς να ομαδοποιήσετε και να ελαχιστοποιήσετε πόρους στο WordPress

Έχοντας την καλύτερη δυνατή απόδοση είναι το όνειρο όλων όσοι διαχειρίζονται έναν ιστότοπο, η ομαδοποίηση και η ελαχιστοποίηση των πόρων στο WordPress είναι ένα από τα καλύτερα πράγματα που μπορούμε να κάνουμε για αυτό, αλλά μπορεί να είναι πραγματικά δύσκολο. Η ομαδοποίηση όλων των πόρων σας (κυρίως αρχεία css και js) μπορεί να εκθέσει τον ιστότοπό σας αν δεν είστε προγραμματιστής, επειδή μπορεί να δημιουργήσει σύγκρουση.

WP Speed of Light είναι η καλύτερη λύση για την εκτέλεση του ιστότοπού σας στο WordPress, επειδή έχει πολλές επιλογές για να κάνει τον ιστότοπό σας να φορτώνει γρήγορα με έναν πραγματικά φιλικό πίνακα ελέγχου και ναι, μια από αυτές τις επιλογές είναι η ομαδοποίηση και η ελαχιστοποίηση πόρων. Η συμπερίληψη/αποκλεισμός ενός αρχείου από τη διαδικασία ομαδοποίησης και ελαχιστοποίησης είναι το κλειδί για μια προσαρμοσμένη βελτιστοποίηση χωρίς συγκρούσεις.

Θα χρησιμοποιήσουμε έναν παράδειγμα ιστότοπου WordPress για αυτήν την ανάρτηση ιστολογίου και θα μάθουμε πώς να το κάνουμε αυτό, ώστε η διαδικασία διαμόρφωσης όλων θα είναι ευκολότερη.

Πώς να κάνετε μια ελαχιστοποίηση JS και CSS στο WordPress

Ας μάθουμε πώς να κάνουμε μια ελαχιστοποίηση wordpress js και CSS, αλλά πρώτα, πρέπει να ξέρουμε τι σημαίνει η ελαχιστοποίηση «Η ελαχιστοποίηση αναφέρεται στη διαδικασία αφαίρεσης περιττών ή πλεοναστικών δεδομένων χωρίς να επηρεάζεται ο τρόπος επεξεργασίας του πόρου από το πρόγραμμα περιήγησης - π.χ. σχόλια κώδικα και μορφοποίηση, αφαίρεση αχρησιμοποίητου κώδικα, χρήση συντομότερων ονομάτων μεταβλητών και συναρτήσεων, και ούτω καθεξής».

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

Ναι, 2,79 δευτερόλεπτα για να φορτώσει η σελίδα, όχι άσχημα αλλά θα μπορούσε να είναι καλύτερα, απλώς ας ελαχιστοποιήσουμε τα js και CSS και ας δούμε τη διαφορά, πηγαίνετε στο WP Speed of light > Επιτάχυνση > Ομαδοποίηση & Ελαχιστοποίηση, θα μπορείτε να δείτε το μενού με όλες τις επιλογές για ελαχιστοποίηση. Η δωρεάν έκδοση του πρόσθετου περιλαμβάνει την επιλογή ομαδοποίησης και ελαχιστοποίησης, αλλά η οπτική εξαίρεση αρχείων είναι διαθέσιμη μόνο στην έκδοση PRO Addon.

Επιλογές προσθήκης PRO: Εξαίρεση ενσωματωμένου σεναρίου (Εξαίρεση ενσωματωμένου σεναρίου από τη σμίκρυνση), μετακίνηση σεναρίων στο υποσέλιδο (επιτρέπει την επιτάχυνση του ιστότοπού σας μετακινώντας όλα τα σμικρυμένα σενάρια στο υποσέλιδο), Ομαδοποίηση γραμματοσειρών και γραμματοσειρών Google (Ομαδοποίηση τοπικών γραμματοσειρών και γραμματοσειρών Google σε ένα μόνο αρχείο για ταχύτερη εξυπηρέτηση) και Προηγμένη εξαίρεση αρχείων.
 
Έχετε την επιλογή να σμικρύνετε, όπως μπορείτε να δείτε, JS, CSS και επίσης HTML τώρα απλώς ενεργοποιήστε αυτές τις επιλογές, κάντε κλικ στην αποθήκευση και όλοι οι πόροι σας θα σμικρυνθούν αμέσως, μπορεί να έχει προβλήματα καθώς είναι μια προηγμένη διαμόρφωση, αλλά όλα μπορούν να διορθωθούν με την εξαίρεση κάποιου κώδικα και αρχείων (με την προσθήκη pro).

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

Επόμενο βήμα, βελτιστοποίηση WordPress CSS και JS

Με αυτό το πρόσθετο θα επιτρέψουμε στο WordPress να βελτιστοποιήσει τα CSS και JS απλώς ενεργοποιώντας τις επιλογές ομαδοποίησης στον πίνακα ελέγχου, πηγαίνετε στο WP Speed of Light > Επιτάχυνση > Ομαδοποίηση & Ελαχιστοποίηση, θα μπορείτε να δείτε έναν πίνακα ελέγχου με τις επιλογές για ομαδοποίηση CSS και JS.

Αυτές οι επιλογές σας επιτρέπουν:

• Ομαδοποίηση JS: Η ομαδοποίηση πολλών αρχείων Javascript σε ένα μόνο αρχείο θα ελαχιστοποιήσει τον αριθμό των αιτήσεων HTTP
• Ομαδοποίηση CSS: Η ομαδοποίηση πολλών αρχείων CSS σε ένα ενιαίο αρχείο θα ελαχιστοποιήσει τον αριθμό των αιτημάτων HTTP.

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

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

Στη συνέχεια, μπορείτε να καταχωρίσετε όλα τα αρχεία που φορτώνονται ανά τύπο, εδώ σε αυτό το παράδειγμα έχω κάνει κλικ στη λίστα αρχείων JS μόνο.

Τώρα που βρισκόμαστε σε αυτές τις ρυθμίσεις, απλώς ενεργοποιήστε τις επιλογές ομάδας (Ομάδα CSS και Ομάδα JS) και κάντε κλικ στην αποθήκευση, λάβετε υπόψη ότι αυτές οι επιλογές πρέπει να χρησιμοποιούνται με προσοχή και θα πρέπει να δοκιμάσετε τη σελίδα σας επειδή μπορεί να προκαλέσει συγκρούσεις.

Ας το πάρουμε στα σοβαρά και ας βελτιστοποιήσουμε το βάρος γραμματοσειράς

Τι; Άλλη βελτιστοποίηση; Ναι! Θα μπορείτε να βελτιστοποιήσετε το πάχος της γραμματοσειράς και θα είναι τόσο εύκολο όσο η ενεργοποίηση της επιλογής στις ρυθμίσεις, απλώς πηγαίνετε στο WP Speed of Light > SpeedUp > Ομαδοποίηση & Μείωση μεγέθους > Ομαδοποίηση γραμματοσειρών και γραμματοσειρών Google επιλογή.
Η επιλογή ομαδοποίησης γραμματοσειρών και γραμματοσειρών Google θα σας επιτρέψει να τις ομαδοποιήσετε σε ένα μόνο αρχείο για να εξυπηρετηθούν γρηγορότερα, αυτό είναι πολύ χρήσιμο καθώς τα περισσότερα θέματα και διατάξεις του WordPress έρχονται με 2 ή περισσότερες γραμματοσειρές από προεπιλογή με όλες τις παραλλαγές (κανονική, έντονη, πλάγια...)

Απλώς ενεργοποιήστε αυτήν την επιλογή, κάντε κλικ στην αποθήκευση και όλες οι γραμματοσειρές θα ομαδοποιηθούν.

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

Τι διαφορά, από 2.8 σε 0.56 δευτερόλεπτα! Όπως σας είπαμε στην αρχή αυτής της ανάρτησης, μπορούμε να κάνουμε καλύτερο τον χρόνο φόρτωσης ;)

Πώς να χρησιμοποιήσετε τον αποκλεισμό ελαχιστοποίησης αρχείων

Η ελαχιστοποίηση μπορεί να προκαλέσει προβλήματα στον ιστότοπό σας, κυρίως συμβαίνει όταν ομαδοποιείτε ορισμένα αρχεία που περιέχουν σφάλμα στο συντακτικό σφάλμα ή παρόμοια μεταβλητή, όνομα κλάσης. Γι' αυτό με την επιλογή “αποκλεισμός ελαχιστοποίησης αρχείων”, θα μπορείτε να εξαιρέσετε αρχεία από τη διαδικασία ελαχιστοποίησης και ομαδοποίησης, πηγαίνετε στο WP Speed of Light > Επιτάχυνση > Ομαδοποίηση & Ελαχιστοποίηση, θα μπορείτε να δείτε την προηγμένη εξαίρεση αρχείων επιλογή.

Για να χρησιμοποιήσετε την προηγμένη εξαίρεση αρχείων, θα πρέπει πρώτα να εκτελέσετε μια σάρωση, να ενεργοποιήσετε την επιλογή και να κάνετε κλικ στο Εκτέλεση Σάρωσης.

  Για να μπορέσετε να καταχωρίσετε το σενάριο που έχει φορτωθεί στην ιστοσελίδα σας, το WP Speed of Light χρειάζεται να σαρώσει τον φάκελό σας για να τα καταχωρίσει. Συνήθως περιέχονται όλα στον φάκελό σας /wp-content που ομαδοποιεί όλα τα πρόσθετα και το θέμα σας. Επιλέξτε αυτόν τον φάκελο (τουλάχιστον) και κάντε κλικ στο “Σάρωση Τώρα”

Θα εκτελέσει μια σάρωση, τέλος, κάντε κλικ στην προβολή αποτελεσμάτων όταν ολοκληρωθεί η σάρωση.

Θα πρέπει να εμφανίζεται μια λίστα με αρχεία ταξινομημένα ανά τύπο (Όλα, JS, CSS, Γραμματοσειρά). Εάν έχετε εντοπίσει ένα αρχείο που προκαλεί πρόβλημα, κατά την ενεργοποίηση της ομαδοποίησης και της συμπίεσης αρχείων, μπορείτε να το εξαιρέσετε από εδώ χρησιμοποιώντας έναν απλό διακόπτη ON/OFF.

Αυτό θα σας βοηθήσει να εξαιρέσετε αρχεία και, με αυτόν τον τρόπο, να επιλύσετε εύκολα οποιοδήποτε πρόβλημα μπορεί να υπάρχει κατά την ελαχιστοποίηση των πόρων… Η διαδικασία ομαδοποίησης και ελαχιστοποίησης εξακολουθεί να απαιτεί κάποια εργασία, ιδιαίτερα στη δοκιμή, αλλά σίγουρα αξίζει τον κόπο, και θα μπορείτε πάντα να δοκιμάσετε πώς λειτουργεί εκτελώντας τη δοκιμή ταχύτητας απευθείας από το WP Speed of Light.
 
Προχωρήστε και δοκιμάστε το WP Speed of Light: https://www.joomunited.com/wordpress-products/wp-speed-of-light