কিভাবে ওয়ার্ডপ্রেস অলস লোড জাভাস্ক্রিপ্ট পেজ রেন্ডারিং গতি বাড়াতে?

ওয়ার্ডপ্রেসপৃষ্ঠা রেন্ডারিং পদ্ধতির গতি বাড়ানোর জন্য জাভাস্ক্রিপ্টের অলস লোডিং।

JavaScript এর Defer সম্পত্তি কি?

সবাই সম্ভবত এই পরিস্থিতির সম্মুখীন হয়েছে:

মাথায় এন স্ক্রিপ্ট রয়েছে এবং যখন স্ক্রিপ্টগুলি লোড করা হয়, পৃষ্ঠা রেন্ডারিং ব্লক করা হয়, যা সাধারণত ফাঁকা থাকে।

অবশ্যই, সোর্স কোডে স্ক্রিপ্টটি ফুটারে রেখে আমরা এটির কাছাকাছি পেতে পারি।

যাইহোক, কিছু জটিল উন্নয়ন পরিবেশ এই সহজ কাজটিকে বিশেষভাবে জটিল করে তুলতে পারে।

এই মুহুর্তে আমরা Defer প্রপার্টি ব্যবহার করতে পারি, যা জাভাস্ক্রিপ্টে তুলনামূলকভাবে বিরল প্রপার্টি।

আপনি এটি কখনই ব্যবহার করতে পারবেন না, তবে এই ভূমিকাটি পড়ার পরে, আমি নিশ্চিত যে আপনি এটি ছেড়ে যাবেন না।

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

হ্যাঁ, যদি স্ক্রিপ্ট ট্যাগের একটি ডিফার অ্যাট্রিবিউট থাকে, তাহলে এইচটিএমএল পৃষ্ঠাটি পার্স করার পরে এটি মাথায় রাখা হলেও এটি কার্যকর করা হবে, যা পৃষ্ঠার নীচে স্ক্রিপ্ট রাখার অনুরূপ।

অবশ্যই, বিলম্বের ব্যবহারও সীমিত, সাধারণত 2 পয়েন্টগুলিতে মনোযোগ দিন:

1) একটি বিলম্বিত ডিফার টাইপ স্ক্রিপ্ট ব্লকে document.write কমান্ডকে কল করবেন না;

• কারণ document.write সরাসরি আউটপুট প্রভাব তৈরি করবে।

2) ডিফার স্ক্রিপ্টে গ্লোবাল ভেরিয়েবল বা ফাংশন ব্যবহার করবেন না, যেকোনো তাৎক্ষণিক এক্সিকিউশন স্ক্রিপ্ট সহ।

ওয়ার্ডপ্রেসে ব্যবহৃত স্ক্রিপ্টে Defer বৈশিষ্ট্য যোগ করুন

ওয়ার্ডপ্রেসে, কিভাবে আমরা ওয়ার্ডপ্রেস দ্বারা ব্যবহৃত স্ক্রিপ্টগুলিতে স্বয়ংক্রিয়ভাবে Defer বৈশিষ্ট্য যুক্ত করতে পারি?

আমরা বর্তমান থিমের functions.php ফাইলে নিম্নলিখিত কোড যোগ করতে পারি ▼

add_filter( 'clean_url', 'wpcwl_defer_script',11,1);
function wpcwl_defer_script( $url ){
if(strpos($url, '.js') === false){
return $url;
}

return "$url' defer='defer";
};

• উপরোক্ত কোড শুধুমাত্র কাজ করে, অনুযায়ীওয়ার্ডপ্রেস দ্বারা প্রবর্তিত জাভাস্ক্রিপ্ট কোডকার্যকর হবে।

নিরাপত্তা

লাইভ প্রিভিউ ম্যানেজমেন্ট ফাঁকা প্রদর্শন করতে পারে:

আপনি যদি উপরের কোডটি ব্যবহার করেন, আপনি যখন রিয়েল-টাইম প্রিভিউ ম্যানেজমেন্ট (আদর্শ → কাস্টমাইজ) খুলবেন, তখন এটি খালি প্রদর্শিত হতে পারে, তাই অনুগ্রহ করে এটি যথাযথভাবে ব্যবহার করুন।

যখন রিয়েল-টাইম প্রিভিউ ম্যানেজমেন্টের প্রয়োজন হয়, উপরের কোডটি মন্তব্য করুন এবং কাস্টমাইজেশন সম্পন্ন হওয়ার পরে মন্তব্য করা কোডটি মুছুন।

পিএইচপি মন্তব্য কোড উদাহরণ:

/*

这里是代码 

*/