ওভারভিউ

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

বাতিঘরের লোগো

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

এছাড়াও আপনি আপনার সাইটে রিগ্রেশন প্রতিরোধ করতে Lighthouse CI ব্যবহার করতে পারেন।

কিভাবে Lighthouse ব্যবহার এবং অবদান রাখতে হয় সে সম্পর্কে আরও জানতে Google I/O থেকে নীচের ভিডিওটি দেখুন।

এবার শুরু করা যাক

আপনার জন্য সবচেয়ে উপযুক্ত বাতিঘর কর্মপ্রবাহ চয়ন করুন:

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

Chrome DevTools-এ লাইটহাউস চালান

Chrome DevTools-এ Lighthouse এর নিজস্ব প্যানেল আছে। একটি প্রতিবেদন চালানোর জন্য:

  1. ডেস্কটপের জন্য গুগল ক্রোম ডাউনলোড করুন।
  2. Google Chrome-এ, আপনি যে ইউআরএলটি অডিট করতে চান সেটিতে যান। আপনি ওয়েবে যেকোনো URL অডিট করতে পারেন।
  3. Chrome DevTools খুলুন
  4. লাইটহাউস ট্যাবে ক্লিক করুন।

    Chrome DevTools-এর লাইটহাউস প্যানেল
    বাম দিকে পৃষ্ঠার ভিউপোর্ট যা অডিট করা হবে। ডানদিকে Chrome DevTools এর Lighthouse প্যানেল, যা Lighthouse দ্বারা চালিত

  5. পৃষ্ঠা লোড বিশ্লেষণ ক্লিক করুন. DevTools আপনাকে অডিট বিভাগের একটি তালিকা দেখায়। তাদের সব সক্রিয় ছেড়ে দিন.

  6. অডিট চালান ক্লিক করুন। 30 থেকে 60 সেকেন্ড পর, Lighthouse আপনাকে পৃষ্ঠায় একটি প্রতিবেদন দেয়।

    Chrome DevTools-এ একটি বাতিঘর প্রতিবেদন
    Chrome DevTools-এ একটি বাতিঘর প্রতিবেদন

নোড কমান্ড লাইন টুল ইনস্টল করুন এবং চালান

নোড মডিউল ইনস্টল করতে:

  1. ডেস্কটপের জন্য গুগল ক্রোম ডাউনলোড করুন।
  2. নোডের বর্তমান দীর্ঘ-মেয়াদী সমর্থন সংস্করণ ইনস্টল করুন।
  3. বাতিঘর ইনস্টল করুন। -g পতাকা এটি একটি বিশ্বব্যাপী মডিউল হিসাবে ইনস্টল করে।
npm install -g lighthouse

একটি অডিট চালানোর জন্য:

lighthouse <url>

সমস্ত বিকল্প দেখতে:

lighthouse --help

প্রোগ্রামে নোড মডিউল চালান

একটি নোড মডিউল হিসাবে লাইটহাউস প্রোগ্রাম্যাটিকভাবে চালানোর উদাহরণের জন্য প্রোগ্রাম্যাটিকভাবে ব্যবহার করা দেখুন।

PageSpeed ​​Insights চালান

PageSpeed ​​Insights এ Lighthouse চালানোর জন্য:

  1. PageSpeed ​​Insights- এ নেভিগেট করুন।
  2. একটি ওয়েব পৃষ্ঠা URL লিখুন.
  3. বিশ্লেষণ ক্লিক করুন.

    PageSpeed ​​অন্তর্দৃষ্টি UI
    PageSpeed ​​অন্তর্দৃষ্টি UI

ক্রোম এক্সটেনশন হিসাবে লাইটহাউস চালান

এক্সটেনশন ইনস্টল করতে:

  1. ডেস্কটপের জন্য গুগল ক্রোম ডাউনলোড করুন।
  2. ক্রোম ওয়েবস্টোর থেকে লাইটহাউস ক্রোম এক্সটেনশন ইনস্টল করুন।

একটি অডিট চালানোর জন্য:

  1. Chrome-এ, আপনি যে পৃষ্ঠাটি অডিট করতে চান সেখানে যান।
  2. ক্লিক করুন বাতিঘর এক্সটেনশন আইকন বাতিঘর। এটি Chrome ঠিকানা বারের পাশে থাকা উচিত। যদি না হয়, Chrome এর এক্সটেনশন মেনু খুলুন এবং সেখান থেকে এটি অ্যাক্সেস করুন। ক্লিক করার পরে, বাতিঘর মেনু প্রসারিত হয়।

    বাতিঘর এক্সটেনশন
    বাতিঘর এক্সটেনশন প্যানেল

  3. রিপোর্ট তৈরি করুন ক্লিক করুন। Lighthouse বর্তমান-কেন্দ্রিক পৃষ্ঠার বিরুদ্ধে তার অডিট চালায়, তারপর ফলাফলের একটি প্রতিবেদন সহ একটি নতুন ট্যাব খোলে৷

    বাতিঘর এক্সটেনশন রিপোর্ট
    এক্সটেনশন থেকে একটি বাতিঘর রিপোর্ট

শেয়ার করুন এবং অনলাইন রিপোর্ট দেখুন

অনলাইনে রিপোর্ট দেখতে এবং শেয়ার করতে Lighthouse Viewer ব্যবহার করুন।

বাতিঘর দর্শক
বাতিঘর দর্শক

JSON হিসেবে রিপোর্ট শেয়ার করুন

লাইটহাউস ভিউয়ারের একটি লাইটহাউস রিপোর্টের JSON আউটপুট প্রয়োজন। আপনি কোন লাইটহাউস ওয়ার্কফ্লো ব্যবহার করছেন তার উপর নির্ভর করে নীচের তালিকাটি কীভাবে JSON আউটপুট পেতে হয় তা ব্যাখ্যা করে:

  • বাতিঘর রিপোর্ট । উপরের ডানদিকে খুলুন মেনু আইকন মেনু এবং ক্লিক করুন JSON বোতাম হিসাবে সংরক্ষণ করুন JSON হিসাবে সংরক্ষণ করুন
  • কমান্ড লাইন । চালান: shell lighthouse --output json --output-path <path/for/output.json>

রিপোর্ট ডেটা দেখতে:

  1. লাইটহাউস ভিউয়ার খুলুন।
  2. JSON ফাইলটিকে ভিউয়ারে টেনে আনুন, অথবা আপনার ফাইল নেভিগেটর খুলতে এবং ফাইলটি নির্বাচন করতে ভিউয়ারের যেকোনো জায়গায় ক্লিক করুন।

GitHub Gists হিসাবে রিপোর্ট শেয়ার করুন

আপনি যদি JSON ফাইলগুলি ম্যানুয়ালি পাস করতে না চান তবে আপনি গোপন GitHub সারাংশ হিসাবে আপনার প্রতিবেদনগুলি ভাগ করতে পারেন৷ সারাংশের একটি সুবিধা হল বিনামূল্যে সংস্করণ নিয়ন্ত্রণ।

রিপোর্ট থেকে সারাংশ হিসাবে একটি প্রতিবেদন রপ্তানি করতে:

  1. (যদি ইতিমধ্যেই ভিউয়ারে থাকে তবে এই ধাপটি এড়িয়ে যান) উপরের-ডানদিকে খুলুন মেনু আইকন মেনু, তারপর ক্লিক করুন ভিউয়ার বোতামে খুলুন ভিউয়ারে খুলুন । প্রতিবেদনটি ভিউয়ারে খোলে, যা https://googlechrome.github.io/lighthouse/viewer/ এ অবস্থিত।
  2. ভিউয়ারে, উপরের-ডানদিকে খুলুন মেনু আইকন মেনু, তারপর ক্লিক করুন ভিউয়ার বোতামে খুলুন সারাংশ হিসাবে সংরক্ষণ করুন . আপনি যখন প্রথমবার এটি করবেন, একটি পপআপ আপনার মৌলিক গিটহাব ডেটা অ্যাক্সেস করার এবং আপনার সারাংশ পড়তে এবং লিখতে অনুমতি চায়।

Lighthouse-এর CLI সংস্করণ থেকে সারাংশ হিসাবে একটি প্রতিবেদন রপ্তানি করতে, ম্যানুয়ালি একটি সারাংশ তৈরি করুন এবং প্রতিবেদনের JSON আউটপুটটি সারাংশে কপি-পেস্ট করুন৷ JSON আউটপুট ধারণকারী সারাংশ ফাইলের নাম অবশ্যই .lighthouse.report.json এ শেষ হতে হবে। কমান্ড লাইন টুল থেকে কিভাবে JSON আউটপুট জেনারেট করতে হয় তার উদাহরণের জন্য JSON হিসেবে রিপোর্ট শেয়ার করুন।

সারাংশ হিসাবে সংরক্ষিত একটি প্রতিবেদন দেখতে:

  • দর্শকের URL-এ ?gist=<ID> যোগ করুন, যেখানে <ID> হল সারাংশের ID। text https://googlechrome.github.io/lighthouse/viewer/?gist=<ID>
  • ভিউয়ার খুলুন এবং এতে একটি সারাংশের URL পেস্ট করুন।

বাতিঘর সম্প্রসারণযোগ্যতা

Lighthouse এর লক্ষ্য হল নির্দেশিকা প্রদান করা যা সমস্ত ওয়েব ডেভেলপারদের জন্য প্রাসঙ্গিক এবং কার্যকর। এই লক্ষ্যে, দুটি বৈশিষ্ট্য উপলব্ধ রয়েছে যা আপনাকে আপনার নির্দিষ্ট প্রয়োজন অনুসারে বাতিঘর তৈরি করতে দেয়।

স্ট্যাক প্যাক

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

"স্ট্যাক প্যাকগুলি" লাইটহাউসকে আপনার সাইটটি কোন প্ল্যাটফর্মে তৈরি করা হয়েছে তা সনাক্ত করতে এবং নির্দিষ্ট স্ট্যাক-ভিত্তিক সুপারিশগুলি প্রদর্শন করার অনুমতি দেয়। এই সুপারিশগুলি সম্প্রদায়ের বিশেষজ্ঞদের দ্বারা সংজ্ঞায়িত এবং কিউরেট করা হয়।

একটি স্ট্যাক প্যাকে অবদান রাখতে, অবদানের নির্দেশিকা পর্যালোচনা করুন।

বাতিঘর প্লাগইন

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

কীভাবে আপনার নিজের প্লাগইন তৈরি করবেন সে সম্পর্কে আরও তথ্যের জন্য, লাইটহাউস গিটহাব রেপোতে আমাদের প্লাগইন হ্যান্ডবুকটি দেখুন।

ইন্টিগ্রেট বাতিঘর

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

বাতিঘর অবদান

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