অপ্টিমাইজ করুন

লীন সাস আমদানি

@importআপনার সম্পদ পাইপলাইনে Sass ব্যবহার করার সময়, আপনার প্রয়োজনীয় উপাদানগুলিকে শুধুমাত্র বুটস্ট্র্যাপ অপ্টিমাইজ করার বিষয়টি নিশ্চিত করুন ৷ 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 আমদানি জুড়ে কিছু নির্ভরতা রয়েছে যা একটি ফাইল বাদ দেওয়া আরও কঠিন করে তুলতে পারে।

লীন জাভাস্ক্রিপ্ট

বুটস্ট্র্যাপের জাভাস্ক্রিপ্ট আমাদের প্রাথমিক ডিস্ট ফাইল ( bootstrap.jsএবং bootstrap.min.js) এর প্রতিটি উপাদান এবং এমনকি আমাদের বান্ডেল ফাইল ( bootstrap.bundle.jsএবং bootstrap.bundle.min.js) সহ আমাদের প্রাথমিক নির্ভরতা (পপার) অন্তর্ভুক্ত করে। আপনি Sass এর মাধ্যমে কাস্টমাইজ করার সময়, সম্পর্কিত জাভাস্ক্রিপ্ট সরাতে ভুলবেন না।

উদাহরণস্বরূপ, ধরে নিচ্ছি যে আপনি ওয়েবপ্যাক বা রোলআপের মতো আপনার নিজস্ব জাভাস্ক্রিপ্ট বান্ডলার ব্যবহার করছেন, আপনি শুধুমাত্র সেই জাভাস্ক্রিপ্টটি আমদানি করবেন যা আপনি ব্যবহার করার পরিকল্পনা করছেন৷ নীচের উদাহরণে, আমরা দেখাই কিভাবে শুধু আমাদের মডেল জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করতে হয়:

// 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';

এইভাবে, আপনি এমন কোনও জাভাস্ক্রিপ্ট অন্তর্ভুক্ত করছেন না যা আপনি বোতাম, ক্যারোসেল এবং টুলটিপের মতো উপাদানগুলির জন্য ব্যবহার করতে চান না৷ আপনি যদি ড্রপডাউন, টুলটিপ বা পপওভার আমদানি করছেন, আপনার 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 ট্রিক্স নিবন্ধটি দেখায় কিভাবে PurgeCSS এবং অন্যান্য অনুরূপ সরঞ্জামগুলি ব্যবহার করতে হয়।

ছোট করুন এবং জিজিপ করুন

যখনই সম্ভব, আপনি আপনার দর্শকদের কাছে পরিবেশন করা সমস্ত কোড সংকুচিত করতে ভুলবেন না। আপনি যদি বুটস্ট্র্যাপ ডিস্ট ফাইলগুলি ব্যবহার করেন তবে ছোট সংস্করণগুলিতে আটকে থাকার চেষ্টা করুন ( .min.cssএবং .min.jsএক্সটেনশন দ্বারা নির্দেশিত)। আপনি যদি আপনার নিজস্ব বিল্ড সিস্টেমের মাধ্যমে উত্স থেকে বুটস্ট্র্যাপ তৈরি করেন, তাহলে HTML, CSS এবং JS-এর জন্য আপনার নিজস্ব মিনিফায়ারগুলি প্রয়োগ করতে ভুলবেন না।

ননব্লকিং ফাইল

যদিও কম্প্রেশন ছোট করা এবং ব্যবহার করা যথেষ্ট বলে মনে হতে পারে, আপনার ফাইলগুলিকে ননব্লকিং করা আপনার সাইটকে ভালভাবে অপ্টিমাইজ করা এবং যথেষ্ট দ্রুত করার জন্য একটি বড় পদক্ষেপ।

আপনি যদি Google Chrome-এ একটি Lighthouse প্লাগইন ব্যবহার করেন, তাহলে আপনি FCP-এ হোঁচট খেয়ে থাকতে পারেন। ফার্স্ট কনটেন্টফুল পেইন্ট মেট্রিক সেই সময় পরিমাপ করে যখন পৃষ্ঠাটি লোড হতে শুরু করে যখন পৃষ্ঠার বিষয়বস্তুর কোনো অংশ স্ক্রিনে রেন্ডার করা হয়।

আপনি অ-সমালোচনামূলক জাভাস্ক্রিপ্ট বা CSS স্থগিত করে FCP উন্নত করতে পারেন। ওটার মানে কি? সহজভাবে, জাভাস্ক্রিপ্ট বা স্টাইলশীট যা আপনার পৃষ্ঠার প্রথম পেইন্টে উপস্থিত থাকার প্রয়োজন নেই সেগুলি asyncবা deferবৈশিষ্ট্যগুলি দিয়ে চিহ্নিত করা উচিত৷

এটি নিশ্চিত করে যে কম গুরুত্বপূর্ণ সংস্থানগুলি পরে লোড করা হয়েছে এবং প্রথম পেইন্টটিকে ব্লক করছে না। অন্যদিকে, সমালোচনামূলক সংস্থানগুলি ইনলাইন স্ক্রিপ্ট বা শৈলী হিসাবে অন্তর্ভুক্ত করা যেতে পারে।

আপনি যদি এই সম্পর্কে আরও জানতে চান তবে ইতিমধ্যেই এটি সম্পর্কে প্রচুর দুর্দান্ত নিবন্ধ রয়েছে:

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

সর্বদা HTTPS ব্যবহার করুন

আপনার ওয়েবসাইট শুধুমাত্র উৎপাদনে HTTPS সংযোগে উপলব্ধ হওয়া উচিত। HTTPS সমস্ত সাইটের নিরাপত্তা, গোপনীয়তা এবং প্রাপ্যতা উন্নত করে এবং অ-সংবেদনশীল ওয়েব ট্রাফিক বলে কিছু নেই । HTTPS-এর মাধ্যমে আপনার ওয়েবসাইটকে কনফিগার করার পদক্ষেপগুলি আপনার আর্কিটেকচার এবং ওয়েব হোস্টিং প্রদানকারীর উপর নির্ভর করে ব্যাপকভাবে পরিবর্তিত হয় এবং এইভাবে এই ডক্সের সুযোগের বাইরে।

HTTPS-এর মাধ্যমে পরিবেশিত সাইটগুলিকে HTTPS সংযোগের মাধ্যমে সমস্ত স্টাইলশীট, স্ক্রিপ্ট এবং অন্যান্য সম্পদ অ্যাক্সেস করা উচিত। অন্যথায়, আপনি ব্যবহারকারীদের মিশ্র সক্রিয় সামগ্রী পাঠাবেন , যা সম্ভাব্য দুর্বলতার দিকে পরিচালিত করবে যেখানে একটি নির্ভরতা পরিবর্তন করে একটি সাইট আপস করা যেতে পারে। এর ফলে নিরাপত্তাজনিত সমস্যা হতে পারে এবং ব্যবহারকারীদের কাছে প্রদর্শিত ইন-ব্রাউজার সতর্কতা দেখা দিতে পারে। আপনি একটি CDN থেকে বুটস্ট্র্যাপ পাচ্ছেন বা নিজে এটি পরিবেশন করছেন কিনা, নিশ্চিত করুন যে আপনি এটি শুধুমাত্র HTTPS সংযোগের মাধ্যমে অ্যাক্সেস করছেন।