Πώς να ομαδοποιήσετε και να ελαχιστοποιήσετε τους πόρους στο 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 > SpeedUp > Group & Minify, θα μπορείτε να δείτε το μενού με όλες τις επιλογές για ελαχιστοποίηση. Η έκδοση χωρίς πρόσθετα περιλαμβάνει την επιλογή ομαδοποίησης και ελαχιστοποίησης, αλλά η εξαίρεση οπτικού αρχείου είναι διαθέσιμη μόνο στην έκδοση PRO Addon.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Η ελαχιστοποίηση θα μπορούσε να προκαλέσει προβλήματα στον ιστότοπό σας. Αυτό συμβαίνει κυρίως όταν ομαδοποιείτε ορισμένα αρχεία που περιέχουν σφάλμα στη σύνταξη ή σε παρόμοια μεταβλητή, όνομα κλάσης. Γι' αυτό, με την επιλογή "αποκλεισμός ελαχιστοποίησης αρχείων", θα μπορείτε να εξαιρέσετε αρχεία από τη διαδικασία ελαχιστοποίησης και ομαδοποίησης. Μεταβείτε στο WP Speed of Light > SpeedUp > Group & Minifyκαι θα μπορείτε να δείτε την "Προηγμένη εξαίρεση αρχείων" .

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

 
Για να μπορέσει να εμφανίσει το script που έχει φορτωθεί στον ιστότοπό σας, 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