Chrome-এর ওয়েব টুলিংয়ের মাধ্যমে ব্যবহারকারী-অভিজ্ঞতা উন্নত করার সুযোগ খোঁজা।
প্রকাশিত: 11 মে, 2021
আজ, আমরা ওয়েব ভাইটালগুলিতে কীভাবে আপনার সাইট উন্নত করতে পারে তা শনাক্ত করতে সাহায্য করতে Lighthouse, PageSpeed এবং DevTools-এ নতুন টুলিং বৈশিষ্ট্যগুলি কভার করব৷
টুলের রিফ্রেসার হিসেবে, Lighthouse হল ওয়েব পেজের গুণমান উন্নত করার জন্য একটি ওপেন সোর্স, স্বয়ংক্রিয় টুল। আপনি এটিকে ডিবাগিং টুলের Chrome DevTools স্যুটে খুঁজে পেতে পারেন এবং যেকোনো ওয়েব পৃষ্ঠা, সর্বজনীন বা প্রমাণীকরণের প্রয়োজনে এটি চালাতে পারেন। এছাড়াও আপনি PageSpeed Insights , CI এবং WebPageTest- এ Lighthouse খুঁজে পেতে পারেন।
Lighthouse 7.x-এ উপাদানের স্ক্রিনশটের মতো নতুন বৈশিষ্ট্য রয়েছে, যাতে ব্যবহারকারী-অভিজ্ঞতার মেট্রিক্সকে প্রভাবিত করে আপনার UI এর অংশগুলির সহজে ভিজ্যুয়াল পরিদর্শনের জন্য (যেমন কোন নোডগুলি লেআউট শিফটে অবদান রাখছে)।
আমরা PageSpeed Insights-এ উপাদান স্ক্রিনশটগুলির জন্য সমর্থনও পাঠিয়েছি, পৃষ্ঠাগুলির এক-অফ পারফরম্যান্স রানের জন্য আরও সহজে সমস্যাগুলি চিহ্নিত করার একটি উপায় সক্ষম করে৷
কোর ওয়েব ভাইটাল পরিমাপ
লাইটহাউস কৃত্রিমভাবে কোর ওয়েব ভাইটাল মেট্রিক্সকে পরিমাপ করতে পারে যার মধ্যে রয়েছে বৃহত্তম কন্টেন্টফুল পেইন্ট , ক্রমবর্ধমান লেআউট শিফট এবং টোটাল ব্লকিং টাইম ( প্রথম ইনপুট বিলম্বের জন্য একটি ল্যাব প্রক্সি)। এই মেট্রিক্স লোডিং, লেআউট স্থায়িত্ব এবং মিথস্ক্রিয়া প্রস্তুতি প্রতিফলিত করে। কোর ওয়েব ভাইটালসের ভবিষ্যতে হাইলাইট করা ফার্স্ট কনটেন্টফুল পেইন্টের মতো অন্যান্য মেট্রিকও সেখানে রয়েছে।
লাইটহাউস রিপোর্টের "মেট্রিক্স" বিভাগে এই মেট্রিকগুলির ল্যাব সংস্করণগুলি অন্তর্ভুক্ত রয়েছে৷ ব্যবহারকারী-অভিজ্ঞতার কোন দিকগুলিতে আপনার মনোযোগ প্রয়োজন তার একটি সারসংক্ষেপ দৃশ্য হিসাবে আপনি এটি ব্যবহার করতে পারেন।
ক্ষেত্র মেট্রিক্স , যেমন Chrome UX রিপোর্ট বা RUM এ পাওয়া যায়, এই সীমাবদ্ধতা নেই এবং এটি ল্যাব ডেটার একটি মূল্যবান পরিপূরক কারণ তারা প্রকৃত ব্যবহারকারীদের অভিজ্ঞতা প্রতিফলিত করে। ফিল্ড ডেটা আপনি ল্যাবে যে ধরণের ডায়াগনস্টিক তথ্য পান তা অফার করতে পারে না, তাই দুটি একসাথে চলে।
Web Vitals-এ আপনি কোথায় উন্নতি করতে পারেন তা চিহ্নিত করুন
সবচেয়ে বড় সামগ্রীপূর্ণ পেইন্ট উপাদান সনাক্ত করুন
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 ব্যাকগ্রাউন্ডের মাধ্যমে LCP ইমেজ হিসেবে পতাকাঙ্কিত যেকোনও ছবি অথবা <img> যদি এটি তিন বা তার বেশি জলপ্রপাতের গভীরতায় আবিষ্কৃত হয় তাহলে সেটি প্রার্থী।
অলসভাবে অফস্ক্রিন ছবি লোড করা এবং এলসিপির জন্য এটি এড়ানো
অফস্ক্রিন ছবিগুলি যেগুলি প্রাথমিক ব্যবহারকারীর অভিজ্ঞতার জন্য গুরুত্বপূর্ণ নয় সেগুলি অলস-লোড হতে পারে৷ এটি এমন একটি কৌশল যা ব্যবহারকারীর কাছাকাছি স্ক্রোল না করা পর্যন্ত একটি ছবি ডাউনলোড করা পিছিয়ে দেয়, যা গুরুত্বপূর্ণ সম্পদের জন্য নেটওয়ার্ক বিরোধ কমাতে পারে এবং কিছু ক্ষেত্রে LCP উন্নত করতে পারে। "ডিফার অফস্ক্রিন ইমেজ" অডিট এখানে সাহায্য করতে পারে:
ভাঁজের ওপরের ক্রিটিকাল ইমেজ, যেমন লার্জেস্ট কনটেন্টফুল পেইন্ট ইমেজ, অলস লোড করা উচিত নয়। এটি করলে LCP ইমেজ লোড হতে দেরি হতে পারে। "লার্জেস্ট কনটেন্টফুল পেইন্ট ইমেজটি অলসভাবে লোড করা হয়েছে" অডিটের মাধ্যমে একটি LCP ইমেজ ভুলভাবে অলস-লোড করা হলে বাতিঘর হাইলাইট করবে:
CLS অবদান সনাক্ত করুন
Cumulative Layout Shift হল চাক্ষুষ স্থিতিশীলতার পরিমাপ। এটি একটি পৃষ্ঠার বিষয়বস্তু দৃশ্যমানভাবে চারপাশে কতটা পরিবর্তন করে তা পরিমাপ করে। CLS ডিবাগ করার জন্য Lighthouse এর একটি অডিট আছে যাকে বলা হয় "বড় লেআউট শিফট এড়িয়ে চলুন"।
এই অডিট DOM উপাদানগুলিকে হাইলাইট করে যা পৃষ্ঠার পরিবর্তনে সবচেয়ে বেশি অবদান রাখে। বাম দিকের এলিমেন্ট কলামে আপনি এই DOM উপাদানগুলির তালিকা এবং ডানদিকে তাদের সামগ্রিক CLS অবদান দেখতে পাবেন।
নতুন লাইটহাউস এলিমেন্ট স্ক্রিনশট বৈশিষ্ট্যের জন্য ধন্যবাদ, আমরা উভয়েই অডিটে উল্লেখ করা মূল উপাদানগুলির একটি ভিজ্যুয়াল প্রিভিউ দেখতে পাচ্ছি সেইসাথে একটি পরিষ্কার দৃশ্যের জন্য ক্লিক-টু-জুম দেখতে পাচ্ছি:
পোস্ট-লোড সিএলএস-এর জন্য, আয়তক্ষেত্রগুলির সাথে ক্রমাগতভাবে ভিজ্যুয়ালাইজ করার মান থাকতে পারে কোন উপাদানগুলি সিএলএসে সবচেয়ে বেশি অবদান রেখেছে। এটি এমন একটি বৈশিষ্ট্য যা আপনি স্পিডকার্ভের কোর ওয়েব ভাইটালস ড্যাশবোর্ডের মতো তৃতীয় পক্ষের সরঞ্জামগুলিতে পাবেন এবং যেটির জন্য আমি Defaced এর লেআউট শিফট GIF জেনারেটর ব্যবহার করতে পছন্দ করি:
লেআউট শিফ্ট সংক্রান্ত সমস্যাগুলির একটি সাইট-ওয়াইড ভিউয়ের জন্য, আমি সার্চ কনসোলের কোর ওয়েব ভাইটালস রিপোর্ট থেকে প্রচুর মাইলেজ পাই। এটি আমাকে একটি উচ্চ CLS সহ আমার সাইটের পৃষ্ঠাগুলির ধরন দেখতে দেয় (এই ক্ষেত্রে আমাকে কোন টেমপ্লেট আংশিকগুলিতে আমার সময় ব্যয় করতে হবে তা স্ব-শনাক্ত করতে সহায়তা করে):
মাত্রা ছাড়া ছবি থেকে CLS সনাক্ত করা
ডাইমেনশন ছাড়া ইমেজ দ্বারা সৃষ্ট ক্রমবর্ধমান লেআউট শিফট সীমিত করতে , আপনার ইমেজ এবং ভিডিও এলিমেন্টে প্রস্থ এবং উচ্চতা সাইজ অ্যাট্রিবিউট অন্তর্ভুক্ত করুন। এই পদ্ধতিটি নিশ্চিত করে যে ইমেজ লোড হওয়ার সময় ব্রাউজার নথিতে সঠিক পরিমাণ স্থান বরাদ্দ করতে পারে।
চিত্রের মাত্রা এবং আকৃতির অনুপাত সম্পর্কে চিন্তা করার গুরুত্ব সম্পর্কে একটি ভাল লেখার জন্য চিত্রগুলিতে উচ্চতা এবং প্রস্থ নির্ধারণ করা গুরুত্বপূর্ণ আবার দেখুন।
বিজ্ঞাপন থেকে CLS সনাক্তকরণ
লাইটহাউসের জন্য প্রকাশক বিজ্ঞাপনগুলি আপনাকে আপনার পৃষ্ঠায় বিজ্ঞাপন লোড করার অভিজ্ঞতা উন্নত করার সুযোগগুলি খুঁজে পেতে দেয়, লেআউট শিফটে অবদান এবং দীর্ঘ কাজগুলি যা ব্যবহারকারীদের দ্বারা আপনার পৃষ্ঠাটি কত তাড়াতাড়ি ব্যবহারযোগ্য হবে তা বোঝাতে পারে৷ লাইটহাউসে, আপনি কমিউনিটি প্লাগইনগুলির মাধ্যমে এটি সক্ষম করতে পারেন৷
মনে রাখবেন যে বিজ্ঞাপনগুলি ওয়েবে লেআউট পরিবর্তনের জন্য সবচেয়ে বড় অবদানকারী। এটি গুরুত্বপূর্ণ:
- ভিউপোর্টের শীর্ষের কাছে নন-স্টিকি বিজ্ঞাপন রাখার সময় সতর্কতা অবলম্বন করুন
- বিজ্ঞাপন স্লটের জন্য সম্ভাব্য সবচেয়ে বড় আকার সংরক্ষণ করে স্থানান্তর বাদ দিন
নন-কম্পোজিটেড অ্যানিমেশন এড়িয়ে চলুন
যে অ্যানিমেশনগুলি নন-কম্পোজিটেড, সেগুলি নিম্ন-প্রান্তের ডিভাইসগুলিতে নিজেকে জ্যাঙ্কি হিসাবে উপস্থাপন করতে পারে যদি ভারী জাভাস্ক্রিপ্ট কাজগুলি মূল থ্রেডকে ব্যস্ত রাখে। এই ধরনের অ্যানিমেশন লেআউট পরিবর্তন প্রবর্তন করতে পারে।
যদি Chrome আবিষ্কার করে যে একটি অ্যানিমেশন সংমিশ্রিত করা যাবে না, তাহলে এটি একটি DevTools ট্রেস লাইটহাউস রিডগুলিতে রিপোর্ট করে, এটিকে অ্যানিমেশন সহ কোন উপাদানগুলি সংমিশ্রিত করা হয়নি এবং কী কারণে তা তালিকাভুক্ত করার অনুমতি দেয়৷ আপনি এগুলি এড়িয়ে চলুন নন-কম্পোজিটেড অ্যানিমেশন অডিটে খুঁজে পেতে পারেন।
ডিবাগ প্রথম ইনপুট বিলম্ব / মোট ব্লকিং সময় / দীর্ঘ কাজ
ফার্স্ট ইনপুট সময় পরিমাপ করে যখন একজন ব্যবহারকারী প্রথম কোনো পৃষ্ঠার সাথে ইন্টারঅ্যাক্ট করে (যেমন যখন তারা একটি লিঙ্কে ক্লিক করে, একটি বোতামে আলতো চাপ দেয়, বা একটি কাস্টম, জাভাস্ক্রিপ্ট-চালিত নিয়ন্ত্রণ ব্যবহার করে) তখন থেকে ব্রাউজার প্রকৃতপক্ষে ইভেন্ট প্রক্রিয়াকরণ শুরু করতে সক্ষম হয়। যে মিথস্ক্রিয়া প্রতিক্রিয়া হ্যান্ডলার. দীর্ঘ জাভাস্ক্রিপ্ট টাস্কগুলি এই মেট্রিক এবং এই মেট্রিকের জন্য প্রক্সিকে প্রভাবিত করতে পারে, মোট ব্লকিং সময়।
Lighthouse একটি এড়িয়ে চলা দীর্ঘ প্রধান-থ্রেড টাস্ক অডিট অন্তর্ভুক্ত করে যা প্রধান থ্রেডের দীর্ঘতম কাজগুলি তালিকাভুক্ত করে। ইনপুট বিলম্বের জন্য সবচেয়ে খারাপ অবদানকারীদের চিহ্নিত করার জন্য এটি সহায়ক হতে পারে। বাম কলামে আমরা দীর্ঘ প্রধান-থ্রেড কাজের জন্য দায়ী স্ক্রিপ্টের URL দেখতে পাচ্ছি।
ডানদিকে আমরা এই কাজের সময়কাল দেখতে পারি। একটি অনুস্মারক হিসাবে, লং টাস্ক হল টাস্ক যা 50 মিলিসেকেন্ডের বেশি সময় ধরে চালানো হয়। ফ্রেম রেট বা ইনপুট লেটেন্সি প্রভাবিত করার জন্য এটি প্রধান থ্রেডটিকে যথেষ্ট দীর্ঘ অবরোধ করার জন্য বিবেচনা করা হয়।
যদি নিরীক্ষণের জন্য তৃতীয় পক্ষের পরিষেবাগুলি বিবেচনা করা হয়, তবে আমি এই খরচগুলিকে কল্পনা করার জন্য মূল-থ্রেড এক্সিকিউশন টাইমলাইন ভিজ্যুয়াল ক্যালিবার পছন্দ করি, যা ইন্টারঅ্যাক্টিভিটিকে প্রভাবিত করে এমন দীর্ঘ কাজগুলিতে অবদান রাখার জন্য অভিভাবক এবং শিশু উভয়ের কাজগুলিকে হাইলাইট করে।
লাইটহাউসে প্রভাবের আগে/পরে দেখার জন্য নেটওয়ার্ক অনুরোধ ব্লক করুন
Chrome DevTools পৃথক সংস্থানগুলি সরানো বা উপলব্ধ না হওয়ার প্রভাব দেখতে নেটওয়ার্ক অনুরোধগুলিকে ব্লক করা সমর্থন করে৷ টোটাল ব্লকিং টাইম (TBT) এবং টাইম টু ইন্টারঅ্যাকটিভের মতো মেট্রিক্সে পৃথক স্ক্রিপ্টের (যেমন তৃতীয়-পক্ষ এম্বেড বা ট্র্যাকারের মতো) খরচ বোঝার জন্য এটি সহায়ক হতে পারে।
নেটওয়ার্ক অনুরোধ ব্লকিং এছাড়াও বাতিঘর সঙ্গে কাজ ঘটবে! আসুন একটি সাইটের জন্য লাইটহাউস রিপোর্টটি দ্রুত দেখে নেওয়া যাক। 400ms এর TBT সহ পারফ স্কোর হল 63/100। কোডটি খনন করে, আমরা দেখতে পাই যে এই সাইটটি Chrome এ একটি ইন্টারসেকশন অবজারভার পলিফিল লোড করে যা প্রয়োজনীয় নয়৷ এর এটা ব্লক করা যাক!
আমরা DevTools নেটওয়ার্ক প্যানেলে একটি স্ক্রিপ্টে ডান-ক্লিক করতে পারি এবং Block Request URL ক্লিক করে এটি ব্লক করতে পারি। এখানে আমরা ইন্টারসেকশন অবজারভার পলিফিলের জন্য এটি করব।
পরবর্তী আমরা Lighthouse পুনরায় চালাতে পারেন. এইবার আমরা দেখতে পাচ্ছি যে আমাদের পারফরম্যান্স স্কোর উন্নত হয়েছে (70/100) মোট ব্লকিং টাইম (400ms => 300ms)।
একটি সম্মুখভাগ দিয়ে ব্যয়বহুল তৃতীয় পক্ষের এম্বেডগুলি প্রতিস্থাপন করুন
পৃষ্ঠাগুলিতে ভিডিও, সোশ্যাল মিডিয়া পোস্ট বা উইজেটগুলি এম্বেড করার জন্য তৃতীয় পক্ষের সংস্থানগুলি ব্যবহার করা সাধারণ৷ ডিফল্টরূপে, বেশিরভাগ এম্বেডই আগ্রহের সাথে সরাসরি লোড হয় এবং ব্যয়বহুল পেলোডের সাথে আসতে পারে যা ব্যবহারকারীর অভিজ্ঞতাকে নেতিবাচকভাবে প্রভাবিত করে। এটি অপব্যয় যদি থার্ড-পার্টি সমালোচনামূলক না হয় (উদাহরণস্বরূপ যদি ব্যবহারকারীকে এটি দেখার আগে স্ক্রোল করতে হয়)।
এই ধরনের উইজেটগুলির কার্যকারিতা উন্নত করার একটি প্যাটার্ন হল ব্যবহারকারীর মিথস্ক্রিয়ায় তাদের অলস-লোড করা । এটি উইজেটের একটি হালকা পূর্বরূপ রেন্ডার করে করা যেতে পারে (একটি সম্মুখভাগ) এবং শুধুমাত্র পূর্ণ সংস্করণটি লোড করতে পারে যদি একজন ব্যবহারকারী এটির সাথে যোগাযোগ করে। লাইটহাউসের একটি অডিট রয়েছে যা তৃতীয়-পক্ষের সংস্থানগুলির সুপারিশ করবে যা একটি সম্মুখভাগের সাথে অলস-লোড হতে পারে, যেমন YouTube ভিডিও এম্বেড৷
একটি অনুস্মারক হিসাবে, Lighthouse তৃতীয় পক্ষের কোড হাইলাইট করবে যা 250ms এর বেশি সময় ধরে মূল থ্রেড ব্লক করে। এটি সমস্ত ধরণের তৃতীয় পক্ষের স্ক্রিপ্টগুলিকে (Google দ্বারা রচিত সহ) প্রকাশ করতে পারে যেগুলিকে স্থগিত করা বা অলস লোড করার মূল্য হতে পারে যদি তারা যা রেন্ডার করে তা দেখতে স্ক্রোল করার প্রয়োজন হয়৷
কোর ওয়েব ভাইটাল ছাড়িয়ে
কোর ওয়েব ভাইটালগুলি হাইলাইট করার বাইরে, লাইটহাউস এবং পেজস্পিড ইনসাইটস-এর সাম্প্রতিক সংস্করণগুলিও সুনির্দিষ্ট নির্দেশিকা প্রদান করার চেষ্টা করে যা আপনি যদি সোর্স ম্যাপ চালু করে থাকেন তবে জাভাস্ক্রিপ্ট-ভারী ওয়েব অ্যাপ্লিকেশনগুলি কত দ্রুত লোড হতে পারে তা উন্নত করার জন্য আপনি অনুসরণ করতে পারেন৷
এর মধ্যে রয়েছে আপনার পৃষ্ঠায় জাভাস্ক্রিপ্টের খরচ কমানোর জন্য অডিটের ক্রমবর্ধমান সংগ্রহ, যেমন পলিফিল এবং ডুপ্লিকেটের উপর নির্ভরতা হ্রাস করা যা ব্যবহারকারীর অভিজ্ঞতার জন্য প্রয়োজন নাও হতে পারে।
Core Web Vitals টুলিং সম্পর্কে আরও তথ্যের জন্য, Lighthouse টিম টুইটার অ্যাকাউন্ট এবং DevTools-এ নতুন কী আছে সেদিকে নজর রাখুন।