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

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

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

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

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

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

1. যেকোন ওয়েব ব্রাউজারে Lighthouse এক্সটেনশনের জন্য Chrome ওয়েব স্টোর পৃষ্ঠাতে যান।

2. Chrome এ যোগ করুন এ ক্লিক করুন৷ .

3. এক্সটেনশন যোগ করুন নির্বাচন করুন৷ নিশ্চিত করতে।

4. একবার যোগ করার পরে, আপনি যে ব্রাউজারে বিশ্লেষণ করতে চান ওয়েবসাইটটি চালু করুন৷

5. এক্সটেনশন (ধাঁধা) আইকনে ক্লিক করুন ঠিকানা বারের পাশে এবং বাতিঘর নির্বাচন করুন .

6. প্রতিবেদন তৈরি করুন-এ ক্লিক করুন .

এটাই! কয়েক সেকেন্ডের মধ্যে, লাইটহাউস একটি বিশদ প্রতিবেদন তৈরি করবে যে ওয়েবসাইটটির জন্য আপনি পরীক্ষা দিয়েছেন।

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

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

1. PageSpeed Insights ওয়েবসাইট দেখুন৷

2. পাঠ্য ক্ষেত্রে ওয়েবসাইটের URL লিখুন এবং বিশ্লেষণ এ ক্লিক করুন৷ .

একবার পরীক্ষা করা হয়ে গেলে, আপনি Chrome ব্যবহারকারীর অভিজ্ঞতার প্রতিবেদন পাবেন যা প্রকৃত ব্যবহারকারীদের অভিজ্ঞতার ফলাফল দেখায়।

নির্ণয় কর্মক্ষমতা সমস্যা বিভাগ Lighthouse স্কোর প্রতিনিধিত্ব করে। আপনি মোবাইল এবং ডেস্কটপ উভয়ের জন্য ফলাফল পরীক্ষা করতে পারেন।

পদ্ধতি 3:DevTools-এ লাইটহাউস চালান

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

1. আপনি যে ওয়েবসাইটটি অডিট করতে চান সেটিতে যান৷

2. পৃষ্ঠার যেকোনো জায়গায় ডান-ক্লিক করুন এবং পরিদর্শন করুন নির্বাচন করুন৷ মেনু থেকে।

3. >> আইকনে ক্লিক করুন (আরো ট্যাব)৷ এবং বাতিঘর নির্বাচন করুন প্রসঙ্গ মেনু থেকে।

4. পৃষ্ঠা লোড বিশ্লেষণ করুন-এ ক্লিক করুন৷ উপরের ডানদিকে বোতামটি চাপুন এবং ফলাফল প্রস্তুত না হওয়া পর্যন্ত অপেক্ষা করুন৷

দ্রষ্টব্য: ডিভাইস নির্বাচন করুন যথাযথভাবে এবং সমস্ত বিভাগ রাখুন সক্রিয় 

আপনি মোড পরিবর্তন করতে পারেন. DevTools-এ Lighthouse তিনটি পরীক্ষার মোড প্রদান করে:

• নেভিগেশন: কর্মক্ষমতা, অ্যাক্সেসিবিলিটি এবং এসইও সহ সামগ্রিক ফলাফল প্রদর্শন করে।

• সময়কাল: একটি পৃষ্ঠা লোড হতে এবং সার্ফারের সাথে ইন্টারঅ্যাক্ট করতে কতক্ষণ সময় নেয় তার উপর ভিত্তি করে ফলাফল দেখায়। পরীক্ষা চলাকালীন আপনাকে পৃষ্ঠাটির সাথে যোগাযোগ করতে হবে৷

• স্ন্যাপশট: বর্তমান পৃষ্ঠার জন্য স্কোর গণনা করে

এছাড়াও পড়ুন: 31টি সেরা ওয়েব স্ক্র্যাপিং টুলস

পদ্ধতি 4:কমান্ড লাইন সহ লাইটহাউস মডিউল ব্যবহার করুন

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

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

npm install -g lighthouse

2. একবার ইন্সটল করার পর, একটি বাতিঘর পরীক্ষা করতে নিম্নলিখিত কমান্ডটি চালান:

lighthouse -- view <url>

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

lighthouse --help

কিভাবে লাইটহাউস স্কোর গণনা করে

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

পারফরম্যান্স

লাইটহাউস একটি ওয়েব পৃষ্ঠা কত দ্রুত লোড হয় তা বিশ্লেষণ করে। কর্মক্ষমতা স্কোর গণনা করা হয় নিম্নলিখিত মেট্রিকগুলিকে বিবেচনায় নিয়ে –

• ফার্স্ট কনটেন্টফুল পেইন্ট (FCP):  কন্টেন্ট থেকে প্রথম উপাদানটি কত দ্রুত স্ক্রিনে আঁকা হয়
• লার্জেস্ট কনটেন্টফুল পেইন্ট (LCP):  সর্ববৃহৎ বিষয়বস্তুর উপাদান দৃশ্যমান হতে যে সময় লাগে তা পরিমাপ করে
• ক্রমবর্ধমান লেআউট শিফট (CLS): পৃষ্ঠার চাক্ষুষ স্থায়িত্ব মূল্যায়ন করতে পৃষ্ঠা লোডের সময় ঘটে যাওয়া অপ্রত্যাশিত লেআউট পরিবর্তনের পরিমাণ পরিমাপ করে। নিম্ন CLS নির্দেশ করে যে ওয়েবসাইটটি স্থিতিশীল। 
• মোট ব্লক করার সময়:  মূল থ্রেডটি ব্লক করা এবং ব্যবহারকারীর ইনপুটের প্রতি প্রতিক্রিয়াশীল নয় এমন সময় পরিমাপ করে৷
• গতি সূচক:  পৃষ্ঠার সমস্ত বিষয়বস্তু কত দ্রুত দৃশ্যমান হয় তা নির্দেশ করে

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

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

অ্যাক্সেসিবিলিটি

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

• ছবির জন্য Alt পাঠ্য: পৃষ্ঠার সমস্ত ছবিতে উপযুক্ত এবং বর্ণনামূলক অল্ট টেক্সট থাকা উচিত, কারণ এটি দৃশ্যমান প্রতিবন্ধী ব্যবহারকারীদের জন্য প্রয়োজনীয় যারা চিত্রগুলি ব্যাখ্যা করার জন্য স্ক্রিন রিডারদের উপর নির্ভর করে৷
• অর্থবোধক HTML: শিরোনাম, শিরোনাম, তালিকা ইত্যাদির মতো শব্দার্থিক HTML উপাদানগুলির সঠিক ব্যবহার স্ক্রিন রিডার এবং অন্যান্য সহায়ক সফ্টওয়্যারকে পৃষ্ঠার গঠন বুঝতে সাহায্য করে
• রঙের বৈসাদৃশ্য: টেক্সট এবং এর পটভূমির মধ্যে রঙের বৈসাদৃশ্য ওয়েব সামগ্রী অ্যাক্সেসিবিলিটি নির্দেশিকা দ্বারা নির্ধারিত মান পূরণ করা উচিত। পর্যাপ্ত রঙের বৈসাদৃশ্য নিশ্চিত করে যে পাঠ্যটি দুর্বল দৃষ্টি বা বর্ণান্ধতার জন্য পাঠযোগ্য। 

এছাড়াও পড়ুন: ChatGPT

সর্বোত্তম অনুশীলন

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

• বড় জাভাস্ক্রিপ্ট লাইব্রেরি এড়িয়ে চলুন
• অব্যবহৃত CSS এড়িয়ে চলুন
• টেক্সট কম্প্রেশন সক্ষম করুন
• রেন্ডার-ব্লকিং রিসোর্স বাদ দিন
• লিভারেজ ব্রাউজার ক্যাশিং
• একটি দক্ষ ক্যাশে নীতির সাথে স্ট্যাটিক সম্পদ পরিবেশন করুন

SEO

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

• নথির শিরোনাম
• বর্ণনা
• শিরোনাম
• ছবি
• লিঙ্কগুলি
• মেটা বর্ণনা
• Robots.txt

এছাড়াও পড়ুন: 27 সেরা ফ্রি ওয়েবসাইট হোস্টিং পরিষেবা

কীভাবে ফলাফল ব্যাখ্যা করতে হয়

লাইটহাউস প্রতিটি কাঁচা মেট্রিক মানকে 0 থেকে 100 এর মেট্রিক স্কোরে রূপান্তর করে। স্কোর যত বেশি হবে, তত ভাল। মেট্রিক্স স্কোর এই রেঞ্জ অনুযায়ী রঙিন হয়:

• 0 থেকে 49 (লাল ত্রিভুজ):খারাপ
• 50 থেকে 89 (কমলা স্কোয়ার):উন্নতি প্রয়োজন
• 90 থেকে 100 (সবুজ বৃত্ত):ভাল

একই ওয়েবসাইটে পরীক্ষা চালানোর সময়, সামগ্রিক স্কোরের ওঠানামা পর্যবেক্ষণ করা সাধারণ। এই পরিবর্তনশীলতা বিভিন্ন কারণের জন্য দায়ী করা যেতে পারে।

• প্রতিটি বিশ্লেষণ শুধুমাত্র একটি পৃষ্ঠা লোডের কার্যকারিতার অন্তর্দৃষ্টি প্রদান করে। যেহেতু কোনো দুই-পৃষ্ঠার লোড অভিন্ন নয়, তাই লোডের সময় স্বাভাবিকভাবেই ভিন্ন হতে পারে। 
• পৃষ্ঠার গতি গতিশীল সামগ্রীর উপস্থিতি দ্বারা প্রভাবিত হতে পারে, যেমন বিজ্ঞাপন বা ঘন ঘন পরিবর্তন করা উপাদান, ব্রাউজার এক্সটেনশন যা নেটওয়ার্ক অনুরোধ এবং পিসিতে ব্যাকগ্রাউন্ড কার্যকলাপ পরিবর্তন করে।
• পেজস্পিড ইনসাইটস এবং আপনার স্থানীয় কম্পিউটারের মতো বিভিন্ন পরিবেশে প্রাপ্ত স্কোরগুলি হার্ডওয়্যার এবং নেটওয়ার্ক অবস্থার পার্থক্যের কারণে সরাসরি তুলনীয় নাও হতে পারে।

কিভাবে আপনার লাইটহাউস স্কোর উন্নত করবেন

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

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

এছাড়াও পড়ুন: জাইরো বনাম উইক্স:আপনার কোন ওয়েবসাইট নির্মাতা বেছে নেওয়া উচিত?

নতুনদের জন্য বোনাস টিপস

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

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

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