লাইটহাউসের সাথে আরও ভাল ওয়েব তৈরি করা

Google I/O থেকে, আমরা লাইটহাউসকে দুর্দান্ত প্রগতিশীল ওয়েব অ্যাপস তৈরির জন্য একটি দুর্দান্ত সহচর তৈরি করে কঠোর পরিশ্রম করেছি:

আজ, আমরা লাইটহাউসের 1.3 রিলিজ ঘোষণা করতে পেরে আনন্দিত। লাইটহাউস 1.3-এ একগুচ্ছ বড় নতুন বৈশিষ্ট্য, অডিট এবং সাধারণ বাগ ফিক্স অন্তর্ভুক্ত রয়েছে। আপনি এটি npm ( npm i -g lighthouse ) থেকে ইনস্টল করতে পারেন বা Chrome ওয়েব স্টোর থেকে এক্সটেনশনটি ডাউনলোড করতে পারেন

নতুন কি আছে?

নতুন চেহারা এবং অনুভূতি

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

বাতিঘর রিপোর্ট

নতুন সেরা অভ্যাস

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

"ডু বেটার ওয়েব" হল লাইটহাউস প্রজেক্টের মধ্যে একটি প্রচেষ্টা যা ডেভেলপারদের ওয়েবে আরও ভাল করতে সাহায্য করে৷ অন্য কথায়, তাদের ওয়েব অ্যাপ্লিকেশনগুলিকে আধুনিক ও অপ্টিমাইজ করতে সাহায্য করুন। প্রায়শই, ওয়েব devs পুরানো অনুশীলন, অ্যান্টি-প্যাটার্ন ব্যবহার করে বা এটি উপলব্ধি না করেই পরিচিত পারফরম্যান্সের ত্রুটিগুলিকে আঘাত করে। উদাহরণস্বরূপ, এটি ব্যাপকভাবে পরিচিত যে JS-ভিত্তিক অ্যানিমেশনগুলি setInterval() এর পরিবর্তে requestAnimationFrame() দিয়ে করা উচিত। যাইহোক, যদি বিকাশকারী নতুন API সম্পর্কে অবগত না হন তবে তাদের ওয়েব অ্যাপটি অকারণে ক্ষতিগ্রস্ত হয়।

Lighthouse 1.3-এ 20+ নতুন সেরা অনুশীলনের পরামর্শ রয়েছে যার মধ্যে রয়েছে CSS এবং JavaScript বৈশিষ্ট্যগুলিকে আধুনিকীকরণের জন্য টিপস থেকে শুরু করে পারফরম্যান্স সুপারিশগুলি যেমন: "রেন্ডার-ব্লকিং সম্পদের সংখ্যা হ্রাস করুন", "স্ক্রলিং কর্মক্ষমতা উন্নত করতে প্যাসিভ ইভেন্ট শ্রোতাদের ব্যবহার করুন"।

ভাল ওয়েব সেরা অনুশীলন করুন.

আমরা সময়ের সাথে সাথে আরও সুপারিশ যোগ করতে থাকব। আপনার যদি সেরা অনুশীলনের জন্য পরামর্শ থাকে বা আমাদের একটি অডিট লিখতে সাহায্য করতে চান, GitHub-এ একটি সমস্যা ফাইল করুন

রিপোর্ট ভিউয়ার

শেষ কিন্তু অন্তত নয়, আমরা লাইটহাউস ফলাফলের জন্য একটি নতুন ওয়েব ভিউয়ার ঘোষণা করতে পেরে উত্তেজিত। googlechrome.github.io/lighthouse/viewer- এ যান, একটি Lighthouse রানের আউটপুট টেনে আনুন এবং ড্রপ করুন (বা আপনার ফাইল আপলোড করতে ক্লিক করুন), এবং ভয়েলা৷ "ইন্সটা" লাইটহাউস এইচটিএমএল রিপোর্ট।

প্রতিবেদন দর্শক।
রিপোর্ট ভিউয়ার

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

ভিউয়ার আর্কিটেকচার।
ভিউয়ার আর্কিটেকচার

URL-এ ?gist=GIST_ID যোগ করে বিদ্যমান প্রতিবেদনগুলি Lighthouse Viewer দ্বারা পুনরায় লোড করা যেতে পারে:

ভিউয়ার আর্কিটেকচার 2.
ভিউয়ার আর্কিটেকচার 2

লাইটহাউসের সর্বশেষ সব বিবরণের জন্য, GitHub-এ সম্পূর্ণ রিলিজ নোটগুলি দেখুন। বরাবরের মতো, বাগ রিপোর্ট করতে , ফাইল বৈশিষ্ট্যের অনুরোধ, বা আপনি পরবর্তীতে কী দেখতে চান সে সম্পর্কে চিন্তাভাবনা করতে আমাদের সাথে যোগাযোগ করুন৷