Chrome-এর ওয়েব টুলিংয়ের মাধ্যমে ব্যবহারকারীর অভিজ্ঞতা উন্নত করার সুযোগ খোঁজা।
প্রকাশিত: ১১ মে, ২০২১
আজ, আমরা Lighthouse, PageSpeed এবং DevTools-এ নতুন টুলিং ফিচার কভার করব যাতে আপনার সাইট কীভাবে Web Vitals-এ উন্নতি করতে পারে তা শনাক্ত করতে সাহায্য করা যায়।
টুলগুলি সম্পর্কে আরও একবার জেনে নিতে, Lighthouse হল একটি ওপেন-সোর্স, অটোমেটেড টুল যা ওয়েব পেজের কোয়ালিটি উন্নত করার জন্য ব্যবহার করা হয়। আপনি এটি Chrome DevTools ডিবাগিং টুলের স্যুটে খুঁজে পেতে পারেন এবং যেকোনও ওয়েব পেজ, সর্বজনীন বা যাচাইকরণ প্রয়োজন এমন পেজের ক্ষেত্রে এটি রান করতে পারেন। এছাড়াও, আপনি Lighthouse-কে PageSpeed Insights, CI এবং WebPageTest-এ খুঁজে পাবেন।
Lighthouse 7.x-এ এলিমেন্ট স্ক্রিনশটের মতো নতুন ফিচার অন্তর্ভুক্ত আছে, যা আপনার UI-এর সেইসব অংশের ভিজ্যুয়াল ইন্সপেকশন আরও সহজ করে দেয়, যেগুলি ব্যবহারকারীর অভিজ্ঞতা সংক্রান্ত মেট্রিককে প্রভাবিত করে (যেমন, কোন নোড লেআউট শিফ্টে অবদান রাখছে)।
এছাড়াও, আমরা PageSpeed Insights-এ এলিমেন্ট স্ক্রিনশটের জন্য সহায়তা প্রদান করেছি, যার ফলে পৃষ্ঠার ওয়ান-অফ পারফর্ম্যান্স রানের জন্য আরও সহজে সমস্যা চিহ্নিত করার উপায় চালু করা হয়েছে।
Core Web Vitals পরিমাপ করা
Lighthouse Largest Contentful Paint, Cumulative Layout Shift এবং Total Blocking Time (First Input Delay-এর জন্য ল্যাব প্রক্সি) সহ Core Web Vitals মেট্রিক সিন্থেটিক্যালি পরিমাপ করতে পারে। এইসব মেট্রিক লোডিং, লেআউট স্টেবিলিটি ও ইন্টার্যাকশন রেডিনেস দেখায়। এছাড়াও, Core Web Vitals-এর ভবিষ্যৎ-এ হাইলাইট করা First Contentful Paint-এর মতো অন্যান্য মেট্রিকও আছে।
Lighthouse রিপোর্টের "মেট্রিক্স" বিভাগে এইসব মেট্রিক্সের ল্যাব ভার্সন অন্তর্ভুক্ত থাকে। ব্যবহারকারীর অভিজ্ঞতার কোন কোন দিকগুলিতে আপনার মনোযোগ প্রয়োজন তার একটি সারসংক্ষেপ ভিউ হিসাবে আপনি এটি ব্যবহার করতে পারেন।
ফিল্ড মেট্রিক, যেমন Chrome UX Report বা RUM-এ পাওয়া মেট্রিকের ক্ষেত্রে এই সীমাবদ্ধতা নেই এবং ল্যাব ডেটার ক্ষেত্রে এটি একটি মূল্যবান পরিপূরক কারণ এটি প্রকৃত ব্যবহারকারীদের অভিজ্ঞতা প্রতিফলিত করে। ল্যাবে আপনি যে ধরনের ডায়াগনস্টিক তথ্য পান, ফিল্ড ডেটা সেই ধরনের তথ্য দিতে পারে না, তাই দুটিই একসাথে ব্যবহার করা হয়।
Web Vitals-এর কোন কোন জায়গায় আপনি উন্নতি করতে পারবেন তা শনাক্ত করুন
Largest Contentful Paint এলিমেন্ট শনাক্ত করুন
LCP হল লোড হওয়ার অভিজ্ঞতার পরিমাপ। পৃষ্ঠা লোড হওয়ার সময় এটি সেই পয়েন্টকে চিহ্নিত করে যখন প্রাথমিক–বা "সবচেয়ে বড়"–কন্টেন্ট লোড হয়ে যায় এবং ব্যবহারকারী তা দেখতে পান।
Lighthouse-এ "Largest Contentful Paint এলিমেন্ট" অডিট আছে যা কোন এলিমেন্টটি Largest Contentful Paint ছিল তা শনাক্ত করে। এলিমেন্টের উপর মাউস নিয়ে গেলে, মূল ব্রাউজার উইন্ডোতে সেটি হাইলাইট করা হবে।
এই এলিমেন্টটি কোনও ছবি হলে, এই তথ্যটি একটি উপযোগী ইঙ্গিত যে আপনি এই ছবিটি লোড করার প্রসেস অপ্টিমাইজ করতে চাইতে পারেন। Lighthouse-এ বেশ কিছু ইমেজ অপ্টিমাইজেশন অডিট অন্তর্ভুক্ত থাকে যা আপনাকে বুঝতে সাহায্য করে যে আপনার ছবিগুলি আরও ভালভাবে কম্প্রেস করা, রিসাইজ করা বা আরও অপ্টিমাল আধুনিক ইমেজ ফর্ম্যাটে ডেলিভার করা যেতে পারে কিনা।
এছাড়াও, আপনি অ্যানি সুলিভানের LCP বুকমার্কলেট ব্যবহার করে দেখতে পারেন। এটি মাত্র এক ক্লিকে লাল রঙের আয়তক্ষেত্র দিয়ে LCP এলিমেন্ট দ্রুত শনাক্ত করতে সাহায্য করে।
LCP উন্নত করতে দেরিতে খুঁজে পাওয়া ছবি প্রিলোড করুন
লার্জেস্ট কন্টেন্টফুল পেইন্ট উন্নত করতে, আপনার গুরুত্বপূর্ণ হিরো ইমেজ ব্রাউজার দেরিতে খুঁজে পেলে, সেগুলি প্রিলোড করুন। ছবি খুঁজে পাওয়ার আগে JavaScript বান্ডেল লোড করতে হলে, দেরিতে খুঁজে পাওয়ার ঘটনা ঘটতে পারে।
LCP ছবি প্রিলোড করার বিষয়ে আমাদের কিছু সাধারণ প্রশ্ন জিজ্ঞাসা করা হয়, যেগুলি সম্পর্কেও সংক্ষেপে আলোচনা করা যেতে পারে।
আপনি কি রেসপন্সিভ ছবি প্রিলোড করতে পারবেন? হ্যাঁ।
ধরা যাক, নিচে srcset এবং sizes ব্যবহার করে উল্লেখ করা রেসপন্সিভ অনেক বড় ছবি আমাদের কাছে আছে:
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
link অ্যাট্রিবিউটে যোগ করা imagesrcset এবং imagesizes অ্যাট্রিবিউটের জন্য, আমরা srcset এবং sizes-এর ব্যবহার করা একই ছবি বেছে নেওয়ার লজিক ব্যবহার করে রেসপন্সিভ ছবি প্রিলোড করতে পারি:
<link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
LCP ছবি CSS ব্যাকগ্রাউন্ডের মাধ্যমে সংজ্ঞায়িত করা হলে, অডিট কি প্রিলোড করার সুযোগও হাইলাইট করবে? হ্যাঁ।
CSS ব্যাকগ্রাউন্ড বা <img>-এর মাধ্যমে LCP ছবি হিসেবে ফ্ল্যাগ করা যেকোনও ছবিকে ক্যান্ডিডেট হিসেবে বিবেচনা করা হয়, যদি সেটি
তিন বা তার বেশি ওয়াটারফল ডেপথে খুঁজে পাওয়া যায়।
অফস্ক্রিন ছবি ধীরে ধীরে লোড করা এবং LCP-এর জন্য এটি এড়িয়ে যাওয়া
অফস্ক্রিন ছবি যা ব্যবহারকারীর প্রাথমিক অভিজ্ঞতার জন্য গুরুত্বপূর্ণ নয়, সেগুলি ধীরে ধীরে লোড করা যেতে পারে। এটি এমন একটি টেকনিক যা ব্যবহারকারী স্ক্রল করে ছবির কাছাকাছি না আসা পর্যন্ত ছবি ডাউনলোড করা স্থগিত রাখে, যা গুরুত্বপূর্ণ অ্যাসেটের জন্য নেটওয়ার্কের সমস্যা কমাতে পারে এবং কিছু ক্ষেত্রে LCP উন্নত করতে পারে। "অফস্ক্রিন ছবি ডিফার করা" অডিট এক্ষেত্রে সাহায্য করতে পারে:
গুরুত্বপূর্ণ অ্যাবাভ-দ্য-ফোল্ড ছবি, যেমন Largest Contentful Paint ছবি, ধীরে ধীরে লোড করা উচিত নয়। এটি করলে LCP ইমেজ লোড হতে দেরি হতে পারে। Lighthouse হাইলাইট করবে যদি কোনও LCP ছবি "Largest Contentful Paint ছবি ধীরে ধীরে লোড করা হয়েছে" অডিটের মাধ্যমে ভুলভাবে ধীরে ধীরে লোড করা হয়:
CLS কন্ট্রিবিউশন শনাক্ত করা
Cumulative Layout Shift হল ভিজ্যুয়াল স্থিতিশীলতার পরিমাপ। এটি পরিমাপ করে যে কোনও পৃষ্ঠার কন্টেন্ট কতটা ভিজ্যুয়ালি শিফ্ট করে। Lighthouse-এ CLS ডিবাগ করার জন্য একটি অডিট আছে, যার নাম "বড় লেআউট শিফ্ট এড়িয়ে চলুন"।
এই অডিট সেইসব DOM এলিমেন্ট হাইলাইট করে যেগুলি পৃষ্ঠার শিফটে সবচেয়ে বেশি অবদান রাখে। বাঁদিকে এলিমেন্ট কলামে আপনি এইসব DOM এলিমেন্টের তালিকা দেখতে পাবেন এবং ডানদিকে, তাদের সামগ্রিক CLS কন্ট্রিবিউশন দেখতে পাবেন।
নতুন Lighthouse এলিমেন্ট স্ক্রিনশট ফিচারের জন্য ধন্যবাদ, আমরা অডিটে উল্লেখ করা মূল এলিমেন্টের ভিজ্যুয়াল প্রিভিউ দেখতে পারি এবং আরও স্পষ্ট ভিউয়ের জন্য ক্লিক-টু-জুম করতে পারি:
পোস্ট-লোড CLS-এর জন্য, কোন এলিমেন্ট CLS-এ সবচেয়ে বেশি অবদান রেখেছে তা আয়তক্ষেত্র দিয়ে ক্রমাগত ভিজ্যুয়ালাইজ করার ক্ষেত্রে মূল্য থাকতে পারে। এটি এমন একটি ফিচার যা আপনি SpeedCurve-এর Core Web Vitals ড্যাশবোর্ড-এর মতো থার্ড-পার্টি টুলে পাবেন এবং আমি Defaced-এর লেআউট শিফ্ট GIF জেনারেটর ব্যবহার করতে পছন্দ করি:
সাইট-জুড়ে লেআউট শিফ্ট সংক্রান্ত সমস্যা দেখার জন্য, আমি Search Console-এর Core Web Vitals রিপোর্ট থেকে অনেক সুবিধা পাই। এটি আমাকে আমার সাইটে উচ্চ CLS সহ পৃষ্ঠার ধরন দেখতে দেয় (এই ক্ষেত্রে, আমাকে নিজের থেকে শনাক্ত করতে সাহায্য করে যে কোন টেমপ্লেট আংশিকগুলিতে আমাকে সময় ব্যয় করতে হবে):
ডাইমেনশন ছাড়া ছবি থেকে CLS শনাক্ত করা
ডাইমেনশন ছাড়া ছবির কারণে হওয়া Cumulative Layout Shift সীমিত করতে, আপনার ছবি ও ভিডিও এলিমেন্টে প্রস্থ ও উচ্চতার সাইজ অ্যাট্রিবিউট যোগ করুন। এই পদ্ধতিটি নিশ্চিত করে যে ছবি লোড হওয়ার সময় ব্রাউজার ডকুমেন্টে সঠিক পরিমাণ জায়গা বরাদ্দ করতে পারে।
ছবির ডাইমেনশন ও অ্যাস্পেক্ট রেশিও সম্পর্কে চিন্তা করার গুরুত্বের উপর একটি ভাল লেখার জন্য ছবিতে উচ্চতা এবং প্রস্থ সেট করা আবার গুরুত্বপূর্ণ দেখুন।
বিজ্ঞাপন থেকে CLS শনাক্ত করা
Lighthouse-এর জন্য প্রকাশক বিজ্ঞাপন আপনাকে আপনার পৃষ্ঠায় বিজ্ঞাপন লোড হওয়ার অভিজ্ঞতা উন্নত করার সুযোগ খুঁজে পেতে সাহায্য করে, যার মধ্যে লেআউট শিফ্ট ও বড় টাস্কে অবদানও অন্তর্ভুক্ত, যা আপনার পৃষ্ঠা ব্যবহারকারীদের জন্য কত তাড়াতাড়ি ব্যবহারযোগ্য হবে তা নির্ধারণ করতে পারে। Lighthouse-এ, আপনি কমিউনিটি প্লাগ-ইনের মাধ্যমে এটি চালু করতে পারবেন।
মনে রাখবেন যে ওয়েবে লেআউট শিফ্টের ক্ষেত্রে বিজ্ঞাপন হল সবচেয়ে বড় কন্ট্রিবিউটরদের মধ্যে একটি। এটি করা গুরুত্বপূর্ণ:
- ভিউ-পোর্টের উপরের দিকে নন-স্টিকি বিজ্ঞাপন প্লেস করার সময় সতর্ক থাকুন
- বিজ্ঞাপন স্লটের জন্য সবচেয়ে বড় সাইজ রিজার্ভ করে শিফ্ট হওয়া এড়ান
কম্পোজিট করা নয় এমন অ্যানিমেশন এড়িয়ে চলুন
কম্পোজিট করা হয়নি এমন অ্যানিমেশন কম-এন্ড ডিভাইসে জ্যাঙ্কি হিসেবে নিজেকে উপস্থাপন করতে পারে যদি ভারী জাভাস্ক্রিপ্ট টাস্ক মূল থ্রেডকে ব্যস্ত রাখে। এই ধরনের অ্যানিমেশন লেআউট শিফ্ট করতে পারে।
Chrome যদি দেখে যে কোনও অ্যানিমেশন কম্পোজিট করা যায়নি, তাহলে এটি DevTools ট্রেস Lighthouse রিডে রিপোর্ট করে, যার ফলে এটি অ্যানিমেশন সহ কোন এলিমেন্ট কম্পোজিট করা যায়নি এবং কী কারণে তা তালিকাভুক্ত করতে পারে। আপনি এগুলি কম্পোজিট করা হয়নি এমন অ্যানিমেশন এড়িয়ে চলুন অডিটে দেখতে পাবেন।
ডিবাগ ফার্স্ট ইনপুট ডিলে / টোটাল ব্লকিং টাইম / লং টাস্ক
ব্যবহারকারী কোনও পৃষ্ঠার সাথে প্রথমবার ইন্টার্যাক্ট করার সময় থেকে (যেমন, কোনও লিঙ্কে ক্লিক করা, বোতামে ট্যাপ করা বা কাস্টম, জাভাস্ক্রিপ্ট-চালিত কন্ট্রোল ব্যবহার করা) ব্রাউজার সেই ইন্টার্যাকশনের উত্তরে ইভেন্ট হ্যান্ডলার প্রসেস করা শুরু করার সময় পর্যন্ত সময়কে ফার্স্ট ইনপুট পরিমাপ করে। দীর্ঘ জাভাস্ক্রিপ্ট টাস্ক এই মেট্রিক এবং এই মেট্রিকের প্রক্সি, Total Blocking Time-কে প্রভাবিত করতে পারে।
Lighthouse-এ দীর্ঘ মেইন-থ্রেড টাস্ক এড়িয়ে চলুন অডিট অন্তর্ভুক্ত থাকে যা মেইন থ্রেডে সবচেয়ে দীর্ঘ টাস্কের তালিকা তৈরি করে। ইনপুট বিলম্বের জন্য সবচেয়ে খারাপ কন্ট্রিবিউটরদের শনাক্ত করার ক্ষেত্রে এটি সহায়ক হতে পারে। বাঁদিকের কলামে আমরা দীর্ঘ প্রধান-থ্রেড টাস্কের জন্য দায়ী স্ক্রিপ্টের URL দেখতে পারি।
ডানদিকে আমরা এইসব টাস্কের সময়সীমা দেখতে পাচ্ছি। মনে করিয়ে দেওয়া হচ্ছে যে, বড় টাস্ক হল এমন টাস্ক যা সম্পূর্ণ হতে ৫০ মিলিসেকেন্ডের বেশি সময় লাগে। ফ্রেম রেট বা ইনপুট লেটেন্সিকে প্রভাবিত করার জন্য এটি প্রধান থ্রেডকে যথেষ্ট দীর্ঘ সময়ের জন্য ব্লক করে বলে মনে করা হয়।
মনিটর করার জন্য থার্ড-পার্টি পরিষেবা বিবেচনা করলে, Calibre-এর মেন-থ্রেড এক্সিকিউশন টাইমলাইন ভিজ্যুয়ালও আমার বেশ পছন্দ যা এই খরচগুলি ভিজ্যুয়ালাইজ করার জন্য, যা ইন্টারঅ্যাক্টিভিটিকে প্রভাবিত করে এমন বড় টাস্কে অবদান রাখে এমন পেরেন্ট ও চাইল্ড টাস্ক উভয়কেই হাইলাইট করে।
Lighthouse-এ আগে/পরে প্রভাব দেখতে নেটওয়ার্ক রিকোয়েস্ট ব্লক করুন
Chrome DevTools নেটওয়ার্ক রিকোয়েস্ট ব্লক করা সাপোর্ট করে যাতে কোনও রিসোর্স সরিয়ে দেওয়া বা উপলভ্য না থাকার প্রভাব দেখা যায়। এটি প্রতিটি স্ক্রিপ্টের (যেমন, থার্ড-পার্টি এম্বেড বা ট্র্যাকার) খরচ বুঝতে সাহায্য করতে পারে, যা Total Blocking Time (TBT) এবং Time to Interactive-এর মতো মেট্রিক্সে প্রভাব ফেলে।
নেটওয়ার্ক অনুরোধ ব্লকিং Lighthouse-এর সাথেও কাজ করে! আসুন, কোনও সাইটের জন্য Lighthouse রিপোর্ট ঝটপট দেখে নেওয়া যাক। পারফর্ম্যান্স স্কোর হল ৬৩/১০০ এবং TBT হল ৪০০ মিলি সেকেন্ড। কোডটি খুঁটিয়ে দেখে, আমরা দেখতে পেয়েছি যে এই সাইটটি Chrome-এ একটি ইন্টারসেকশন অবজারভার পলিফিল লোড করে যা অপ্রয়োজনীয়। আসুন, এটি ব্লক করি!
আমরা DevTools নেটওয়ার্ক প্যানেলে কোনও স্ক্রিপ্টের উপর মাউস রেখে ডানদিকের বোতামে ক্লিক করে এবং Block Request URL-এ ক্লিক করে এটি ব্লক করতে
পারি। এখানে আমরা Intersection Observer পলিফিলের জন্য এটি করব।
এরপর আমরা লাইটহাউস আবার রান করতে পারি। এবার আমরা দেখতে পাচ্ছি যে আমাদের পারফর্ম্যান্স স্কোর উন্নত হয়েছে (৭০/১০০) এবং টোটাল ব্লকিং টাইমও (৪০০ms => ৩০০ms) উন্নত হয়েছে।
ব্যয়বহুল থার্ড-পার্টি এম্বেডকে একটি ফাসাদ দিয়ে প্রতিস্থাপন করুন
পৃষ্ঠায় ভিডিও, সোশ্যাল মিডিয়া পোস্ট বা উইজেট এম্বেড করার জন্য থার্ড-পার্টি রিসোর্স ব্যবহার করা সাধারণ ব্যাপার। ডিফল্ট হিসেবে, বেশিরভাগ এম্বেড করা কন্টেন্ট অবিলম্বে লোড হয় এবং এর সাথে ভারী পেলোড থাকতে পারে যা ব্যবহারকারীর অভিজ্ঞতার উপর নেতিবাচক প্রভাব ফেলে। থার্ড-পার্টি গুরুত্বপূর্ণ না হলে এটি অপ্রয়োজনীয় (যেমন, ব্যবহারকারীকে এটি দেখার আগে স্ক্রল করতে হলে)।
এই ধরনের উইজেটের পারফর্ম্যান্স উন্নত করার একটি উপায় হল ব্যবহারকারীর ইন্টার্যাকশনের ভিত্তিতে সেগুলি ধীরে ধীরে লোড করা। এটি করার জন্য উইজেটের একটি লাইটওয়েট প্রিভিউ (একটি ফ্যাকাড) রেন্ডার করতে হবে এবং ব্যবহারকারী এটির সাথে ইন্টার্যাক্ট করলে তবেই সম্পূর্ণ ভার্সন লোড করতে হবে। Lighthouse-এ একটি অডিট আছে যা থার্ড-পার্টি রিসোর্স সাজেস্ট করবে যা ফেসাডের সাথে ধীরে ধীরে লোড করা যেতে পারে, যেমন YouTube ভিডিও এম্বেড।
রিমাইন্ডার হিসেবে, Lighthouse থার্ড-পার্টি কোড হাইলাইট করবে যা ২৫০ মিলিসেকেন্ডের বেশি সময় ধরে মূল থ্রেড ব্লক করে। এটি সব ধরনের থার্ড-পার্টি স্ক্রিপ্ট (Google-এর তৈরি করা স্ক্রিপ্ট সহ) প্রকাশ করতে পারে যা আরও ভালভাবে ডিফার করা বা ধীরে ধীরে লোড করা যেতে পারে, যদি সেগুলি রেন্ডার করার জন্য স্ক্রল করার প্রয়োজন হয়।
Core Web Vitals-এর বাইরে
Core Web Vitals হাইলাইট করার পাশাপাশি, Lighthouse এবং PageSpeed Insights-এর সাম্প্রতিক ভার্সনগুলিও নির্দিষ্ট নির্দেশিকা প্রদান করার চেষ্টা করে যা আপনি অনুসরণ করতে পারেন যাতে জাভাস্ক্রিপ্ট-ভারী ওয়েব অ্যাপ্লিকেশনগুলি কত দ্রুত লোড হতে পারে তা উন্নত করতে পারেন, যদি আপনার সোর্স ম্যাপ চালু থাকে।
এর মধ্যে আপনার পৃষ্ঠায় জাভাস্ক্রিপ্টের খরচ কমানোর জন্য অডিটের ক্রমবর্ধমান সংগ্রহ অন্তর্ভুক্ত, যেমন পলিফিল এবং ডুপ্লিকেটের উপর নির্ভরতা কমানো যা ব্যবহারকারীর অভিজ্ঞতার জন্য প্রয়োজন নাও হতে পারে।
Core Web Vitals টুলিং সম্পর্কে আরও তথ্যের জন্য, Lighthouse টিমের Twitter অ্যাকাউন্ট এবং DevTools-এ নতুন কী আছে তা দেখুন।