Πώς να ομαδοποιήσετε και να ελαχιστοποιήσετε πόρους στο 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).

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

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

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

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

• Group 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 και θα μπορείτε να δείτε την "Προηγμένη εξαίρεση αρχείων" .

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

 Για να μπορέσει να εμφανίσει το 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