Αυτό το άρθρο θα σας παρουσιάσει ένα θέμα γνωστό ως Minify In και στη διαδικασία σας δίνουν επίσης μια λεπτομερή πρακτική επίδειξη. Οι ακόλουθοι δείκτες θα καλυφθούν σε αυτό το άρθρο,
- Τι είναι η ελαχιστοποίηση;
- Γιατί απαιτείται ελαχιστοποίηση;
- Πώς ελαχιστοποιείτε τον κώδικα CSS, JS, HTML;
- Πότε πρέπει να το κάνετε αυτό;
- Οφέλη από την ελαχιστοποίηση;
Καθώς το όνομα μας προτείνει αρκετά καλά, η ελαχιστοποίηση αφορά την ελαχιστοποίηση του μεγέθους ενός αρχείου. Σε μια βάση κώδικα, έχουμε την ελευθερία να ελαχιστοποιούμε αρχεία HTML, CSS ή Javascript. Εδώ, θα συζητήσουμε για την ελαχιστοποίηση ενός αρχείου CSS.
Όταν ένας προγραμματιστής κωδικοποιεί, διασφαλίζει ότι ο κώδικας είναι στην καλύτερη μορφή αναγνώσιμη για να απλοποιήσει οποιαδήποτε διαδικασία περαιτέρω αλλαγών. Έτσι, τα ονόματα των μεταβλητών είναι σε μορφή που είναι εύκολα κατανοητή και καταλαμβάνουν πολλούς χαρακτήρες. Στη συνέχεια, προσθέτουν επίσης αρκετή κενή απόσταση ώστε να είναι αρκετά ευανάγνωστη.
Αλλά σε όλη τη διαδικασία, τείνουμε να χαλαρώνουμε τις χορδές που αυξάνεται το μέγεθος του αρχείου μας, γεγονός που με τη σειρά του αυξάνει τον χρόνο φόρτωσης του ιστότοπου. Ειδικά με ιστότοπους που έχουν ένα μεγάλο κομμάτι λειτουργικότητας και πρόσθετων, μια μεγαλύτερη βάση κώδικα απλώς κάνει τον ιστότοπο χειρότερο.
Πίνακας Πώς να συνδυάσετε δεδομένα
Η Google έχει ούτως ή άλλως περιορισμένη μορφή για την κατάταξη των ιστότοπων στη σελίδα αναζήτησης βάσει της βέλτιστης εμπειρίας χρήστη που παρέχουν οι ιστότοποι. Όσο καλύτερα φορτώνεται ο ιστότοπός σας, τόσο καλύτερα κατατάσσεται ο ιστότοπός σας στη σελίδα αναζήτησης.
Διακυβεύοντας τόσα πολλά, δεν θέλετε οι χρήστες σας να υποφέρουν λόγω του κακού χρόνου φόρτωσης του ιστότοπου και να προχωρήσουν στον επόμενο. Επομένως, η ελαχιστοποίηση του κώδικα είναι εξαιρετικά σημαντική.
Όντως, κατά τη δημιουργία ενός ιστότοπου, γνωρίζουμε τι αποτελείται από τη μέγιστη βάση κώδικα;
Είναι όλα σχετικά με CSS, HTML και Javascript. Ο διαγωνισμός για να κάνει τον ιστότοπό σας να φαίνεται οπτικά ελκυστικός τονίζει το αρχείο CSS πολύ και χωρίς να συνειδητοποιήσουμε ότι αξιοποιούμε τον ιστότοπό μας με βαρύ κώδικα.
Είσοδοι, ελαχιστοποίηση ..
Προχωρώντας με αυτό το άρθρο σχετικά με το Minify CSS
Τι είναι ελαχιστοποίηση ;
Η ελαχιστοποίηση σάς επιτρέπει να αφαιρέσετε τον κωδικό σας σε ένα ελάχιστο μέγεθος αρχείου που δεν επηρεάζει τον κώδικα και μειώνει το μέγεθος του αρχείου. Στη διαδικασία, μπορείτε να καταργήσετε τα περιττά κενά και τους χαρακτήρες που δεν επηρεάζουν πουθενά την πρωτοτυπία του ιστότοπού σας. Μερικά πράγματα που πρέπει να αποφεύγονται από τον κώδικα είναι:
- Χαρακτήρες κενού διαστήματος
- Νέοι χαρακτήρες γραμμής
- Οριοθέτες αποκλεισμού
- Σχόλια
- Συντομεύοντας ονόματα μεταβλητών
Αυτοί οι παράγοντες δεν εμπλέκονται για να κάνουν τον ιστότοπό σας να τρέχει, αλλά απλώς να κάνει το αρχείο βαρύτερο και να αυξήσει το χρόνο φόρτωσης του ιστότοπου.
Η αναγνωσιμότητα του κώδικα αποκλείει εντελώς αυτό που κατανοεί το μηχάνημα. Το πρόγραμμα περιήγησης ιστού δεν χρειάζεται επιπλέον απόσταση μεταξύ των χαρακτήρων για κατανόηση και εκτέλεση. Επομένως, δοκιμάστε να τα μειώσετε και να ελαχιστοποιήσετε τον κώδικα CSS και HTML.
Ας πάρουμε ένα παράδειγμα:
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Ελαχιστοποιήστε το CSS μου
Σχεδόν μια διαφορά 48% στο αρχικό και το ελαχιστοποιημένο αρχείο. Μειώθηκε κατά 178 byte. Μετά την Ελαχιστοποίηση
#myContent {font-family: Arialfont-size: 90%}Γειά σου Κόσμε!
Προχωρώντας με αυτό το άρθρο σχετικά με το Minify CSS
Γιατί είναι ελαχιστοποίηση απαιτείται?
Για να βελτιώσετε τον χρόνο φόρτωσης του ιστότοπου. Σε κανέναν δεν αρέσει να περιμένει έναν ιστότοπο για φόρτωση ανάλογα με την ευκολία. Με τόσες πολλές διαθέσιμες επιλογές, οι άνθρωποι τείνουν να στραφούν σε άλλη. Έτσι, είναι καλύτερο να μειώσετε το μέγεθος του αρχείου.
Προχωρώντας με αυτό το άρθρο σχετικά με το Minify CSS
Πως εσύ ελαχιστοποιώ CSS, JS, HTML code;
Για να το ελαχιστοποιήσετε, υπάρχουν πολλά διαθέσιμα εργαλεία στο διαδίκτυο που μπορεί να σας βοηθήσουν να μειώσετε τη βάση κώδικα. Μπορείτε επίσης να επιλέξετε να το κάνετε χειροκίνητα, αλλά για μια μεγαλύτερη βάση κώδικα, συνιστάται να χρησιμοποιήσετε οποιοδήποτε από τα παρακάτω εργαλεία για να ελαχιστοποιήσετε το αρχείο CSS:
CSSminifier.com: Ένα εξαιρετικά απλό εργαλείο στη χρήση. Απλώς αντιγράψτε τον κωδικό στην αριστερή πλευρά, δημιουργήστε το ελαχιστοποιημένο αρχείο και κατεβάστε το. Το ελαχιστοποιημένο αρχείο θα έχει επέκταση .min.
Το ελαχιστοποιημένο αρχείο CSS θα έχει την επέκταση demo.min.css.
Smallseotools.com: Αντιγράψτε τον κωδικό σας ή ανεβάστε το αρχείο κώδικα. Θα ελαχιστοποιήσει τον κωδικό σας και θα σας επιτρέψει να τον αντιγράψετε ή να τον κατεβάσετε.
Αυτόματη βελτιστοποίηση: Πρόκειται για ένα πρόσθετο που μπορείτε να προσθέσετε στα εργαλεία του WordPress. Ως πρόσθετο, μπορείτε να επιλέξετε να ελαχιστοποιήσετε τον κώδικα CSS σας εκεί και πέρα.
Είναι πιο εύκολο για έναν προγραμματιστή να καταλάβει πότε το αρχείο ελαχιστοποιείται και πότε όχι. Ένα ελαχιστοποιημένο αρχείο θα έχει επέκταση .min.
Προχωρώντας με αυτό το άρθρο σχετικά με το Minify CSS
Πότε πρέπει να το κάνετε αυτό;
Η ελαχιστοποίηση πρέπει να γίνεται πρωτίστως, όταν έχετε γράψει τον κωδικό και πρέπει να τον στείλετε στον διακομιστή για απάντηση. Μόλις τα αρχεία ελαχιστοποιηθούν, οι ελαχιστοποιημένες εκδόσεις χρησιμοποιούνται για τη διανομή στους χρήστες.
Οφέλη του ελαχιστοποίηση ;
Μείωση μεγέθους αρχείου: Καταργώντας το επιπλέον διάστημα, μειώνοντας τα ονόματα των μεταβλητών και αφαιρώντας τα σχόλια, το μέγεθος του αρχείου μειώνεται σχεδόν κατά 30-60%. Ταχύτερη φόρτωση: Με λιγότερα δεδομένα για αποστολή μέσω του δικτύου, ο ιστότοπος φορτώνει ταχύτερα από πριν. Χαμηλότερο κόστος εύρους ζώνης: Όταν αφαιρούνται περιττά δεδομένα, το απαιτούμενο εύρος ζώνης είναι πολύ μικρότερο και το ίδιο ισχύει και για το κόστος.
Πράγματα που πρέπει να θυμάστε:
Ακόμη και πριν επιχειρήσετε την ελαχιστοποίηση, βεβαιωθείτε ότι ο κώδικάς σας δεν ξεσπά τα όρια. Η ροή δεν πρέπει να διακοπεί και η λειτουργικότητα πρέπει να παραμείνει απρόσωπη. Πρέπει να ελέγξετε ότι ακόμα και μετά την ελαχιστοποίηση, ο κώδικάς σας εκτελείται με τον ίδιο τρόπο.
Όντως, ως βέλτιστη πρακτική μπορείτε πάντα να διατηρείτε ένα πρότυπο έτοιμο. Κάντε τις αλλαγές σας στο ενσωματωμένο πρότυπο που θα σας εξοικονομήσει μεγάλο χρόνο.
Είναι παρόμοιο με τη συμπίεση;
Λοιπόν, έντονα ΟΧΙ. η ελαχιστοποίηση είναι διαφορετική από τη συμπίεση. Η συμπίεση κάνει ένα ελαχιστοποιημένο αρχείο να μειώνει περισσότερο αλλά δεν επηρεάζει το στυλ και τη δομή του κώδικα.
Το αρχείο ελαχιστοποιείται και μετά συμπιέζεται ως zip και αποστέλλεται μέσω του δικτύου όταν ένας πελάτης ζητά πρόσβαση στον ιστότοπο. Στη συνέχεια, το αρχείο είναι ασυμπίεστο και χρησιμοποιείται.
Παραδείγματα:
Πριν από την ελαχιστοποίηση:
Χαρτοφυλάκιο
- Σπίτι
Μετά την Ελαχιστοποίηση:
Χαρτοφυλάκιο
- Σπίτι
Ο κώδικας είναι σίγουρα πιο δύσκολο να διαβαστεί και να κατανοηθεί για έναν άνθρωπο, αλλά είναι εξίσου εύλογος για την απόδοση μιας μηχανής. Ένα μηχάνημα δεν ενδιαφέρεται πραγματικά για την ομορφιά του κώδικα και το διάστημα, κατανοεί την ουσία και λειτουργεί ανάλογα.
Εντυπωσιάστηκε αρκετά με την τεχνική ελαχιστοποίησης;
Στη συνέχεια, δοκιμάστε τον εαυτό σας. Μειώστε το βάρος του αρχείου σας και αφήστε τον ιστότοπό σας να κυκλοφορεί ελεύθερα για όλους τους χρήστες!
Αυτό μας φέρνει στο τέλος αυτού του άρθρου σχετικά με το Minify In CSS.
Εάν σας ενδιαφέρει να μάθετε περισσότερα σχετικά με την ανάπτυξη ιστού, ρίξτε μια ματιά στο από την Edureka. Η Εκπαίδευση Πιστοποίησης Ανάπτυξης Ιστού θα σας βοηθήσει να μάθετε πώς να δημιουργείτε εντυπωσιακούς ιστότοπους χρησιμοποιώντας HTML5, CSS3, Twitter Bootstrap 3, jQuery και Google API και να το αναπτύξετε στην υπηρεσία απλής αποθήκευσης Amazon (S3)
Εάν εξακολουθείτε να σας ενδιαφέρει Εάν έχετε οποιαδήποτε ερώτηση, μπορείτε να το δημοσιεύσετε στην ενότητα σχολίων αυτού του ιστολογίου 'Minify In CSS' και θα επικοινωνήσουμε μαζί σας το συντομότερο δυνατό.