লাইটহাউসের সাথে পারফরম্যান্সের সুযোগগুলি আবিষ্কার করুন

লাইটহাউস হল একটি টুল যা আপনাকে একটি পৃষ্ঠার কর্মক্ষমতা উন্নত করার উপায়গুলি পরিমাপ করতে এবং খুঁজে পেতে সহায়তা করে৷ আপনি কীভাবে লাইটহাউস ব্যবহার করেন তার জন্য এখানে সাধারণ কর্মপ্রবাহ রয়েছে:

  1. আপনি বাতিঘর বলুন কোন পাতা অডিট.
  2. লাইটহাউস সেই পৃষ্ঠাটি লোড করে এবং বিভিন্ন পারফরম্যান্স মাইলফলক ছুঁতে পৃষ্ঠাটি কতক্ষণ নেয় তা রেকর্ড করে। এই মাইলফলকগুলিকে মেট্রিক্স বলা হয়।
  3. বাতিঘর আপনাকে পৃষ্ঠাটি কীভাবে করেছে তার একটি প্রতিবেদন দেয়। প্রতিবেদনটি প্রতিটি মেট্রিকের জন্য একটি স্কোর এবং সুযোগগুলির একটি তালিকা প্রদান করে যা, যদি আপনি সেগুলি প্রয়োগ করেন, তাহলে পৃষ্ঠাটি দ্রুত লোড হবে৷

আপনার লক্ষ্য হল সময়ের সাথে সাথে আপনার মেট্রিক্স স্কোর উন্নত করা, অথবা অন্তত নিশ্চিত করা যে সেগুলি আরও খারাপ না হয়। যদিও সরাসরি মেট্রিক্সে কাজ করার কোন উপায় নেই। পরিবর্তে, আপনি লাইটহাউস প্রদান করে এমন সুযোগগুলি অনুসরণ করুন৷ এই সুযোগগুলিতে কাজ করা আপনার মেট্রিক্স স্কোর উন্নত করতে থাকে।

আপনার প্রোফাইল পৃষ্ঠা থেকে বাতিঘর চালান

আপনার web.dev প্রোফাইল পৃষ্ঠা থেকে Lighthouse চালান:

  1. যেকোন URL প্রদান করুন এবং Lighthouse পৃষ্ঠাটি কতটা ভালো করেছে তার একটি প্রতিবেদন তৈরি করে অডিটের একটি সিরিজ চালায়।

  2. আপনার পৃষ্ঠাটি উন্নত করা যেতে পারে এমন ক্ষেত্রগুলি সনাক্ত করতে অডিট রিপোর্ট পর্যালোচনা করুন।

  3. প্রতিটি অডিটের জন্য, আপনি আপনার স্কোর উন্নত করতে নির্দেশিকা এবং তাৎক্ষণিক পদক্ষেপগুলি পাবেন।

Chrome DevTools থেকে Lighthouse চালান

Chrome DevTools হল ওয়েব ডেভেলপার টুলগুলির সেট যা সরাসরি Google Chrome ব্রাউজারে তৈরি করা হয়। DevTools পেতে আপনাকে কিছু ডাউনলোড করতে হবে না। আপনার যদি Chrome থাকে, তাহলে আপনার কাছে DevTools আছে।

  1. Chrome-এ, আপনি যে পৃষ্ঠাটি অডিট করতে চান সেখানে যান।
  2. DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।

DevTools খোলা হয়েছে এবং স্ক্রীনের ডানদিকে ডক করা হয়েছে।

অডিট ট্যাবে ক্লিক করুন। আপনি যদি এই ট্যাবটি দেখতে না পান, তাহলে » চিহ্নে ক্লিক করুন এবং তারপর তালিকা থেকে অডিট নির্বাচন করুন। বাতিঘর হল ইঞ্জিন যা অডিট প্যানেলকে শক্তি দেয়। সেজন্য আপনি একটি বাতিঘরের ছবি দেখতে পাচ্ছেন।

DevTools Lighthouse অডিট প্যানেলে খোলা হয়েছে।

  1. নিশ্চিত করুন যে মোবাইল রেডিও বোতামটি নির্বাচিত হয়েছে। যখন Lighthouse আপনার পৃষ্ঠা অডিট করে, তখন এটি একটি মোবাইল ডিভাইসের ভিউপোর্ট এবং ব্যবহারকারী এজেন্ট স্ট্রিং অনুকরণ করবে।
  2. পারফরম্যান্স চেকবক্স সক্রিয় আছে তা নিশ্চিত করুন। আপনি অডিট বিভাগে বাকি চেকবক্সগুলি সক্ষম বা নিষ্ক্রিয় করতে পারেন৷ আপনি যদি সেগুলিকে সক্ষম করেন, তাহলে আপনি আপনার পৃষ্ঠার সেই অন্যান্য দিকগুলিকে উন্নত করার উপায়গুলিতে অনেকগুলি সুযোগ দেখতে পাবেন৷
  3. নিশ্চিত করুন যে সিমুলেটেড ফাস্ট 3G, 4x CPU স্লোডাউন রেডিও বোতামটি নির্বাচন করা হয়েছে। পৃষ্ঠাটি লোড করার সময় বাতিঘর আসলে আপনার নেটওয়ার্ক বা CPU থ্রোটল করে না। পরিবর্তে, এটি স্বাভাবিক অবস্থায় পৃষ্ঠাটি লোড হতে কতক্ষণ সময় নেয় তা দেখে এবং তারপর এটি একটি CPU সহ একটি দ্রুত 3G নেটওয়ার্কে কতক্ষণ সময় নেয় যা আপনার মেশিনের তুলনায় 4 গুণ কম শক্তিশালী তা অনুমান করে৷
  4. নিশ্চিত করুন যে ক্লিয়ার স্টোরেজ চেকবক্স সক্রিয় আছে। এই বিকল্পটি লাইটহাউসকে প্রতিটি পৃষ্ঠা সম্পদের জন্য নেটওয়ার্কে যেতে বাধ্য করে, যেভাবে প্রথমবার দর্শকরা পৃষ্ঠাটি অনুভব করে।
  5. রান অডিট ক্লিক করুন। 5 থেকে 10 সেকেন্ড পরে, লাইটহাউস আপনাকে একটি প্রতিবেদন দেখায়।

DevTools একটি Lighthouse অডিট ফলাফল রিপোর্ট দেখাচ্ছে.

উদাহরণস্বরূপ, আপনি যদি সিমুলেটেড ফাস্ট 3G , 4x CPU স্লোডাউন থ্রটলিং সক্ষম করে কিছু অডিট চালান এবং তারপরে অন্য সময় আপনি থ্রটলিং অক্ষম করে অডিট চালান, আপনার মেট্রিক্স স্কোর উল্লেখযোগ্যভাবে কম হবে যখন আপনি থ্রটলিং সক্ষম করবেন। আপনার পৃষ্ঠাটি এখন এত ধীর কেন তা বোঝার চেষ্টা করার জন্য আপনি অনেক সময় ব্যয় করতে পারেন, যখন বাস্তবে শুধুমাত্র পরিবর্তনটি হল আপনার কনফিগারেশন।

আপনার রিপোর্ট বুঝতে

আপনার প্রতিবেদনের উপরের ডানদিকে আপনার সামগ্রিক কর্মক্ষমতা স্কোর তালিকাভুক্ত করা হয়েছে। 100 একটি নিখুঁত স্কোর। সামগ্রিক স্কোরের নীচে মেট্রিক্স স্কোর রয়েছে। Lighthouse v3 স্কোরিং গাইড ব্যাখ্যা করে কিভাবে প্রতিটি মেট্রিক স্কোর সামগ্রিক স্কোরে অবদান রাখে।

বাতিঘর মেট্রিক্স স্কোর সবুজ, পাসিং স্কোর এবং হলুদ, সতর্কতা স্কোর দেখাচ্ছে।

এটি সম্পর্কে আরও জানতে একটি মেট্রিকের উপর হোভার করুন। এটি সম্পর্কে ডকুমেন্টেশন পড়তে আরও জানুন ক্লিক করুন।

আপনার মেট্রিক্স স্কোরের নীচে আপনি পৃষ্ঠাটি লোড হওয়ার সময় কেমন ছিল তার স্ক্রিনশটগুলি দেখতে পাচ্ছেন৷

একটি পৃষ্ঠা লোড করার জন্য DevTools-এর ফিল্মস্ট্রিপ ভিউ৷

স্ক্রিনশটগুলির নীচে আপনি পৃষ্ঠার কর্মক্ষমতা উন্নত করার সুযোগগুলি দেখতে পাচ্ছেন৷

এটি সম্পর্কে আরও জানতে একটি সুযোগ ক্লিক করুন.

ডিফার অফস্ক্রিন ইমেজ শিরোনাম একটি প্রসারিত অডিট অপ্টিমাইজ করা যেতে পারে যে ইমেজ পাথ একটি সংখ্যা দেখায়.

পরবর্তী পদক্ষেপ

আপনার প্রোফাইল পৃষ্ঠা থেকে বা Chrome DevTools থেকে আপনার পৃষ্ঠা অডিট করতে Lighthouse ব্যবহার করার চেষ্টা করুন। সুযোগগুলির মধ্যে একটি প্রয়োগ করুন এবং তারপরে পরিবর্তনটি কীভাবে আপনার প্রতিবেদনকে প্রভাবিত করেছে তা দেখতে আপনার পৃষ্ঠাটি আবার অডিট করুন৷ আপনার মেট্রিক্স স্কোর আদর্শভাবে একটু ভালো হওয়া উচিত, এবং লাইটহাউস আর সেই সুযোগটিকে কাজ করার মতো কিছু হিসাবে চিহ্নিত করা উচিত নয়।

স্পট-চেকিং সমস্যাগুলির জন্য লাইটহাউস নিজে চালানো দুর্দান্ত, কিন্তু শেষ পর্যন্ত আপনার সাইটটি সুস্থ থাকে তা নিশ্চিত করতে আপনি ক্রমাগত মনিটরিং সেটআপ করতে চাইবেন। সময়ের সাথে সাথে আপনার বাতিঘরের অগ্রগতি ট্র্যাক করতে আপনার প্রোফাইলে আপনার সাইট যুক্ত করুন৷