Ελαχιστοποιήστε το CSS

Σε αυτό το άρθρο, θέλω να μιλήσω για το τι ελαχιστοποιεί τον κώδικα HTML και CSS, τι είναι και πώς να το επιτύχει. Η δομή του κώδικα σε μπλοκ, γραμμές κ.λπ. είναι απαραίτητη για την ευκολία της ανθρώπινης αναγνωσιμότητας. Αντιλαμβανόμαστε τέτοια μπλοκ στο σύνολό του, βλέπουμε πού ανοίγει η ετικέτα, εκεί που κλείνει. Για τα προγράμματα περιήγησης αυτό δεν είναι απαραίτητο, διαβάζουν τον κώδικα διαδοχικά και τα περιττά διαλείμματα γραμμής, κενά, σχόλια στο κείμενο δυσκολεύουν μόνο την ανάγνωση και την αύξηση του χρόνου φόρτωσης της σελίδας. Έτσι, υπάρχουν δύο κύριοι λόγοι για την ανάγκη ελαχιστοποίησης του κώδικα: Μείωση του μεγέθους (βάρος) της σελίδας και, κατά συνέπεια, αύξηση της ταχύτητας φόρτωσής της. Ο δεύτερος λόγος προκύπτει από τον πρώτο. Αυτή είναι μια βελτίωση στους παράγοντες συμπεριφοράς. Εάν ο ιστότοπος φορτώνει γρηγορότερα, τότε υπάρχει χαμηλότερο ποσοστό εγκατάλειψης, αύξηση επισκεψιμότητας, αύξηση στα αποτελέσματα αναζήτησης κ.λπ.

Επί του παρόντος, υπάρχει ένας τεράστιος αριθμός εργαλείων Ιστού για τη βελτιστοποίηση αρχείων CSS. Τα περισσότερα από αυτά έχουν τον δικό τους αλγόριθμο εργασίας (υπάρχουν, φυσικά, διπλότυπα). Η αποτελεσματικότητα των ίδιων των προγραμμάτων είναι επίσης σημαντικά διαφορετική. Επιπλέον, ορισμένοι βελτιστοποιητές μπορούν να σπάσουν τον κώδικα CSS, μετά τον οποίο τα στυλ καθίστανται άκυρα. Η ελαχιστοποίηση των αρχείων CSS (δεν πρέπει να συγχέεται με τη συμπίεση CSS) συνεπάγεται την αφαίρεση τυχόν περιττών χαρακτήρων από το αρχείο για να μειώσει το μέγεθός του και έτσι να επιταχύνει τη φόρτωση. Η ελαχιστοποίηση και συμπίεση αρχείων CSS δεν είναι το ίδιο πράγμα. Και οι δύο αυτές μέθοδοι έχουν σχεδιαστεί για να μειώσουν τους χρόνους φόρτωσης. Η διαφορά έγκειται στο πώς λειτουργούν. Η συμπίεση χρησιμοποιείται για τη μείωση του μεγέθους του αρχείου χρησιμοποιώντας αλγόριθμους συμπίεσης όπως το Gzip ή το brotli. Τα αρχεία συμπιέζονται πριν σταλούν στον πελάτη.