5 Συμβουλές για Super-Fast CSS

Sep 11, 2025

πως να

Έχετε σκεφτεί το μέγεθος του CSS του ιστότοπού σας; Εάν το φύλλο στυλ σας είναι μπαλόνι, θα μπορούσε να καθυστερήσει την απόδοση σελίδας.

16 παραδείγματα κορυφής CSS κινούμενα σχέδια

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

Πήρε μια πολύπλοκη περιοχή; Χρειάζεστε το τέλειο web hosting υπηρεσία. Ή, αν θέλετε να κάνετε έναν ιστότοπο χωρίς τη φασαρία, δοκιμάστε ένα οικοδόμος ιστότοπου .

01. Χρησιμοποιήστε ρηχούς επιλογείς

Οι γονείς σου είπαν ότι η ρηχή δεν είναι αρετή, αλλά όταν πρόκειται για CSS, είναι λάθος. Χρησιμοποιούνται με συνέπεια, οι ρηχοί επιλογείς μπορούν να κόβουν kilobytes από τα μεγάλα φύλλα στυλ. Πάρτε αυτόν τον επιλογέα:

nav ul li.nav-item

Αυτό θα μπορούσε να εκφραστεί πιο συνοπτικά:

.nav-item

Εκτός από τη βοήθεια του CSS SVELTE, το πρόγραμμα περιήγησης θα καταστήσει τα στοιχεία που απευθύνονται στους ρηχούς επιλογείς ταχύτερα. Τα προγράμματα περιήγησης διαβάζουν τους επιλογείς από δεξιά προς τα αριστερά. Οι βαθύτεροι οι επιλογείς είναι, όσο περισσότερο χρειάζεται για το πρόγραμμα περιήγησης για να καταστήσει και να εκ νέου καθιστούν τα στοιχεία που εφαρμόζονται αυτοί οι επιλογείς. Για πολύπλοους DOM που ανακουφίζουν συχνά, οι σύντομοι επιλογείς μπορούν επίσης να κόβουν το Jank.

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

02. Χρησιμοποιήστε τις ιδιότητες στενογραφίας

Using shorthand CSS will speed up your site — Η χρήση του Shortand CSS θα επιταχύνει τον ιστότοπό σας

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

 Μέγεθος γραμματοσειράς: 1.5Rem;
Ύψος γραμμής: 1.618;
Γραμματοσειρά: "Arial", "Helvetica", Sans-Serif.

Αυτό είναι πολλά CSS! Ας τακτοποιήσουμε αυτό:

 Γραμματοσειρά: 1.5rem / 1.618 "Arial", "Helvetica", Sans-Serif.

ο γραμματοσειρά Το Shortand Property συμπληρώνει αρκετές δηλώσεις σε ένα εύχρηστο μονόγραμμα που καταλαμβάνει πολύ λιγότερο χώρο.

Στο παράδειγμα που παρουσιάζεται παραπάνω, η στενογραφία χρησιμοποιεί περίπου το 40 τοις εκατό λιγότερο χώρο από το ισοδύναμο Longhand. Δεν είναι τόσο ευανάγνωστο με την πρώτη ματιά, αλλά η σύνταξη γίνεται δεύτερη φύση αφού περάσετε λίγο χρόνο χρησιμοποιώντας το.

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

ο υλικό παραγεμίσματος Το ακίνητο λειτουργεί με τον ίδιο τρόπο. Για περισσότερους τρόπους για να καθαρίσετε το CSS σας, το δίκτυο Developer Mozilla προσφέρει μια χρήσιμη λίστα με Συμμορφωμένες αναφορές ακινήτων .

Τι θα συμβεί αν πρέπει να αντικαταστήσετε μια τιμή πιο κάτω στο Cascade; Για παράδειγμα, ας πούμε ότι έχετε ένα στοιχείο τίτλου που πρέπει να αλλάξει το μέγεθος γραμματοσειράς για μεγαλύτερες οθόνες.

Σε αυτή την περίπτωση, θα πρέπει να χρησιμοποιήσετε το πιο συγκεκριμένο μέγεθος γραμματοσειράς Ακίνητα αντί:

 H1 {
    Γραμματοσειρά: 1.5rem / 1.618 "Arial", "Helvetica", Sans-Serif.
}
@Media (MIN-WIDTH: 60Rem) {
    h1 {
        Μέγεθος γραμματοσειράς: 2Rem;
    }
}

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

03. Χρησιμοποιήστε την υπόδειξη του πόρου προφόρτησης

ο προφόρτιση Συμβουλή πόρων μπορεί να δώσει στο πρόγραμμα περιήγησης ένα κεφάλι να αρχίσει να φορτώνει το CSS του ιστότοπού σας. ο προφόρτιση Ο πόρος υπαινιγμός λέει στο πρόγραμμα περιήγησης να ξεκινήσει μια πρώιμη φέτα για ένα περιουσιακό στοιχείο.

Μπορείτε να το ορίσετε ως α & lt; link & gt; Ετικέτα σε HTML:

  & lt; link rel = "preload" href = "/ css / styles.css" as = "στυλ" & gt;

Ή ως κεφαλίδα HTTP στη διαμόρφωση του διακομιστή σας:

  Σύνδεσμος: & lt; /css/styles.css> ;; rel = προφόρτιση; AS = Style

Και στα δύο αυτά σενάρια, προφόρτιση δίνει το πρόγραμμα περιήγησης ένα κεφάλι να ξεκινήσει στη φόρτωση /css/styles.css . Χρησιμοποιώντας προφόρτιση Σε μια κεφαλίδα HTTP είναι προτιμότερη, καθώς αυτό σημαίνει ότι το πρόγραμμα περιήγησης θα ανακαλύψει την υπόδειξη νωρίτερα στις κεφαλίδες απόκρισης, αντί αργότερα στο σώμα απόκρισης.

Ένας άλλος λόγος για χρήση προφόρτιση Σε μια κεφαλίδα HTTP είναι ότι θα ξεκινήσει ένα συμβάν Push Server στις περισσότερες υλοποιήσεις HTTP / 2. Το Push Server είναι ένας μηχανισμός με το οποίο τα περιουσιακά στοιχεία προφητεύονται προληπτικά στον πελάτη όταν γίνονται αιτήσεις περιεχομένου και προσφέρει οφέλη απόδοσης παρόμοιες με την είσοδο CSS.

Το Push Server δεν είναι διαθέσιμο στο http / 1. Ωστόσο, χρησιμοποιώντας προφόρτιση Σε ένα περιβάλλον HTTP / 1 μπορεί ακόμα να βελτιώσει την απόδοση.

04. Εξαπάτηση Cull με CSSCss

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations — Το CSSCSS θα αναλύσει τυχόν αρχεία CSS που το δίνετε και ενημερώστε σας ποιες αναφορές έχουν διπλασιάσει τις δηλώσεις

Μπορεί να πληρώσει για να ελέγξει το CSS σας για διπλούς κανόνες με έναν έλεγχο πλεονασμού. Πάρτε το εργαλείο CSSCS που βασίζεται στο Ruby, για παράδειγμα.

Οι χρήστες Ruby μπορούν να το εγκαταστήσουν με:

  Gem Install CSSCSs

Μόλις εγκατασταθεί, μπορείτε να εξετάσετε το CSS σας για απολύσεις όπως:

 <Κωδικός> CSSCSS -V Styles.css

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

 {H1} και {P} Μοιραστείτε 3 δηλώσεις
  - Χρώμα: # 000
  - Γραμμή-Ύψος: 1.618
  - Περιθώριο: 0 0 1.5Rem

Μπορείτε να μετακινήσετε διπλούς κανόνες κάτω από έναν επιλογέα:

 H1, P {
    Χρώμα: # 000;
    Ύψος γραμμής: 1.618;
    Περιθώριο: 0 0 1.5Rem;
}

Θα εκπλαγείτε από το πόσο χώρο μπορεί να εξοικονομήσει αυτή τη διαδικασία σε μεγάλα έργα. Χρησιμοποιήστε το --βοήθεια Επιλογή για περισσότερες εντολές που μπορείτε να χρησιμοποιήσετε για να τσιμπήσετε τα πράγματα περαιτέρω.

05. Πηγαίνετε το επιπλέον μίλι με το cssnano

cssnano takes your nicely formatted CSS and runs it through many focused optimisations — Το Cssnano παίρνει το όμορφα μορφοποιημένο CSS και το τρέχει μέσα από πολλές εστιασμένες βελτιστοποιήσεις

Για το κεράσι στην κορυφή, μπορείτε να χρησιμοποιήσετε cssnano - ένα εργαλείο εξαρτώμενο από κόμβο και ταχυδρομικώς. Το CSSNANO όχι μόνο καθορίζει το CSS, κάνει πολλές εστιασμένες βελτιστοποιήσεις που μπορούν να μειώσουν ακόμη περισσότερο το CSS σας. Τοποθετήστε το στο σύστημά σας με το NPM όπως:

 NPM I -G CSSNANO-CLI

Στη συνέχεια, χρησιμοποιήστε το για να βελτιστοποιήσετε το CSS σας:

 CSSNANO Styles.css Βελτιστοποιημένο-Styles.css

Εάν η εκτέλεση εντολών ad hoc δεν είναι το στυλ σας, μπορείτε να αυτοματοποιήσετε το Cssnano με ένα σύστημα κατασκευής. Εδώ είναι πώς να χρησιμοποιήσετε το cssnano σε ένα gulpfile:

 const gulp = απαιτούν ("gulp");
const postcss = απαιτούν ("gulp-postcss").
const cssnano = απαιτούν ("cssnano").

const buildcss = () = & gt; {
    Επιστροφή GULP.SRC ("CSS / Styles.css")
        .pipe (postcss ([cssnano ()])
        .pipe (gulp.dest ("css / βελτιστοποιημένο"));
};
const ρολόι = () = & gt; {
    gulp.watch ("CSS / Styles.css", Buildcss).
};
exputss.buildcss = buildcss;
Εξαγωγήs.watch = ρολόι;

ο οικοδόμηση Η εργασία διαβάζει το CSS που γράφετε CSS / Styles.css , στη συνέχεια σβήνει τη βελτιστοποιημένη έξοδο στο CSS / Βελτιστοποιημένη Ευρετήριο. ο ρολόι Το έργο ξεκινάει οικοδόμηση όποτε συμβαίνουν αλλαγές CSS / Styles.css .

ο ρολόι Στη συνέχεια, η εργασία μπορεί να επικαλεστεί στο τερματικό όπως:

 Παρακολουθήστε το Gulp

Με κάποια tweaking, μπορείτε να δημιουργήσετε μια ροή εργασίας που εκτελεί αυτή τη συγκεκριμένη βελτιστοποίηση εκτός από άλλες εργασίες που σχετίζονται με το CSS, όπως κατασκευές sass / λιγότερα αρχεία, autoprefixing και πολλά άλλα.

Θέλετε να αποθηκεύσετε τις σελίδες ιστοτόπων σας; Εξαγωγή ως PDF και εξοικονομήστε αξιόπιστα αποθήκευση σύννεφων .

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

Σχετικά Άρθρα:

Κατανόηση της ιδιοκτησίας οθόνης CSS
Τα νέα σύνορα της CSS Animation
Πώς να οικοδομήσουμε σύνθετες διατάξεις χρησιμοποιώντας το CSS

5 Συμβουλές για Super-Fast CSS

01. Χρησιμοποιήστε ρηχούς επιλογείς

02. Χρησιμοποιήστε τις ιδιότητες στενογραφίας

03. Χρησιμοποιήστε την υπόδειξη του πόρου προφόρτησης

04. Εξαπάτηση Cull με CSSCss

05. Πηγαίνετε το επιπλέον μίλι με το cssnano

πως να - Τα πιο δημοφιλή άρθρα

Pureref: Πώς να χρησιμοποιήσετε το εργαλείο αναφοράς εικόνας

Τρόπος δοκιμής αντιδράσεων ιστότοπων και εφαρμογών

Ο βασικός οδηγός για την καταπολέμηση της τέχνης

Κάντε την εργασία σας εκτός σύνδεσης με τους εργαζόμενους στις υπηρεσίες

Ξεκινήστε με το Express.js

Πώς να σαρώσετε ένα άτομο σε λιγότερο από πέντε λεπτά

5 τρόποι να ενισχύσετε το SEO του ιστότοπού σας

Πώς να δημιουργήσετε μια εφαρμογή ταμπλό με αντιδράσει

Κατηγορίες