Πώς να βελτιστοποιήσετε την παράδοση CSS – 7 απλά βήματα

διανυσματική εικόνα βελτιστοποίησης cssΠέρασαν οι μέρες που οι ειδικοί στο σχεδιασμό και οι κορυφαίοι bloggers συνέστησαν τη δημιουργία ιστοσελίδων όχι περισσότερο από 30 kilobytes…


Τότε, αυτό το “όριο” αναμενόταν να χειρίζεται HTML, JavaScript, εικόνες, CSS και Flash. Ας είμαστε ειλικρινείς, δεν χρειάζεται πολύ να ξεπεράσουμε εντελώς τα 30 kb.

Καθώς το JavaScript και το CSS κέρδισαν δημοτικότητα, έγινε κοινό για το CSS μόνο να ξεπεράσει το ανώτατο όριο των 30KB. Αυτό ισχύει ιδιαίτερα για μεγαλύτερους ιστότοπους.

Ωστόσο, δεν πρέπει να εστιάζετε υπερβολικά στον “αριθμό των kilobyte” κατά τη δημιουργία και το σχεδιασμό σελίδων για τον ιστότοπό σας. Είναι σημαντικό να διατηρείτε τις σελίδες σας βελτιστοποιημένο και σφιχτό όταν γράφετε το CSS σας.

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

Εδώ είναι 5 απλά πράγματα που μπορείτε να κάνετε για να βελτιστοποιήσετε το CSS σας αυτήν τη στιγμή.

Πώς να βελτιστοποιήσετε πλήρως την παράδοση CSS

1. Χρησιμοποιήστε το Shorthand

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

ιδιότητα γραμματοσειράς css

Υπάρχουν πολλά στοιχεία για τα οποία μπορείτε να χρησιμοποιήσετε στενό, αλλά τα πιο συνηθισμένα περιλαμβάνουν:

  • Περιθώριο
  • Υλικό παραγεμίσματος
  • Γραμματοσειρά
  • Περίγραμμα
  • Σύνορο
  • Ιστορικό
  • Στυλ λίστας

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

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

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

2. Απαλλαγείτε από τους Hacks

δηλ. κανόνας cssΓια την εξυπηρέτηση κανόνων CSS ειδικά για IE, η χρήση παραβιάσεων CSS υπό όρους σάς παρέχει το πλεονέκτημα της υπηρεσίας ενός μικρότερου και καθαρότερου προεπιλεγμένου αρχείου CSS.

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

Εάν πρέπει να χρησιμοποιήσετε hack, είναι επιτακτική ανάγκη ο κώδικας που χρησιμοποιείτε να είναι συγκεκριμένος για την έκδοση του Internet Explorer στην οποία εστιάζετε.

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

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

3. Να είστε έξυπνοι σχετικά με τη χρήση του κενού χώρου

Για τον κωδικό CSS, Το κενό είναι επιτακτικό για αναγνωσιμότητα.

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

αφαιρέστε τις κενές γραμμέςΩστόσο, συχνά δεν συνιστάται να περνάτε στο κενό για χάρη ενός μικρότερου αρχείου. Πρέπει ακόμα να διατηρήσετε τη βέλτιστη αναγνωσιμότητα στις ιστοσελίδες σας.

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

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

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

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

4. Ρυθμίσεις κλαδέματος και πλαίσια

Όταν χρησιμοποιείτε ένα πλαίσιο CSS, είναι επιτακτική ανάγκη να ελέγξετε την τεκμηρίωση.

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

καταργήθηκαν αχρησιμοποίητοι κανόνες css

Ίσως διαπιστώσετε ότι μπορείτε να επιτύχετε λεπτομέρειες παρουσίασης με πιο συνοπτικό και κομψό τρόπο…

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

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

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

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

5. Μελλοντική απόδειξη το CSS σας

Σύνταξη Css

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

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

Τελικά, η τοποθέτηση και οι πλωτήρες – που είναι οι τρέχουσες μέθοδοι που χρησιμοποιούν CSS – δεν προορίζονταν να χρησιμεύσουν ως εργαλεία διάταξης.

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

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

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

6. Να διατηρείτε πάντα ενημερωμένη τεκμηρίωση σχετικά με την εργασία σας

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

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

προσθήκη σχολίου cssΟι επικαλύψεις κώδικα είναι ένας τεράστιος τομέας ανησυχίας τόσο για τις ομάδες όσο και για μεμονωμένους σχεδιαστές, ειδικά όταν χρησιμοποιείτε δημοφιλείς κατασκευαστές ιστότοπων. Το Wix, το Squarespace και άλλο λογισμικό δημιουργίας ιστότοπων είναι είναι γνωστό για τον διπλότυπο κώδικα ή τον λείπει εντελώς από τη βάση δεδομένων τους.

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

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

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

7. Συμπίεση των αρχείων σας (Βελτιστοποίηση CSS 101)

css συμπίεση και βελτιστοποίηση gif

Συμπίεση: υπάρχει κάτι περισσότερο από αυτό…

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

Σε σύγκριση με τα αντίγραφα εργασίας, αυτά θα είναι ένα κλάσμα του μεγέθους. Υπάρχουν διαφορετικές εφαρμογές που μπορείτε να εκμεταλλευτείτε για να διευκολύνετε τη διαδικασία συμπίεσης.

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

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

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

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

Σειρά σου

Οι αρχές που συζητούνται εδώ είναι σταθερές εκτιμήσεις για το CSS, αλλά και για JavaScript, HTML και άλλες γλώσσες προγραμματισμού. Σε σύγκριση με την απόδοση του ιστότοπού σας, τα αρχεία CSS δεν είναι τόσο εμφανή στον τελικό χρήστη.

Ωστόσο, οι αρχές που συζητούνται εδώ βοηθούν τόσο στην εμπειρία ανάπτυξης όσο και στην εμπειρία χρήστη.

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

Έχουμε δοκιμάσει κάθε έναν από τους καναδικούς οικοδεσπότες ιστού και προτείνουμε το SiteGround. Όχι μόνο σας βοηθούν να βελτιστοποιήσετε την παράδοση CSS, αλλά και η τεχνική υποστήριξη τους είναι απαράμιλλη.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map