স্পিড টুলিং বিবর্তন: Chrome ডেভেলপার সামিট 2019 থেকে হাইলাইট

নতুন পারফরম্যান্স মেট্রিক্স, পেজস্পিড ইনসাইট এবং ক্রোম ইউজার এক্সপেরিয়েন্স রিপোর্ট (CrUX) এর আপডেট এবং আরও অনেক কিছু।

এলিজাবেথ সুইনি
Elizabeth Sweeny

Chrome ডেভেলপার সামিটে, পল আইরিশ এবং আমি Lighthouse— Lighthouse CI, নতুন পারফরম্যান্স স্কোর সূত্র এবং আরও অনেক কিছুর আপডেট ঘোষণা করেছি। বড় লাইটহাউস খবরের পাশাপাশি, আমরা নতুন পারফরম্যান্স মেট্রিক্স, পেজস্পিড ইনসাইটস এবং ক্রোম ইউজার এক্সপেরিয়েন্স রিপোর্ট (CrUX) এর আপডেট এবং ওয়েব ইকোসিস্টেমের ওয়েব অ্যালমানাকের বিশ্লেষণ থেকে অন্তর্দৃষ্টি সহ উত্তেজনাপূর্ণ পারফরম্যান্স টুলিং উন্নয়ন উপস্থাপন করেছি।

নতুন কর্মক্ষমতা মেট্রিক্স

একজন ব্যবহারকারীর অভিজ্ঞতার সূক্ষ্মতা পরিমাপ করা আপনার নীচের লাইনে এটির প্রভাব পরিমাপ করার এবং উন্নতি এবং রিগ্রেশন ট্র্যাক করার মূল চাবিকাঠি। সময়ের সাথে সাথে, নতুন মেট্রিকগুলি সেই সূক্ষ্মতাগুলি ক্যাপচার করতে এবং ব্যবহারকারীর অভিজ্ঞতা পরিমাপের ফাঁক পূরণ করতে বিকশিত হয়েছে। মেট্রিক্স স্টোরিতে নতুন সংযোজন হল দুটি ফিল্ড মেট্রিক্সলার্জেস্ট কনটেন্টফুল পেইন্ট (LCP) এবং কিউমুলেটিভ লেআউট শিফট (CLS) — যেগুলি W3C ওয়েব পারফরম্যান্স ওয়ার্কিং গ্রুপে ইনকিউবেট করা হচ্ছে এবং একটি নতুন ল্যাব মেট্রিকমোট ব্লকিং টাইম (TBT)

সবচেয়ে বড় কন্টেন্টফুল পেইন্ট (LCP)

লার্জেস্ট কন্টেন্টফুল পেইন্ট (LCP) সেই সময় রিপোর্ট করে যখন ভিউপোর্টে সবচেয়ে বড় কন্টেন্ট এলিমেন্ট দৃশ্যমান হয়।

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

নতুন সবচেয়ে বড় কন্টেন্টফুল পেইন্ট মেট্রিক শীঘ্রই লাইটহাউস রিপোর্টে পাওয়া যাবে এবং এর মধ্যে আপনি JavaScript-এ LCP পরিমাপ করতে পারবেন।

মোট ব্লকিং টাইম (TBT)

টোটাল ব্লকিং টাইম (TBT) মেট্রিক ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) এবং টাইম টু ইন্টারঅ্যাকটিভ (TTI) এর মধ্যে মোট সময় পরিমাপ করে যেখানে ইনপুট প্রতিক্রিয়া রোধ করতে প্রধান থ্রেডটি যথেষ্ট দীর্ঘ সময়ের জন্য অবরুদ্ধ ছিল।

একটি টাস্ক যদি 50 মিলিসেকেন্ডেরও বেশি সময় ধরে মূল থ্রেডে চলে তাহলে দীর্ঘ বলে বিবেচিত হয় । যে কোন মিলিসেকেন্ডের বেশি সময়কে সেই টাস্কের ব্লকিং সময়ের জন্য গণনা করা হয়।

একটি 150 মিলিসেকেন্ডের টাস্ক প্রতিনিধিত্বকারী একটি চিত্র যাতে 100 মিলিসেকেন্ড ব্লক করার সময় রয়েছে৷

একটি পৃষ্ঠার জন্য মোট ব্লকিং সময় হল FCP এবং TTI-এর মধ্যে ঘটে যাওয়া সমস্ত দীর্ঘ কাজের ব্লক করার সময়ের সমষ্টি।

প্রধান থ্রেড সময়ের 270 মিলিসেকেন্ডের মধ্যে মোট ব্লকিং সময়ের 60 মিলিসেকেন্ড সহ একটি পাঁচটি কাজের প্রতিনিধিত্বকারী একটি চিত্র৷

টাইম টু ইন্টারঅ্যাকটিভ যখন লোডের পরে প্রধান থ্রেড শান্ত হয় তখন শনাক্ত করার জন্য একটি ভাল কাজ করে, টোটাল ব্লকিং টাইম লোডের সময় মূল থ্রেডটি কতটা স্ট্রেন করা হয়েছে তা পরিমাপ করা। এইভাবে, TTI এবং TBT একে অপরের পরিপূরক এবং ভারসাম্য প্রদান করে।

ক্রমবর্ধমান লেআউট শিফট (CLS)

Cumulative Layout Shift (CLS) একটি পৃষ্ঠার ভিজ্যুয়াল স্থায়িত্ব পরিমাপ করে এবং ব্যবহারকারীরা কত ঘন ঘন অপ্রত্যাশিত লেআউট পরিবর্তনের অভিজ্ঞতা লাভ করে তা পরিমাপ করে। বিষয়বস্তুর অপ্রত্যাশিত গতিবিধি খুব হতাশাজনক হতে পারে এবং এই নতুন মেট্রিকটি আপনার ব্যবহারকারীদের জন্য কত ঘন ঘন ঘটছে তা পরিমাপ করে সেই সমস্যাটি মোকাবেলায় সহায়তা করে৷

লেআউট অস্থিরতা ব্যবহারকারীদের কীভাবে নেতিবাচকভাবে প্রভাবিত করতে পারে তা ব্যাখ্যা করে একটি স্ক্রিনকাস্ট।

এটি কীভাবে গণনা করা হয় এবং কীভাবে এটি পরিমাপ করা যায় তা শিখতে ক্রমবর্ধমান লেআউট শিফটের বিশদ নির্দেশিকাটি দেখুন।

নতুন লাইটহাউস পারফরম্যান্স স্কোর ফর্মুলা শীঘ্রই FMP এবং FCI-এর উপর জোর দেবে এবং তিনটি নতুন মেট্রিক্স-LCP, TBT, এবং CLS-কে অন্তর্ভুক্ত করবে- কারণ একটি পৃষ্ঠা ব্যবহারযোগ্য মনে হলে তারা আরও ভালভাবে ক্যাপচার করবে।

লাইটহাউস v6-এ ফার্স্ট কনটেন্টফুল পেইন্ট, স্পিড ইনডেক্স এবং লার্জেস্ট কনটেন্টফুল পেইন্ট হল প্রধান লোড পারফরম্যান্স মেট্রিক্স; ইন্টারেক্টিভ করার সময়, প্রথম ইনপুট বিলম্ব, সর্বাধিক সম্ভাব্য প্রথম ইনপুট বিলম্ব এবং মোট ব্লকিং সময় হল প্রধান ইন্টারঅ্যাকটিভিটি মেট্রিক্স; এবং Cumulative Layout Shift হল প্রধান অনুমানযোগ্যতা মেট্রিক।

আরও জানতে Lighthouse পারফরম্যান্স স্কোরিং এবং নতুন web.dev মেট্রিক্স সংগ্রহ দেখুন।

PageSpeed ​​Insights-এ ফিল্ড ডেটা (CrUX) থ্রেশহোল্ড সামঞ্জস্য করা হয়েছে

গত এক বছর ধরে আমরা ক্ষেত্র থেকে ক্রোম ইউজার এক্সপেরিয়েন্স (CrUX) ডেটার মাধ্যমে ওয়েব পারফরম্যান্স বিশ্লেষণ করছি। সেই ডেটা থেকে অন্তর্দৃষ্টি দিয়ে আমরা সেই থ্রেশহোল্ডগুলিকে পুনঃমূল্যায়ন করেছি যা আমরা একটি ওয়েবসাইটকে ফিল্ড পারফরম্যান্সে "ধীর", "মধ্যম" বা "দ্রুত" লেবেল করতে ব্যবহার করি।

দুটি বার চার্ট FCP এবং FID-এর জন্য ধীর, দ্রুত এবং মাঝারি গতির বিতরণ দেখায়৷

একটি সাইটের জন্য একটি সামগ্রিক মূল্যায়ন পেতে, PageSpeed ​​Insights (PSI) সেই সাইটের জন্য গোল্ডেন নম্বর হিসাবে ফিল্ড ডেটার মোট বিতরণের একটি নির্দিষ্ট শতাংশ ব্যবহার করে; পূর্ববর্তী থ্রেশহোল্ডগুলি ছিল ফার্স্ট কনটেন্টফুল পেইন্টের জন্য 90 তম পার্সেন্টাইল এবং ফার্স্ট ইনপুট বিলম্বের (এফআইডি) জন্য 95 তম পার্সেন্টাইল।

উদাহরণস্বরূপ, যদি একটি সাইটের একটি FCP বন্টন 50% দ্রুত, 30% মাঝারি, 20% ধীর, 90 তম শতাংশ FCP ধীর বিভাগে থাকে, যা সাইটের সামগ্রিক ফিল্ড স্কোরকে ধীর করে তোলে।

ওয়েবসাইট জুড়ে একটি ভাল সামগ্রিক বিতরণের জন্য এটি সামঞ্জস্য করা হয়েছে এবং নতুন ব্রেকডাউন হল:

মেট্রিক সামগ্রিক শতাংশ দ্রুত (ms) মধ্যপন্থী (ms) ধীর (ms)
FCP 75 তম পার্সেন্টাইল 1000 1000-3000 3000+
এফআইডি 95 তম শতাংশ 100 100-300 300+

উদাহরণ স্বরূপ, এখন যদি কোনো সাইটের FCP ডিস্ট্রিবিউশন 50% দ্রুত, 30% মাঝারি, 20% ধীরগতির হয়, তাহলে 75তম পার্সেন্টাইল FCP মধ্যপন্থী বিভাগে থাকে, যা সাইটের সামগ্রিক ফিল্ড স্কোরকে মাঝারি করে তোলে।

PageSpeed ​​Insights-এ ক্যানোনিকাল URL রিডাইরেক্ট

ব্যবহারকারীর অভিজ্ঞতা যথাসম্ভব নির্ভুলভাবে পরিমাপ করতে আপনাকে সক্ষম করতে, PageSpeed ​​Insights টিম PSI-তে একটি পুনঃবিশ্লেষণ প্রম্পট যোগ করেছে। একটি নতুন URL-এ পুনঃনির্দেশিত সাইটগুলির জন্য, আপনাকে আপনার প্রকৃত কর্মক্ষমতার আরও সম্পূর্ণ চিত্রের জন্য ল্যান্ডিং URL-এ প্রতিবেদনটি পুনরায় চালানোর জন্য অনুরোধ করা হবে৷

PSI ইউজার ইন্টারফেস ইউআরএল রিডাইরেক্ট এবং 'রিএনালাইজ' বোতাম দেখাচ্ছে

নতুন সার্চ কনসোল স্পিড রিপোর্টে CrUX

ক্রোম ডেভ সামিটের এক সপ্তাহ আগে সার্চ কনসোল তাদের নতুন গতির প্রতিবেদন প্রকাশ করেছে। এটি সাইটের মালিকদের সম্ভাব্য ব্যবহারকারীর অভিজ্ঞতার সমস্যাগুলি আবিষ্কার করতে সাহায্য করার জন্য Chrome ব্যবহারকারীর অভিজ্ঞতা প্রতিবেদনের ডেটা ব্যবহার করে৷ স্পিড রিপোর্ট স্বয়ংক্রিয়ভাবে অনুরূপ ইউআরএলগুলির গ্রুপগুলিকে "দ্রুত", "মধ্যম" এবং "ধীর" বালতিতে বরাদ্দ করে এবং নির্দিষ্ট সমস্যার জন্য কর্মক্ষমতা উন্নতিকে অগ্রাধিকার দিতে সাহায্য করে।

অনুসন্ধান কনসোল গতি রিপোর্ট.

ওয়েব আলমানাক

Dion Almaer CDS 2019 এ ওয়েব আলমানাক উপস্থাপন করছে।

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

আরও জানুন

ক্রোম ডেভেলপার সামিট থেকে পারফরম্যান্স টুলিং আপডেট সম্পর্কে আরও বিশদ বিবরণের জন্য, স্পিড টুলিং বিবর্তন আলোচনা দেখুন: