ઑપ્ટિમાઇઝ કરો

લીન સાસ આયાત કરે છે

તમારી એસેટ પાઇપલાઇનમાં સાસનો ઉપયોગ કરતી વખતે, ખાતરી કરો કે તમે ફક્ત @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માં કેટલીક ફાઇલ કદ સાચવવા માટે તે આયાતને દૂર કરો. ધ્યાનમાં રાખો કે સમગ્ર સાસ આયાતમાં કેટલીક નિર્ભરતાઓ છે જે ફાઇલને છોડી દેવાનું વધુ મુશ્કેલ બનાવી શકે છે.

લીન જાવાસ્ક્રિપ્ટ

બુટસ્ટ્રેપની JavaScript અમારી પ્રાથમિક ડિસ્ટ ફાઇલો ( bootstrap.jsઅને ) માં દરેક ઘટકનો સમાવેશ કરે છે અને અમારી બંડલ ફાઇલો ( અને ) bootstrap.min.jsસાથે અમારી પ્રાથમિક નિર્ભરતા (પોપર) પણ સમાવે છે . જ્યારે તમે Sass દ્વારા કસ્ટમાઇઝ કરી રહ્યાં હોવ, ત્યારે સંબંધિત JavaScript દૂર કરવાની ખાતરી કરો.bootstrap.bundle.jsbootstrap.bundle.min.js

દાખલા તરીકે, ધારી રહ્યા છીએ કે તમે વેબપેક અથવા રોલઅપ જેવા તમારા પોતાના JavaScript બંડલરનો ઉપયોગ કરી રહ્યાં છો, તો તમે ફક્ત તે જ JavaScript આયાત કરશો જે તમે ઉપયોગ કરવાની યોજના ઘડી રહ્યા છો. નીચેના ઉદાહરણમાં, અમે અમારી મોડલ 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 શામેલ કરી રહ્યાં નથી કે જેનો તમે બટનો, કેરોયુસેલ્સ અને ટૂલટિપ્સ જેવા ઘટકો માટે ઉપયોગ કરવાનો ઇરાદો ન ધરાવતા હોવ. package.jsonજો તમે ડ્રોપડાઉન, ટૂલટિપ્સ અથવા પોપોવર્સ આયાત કરી રહ્યાં છો, તો તમારી ફાઇલમાં પોપર નિર્ભરતાને સૂચિબદ્ધ કરવાની ખાતરી કરો .

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

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

ઑટોપ્રીફિક્સર .browserslistrc

બુટસ્ટ્રેપ ચોક્કસ CSS ગુણધર્મોમાં બ્રાઉઝર ઉપસર્ગને આપમેળે ઉમેરવા માટે Autoprefixer પર આધાર રાખે છે. ઉપસર્ગો અમારી .browserslistrcફાઇલ દ્વારા નિર્ધારિત કરવામાં આવે છે, જે બુટસ્ટ્રેપ રેપોના રુટમાં જોવા મળે છે. બ્રાઉઝર્સની આ સૂચિને કસ્ટમાઇઝ કરીને અને Sass ફરીથી કમ્પાઇલ કરવાથી તમારા કમ્પાઇલ કરેલ CSSમાંથી અમુક CSS આપમેળે દૂર થઈ જશે, જો ત્યાં તે બ્રાઉઝર અથવા સંસ્કરણ માટે વિશિષ્ટ વિક્રેતા ઉપસર્ગ હોય.

નહિ વપરાયેલ CSS

આ વિભાગમાં મદદ જોઈએ છે, કૃપા કરીને PR ખોલવાનું વિચારો. આભાર!

જ્યારે અમારી પાસે બુટસ્ટ્રેપ સાથે PurgeCSS નો ઉપયોગ કરવા માટે પૂર્વનિર્મિત ઉદાહરણ નથી , ત્યાં કેટલાક મદદરૂપ લેખો અને વૉકથ્રુસ છે જે સમુદાયે લખ્યા છે. અહીં કેટલાક વિકલ્પો છે:

• 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 પર આ CSS યુક્તિઓ લેખ બતાવે છે કે PurgeCSS અને અન્ય સમાન સાધનોનો ઉપયોગ કેવી રીતે કરવો.

Minify અને gzip

જ્યારે પણ શક્ય હોય, ત્યારે તમે તમારા મુલાકાતીઓને સેવા આપતા તમામ કોડને સંકુચિત કરવાની ખાતરી કરો. જો તમે બુટસ્ટ્રેપ ડિસ્ટ ફાઇલોનો ઉપયોગ કરી રહ્યાં છો, તો લઘુત્તમ સંસ્કરણોને વળગી રહેવાનો પ્રયાસ કરો ( .min.cssઅને .min.jsએક્સ્ટેંશન દ્વારા સૂચવાયેલ). જો તમે તમારી પોતાની બિલ્ડ સિસ્ટમ સાથે સ્ત્રોતમાંથી બુટસ્ટ્રેપ બનાવી રહ્યાં છો, તો HTML, CSS અને JS માટે તમારા પોતાના મિનિફાયરને અમલમાં મૂકવાની ખાતરી કરો.

નોનબ્લોકીંગ ફાઇલો

જ્યારે કમ્પ્રેશનને નાનું કરવું અને તેનો ઉપયોગ કરવો પૂરતો લાગે છે, ત્યારે તમારી ફાઇલોને નોન-બ્લોકીંગ બનાવવી એ પણ તમારી સાઇટને સારી રીતે ઑપ્ટિમાઇઝ કરવામાં અને પૂરતી ઝડપી બનાવવા માટે એક મોટું પગલું છે.

જો તમે Google Chrome માં લાઇટહાઉસ પ્લગઇનનો ઉપયોગ કરી રહ્યાં છો, તો તમે FCP પર ઠોકર મારી હશે. ફર્સ્ટ કન્ટેન્ટફુલ પેઈન્ટ મેટ્રિક એ સમયને માપે છે કે જ્યારે પૃષ્ઠ લોડ થવાનું શરૂ થાય છે ત્યારથી જ્યારે પૃષ્ઠની સામગ્રીનો કોઈપણ ભાગ સ્ક્રીન પર રેન્ડર થાય છે.

તમે બિન-નિર્ણાયક JavaScript અથવા CSS સ્થગિત કરીને FCP સુધારી શકો છો. એનો અર્થ શું થાય? સરળ રીતે, JavaScript અથવા સ્ટાઈલશીટ્સ કે જે તમારા પેજના પ્રથમ પેઈન્ટ પર હાજર હોવા જરૂરી નથી તે વિશેષતાઓ સાથે ચિહ્નિત થવી જોઈએ async.defer

આ સુનિશ્ચિત કરે છે કે ઓછા મહત્વપૂર્ણ સંસાધનો પાછળથી લોડ થાય છે અને પ્રથમ પેઇન્ટને અવરોધિત કરતા નથી. બીજી બાજુ, જટિલ સંસાધનોને ઇનલાઇન સ્ક્રિપ્ટો અથવા શૈલીઓ તરીકે સમાવી શકાય છે.

જો તમે આ વિશે વધુ જાણવા માંગતા હો, તો તેના વિશે પહેલાથી જ ઘણા મહાન લેખો છે:

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

હંમેશા HTTPS નો ઉપયોગ કરો

તમારી વેબસાઇટ પ્રોડક્શનમાં HTTPS કનેક્શન્સ પર જ ઉપલબ્ધ હોવી જોઈએ. HTTPS બધી સાઇટ્સની સુરક્ષા, ગોપનીયતા અને ઉપલબ્ધતાને સુધારે છે, અને બિન-સંવેદનશીલ વેબ ટ્રાફિક જેવી કોઈ વસ્તુ નથી . તમારી વેબસાઇટને ફક્ત HTTPS પર સેવા આપવા માટે ગોઠવવાના પગલાં તમારા આર્કિટેક્ચર અને વેબ હોસ્ટિંગ પ્રદાતાના આધારે વ્યાપકપણે બદલાય છે, અને આ રીતે આ દસ્તાવેજોના અવકાશની બહાર છે.

HTTPS પર સેવા અપાતી સાઇટ્સે HTTPS કનેક્શન્સ પર તમામ સ્ટાઇલશીટ્સ, સ્ક્રિપ્ટ્સ અને અન્ય સંપત્તિઓને પણ ઍક્સેસ કરવી જોઈએ. અન્યથા, તમે વપરાશકર્તાઓને મિશ્રિત સક્રિય સામગ્રી મોકલશો , જે સંભવિત નબળાઈઓ તરફ દોરી જશે જ્યાં નિર્ભરતાને બદલીને સાઇટ સાથે ચેડા થઈ શકે છે. આ સુરક્ષા સમસ્યાઓ તરફ દોરી શકે છે અને વપરાશકર્તાઓને પ્રદર્શિત ઇન-બ્રાઉઝર ચેતવણીઓ. ભલે તમે CDN માંથી બુટસ્ટ્રેપ મેળવતા હોવ અથવા તેને જાતે સેવા આપતા હો, ખાતરી કરો કે તમે તેને ફક્ત HTTPS કનેક્શન્સ પર જ ઍક્સેસ કરો છો.