প্রকাশিত: সেপ্টেম্বর 17, 2024
আগের পোস্টে, আমরা আপনাকে DevTools-এ আপনার পারফরম্যান্স ওয়ার্কফ্লো কাস্টমাইজ করতে সাহায্য করার জন্য তিনটি নতুন বৈশিষ্ট্য দেখেছি। কোর ওয়েব ভাইটাল অপ্টিমাইজ করার জন্য DevToolsকে আরও সহজ এবং আরও সক্ষম করার জন্য আমাদের বহু বছরের প্রচেষ্টার এই ergonomic উন্নতিগুলি ছিল মাত্র। আজ, আমরা বৈশিষ্ট্যগুলির পরবর্তী ব্যাচ চালু করছি: একটি সম্পূর্ণরূপে পুনরায় ডিজাইন করা পারফরম্যান্স প্যানেল ল্যান্ডিং পৃষ্ঠা যা আপনার স্থানীয় কোর ওয়েব ভাইটাল পারফরম্যান্সের একটি লাইভ ভিউ সমন্বিত করে ৷
এই পোস্টে আমরা নতুন বৈশিষ্ট্যগুলির প্রতিটি ঘনিষ্ঠভাবে দেখব:
- রিয়েল-টাইম স্থানীয় কোর ওয়েব ভাইটাল কর্মক্ষমতা
- বাস্তব ব্যবহারকারীর অভিজ্ঞতা ডেটা
- আপনার স্থানীয় পরিবেশ কনফিগার করার জন্য সুপারিশ
- আপনাকে সমস্যাগুলি পুনরুত্পাদন করতে সহায়তা করার জন্য তথ্য
রিয়েল-টাইম স্থানীয় কোর ওয়েব ভাইটাল কর্মক্ষমতা
আপনার স্থানীয় অভিজ্ঞতা কীভাবে কাজ করে তা পরিমাপ করার ক্ষমতা যেকোন কোর ওয়েব ভাইটাল ডিবাগিং ওয়ার্কফ্লো-এর একটি গুরুত্বপূর্ণ অংশ। এটি প্রকৃত ব্যবহারকারীর সমস্যাগুলি পুনরুত্পাদন করা বা না করার মধ্যে পার্থক্য করতে পারে। যাইহোক, আপনার স্থানীয় কর্মক্ষমতা পরিমাপ সবসময় এত সহজ ছিল না.
ঐতিহাসিকভাবে, DevTools-এর পারফরম্যান্স প্যানেল নেটওয়ার্ক অনুরোধ এবং CPU কার্যকলাপের একটি বিশদ টাইমলাইন দেখায় যা পারফরম্যান্স ডিবাগিংয়ের জন্য একটি খুব দরকারী টুল। যাইহোক, পারফরম্যান্সের সমস্যাগুলি পুনরুত্পাদন করা কঠিন হতে পারে কারণ আপনি জানেন না যে রেকর্ডিং শেষ না হওয়া পর্যন্ত কর্মক্ষমতা খারাপ কিনা। আমরা যেমন ওয়েব ভাইটালস এক্সটেনশন থেকে শিখেছি, DevTools-এ আপনার স্থানীয় কোর ওয়েব ভাইটাল পারফরম্যান্সে অ্যাক্সেস থাকা একটি গেম-চেঞ্জার। তাই আমরা এক্সটেনশন থেকে যা কিছু শিখেছি তা নিয়েছি এবং সরাসরি পারফরম্যান্স প্যানেলে এই বৈশিষ্ট্যগুলি তৈরি করার সিদ্ধান্ত নিয়েছি।
প্রথমবারের মতো, আপনার সমস্ত কোর ওয়েব ভাইটাল মেট্রিক্স পারফরম্যান্স প্যানেলে উপলব্ধ। পারফরম্যান্স প্যানেল খুলুন এবং আপনি অবিলম্বে দেখতে পাবেন যে আপনার স্থানীয় অভিজ্ঞতা কীভাবে পারফর্ম করে-কোন রেকর্ডিংয়ের প্রয়োজন নেই। আসলে, আপনার এমনকি DevTools খোলা থাকার দরকার নেই; মেট্রিকগুলি ব্যাকগ্রাউন্ডে সংগ্রহ করা হয় এবং যখনই আপনার প্রয়োজন হয় তখনই পাওয়া যায়। এটি সেই সমস্ত সময়ে কাজে আসে যখন আপনি সক্রিয়ভাবে একটি নির্দিষ্ট সমস্যা ডিবাগ করার চেষ্টা করছেন না, কিন্তু কিছু ধীর মনে হয় এবং আপনি কেন বুঝতে চান।
প্যানেলের স্থানীয় মেট্রিক্স বিভাগে আপনার স্থানীয় কোর ওয়েব ভাইটাল মেট্রিক্সের একটি লাইভ ভিউ রয়েছে: সবচেয়ে বড় বিষয়বস্তুপূর্ণ পেইন্ট, ক্রমবর্ধমান লেআউট শিফট, এবং পরবর্তী পেইন্টের সাথে ইন্টারঅ্যাকশন। আপনি যখন পৃষ্ঠা লোড করবেন এবং ইন্টারঅ্যাক্ট করবেন, এই মেট্রিকগুলি রিয়েল টাইমে আপডেট হবে। ভাল এবং খারাপ পারফরম্যান্সের জন্য তাদের নিজ নিজ থ্রেশহোল্ড অনুসারে রঙ-কোড করা হয়েছে, যা হওয়ার সাথে সাথে পারফরম্যান্স সমস্যাগুলি চিহ্নিত করা সহজ করে তোলে।
বাস্তব ব্যবহারকারীর অভিজ্ঞতা ডেটা
পারফরম্যান্সের সমস্যাগুলি অপ্টিমাইজ করা যা বেশিরভাগ ব্যবহারকারী কখনও অনুভব করেন না আপনার সময়ের সর্বোত্তম ব্যবহার নাও হতে পারে৷ একইভাবে, যদি আপনার স্থানীয় অভিজ্ঞতা অবাস্তবভাবে দ্রুত হয়, আপনি সম্ভবত কিছু বাস্তব-বিশ্বের সমস্যাগুলি উপেক্ষা করছেন। সুতরাং আপনার সময় কীভাবে বিনিয়োগ করবেন সে সম্পর্কে আরও সচেতন সিদ্ধান্ত নেওয়ার জন্য, আপনাকে আপনার স্থানীয় কর্মক্ষমতাকে ক্ষেত্র থেকে বাস্তব-ব্যবহারকারীর অভিজ্ঞতার ডেটার সাথে তুলনা করা উচিত।
পারফরম্যান্স প্যানেল এখন আপনাকে আপনার স্থানীয় অভিজ্ঞতার ঠিক পাশে আপনার বাস্তব-ব্যবহারকারীর ডেটা দেখার একটি উপায় দেয়। ডেটা সর্বজনীন CrUX API দ্বারা চালিত হয়, যা একটি প্রদত্ত ওয়েব পৃষ্ঠা এবং উত্সে বাস্তব-ব্যবহারকারীর অভিজ্ঞতার 28-দিনের সমষ্টি৷ এটি সক্ষম করতে, ফিল্ড ডেটা বিভাগে সেট আপ ক্লিক করুন এবং কনফিগারেশন ডায়ালগে নির্দেশাবলী অনুসরণ করুন।
মনে রাখবেন যে CrUX ডেটাসেটে অন্তর্ভুক্ত করার জন্য পৃথক URL এবং উত্স (সমগ্র ওয়েবসাইট) অবশ্যই নির্দিষ্ট যোগ্যতার মানদণ্ড পূরণ করতে হবে। যখন পর্যাপ্ত ডেটা থাকে তখন ব্যবহারকারীর অভিজ্ঞতাগুলি ডেস্কটপ এবং মোবাইল ডিভাইসের ধরন দ্বারাও একত্রিত হয়। DevTools আপনার স্থানীয় অভিজ্ঞতায় স্বয়ংক্রিয়ভাবে সবচেয়ে প্রাসঙ্গিক ডেটা দেখানোর জন্য যথাসাধ্য চেষ্টা করবে, একই URL এবং ডিভাইসের ধরণ উপলব্ধ হলে ডিফল্ট করে। যদি পর্যাপ্ত ডেস্কটপ বা মোবাইল-স্তরের ডেটা না থাকে তবে এটি সমস্ত ডিভাইসের প্রকারের উপর একত্রিত ডেটা দেখানোর চেষ্টা করবে।
75 তম পার্সেন্টাইল মান ছাড়াও, আপনি প্রতিটি রেটিং এর মধ্যে বাস্তব-ব্যবহারকারীর অভিজ্ঞতার অনুপাত দেখতে যেকোন মেট্রিকের উপর হভার করতে পারেন। এই উদাহরণে, স্থানীয় সবচেয়ে বড় বিষয়বস্তুযুক্ত পেইন্ট অভিজ্ঞতাটি সাধারণত ধীর, বাস্তব ব্যবহারকারীর অভিজ্ঞতার মাত্র 12% এর মতো।
এই ডেটা দিয়ে সজ্জিত, আপনার স্থানীয় অভিজ্ঞতা কতটা প্রতিনিধিত্বশীল তার একটি আরও পরিষ্কার চিত্র পাবেন এবং আপনি একটি সাধারণ ব্যবহারকারীর অভিজ্ঞতাকে আরও ঘনিষ্ঠভাবে অনুকরণ করতে এটিকে সূক্ষ্ম সুর করতে সক্ষম হবেন।
আপনার স্থানীয় পরিবেশ কনফিগার করার জন্য সুপারিশ
ল্যাব এবং ফিল্ড ডেটার মধ্যে অনেক পার্থক্য রয়েছে, যেগুলি একটি পৃষ্ঠা অ্যাক্সেস করতে এবং ইন্টারঅ্যাক্ট করতে পারে এমন সমস্ত উপায় দ্বারা সংমিশ্রিত হয়৷ আপনি এই পার্থক্যগুলির কিছুর জন্য অ্যাকাউন্ট করতে পারেন এবং আপনার পরিবেশ কনফিগার করে আপনার স্থানীয় অভিজ্ঞতাকে আরও প্রতিনিধিত্ব করতে পারেন।
যখন ফিল্ড ডেটা সক্ষম এবং উপলব্ধ থাকে, তখন রেকর্ডিং সেটিংস বিভাগটি প্রকৃত ব্যবহারকারীদের দ্বারা ব্যবহৃত সবচেয়ে সাধারণ ডিভাইসের ধরন অনুকরণ করার পরামর্শ দেবে। ডিভাইস মোড সক্ষম করে আপনি একটি মোবাইল ডিভাইসের ভিউপোর্ট আকার অনুকরণ করতে পারেন। প্রতিক্রিয়াশীল ইন্টারফেসগুলি পরিবর্তন করতে পারে কোন উপাদানটি সবচেয়ে বড় বিষয়বস্তুপূর্ণ পেইন্টের জন্য দায়ী এবং খুব ভিন্ন কর্মক্ষমতা বৈশিষ্ট্য রয়েছে। মোবাইল লেআউট কিছু কিছু উপাদানও প্রকাশ করতে পারে, যেমন একটি নেভিগেশন মেনু যার সাথে শুধুমাত্র মোবাইল ব্যবহারকারীরা ইন্টারঅ্যাক্ট করতে পারে, অথবা বৃহত্তর ভিউপোর্টে অন্যথায় অভিজ্ঞ নয় এমন অনন্য ধরনের লেআউট পরিবর্তন করতে পারে।
এই বিভাগটি একটি নির্দিষ্ট নেটওয়ার্ক থ্রটলিং কনফিগারেশনেরও সুপারিশ করতে পারে, যেমন স্লো 4G । নেটওয়ার্ক সুপারিশগুলি 75 তম পার্সেন্টাইল রাউন্ড ট্রিপ টাইম মেট্রিকের উপর ভিত্তি করে, সেই পৃষ্ঠা বা ওয়েবসাইটে বাস্তব-ব্যবহারকারীর অভিজ্ঞতা থেকে একত্রিত হয়। ধীর নেটওয়ার্ক গতি পৃষ্ঠার লোডিং কার্যকারিতা বৈশিষ্ট্যগুলিকে আরও বাস্তবসম্মত করে তুলতে পারে-বাস্তব-বিশ্বের ডেস্কটপ এবং মোবাইল ব্যবহারকারীদের জন্য একইভাবে-যা উন্নতির সুযোগগুলি চিহ্নিত করা সহজ করে তুলতে পারে৷ এছাড়াও বিবেচনা করুন যে লেআউট স্থানান্তরগুলি শুধুমাত্র ক্রমবর্ধমান লেআউট শিফট মেট্রিকের দিকে গণনা করা হয় যদি সেগুলি কোনও ইন্টারঅ্যাকশনের 500 ms এর মধ্যে না ঘটে৷ যদি ব্যবহারকারীর দ্বারা শুরু করা বিন্যাস স্থানান্তর একটি নেটওয়ার্ক অনুরোধের ফলাফল হয়, তাহলে নেটওয়ার্ককে থ্রোটলিং স্থানীয়ভাবে প্রকাশ করার একমাত্র উপায় হতে পারে।
আপনার সিপিইউকে থ্রোটল করা হল আপনার স্থানীয় ডিভাইসটিকে বাস্তব ব্যবহারকারীদের মতো পারফর্ম করার আরেকটি উপায়। CPU থ্রটলিং তুলনামূলকভাবে ধীর গতিতে অনুকরণ করে যেটি মোবাইল ডিভাইসগুলি সঞ্চালনের প্রবণতা রাখে, দ্রুততর মেশিনগুলির জন্য আরও বেশি থ্রটলিং প্রয়োজন। DevTools সম্প্রতি আপনার CPU-কে 20x দ্বারা থ্রোটল করার ক্ষমতা যুক্ত করেছে, যা ডেভেলপাররা প্রায়শই ব্যবহার করে এমন পারফরম্যান্স ডেস্কটপ মেশিনগুলির জন্য বিশেষভাবে উপযোগী। একটি থ্রটলড সিপিইউ স্ক্রিপ্টগুলিকে আরও ধীর গতিতে চালানোর কারণ করে, সেগুলিকে দীর্ঘ টাস্কে পরিণত করার সম্ভাবনা তৈরি করে যা নেক্সট পেইন্ট সমস্যাগুলির সাথে ইন্টারঅ্যাকশনের দিকে নিয়ে যায়। একই কারণে, অন্যান্য কোর ওয়েব ভাইটাল মেট্রিকগুলিও ধীর স্ক্রিপ্ট এক্সিকিউশন দ্বারা প্রভাবিত হতে পারে, বিশেষ করে যদি এটি লেআউট পরিবর্তনকারী বিষয়বস্তুর বৃহত্তম অংশ বা উপাদানগুলির রেন্ডারিংকে ব্লক করে।
আপনার স্থানীয় পরিবেশকে আরও বাস্তবসম্মত ভিউপোর্ট, নেটওয়ার্ক এবং CPU সেটিংসের সাথে কনফিগার করার ফলে সারফেসে আরও বেশি পারফরম্যান্স সমস্যা আনতে হবে যা আপনি অন্যথায় জানেন না। এবং বাস্তব-ব্যবহারকারীর ডেটা দ্বারা চালিত সুপারিশগুলির সাহায্যে এটি থেকে অনুমান করা যায়, আপনি সেই সমস্যাগুলি খুঁজে বের করতে এবং সমাধান করার উপর আরও ফোকাস করতে পারেন৷
আপনাকে সমস্যাগুলি পুনরুত্পাদন করতে সহায়তা করার জন্য তথ্য
আপনার পরিবেশ কীভাবে কনফিগার করা হয়েছে এবং আপনি কীভাবে পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করেন তার উপর আপনার স্থানীয় কর্মক্ষমতা অনেক বেশি নির্ভর করে। উদাহরণস্বরূপ, একটি সাধারণ ওয়েব পৃষ্ঠায়, মোবাইল ভিউপোর্ট আকারে সবচেয়ে বড় বিষয়বস্তুযুক্ত পেইন্ট উপাদানটির একটি চিত্র হওয়ার সম্ভাবনা কম । একটি টেক্সট ফিল্ডে একটি একক অক্ষর টাইপ করা দ্রুত হতে পারে, কিন্তু দ্রুত ধারাবাহিকভাবে অনেকগুলি টাইপ করলে নেক্সট পেইন্টের সাথে খারাপ ইন্টারঅ্যাকশন হতে পারে। এটি বোঝার জন্য এবং আরও পুনরুত্পাদনযোগ্য অভিজ্ঞতা পেতে সাহায্য করার জন্য, মেট্রিক্স সম্পর্কে অতিরিক্ত তথ্য উপলব্ধ।
সবচেয়ে বড় বিষয়বস্তুর পেইন্ট মেট্রিকের সাথে যুক্ত LCP উপাদানটি নিজেই উপাদানটির একটি লিঙ্ক দেখায়। লিঙ্কের উপর হোভার করা পৃষ্ঠার উপাদানটিকে হাইলাইট করে। লিঙ্কটিতে ক্লিক করলে আপনি এলিমেন্টস প্যানেলে নিয়ে যাবেন, যাতে আপনি নথির সম্পূর্ণ প্রসঙ্গে উপাদানটি দেখতে পারেন।
ইন্টারঅ্যাকশন বিভাগটি DevTools খোলা থাকাকালীন সমস্ত উপযুক্ত ইন্টারঅ্যাকশনের একটি রিয়েল টাইম লগ। আপনি যখন টাইপ করেন, আলতো চাপেন বা ক্লিক করেন, প্রতিটি ইন্টারঅ্যাকশন লগে অতিরিক্ত তথ্যের সাথে যোগ করা হয় যাতে আপনি কী ঘটেছে এবং কীভাবে এটি পুনরুত্পাদন করবেন তা আরও ভালভাবে বুঝতে সহায়তা করে।
ইন্টারঅ্যাকশনের ধরন ছাড়াও, যা হয় একটি পয়েন্টার বা কীবোর্ড ইভেন্ট, আপনি ইন্টারঅ্যাকশন লক্ষ্যের একটি রেফারেন্স দেখতে পাবেন। LCP উপাদানের অনুরূপ, ইন্টারঅ্যাকশন টার্গেট নিজেই ইন্টারেক্টিভ এবং আপনি এটিকে পৃষ্ঠায় হাইলাইট করার জন্য এটির উপর ঘোরাতে পারেন বা উপাদান প্যানেলে এটি দেখতে ক্লিক করতে পারেন। ইন্টারঅ্যাকশন লেটেন্সিও দেখানো হয়, ইন্টারঅ্যাকশন টু নেক্সট পেইন্ট মেট্রিক থ্রেশহোল্ডের জন্য একই রঙ-কোডিং ব্যবহার করে, এটি সবচেয়ে ধীরগতিরগুলিকে চিহ্নিত করা সহজ করে তোলে।
আপনি যখন ডিবাগ করার চেষ্টা করছেন কর্মক্ষমতা সমস্যাটি পুনরুত্পাদন করতে সক্ষম হন, তখন আপনি প্রোফাইলিং শুরু করতে প্রস্তুত৷ পরবর্তী পদক্ষেপ বিভাগের অধীনে, লোডিং কর্মক্ষমতা সমস্যাগুলি ডিবাগ করতে রেকর্ড করুন এবং পুনরায় লোড বোতামটি ব্যবহার করুন, যেমন বৃহত্তর সামগ্রীপূর্ণ পেইন্ট এবং লোড-টাইম ক্রমবর্ধমান লেআউট শিফট৷ ব্যবহারকারীর ইন্টারঅ্যাকশনের ফলে ঘটে যাওয়া সমস্যাগুলি ডিবাগ করতে, ম্যানুয়ালি ধীর মিথস্ক্রিয়া বা পোস্ট-লোড লেআউট শিফটগুলি পুনরুত্পাদন করার সময় পৃষ্ঠাটি প্রোফাইল করতে রেকর্ড বোতামটি ব্যবহার করুন৷
এরপর কি
রিয়েল-টাইম স্থানীয় ডেটা এবং ক্ষেত্র থেকে বাস্তব-ব্যবহারকারী ডেটাতে আপনার কর্মক্ষমতা কর্মপ্রবাহকে গ্রাউন্ড করা আপনাকে একটি মেট্রিক ডিবাগিং এবং অপ্টিমাইজ করার জন্য কম বা কম প্রচেষ্টা বিনিয়োগ করতে হবে কিনা তা সিদ্ধান্ত নিতে সাহায্য করতে পারে। আপনার ব্যবহারকারীদের ডিভাইসের ধরন, CPU গতি, বা নেটওয়ার্ক কনফিগারেশনগুলি তাদের কার্যকারিতা সমস্যাগুলিকে আরও ভালভাবে পুনরুত্পাদন করতে আরও বাস্তবসম্মতভাবে অনুকরণ করতে আপনার স্থানীয় পরিবেশকে সামঞ্জস্য করতে আপনার এই ডেটা ব্যবহার করা উচিত।
ওয়েব ভাইটালস এক্সটেনশনের যেকোনো ব্যবহারকারীর জন্য, আপনি সম্ভবত এই বৈশিষ্ট্যগুলির অনেকগুলিকে চিনতে পারবেন এবং তাই আপনি ভাবছেন যে এক্সটেনশনের জন্য এর অর্থ কী৷ এই পরিবর্তনগুলি কীভাবে এক্সটেনশনকে প্রভাবিত করবে সে সম্পর্কে আমরা আগামী সপ্তাহগুলিতে আরও তথ্য ভাগ করব৷
আমরা এখনও আমাদের পারফরম্যান্স প্যানেলের সমস্ত উন্নতির সাথে শুরু করছি, এবং আরও অনেক কিছু আসতে বাকি আছে৷ আমরা শীঘ্রই আরেকটি আপডেটের সাথে আবার এখানে পোস্ট করব, কিন্তু ততক্ষণ পর্যন্ত আমরা আপনাকে পারফরম্যান্স প্যানেলে এই সমস্ত নতুন বৈশিষ্ট্যগুলি ব্যবহার করে দেখতে উত্সাহিত করব এবং আপনি কী ভাবছেন তা আমাদের জানান৷ যদি আপনার কোন প্রতিক্রিয়া থাকে, আমরা পাবলিক ইস্যুতে আপনার মন্তব্য পড়তে চাই।