অ্যান্টি-ব্লোট বৈশিষ্ট্য সহ আপনার ডিভি সাইটের গতি বাড়ান

নতুন ডিভি সংস্করণের সাথে, আপনার কাছে একটি শক্তিশালী পৃষ্ঠা নির্মাতার চূড়ান্ত ক্ষমতা রয়েছে। এখন ডিভি আরও হালকা এবং ব্লোট অপসারণের জন্য অন্তর্নির্মিত বৈশিষ্ট্য রয়েছে। আপনি আপনার ওয়েবসাইটের গতি বাড়াতে Divi-এর অ্যান্টি-ব্লোট বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন। এটি ডিভির বিশাল কর্মক্ষমতা অপ্টিমাইজেশন পদ্ধতির একটি ছোট অংশ যার মাধ্যমে আপনি চূড়ান্ত Google পৃষ্ঠার গতি স্কোর অর্জন করতে পারেন।

আজ 4টি অ্যান্টি-ব্লোট বৈশিষ্ট্য নিয়ে আলোচনা করা হবে-

• ডায়নামিক মডিউল ফ্রেমওয়ার্ক
• ডাইনামিক সিএসএস
• ডায়নামিক আইকন
• ডাইনামিক জাভাস্ক্রিপ্ট লাইব্রেরি সহ জাভাস্ক্রিপ্ট অপ্টিমাইজেশান

আসুন আর সময় নষ্ট না করে দেখি ডিভি আমাদের জন্য আরও কতটা আছে।

ব্লোট ইস্যুর জন্য ডিভি সমাধান

ওয়েবসাইট ব্লোটের সংজ্ঞা

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

আশ্চর্যজনক ওয়েবসাইট তৈরি করুন

সেরা বিনামূল্যে পৃষ্ঠা নির্মাতা Elementor সঙ্গে

এখুনি শুরু করুন

Divi এর মত ওয়ার্ডপ্রেস থিমগুলি গতিশীলভাবে এইচটিএমএল পৃষ্ঠাগুলি ব্যবহার করে যা পিএইচপি ফাইলগুলিতে রেন্ডার করে। তাই এখানে আমাদের পিএইচপি ফাইলের আকার এবং দক্ষতাকে ওয়েব ব্লোট হিসাবে বিবেচনা করতে হবে।

সহজভাবে, অকার্যকরভাবে অপ্রয়োজনীয় পৃষ্ঠায় আরও ফাইল লোড করা এবং পৃষ্ঠাটিকে প্রয়োজনের তুলনায় অতিরিক্ত ওজনের করে তোলে - এর অর্থ হল ওয়েবসাইটটি ফুলে গেছে৷

এটি কীভাবে একটি ওয়েবসাইটের গতিকে প্রভাবিত করে

যদি একটি পৃষ্ঠায় পৃষ্ঠায় যা আছে তার চেয়ে বেশি ব্যাকএন্ড অস্বাভাবিক ফাইল লোড করতে হয়, এটি লোড হতে বেশি সময় নেয়। উদাহরণস্বরূপ, এমন একটি পৃষ্ঠা রয়েছে যার শুধুমাত্র 100 লাইনের CSS প্রয়োজন কিন্তু পৃষ্ঠাটিতে 2000 লাইনের বেশি কোড রয়েছে, যার অর্থ 1800 লাইনের লোডিং সময় মোট অপচয়।

আবার ধরুন, আপনি আপনার ওয়েবসাইটের একটি পৃষ্ঠা চালানোর জন্য 5টি জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করছেন যেখানে আপনি 1 দিয়ে সমস্ত কাজ করতে পারবেন। তাই 4টি অকেজো জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করার কোন মানে নেই। মনে রাখবেন যে একটি জাভাস্ক্রিপ্ট লাইব্রেরিতে হাজার হাজার লাইন কোড থাকে।

CSS এবং Js ছাড়াও, আপনার ওয়েবপৃষ্ঠাটি একটি PHP ফাইলে চলছে যা প্রচুর পরিমাণে ফাংশন বহন করে। ধরা যাক, আপনার function.php-এ 20,000 লাইন কোড এবং শত শত ফাংশন আছে। সুতরাং একটি নির্দিষ্ট পৃষ্ঠায় সামগ্রী সরবরাহ করা এই সমস্ত চালায় - এটি সম্পূর্ণ অপ্রয়োজনীয় যেখানে শুধুমাত্র কয়েকটির প্রয়োজন হয়৷

ডিভিতে ব্লোট সমস্যা সমাধান

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

এই অ্যান্টি-ব্লোট বৈশিষ্ট্যটিতে কী রয়েছে

ডিভির "অ্যান্টি-ব্লোট" বৈশিষ্ট্যটি নির্দিষ্ট পৃষ্ঠাগুলির জন্য 4টি প্রধান ভূমিকা পালন করছে -

ডাইনামিক মডিউল ফ্রেমওয়ার্ক: এটি পিএইচপি ফাইলের মাধ্যমে তৈরি সমস্যাগুলিকে অপ্টিমাইজ করে সমাধান করে। সুতরাং, শুধুমাত্র একটি পৃষ্ঠা চালানোর জন্য প্রয়োজনীয় ফাংশন এবং কোডগুলি সেই পৃষ্ঠার জন্য সক্রিয়ভাবে কাজ করে।

ডায়নামিক সিএসএস: এটি একটি কাস্টম স্টাইলশীট তৈরি করবে যেটিতে শুধুমাত্র একটি পৃষ্ঠা লোড করার জন্য CSS কোডের প্রয়োজন হবে। অতিরিক্ত CSS ফাইলের জন্য কোন লোডিং সময় নেই।

ডায়নামিক জাভাস্ক্রিপ্ট লাইব্রেরি: এটি অপ্টিমাইজ করবে এবং গতিশীলভাবে একটি script.js ফাইল তৈরি করবে যা পৃষ্ঠার জন্য প্রয়োজনীয় বহিরাগত JS লাইব্রেরি লোড করবে।

ডায়নামিক আইকন: এটি পৃষ্ঠায় ব্যবহৃত আইকনগুলির একটি উপসেট লোড করবে, ওয়েবসাইটের জন্য ব্যবহৃত সমস্ত আইকন নয়৷

Divi > থিম বিকল্পগুলি নেভিগেট করে এই বৈশিষ্ট্যটি সক্ষম করুন৷ সেগুলি সাধারণ ট্যাব থেকে, "পারফরম্যান্স" নির্বাচন করুন এবং বিকল্পগুলি সক্ষম করুন।

অ্যান্টি ব্লোট বৈশিষ্ট্যগুলি কীভাবে কাজ করবে

আমরা ইতিমধ্যে জানি যে Divi "অ্যান্টি-ব্লোট" নামে একটি নতুন বৈশিষ্ট্য চালু করেছে যাতে পৃষ্ঠা লোড হওয়ার সময় কম হয় যা কোডের অপ্রাসঙ্গিক লাইনের মাধ্যমে ঘটে। চলুন দেখে নেই এই ফিচারটি কিভাবে কাজ করে।

ডাইনামিক পিএইচপি ফ্রেমওয়ার্ক: ফাংশন

Divi এখানে একটি সাধারণ নিয়ম অনুসরণ করে যা শুধুমাত্র সেই ফাংশনগুলি সম্পাদন করে যা প্রয়োজন। এটি একটি পূর্ণ-প্রমাণ যুক্তি যা এই ক্রিয়াটি সম্পাদন করে।

প্রাক - প্রক্রিয়াকরণ চেক

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

চাহিদা অনুযায়ী মডিউল

এই নতুন বৈশিষ্ট্যের সাথে, পৃষ্ঠাগুলি নমনীয়ভাবে মডিউল লোড করতে পারে। PHP-এর অ্যান্টি-ব্লোটিং লজিকের কারণে, Divi শুধুমাত্র সেই শর্টকোডগুলিকে প্রক্রিয়া করে যা পৃষ্ঠাটির প্রয়োজন। উদাহরণস্বরূপ, যদি আপনার একটি পৃষ্ঠায় 5টি মডিউল থাকে, তবে Divi শুধুমাত্র সেই পাঁচটি প্রক্রিয়া করবে, তাদের সবকটি নয়, এবং সেই পাঁচটি মডিউলের প্রদর্শন এবং আউটপুট।

চাহিদা অনুযায়ী বৈশিষ্ট্য

একটি পৃষ্ঠার প্রতিটি বৈশিষ্ট্যের জন্য, Divi স্বয়ংক্রিয়ভাবে মডিউল প্রক্রিয়া এবং লোড করে। আরও সঠিকভাবে, এই সিস্টেমটি শুধুমাত্র স্ক্রোল প্রভাব, অ্যানিমেশন, সীমানা এবং স্টিকি বিকল্পগুলির মতো মডিউলগুলি প্রক্রিয়া করে যা অন-পৃষ্ঠায় ব্যবহৃত হয়। এটি বিভাগ, সারি এবং কলামের ক্ষেত্রেও প্রযোজ্য।

ডায়নামিক সিএসএস

ডিভি স্টাইলশীট পিএইচপি ফ্রেমওয়ার্কে ব্যবহৃত অ্যান্টি-ব্লোট লজিকও বজায় রাখে। Divi CSS কার্যকারিতা বেশ বড় এবং এটি প্রায়ই পৃষ্ঠাগুলিতে অপ্রয়োজনীয় ব্লোট তৈরি করে।

পৃষ্ঠার উপর ভিত্তি করে CSS লোড হচ্ছে

যখন একটি পৃষ্ঠা গতিশীলভাবে CSS লোড করে তখন এটি ঘটে,

• এটি শুধুমাত্র CSS ফাইলগুলিকে লোড করে যেগুলিকে Divi থিমের স্টাইল করতে হবে। ফাইলের আকার 50kb এর বেশি নয়।
• তারপর এটি পৃষ্ঠার জন্য ডিজাইন ডায়াগ্রাম ধারণকারী CSS ফাইল লোড করে। এটি কেবলমাত্র সেই ফাইলগুলিকে গতিশীলভাবে খুলবে যেগুলি পৃষ্ঠার বিভিন্ন বিভাগে ব্যবহৃত হচ্ছে। উদাহরণস্বরূপ, একটি সাধারণ হোমপেজের জন্য, শুধুমাত্র 30kb ফাইল থাকবে।

এখানে, এটি এখন 80kb CSS ফাইল কোন ব্লোট ছাড়াই। আগে, আকার ছিল 900kb এবং প্রায় ফুলে পূর্ণ।

এখানে, এই হোমপেজটি Divi বিল্ডার ব্যবহার করে তৈরি করা হয়েছে এবং আপনি দেখতে পাচ্ছেন কিভাবে এই পৃষ্ঠার জন্য নেটিভ CSS ফাইলগুলি পৃষ্ঠার উপাদানগুলি প্রদর্শনের জন্য কাজ করছে।

ডাইনামিক জাভাস্ক্রিপ্ট

আমরা সাধারণত জাভাস্ক্রিপ্ট ব্যবহার করি ওয়েবসাইটের পারফরম্যান্স উন্নত করতে, আমাদের ডিজাইনকে সরলীকৃত এবং আধুনিকীকরণ করতে। গতিশীল জাভাস্ক্রিপ্ট ব্যবহার করে, Divi একটি বহিরাগত লাইব্রেরি থেকে Js ফাংশন আমদানি করতে পারে। সুতরাং, পৃষ্ঠাটিতে কম জটিল কোডিং থাকবে এবং নিশ্চিতভাবে পৃষ্ঠাটি আগের চেয়ে & দ্রুত হালকা হবে। অ্যান্টি ব্লোট বৈশিষ্ট্যগুলি প্রতি পৃষ্ঠায় কাজ করে, তাই আপনাকে কার্যকারিতা ক্ষতি সম্পর্কে চিন্তা করতে হবে না, ডিভি এটির যত্ন নেবে।

ডিভি অ্যান্টি-ব্লোট বৈশিষ্ট্য দ্বারা লাইটবক্স এবং স্টিকি কার্যকারিতাগুলি কীভাবে যত্ন নেওয়া হচ্ছে তার একটি ছোট উদাহরণ এখানে রয়েছে।

ডায়নামিক আইকন

আইকন একটি ওয়েবপেজ একটি খুব গুরুত্বপূর্ণ অংশ. Divi সমস্ত আইকন লোড করার পরিবর্তে সেই পৃষ্ঠার জন্য প্রয়োজনীয় সাবসেট ফন্টগুলি লোড করার একটি স্মার্ট উপায়ের অনুমতি দিচ্ছে৷ মূলত, প্রতিটি ওয়েবপেজে আইকনের তিনটি উপসেট থাকে,

• বেস - মডিউল থেকে ডিভি থিম ডিফল্ট আইকন।
• সামাজিক - সামাজিক মিডিয়া বেস আইকন সেট থেকে আইকন অনুসরণ করে।
• সমস্ত - আইকনগুলির সম্পূর্ণ প্যাকেজ যেখানে আইকন বাছাইকারী পছন্দসই একটি নির্বাচন এবং ব্যবহার করতে পারে।

যদি কোনো পৃষ্ঠা সোশ্যাল মিডিয়া মডিউল বা আইকন পিকার দ্বারা বাছাই করা কোনো আইকন ব্যবহার না করে, তাহলে পৃষ্ঠাটি একটি বেস আইকন সেট ব্যবহার করবে যা 6kb স্থান নেয়। আমরা সোশ্যাল মিডিয়া আইকনগুলি অন্তর্ভুক্ত করলে আকারটি কিছুটা বেশি হবে।

যদি আমরা একটি আইকন পিক/ব্লার্ব মডিউল ব্যবহার করি তাহলে পুরো আইকন সেটের আকার 90kb পর্যন্ত যেতে পারে।

মোড়ক উম্মচন

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