Lighthouse এবং Chrome DevTools-এর মাধ্যমে আপনার পারফরম্যান্স ডিটেকটিভ দক্ষতাকে সুপারচার্জ করুন।
একজন ডেভেলপার হিসেবে, আপনার সাইট কোন থার্ড-পার্টি স্ক্রিপ্ট লোড হবে তার উপর আপনার প্রায়ই নিয়ন্ত্রণ থাকে না। আপনি তৃতীয় পক্ষের বিষয়বস্তু অপ্টিমাইজ করার আগে আপনার সাইটকে কী ধীর করে দিচ্ছে তা খুঁজে বের করার জন্য আপনাকে কিছু গোয়েন্দা কাজ করতে হবে। 🕵️
এই পোস্টে, আপনি শিখবেন কীভাবে লাইটহাউস এবং Chrome DevTools ব্যবহার করতে হয় ধীরগতির তৃতীয়-পক্ষের সংস্থানগুলি সনাক্ত করতে৷ পোস্টটি ক্রমবর্ধমান শক্তিশালী কৌশলগুলির মধ্য দিয়ে চলে যা সংমিশ্রণে সবচেয়ে ভাল ব্যবহার করা হয়।
যদি আপনার হাতে থাকে মাত্র 5 মিনিট
লাইটহাউস পারফরম্যান্স অডিট আপনাকে পৃষ্ঠা লোডের গতি বাড়ানোর সুযোগ খুঁজে পেতে সহায়তা করে। জাভাস্ক্রিপ্ট এক্সিকিউশন টাইম হ্রাস করুন এবং বিশাল নেটওয়ার্ক পেলোড অডিট এড়িয়ে চলুন এর অধীনে ডায়াগনস্টিক বিভাগে ধীরগতির তৃতীয় পক্ষের স্ক্রিপ্টগুলি উপস্থিত হওয়ার সম্ভাবনা রয়েছে।
একটি অডিট চালানোর জন্য:
- DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
- লাইটহাউস ট্যাবে ক্লিক করুন।
- মোবাইলে ক্লিক করুন।
- পারফরম্যান্স চেকবক্স নির্বাচন করুন। (আপনি অডিট বিভাগে বাকি চেকবক্সগুলি সাফ করতে পারেন৷)
- সিমুলেটেড ফাস্ট 3G, 4x CPU স্লোডাউন ক্লিক করুন।
- ক্লিয়ার স্টোরেজ চেকবক্স নির্বাচন করুন।
- অডিট চালান ক্লিক করুন।
তৃতীয় পক্ষের ব্যবহার
লাইটহাউস তৃতীয় পক্ষের ব্যবহার নিরীক্ষা একটি পৃষ্ঠা ব্যবহার করে তৃতীয় পক্ষের প্রদানকারীদের একটি তালিকা দেখায়। এই সংক্ষিপ্ত বিবরণটি আপনাকে বড় চিত্রটি আরও ভালভাবে বুঝতে এবং অপ্রয়োজনীয় তৃতীয় পক্ষের কোড সনাক্ত করতে সহায়তা করতে পারে। অডিটটি Lighthouse এক্সটেনশনে উপলব্ধ এবং শীঘ্রই Chrome 77-এর DevTools-এ যোগ করা হবে।
জাভাস্ক্রিপ্ট এক্সিকিউশন সময় কমিয়ে দিন
লাইটহাউস রিডিউস জাভাস্ক্রিপ্ট এক্সিকিউশন টাইম অডিট স্ক্রিপ্টগুলিকে হাইলাইট করে যা পার্স, কম্পাইল বা মূল্যায়ন করতে অনেক সময় নেয়। CPU-নিবিড় তৃতীয়-পক্ষের স্ক্রিপ্টগুলি আবিষ্কার করতে 3য়-পক্ষের সংস্থানগুলি দেখান চেকবক্সটি নির্বাচন করুন।
বিশাল নেটওয়ার্ক পেলোড এড়িয়ে চলুন
দ্য লাইটহাউস এড়িয়ে চলুন বিশাল নেটওয়ার্ক পেলোড অডিট নেটওয়ার্ক অনুরোধগুলিকে সনাক্ত করে — তৃতীয় পক্ষের অনুরোধগুলি সহ — যা পৃষ্ঠা লোডের সময়কে কমিয়ে দিতে পারে৷ আপনার নেটওয়ার্ক পেলোড 4,000 KB ছাড়িয়ে গেলে অডিট ব্যর্থ হয়৷
Chrome DevTools-এ নেটওয়ার্ক অনুরোধ ব্লক করুন
Chrome DevTools নেটওয়ার্ক রিকোয়েস্ট ব্লকিং আপনাকে দেখতে দেয় যে আপনার পৃষ্ঠাটি কীভাবে আচরণ করে যখন একটি নির্দিষ্ট স্ক্রিপ্ট, স্টাইলশীট বা অন্যান্য সংস্থান উপলব্ধ না থাকে৷ আপনি তৃতীয় পক্ষের স্ক্রিপ্টগুলি সনাক্ত করার পরে যেগুলি কর্মক্ষমতাকে প্রভাবিত করে বলে সন্দেহ করেন, সেই স্ক্রিপ্টগুলির অনুরোধগুলিকে ব্লক করে আপনার লোডের সময় কীভাবে পরিবর্তিত হয় তা পরিমাপ করুন৷
অনুরোধ ব্লকিং সক্ষম করতে: 1. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন। 1. নেটওয়ার্ক ট্যাবে ক্লিক করুন। 1. নেটওয়ার্ক প্যানেলে যেকোনো অনুরোধে ডান-ক্লিক করুন। 1. ব্লক অনুরোধ URL নির্বাচন করুন।
DevTools ড্রয়ারে একটি অনুরোধ ব্লকিং ট্যাব প্রদর্শিত হবে৷ আপনি সেখানে কোন অনুরোধগুলি ব্লক করা হয়েছে তা পরিচালনা করতে পারেন।
তৃতীয় পক্ষের স্ক্রিপ্টগুলির প্রভাব পরিমাপ করতে:
- নেটওয়ার্ক প্যানেল ব্যবহার করে আপনার পৃষ্ঠাটি লোড হতে কতক্ষণ সময় নেয় তা পরিমাপ করুন। বাস্তব-বিশ্বের অবস্থা অনুকরণ করতে, নেটওয়ার্ক থ্রটলিং এবং CPU থ্রটলিং চালু করুন। (দ্রুত সংযোগ এবং ডেস্কটপ হার্ডওয়্যারের ক্ষেত্রে, ব্যয়বহুল স্ক্রিপ্টের প্রভাব মোবাইল ফোনের মতো প্রতিনিধিত্বমূলক নাও হতে পারে।)
- তৃতীয় পক্ষের স্ক্রিপ্টগুলির জন্য দায়ী URL বা ডোমেনগুলিকে ব্লক করুন যা আপনি একটি সমস্যা বলে মনে করেন৷
- পৃষ্ঠাটি পুনরায় লোড করুন এবং ব্লক করা তৃতীয় পক্ষের স্ক্রিপ্টগুলি ছাড়া লোড হতে কতক্ষণ লাগবে তা পুনরায় পরিমাপ করুন৷
আপনি আশা করি একটি গতি উন্নতি দেখতে হবে, কিন্তু মাঝে মাঝে তৃতীয় পক্ষের স্ক্রিপ্ট ব্লক করা আপনার প্রত্যাশার প্রভাব নাও হতে পারে। যদি তাই হয়, তাহলে অবরুদ্ধ URL-এর তালিকা কমিয়ে দিন যতক্ষণ না আপনি একটিকে বিচ্ছিন্ন না করেন যেটি ধীরগতির কারণ।
মনে রাখবেন যে পরিমাপের তিন বা ততোধিক রান করা এবং মধ্যম মানের দিকে তাকানো সম্ভবত আরও স্থিতিশীল ফলাফল দেবে। যেহেতু থার্ড-পার্টি কন্টেন্ট মাঝে মাঝে প্রতি পৃষ্ঠা লোডের জন্য বিভিন্ন সংস্থান সংগ্রহ করতে পারে, এই পদ্ধতিটি আপনাকে আরও বাস্তবসম্মত অনুমান দিতে পারে। DevTools এখন পারফরম্যান্স প্যানেলে একাধিক রেকর্ডিং সমর্থন করে, এটিকে একটু সহজ করে।