গুগল লাইটহাউস মাস্টার করুন: আপনার সাইটের পারফরম্যান্স টেস্ট ও অপ্টিমাইজ করুন

যখন ওয়েবসাইটকে সার্চ ইঞ্জিন রেজাল্টে উচ্চে র‍্যাঙ্ক করানোর কথা আসে, ওয়েবসাইট স্পিড একটি ফ্যাক্টর যা উপেক্ষা করা যায় না। এটি শুধু ব্যবহারকারীদের খুশি করে না, বরং দৃশ্যমানতা বাড়াতেও সহায়ক হয়। সত্ত্বেও, কেউ পেজে ক্লিক করে সে সदा অপেক্ষা করতে চায় না। TechCult কে উদাহরণ হিসেবে নিন, আমাদের ব্লগগুলো খুব দ্রুত লোড হয়, ঠিক না? মজা করা বাদে, আপনি যদি চিন্তিত হন যে আপনার ওয়েবসাইট কম স্পিডের কারণে র‍্যাঙ্ক করতে পারছে না, তবে গুগল লাইটহাউস আপনাকে সাহায্য করতে এখানে আছে। আজকের আর্টিকেলে, আমরা দেখাব কীভাবে গুগল লাইটহাউস ব্যবহার করে পারফরম্যান্স টেস্টিং করতে হয়।

একটি সাধারণ প্রবাদ আছে যে প্রথম ধারণা শেষ ধারণা। সেই নোটে, দ্রুত লোড হওয়া একটি ওয়েবসাইট বেটার ইউজার এক্সপেরিয়েন্সের দিক থেকে মাথা হয়ে থাকে, যা চূড়ান্তে কনভার্সন রেট বাড়াতে পারে। এমনকি Google-এর মতো সার্চ ইঞ্জিনও দ্রুত লোড হওয়া ওয়েবসাইটকে সার্চ রেজাল্টে উচ্চে র‍্যাঙ্ক করে।

Google Lighthouse একটি ওপেন-সোর্স অটোমেটেড টুল যা ওয়েবসাইট ডেভেলপার এবং মালিকদের, ওয়েব পেজের গুণমান মূল্যায়ন ও উন্নতি করতে সাহায্য করে। এতে পারফরম্যান্স, অ্যাক্সেসিবিলিটি, বেস্ট প্র্যাকটিস, এবং SEO-র জন্য অডিট থাকে মোবাইল এবং ডেস্কটপ উভয়ের জন্য। এর বিস্তারিত রিপোর্ট এবং সুপারিশের ভিত্তিতে, ব্যবহারকারীরা সাইটের পারফরম্যান্স অপ্টিমাইজ করতে পারেন ভালো ইউজার এনগেজমেন্টের জন্য। Lighthouse যেকোনো ওয়েব পেজের বিরুদ্ধে চালানো যায়, পাবলিকলি বা প্রাইভেটলি অ্যাক্সেসিবল। চলুন দেখি কীভাবে এটি কাজ করে এবং আপনি কীভাবে এটি ব্যবহার করতে পারেন।

পদ্ধতি ১: সরাসরি Lighthouse যোগ করুন এবং চালান

Lighthouse ব্যবহারকারীদের জন্য Google এক্সটেনশন আকারেও উপলব্ধ, যা আপনি ডাউনলোড করে Chrome ব্রাউজারে আপনার জন্য অডিট চালাতে পারেন। নিচের ধাপগুলো অনুসরণ করুন:

1. যেকোনো ওয়েব ব্রাউজারে Lighthouse এক্সটেনশনের Chrome Web Store পেজে যান।
2. Add to Chrome-এ ক্লিক করুন।
3. 
4. Add extension-এ ক্লিক করুন কনফার্ম করতে।
5. একবার যোগ হলে, ব্রাউজারে ওয়েবসাইট চালু করুন যেটি আপনি বিশ্লেষণ করতে চান।
6. অ্যাড্রেস বারের পাশের Extension (Puzzle) icon-এ ক্লিক করুন এবং Lighthouse নির্বাচন করুন।
7. Generate report-এ ক্লিক করুন।
8. 

এতটুকুই! কয়েক সেকেন্ডের মধ্যে, Lighthouse আপনার টেস্ট করা ওয়েবসাইট বিশ্লেষণ করে একটি বিস্তারিত রিপোর্ট জেনারেট করবে।

পদ্ধতি ২: PageSpeed Insights ব্যবহার করুন

Google PageSpeed Insights ও একটি ওয়েব পারফরম্যান্স টেস্টিং টুল যা Lighthouse কে তার অ্যানালিসিস ইঞ্জিন হিসেবে ব্যবহার করে। তাই আপনি আপনার ওয়েবসাইটের জন্য রিপোর্ট জেনারেট করতে এটিও ব্যবহার করতে পারেন। ধাপগুলো:

1. PageSpeed Insights ওয়েবসাইটে যান।
2. টেক্সট ফিল্ডে ওয়েবসাইট URL লিখুন এবং Analyse-এ ক্লিক করুন।
3. 

টেস্টিং সম্পন্ন হলে, আপনি Chrome User Experience Report পাবেন যা রিয়েল ইউজারদের অভিজ্ঞতা দেখায়।

The Diagnose performance issues সেকশন Lighthouse স্কোর দেখায়। আপনি Mobile এবং Desktop উভয়ের জন্য রেজাল্ট চেক করতে পারেন।

পদ্ধতি ৩: DevTools-এ Lighthouse চালান

Google Chrome DevTools-এ Lighthouse-এর নিজস্ব প্যানেল আছে যা আপনি পারফরম্যান্স টেস্টিংয়ের জন্য ব্যবহার করতে পারেন যদি আপনার ওয়েবসাইট লোকাল সার্ভারে চলে অথবা লগইন রিকোয়ার্ড থাকে। কীভাবে করবেন:

1. আপনি যে ওয়েবসাইট অডিট করতে চান সেটি ভিজিট করুন।
2. পেজের যেকোনো জায়গায় রাইট-ক্লিক করুন এবং মেনু থেকে Inspect নির্বাচন করুন।
3. 
4. >> icon (More tabs)-এ ক্লিক করুন এবং কন্টেক্সট মেনু থেকে Lighthouse নির্বাচন করুন।
5. 
6. উপরের ডান কোণার Analyze page load বাটনে ক্লিক করুন এবং রেজাল্ট রেডি হওয়া পর্যন্ত অপেক্ষা করুন।
7. দ্রষ্টব্য: Device উপযুক্তভাবে সিলেক্ট করুন এবং সব Categories এনাবল্ড রাখুন।
8. 

আপনি মোডও পরিবর্তন করতে পারেন। DevTools-এ Lighthouse তিনটি টেস্টিং মোড প্রদান করে:

• Navigation: পারফরম্যান্স, অ্যাক্সেসিবিলিটি, এবং SEO সহ সমগ্র রেজাল্ট প্রদর্শন করে।

• Timespan: একটি পেজ লোড হওয়া এবং সার্ফারের সাথে ইন্টারঅ্যাক্ট করার 데 কতক্ষণ লাগে সেটি ভিত্তিক করে রেজাল্ট দেখায়। টেস্ট চলাকালীন পেজের সাথে ইন্টারঅ্যাক্ট করতে হবে।

• Snapshot: বর্তমান পেজের জন্য স্কোর কম্পিউট করে

আরও পড়ুন: ৩১টি সেরা ওয়েব স্ক্র্যাপিং টুল

পদ্ধতি ৪: কমান্ড লাইনে Lighthouse মডিউল ব্যবহার করুন

Lighthouse একটি Node মডিউল হিসেবেও উপলব্ধ যা আপনি আপনার কন্টিনিউইস ইন্টিগ্রেশন সিস্টেমে ইন্টিগ্রেট করতে পারেন এবং কমান্ড লাইন বা প্রোগ্রাম্যাটিক্যালি ব্যবহার করতে পারেন। এটিতে শুধু Node-এর একটি ভার্সন দরকার। আপনার পিসিতে Node.js ইনস্টলড থাকলে, নিচের ধাপগুলো অনুসরণ করুন:

1. আপনার সার্ভারে লগইন করুন এবং নিচের কমান্ড চালান Lighthouse গ্লোবাল মডিউল ডিভাইসে ইনস্টল করতে:

npm install -g lighthouse

2. একবার ইনস্টল হলে, Lighthouse টেস্ট করার জন্য নিচের কমান্ড চালান:

lighthouse -- view <url>

সকল উপলব্ধ অপশন দেখতে নিচের কমান্ড ব্যবহার করুন।

lighthouse --help

Lighthouse কীভাবে স্কোর ক্যালকুলেট করে

Google Lighthouse একটি ওয়েবসাইটের পারফরম্যান্স মেট্রিক্সের বিভিন্ন দিক সংযোজন ও মূল্যায়ন করে, যেমন Performance, Accessibility, Best Practices, SEO, এবং PWA। একবার অডিট সফল হলে, এটি একটি রিপোর্ট জেনারেট করে যাতে প্রতিটি দিকের জন্য একটি স্কোর থাকে, সেইসাথে আপনার ওয়েবসাইটের পারফরম্যান্স এবং ইউজার ইন্টারঅ্যাকশন উন্নত করার জন্য সুপারিশ থাকে। ওয়েবসাইটগুলো সাধারণত ০ থেকে ১০০ স্কেলে রেট করা হয়।

Performance

Lighthouse বিশ্লেষণ করে একটি ওয়েব পেজ কত দ্রুত লোড হয়। পারফরম্যান্স স্কোর নিচের মেট্রিক্স বিবেচনা করে ক্যালকুলেট করা হয় –

• First Contentful Paint (FCP): কন্টেন্ট থেকে প্রথম এলিমেন্ট কত দ্রুত স্ক্রিনে পেইন্ট হয়
• Largest Contentful Paint (LCP): সবচেয়ে বড় কন্টেন্ট এলিমেন্ট দৃশ্যমান হতে কতক্ষণ লাগে তা মাপে
• Cumulative Layout Shift (CLS): পেজ লোডের সময় অনপ্রত্যাশিত লেআউট শিফ্টের পরিমাণ মাপে পেজের ভিজ্যুয়াল স্থিতিশীলতা आँকতে। কম CLS ইঙ্গিত দেয় ওয়েবসাইটটি স্থিতিশীল।
• Total Blocking Time: মেন থ্রেড ব্লকড এবং ইউজার ইনপুটের জন্য অনরেসপন্সিভ থাকার সময় মাপে।
• Speed Index: পেজের সকল কন্টেন্ট সম্পূর্ণ দৃশ্যমান হতে কত দ্রুত সেটি নির্দেশ করে

এই মেট্রিক্স ওয়েবসাইটের লোডিং স্পিড এবং ভিজ্যুয়াল স্থিতিশীলতা পরিমাপ করে। এই রিপোর্টকে nhiều ফ্যাক্টর প্রভাবিত করে, যেমন ছবির আকার এবং সংখ্যা, ব্যবহৃত প্লাগইন সংখ্যা, এবং ওয়েবসাইট কোডের দক্ষতা।

Lighthouse মেট্রিক ভ্যালুর ওয়েটেড এভারেজ নিয়ে স্কোর ক্যালকুলেট করে। স্বাভাবিকভাবে, বেশি ওয়েটেজিং دار মেজারমেন্টের টোটাল পারফরম্যান্স স্কোরে বেশি প্রভাব পড়ে। মেট্রিক স্কোরগুলো রিপোর্টে দেখানো হয় না কিন্তু পেছনে থেকে ক্যালকুলেট হয়। আপনি See calculator অপশনে ক্লিক করে আপনার ওয়েবসাইটকে প্রভাবিত করার ফ্যাক্টরগুলোর বিস্তারিত ক্যালকুলেশন পেতে পারেন।

Accessibility

এটি একটি ইউজার-স্ট্রিক স্কোর যা মাপে অক্ষম ব্যবহারকারীরা কত সহজে আপনার ওয়েবসাইট অ্যাক্সেস করতে পারেন। এটি প্রভাবিত হয় ছবিতে অল্ট টেক্সট থাকা, ARIA অ্যাট্রিবিউট ব্যবহার, এবং আপনার ওয়েবসাইটের কীবোর্ড অ্যাক্সেসিবিলিটি gibi ফ্যাক্টর দিয়ে। প্রতিটি অ্যাক্সেসিবিলিটি অডিট হয় পাস বা ফেল। পারফরম্যান্স অডিটের মতো আংশিকভাবে পাস করলে পেজ পয়েন্ট পায় না।

• ছবির জন্য অল্ট টেক্সট: পেজের সকল ছবির উপযুক্ত এবং বর্ণনামূলক অল্ট টেক্সট থাকা উচিত, কারণ এটি স্ক্রিন রিডার ব্যবহার করে ছবি ব্যাখ্যা করে এমন দৃষ্টিবাধিত ব্যবহারকারীদের জন্য অত্যন্ত প্রয়োজনীয়।
• Semantic HTML: টাইটেল, হেডিং, লিস্টের মতো সিম্যান্টিক HTML এলিমেন্টের সঠিক ব্যবহার স্ক্রিন রিডার এবং অন্যান্য অ্যাসিস্টিভ সফটওয়্যারকে পেজের স্ট্রাকচার বুঝতে সাহায্য করে
• Color Contrast: টেক্সট এবং এর ব্যাকগ্রাউন্ডের মধ্যে কালার কন্ট্রাস্ট Web Content Accessibility Guidelines-এ নির্ধারিত стандар্ট মিট করতে হবে। পর্যাপ্ত কালার কন্ট্রাস্ট নিশ্চিত করে যে টেক্সট কম দৃষ্টিশক্তি বা রঙ অন্ধতা যুগত ব্যক্তিদের জন্য পঠনযোগ্য।

আরও পড়ুন: ChatGPT ব্যবহার করে ওয়েবসাইট বিল্ড করা

Best Practices

Lighthouse মাপে আপনার ওয়েবসাইট কতটা ভালো ওয়েব ডেভেলপমেন্ট বেস্ট প্র্যাকটিস ও কোডিং স্ট্যান্ডার্ড ফলো করে এবং সেটি ভিত্তিতে স্কোর দেয়। এটি মডার্ন JavaScript ফিচার এবং সিকিউর কানেকশন (HTTPS) ব্যবহার চেক করে এবং মিনিফিকেশন ও কম্প্রেশন ব্যবহার, সিকিউরিটি হেডার উপস্থিতি, এবং robots.txt ফাইল ব্যবহার gibi ফ্যাক্টর দ্বারা প্রভাবিত হয়। এর অধীনে কিছু সাধারণ অডিট হলো:

• Avoid Large JavaScript Libraries
• Avoid Unused CSS
• Enable Text Compression
• Eliminate Render-blocking Resources
• Leverage Browser Caching
• Serve Static Assets with an Efficient Cache Policy

SEO

SEO মাপে ওয়েবসাইট কতটা সার্চ ইঞ্জিনের জন্য অপ্টিমাইজড। এটি মেটা ডেসক্রিপশন এবং টাইটেল ট্যাগের উপস্থিতি, প্রাসঙ্গিক কিওয়ার্ড ব্যবহার, এবং আপনার ওয়েবসাইট কন্টেন্টের স্ট্রাকচার gibi ফ্যাক্টর দ্বারা প্রভাবিত হয়। স্কোর নিচের অডিটগুলোর স্কোর গড় করে ক্যালকুলেট করা হয়:

• Document Title
• Description
• Headings
• Images
• Links
• Meta Description
• Robots.txt

আরও পড়ুন: ২৭টি সেরা ফ্রি ওয়েবসাইট হোস্টিং সার্ভিস

রেজাল্ট কীভাবে ইন্টারপ্রেট করবেন

Lighthouse প্রতিটি র মেট্রিক ভ্যালুকে ০ থেকে ১০০ স্কেলে একটি মেট্রিক স্কোরে রূপান্তর করে। যত বেশি স্কোর, তত ভালো। মেট্রিক স্কোরগুলো এই রেঞ্জ অনুযায়ী রঙিন করা হয়:

• ০ থেকে ৪৯ (লাল ত্রিভুজ): Poor
• ৫০ থেকে ৮৯ (নারাঞ্জি বর্গ): Needs Improvement
• ৯০ থেকে ১০০ (সবুজ বৃত্ত): Good

একই ওয়েবসাইটে টেস্ট চালালে, সামগ্রিক স্কোরে ফ্লাকচুয়েশন দেখা যাবে। এই পরিবর্তনশীলতার জন্য বেশ কিছু কারণ দায়ী।

• প্রতিটি অ্যানালাইসিস শুধু একটি পেজ লোডের পারফরম্যান্সে ইনসাইট দেয়। যেহেতু দুটি পেজ লোড একই নয়, লোড টাইম স্বাভাবিকভাবে ভিন্ন হতে পারে।
• পেজ স্পিড ডাইনামিক কন্টেন্ট যেমন অ্যাড বা ঘুরে যাওয়া এলিমেন্ট, ব্রাউজার এক্সটেনশন যা নেটওয়ার্ক রিকোয়েস্ট পরিবর্তন করে এবং পিসিতে ব্যাকগ্রাউন্ড এক্টিভিটি দ্বারা প্রভাবিত হতে পারে।
• PageSpeed Insights এবং আপনার লোকাল কম্পিউটারের মতো ভিন্ন এনভায়রনমেন্টে প্রাপ্ত স্কোর সরাসরি তুলনামূলক নাও হতে পারে হার্ডওয়্যার এবং নেটওয়ার্ক কন্ডিশনে পার্থক্যের কারণে।

আপনার Lighthouse স্কোর কীভাবে উন্নত করবেন

Lighthouse ল্যাব ডেটা (সিমুলেটেড টেস্ট) এবং ফিল্ড ডেটা (রিয়েল ইউজার ডেটা) দুটোই দিয়ে একটি ওয়েব পেজের পারফরম্যান্স মূল্যায়ন করে। ফিল্ড ডেটা আসল ব্যবহারকারীরা সাইটটি কীভাবে অভিজ্ঞতা পায় সেটি নিয়ে ইনসাইট দেয়, যখন ল্যাব ডেটা পরিবর্তন এবং উন্নতি টেস্ট করার জন্য উপযোগী।

পারফরম্যান্স ডোমেইনের সুপারিশগুলোতে ফোকাস করে শুরু করুন। একটি দ্রুত-লোড হওয়া ওয়েবসাইট ইউজার এক্সপেরিয়েন্স উন্নত করবে এবং আপনার SEO র‍্যাঙ্ক বাড়াতে পারে। আপনার পারফরম্যান্স স্কোর উন্নত হলে, আপনি অন্যান্য এলিয়ার সুপারিশগুলোতে ফোকাস করা শুরু করতে পারেন। কারণ অ্যাক্সেসিবিলিটি এবং SEO আপনার ওয়েবসাইটের সামগ্রিক গুণমানের অপরিহার্য কম্পোনেন্ট, এতে পরিশ্রম দেয়া ওয়ার্থ।

আরও পড়ুন: Zyro vs Wix: কোন ওয়েবসাইট বিল্ডার বেছে নেবেন?

শুরুর জন্য বোনাস টিপস

আপনি যদি আপনার ওয়েবসাইট ডিজাইন ও লঞ্চ করে ফেলেছেন, তবে এখানে কিছু আরও পয়েন্টার আছে যা আপনার মনে রাখা উচিত:

• Lighthouse রিপোর্টের無數 সুপারিশে অভিভূত হবেন না। সবচেয়ে গুরুত্বপূর্ণ পরামর্শ দিয়ে শুরু করুন এবং লিস্টের নিচে দিকে নামুন।
• Lighthouse রিপোর্ট ব্যবহার করতে পারেন আপনার প্রগতি ট্র্যাক করতে সময়ের সাথে সাথে। আপনি সুপারিশগুলো ইমপ্লিমেন্ট করলে আপনার Lighthouse রেটিং উন্নত হবে।
• অনেক ডিভাইস এবং ব্রাউজারে আপনার ওয়েবসাইট টেস্ট করতে ভুলবেন না। যেহেতু Lighthouse রিপোর্ট একটি সিঙ্গেল টেস্টের ভিত্তিতে, তাই আপনার ওয়েবসাইট একাধিক ডিভাইস এবং ব্রাউজার এ টেস্ট করা Криটিক্যাল যাতে সেটি সব ইউজারের জন্য ভালো কাজ করে।

আশা করি আমাদের গাইড আপনাকে বুঝতে সাহায্য করেছে কীভাবে আপনার ওয়েবসাইটের পারফরম্যান্স টেস্ট করার জন্য Google Lighthouse ব্যবহার করতে হয় এবং সেটি entsprechende উন্নত করতে। আপনার কোনো প্রশ্ন বা সুপারিশ থাকলে, কমেন্ট সেকশনে জানাতে ভুলবেন না। TechCult-এর সাথে থাকুন আরও এমন ইনফরমেটিভ ব্লগের জন্য।