Βελτιστοποίηση της

Εισαγωγές Lean Sass

Όταν χρησιμοποιείτε το Sass στη γραμμή περιουσιακών στοιχείων σας, βεβαιωθείτε ότι βελτιστοποιείτε το Bootstrap λαμβάνοντας μόνο @importτα στοιχεία που χρειάζεστε. Οι μεγαλύτερες βελτιστοποιήσεις σας πιθανότατα θα προέλθουν από την Layout & Componentsενότητα του bootstrap.scss.

// Configuration
@import "functions";
@import "variables";
@import "mixins";
@import "utilities";

// Layout & components
@import "root";
@import "reboot";
@import "type";
@import "images";
@import "containers";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "nav";
@import "navbar";
@import "card";
@import "accordion";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "alert";
@import "progress";
@import "list-group";
@import "close";
@import "toasts";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "spinners";
@import "offcanvas";

// Helpers
@import "helpers";

// Utilities
@import "utilities/api";

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

Lean JavaScript

Η JavaScript του Bootstrap περιλαμβάνει κάθε στοιχείο στα κύρια αρχεία απόστασης ( bootstrap.jsκαι bootstrap.min.js), ακόμα και την κύρια εξάρτησή μας (Popper) με τα αρχεία δέσμης ( bootstrap.bundle.jsκαι bootstrap.bundle.min.js). Ενώ κάνετε προσαρμογή μέσω Sass, φροντίστε να καταργήσετε τη σχετική JavaScript.

Για παράδειγμα, υποθέτοντας ότι χρησιμοποιείτε το δικό σας πακέτο JavaScript, όπως Webpack ή Συνάθροιση, θα εισάγετε μόνο το JavaScript που σκοπεύετε να χρησιμοποιήσετε. Στο παρακάτω παράδειγμα, δείχνουμε πώς να συμπεριλάβουμε απλώς το modal JavaScript:

// Import just what we need

// import 'bootstrap/js/dist/alert';
// import 'bootstrap/js/dist/button';
// import 'bootstrap/js/dist/carousel';
// import 'bootstrap/js/dist/collapse';
// import 'bootstrap/js/dist/dropdown';
import 'bootstrap/js/dist/modal';
// import 'bootstrap/js/dist/popover';
// import 'bootstrap/js/dist/scrollspy';
// import 'bootstrap/js/dist/tab';
// import 'bootstrap/js/dist/toast';
// import 'bootstrap/js/dist/tooltip';

Με αυτόν τον τρόπο, δεν συμπεριλαμβάνετε JavaScript που δεν σκοπεύετε να χρησιμοποιήσετε για στοιχεία όπως κουμπιά, καρουζέλ και συμβουλές εργαλείων. Εάν εισάγετε αναπτυσσόμενα μενού, συμβουλές εργαλείων ή popover, φροντίστε να αναφέρετε την εξάρτηση Popper στο package.jsonαρχείο σας.

import Modal from 'bootstrap/js/dist/modal'

const modal = new Modal(document.getElementById('myModal'))

Autoprefixer .browserslistrc

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

Αχρησιμοποίητο CSS

Ζητείται βοήθεια με αυτήν την ενότητα, εξετάστε το ενδεχόμενο να ανοίξετε ένα PR. Ευχαριστώ!

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

• https://medium.com/dwarves-foundation/remove-unused-css-styles-from-bootstrap-using-purgecss-88395a2c5772
• https://lukelowrey.com/automatically-removeunused-css-from-bootstrap-or-other-frameworks/

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

Minify και gzip

Όποτε είναι δυνατόν, φροντίστε να συμπιέσετε όλο τον κώδικα που παρέχετε στους επισκέπτες σας. Εάν χρησιμοποιείτε αρχεία Dist Bootstrap, προσπαθήστε να τηρήσετε τις ελαχιστοποιημένες εκδόσεις (που υποδεικνύονται από το .min.cssκαι τις .min.jsεπεκτάσεις). Εάν δημιουργείτε το Bootstrap από την πηγή με το δικό σας σύστημα κατασκευής, φροντίστε να εφαρμόσετε τους δικούς σας minifiers για HTML, CSS και JS.

Μη αποκλεισμός αρχείων

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

Εάν χρησιμοποιείτε μια προσθήκη Lighthouse στο Google Chrome, μπορεί να έχετε σκοντάψει πάνω από το FCP. Η μέτρηση First Contentful Paint μετρά το χρόνο από την έναρξη της φόρτωσης της σελίδας έως τη στιγμή που οποιοδήποτε μέρος του περιεχομένου της σελίδας αποδίδεται στην οθόνη.

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

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

Εάν θέλετε να μάθετε περισσότερα σχετικά με αυτό, υπάρχουν ήδη πολλά υπέροχα άρθρα σχετικά με αυτό:

• https://web.dev/render-blocking-resources/
• https://web.dev/defer-non-critical-css/

Να χρησιμοποιείτε πάντα HTTPS

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

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