I/O 2019 থেকে তিনটি নতুন ওয়েব পারফরম্যান্স লঞ্চ সম্পর্কে জানুন।
Google I/O 2019-এ "স্পীড অ্যাট স্কেল" টক চলাকালীন, আমরা তিনটি জিনিস ঘোষণা করেছি যা আমরা আশা করি আগামী বছরে ওয়েব পারফরম্যান্স উন্নত করবে।
লাইটহাউস এখন পারফরম্যান্স বাজেটিং সমর্থন করে
লাইটওয়ালেট হল লাইটহাউসের একটি নতুন বৈশিষ্ট্য যা পারফরম্যান্স বাজেটের জন্য সমর্থন যোগ করে। কর্মক্ষমতা বাজেট আপনার সাইটের কর্মক্ষমতা জন্য মান স্থাপন. আরও গুরুত্বপূর্ণ, তারা শিপ করার আগে পারফরম্যান্স রিগ্রেশন সনাক্ত করা এবং ঠিক করা সহজ করে তোলে।
লাইটওয়ালেট লাইটহাউস CLI-এর নতুন সংস্করণে উপলব্ধ এবং সেট আপ হতে মাত্র কয়েক মিনিট সময় লাগে৷ এই নির্দেশাবলী আরো তথ্য প্রদান করে.
আপনার বাজেট কি হওয়া উচিত তা নিশ্চিত না? আমাদের পরীক্ষামূলক পারফরম্যান্স বাজেট ক্যালকুলেটর ব্যবহার করে দেখুন যা একটি লাইটওয়ালেট সামঞ্জস্যপূর্ণ বাজেট কনফিগারেশন তৈরি করতে পারে।
ব্রাউজার-লেভেল ইমেজ এবং আইফ্রেম অলস লোডিং ওয়েবে আসে
ওয়েব পৃষ্ঠাগুলিতে প্রায়শই প্রচুর সংখ্যক ছবি থাকে, যা ডেটা-ব্যবহার, পৃষ্ঠা-ব্লোট এবং ধীরে ধীরে পৃষ্ঠা লোড করতে অবদান রাখে। এই ছবিগুলির মধ্যে অনেকগুলি অফস্ক্রিন, সেগুলি দেখার জন্য ব্যবহারকারীকে স্ক্রোল করতে হবে৷
এখন অবধি, আপনাকে একটি জাভাস্ক্রিপ্ট লাইব্রেরি ব্যবহার করে অলস লোডিং চিত্রগুলি সমাধান করতে হবে তবে এটি শীঘ্রই পরিবর্তন হতে পারে। এই গ্রীষ্মে, Chrome লোডিং অ্যাট্রিবিউটের জন্য সমর্থন চালু করবে যা ওয়েবে প্রমিত <img> এবং <iframe> অলস লোডিং নিয়ে আসে।
loading বৈশিষ্ট্য একটি ব্রাউজারকে অফস্ক্রিন চিত্র এবং আইফ্রেমগুলি লোড করা পিছিয়ে দেওয়ার অনুমতি দেয় যতক্ষণ না ব্যবহারকারীরা তাদের কাছাকাছি স্ক্রোল করে। loading তিনটি মান সমর্থন করে:
-
lazy: অলস লোডিংয়ের জন্য একটি ভাল প্রার্থী। -
eager: অলস লোডিং জন্য একটি ভাল প্রার্থী নয়. এখুনি লোড করুন। -
auto: ব্রাউজার অলসভাবে লোড করবে কি না তা নির্ধারণ করবে।
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
"যখন ব্যবহারকারী কাছাকাছি স্ক্রোল করে" এর সঠিক হিউরিস্টিক ব্রাউজারে ছেড়ে দেওয়া হয়। সাধারণভাবে, আমাদের আশা হল যে ব্রাউজারগুলি ভিউপোর্টে আসার একটু আগে বিলম্বিত ছবি এবং আইফ্রেম সামগ্রী আনতে শুরু করবে।
loading অ্যাট্রিবিউটটি Chrome ক্যানারিতে পতাকার পিছনে প্রয়োগ করা হয়েছে। আপনি Chrome 75+ এ about://flags/#enable-lazy-image-loading এবং about://flags/#enable-lazy-frame-loading পতাকা চালু করে এই ডেমোটি ব্যবহার করে দেখতে পারেন৷
অলস লোডিং বৈশিষ্ট্যের উপর একটি লেখা-আপ আরও বিশদ সহ উপলব্ধ।
গুগল ফন্ট এখন একটি ক্যোয়ারী প্যারামিটার হিসাবে ফন্ট-ডিসপ্লে সমর্থন করে
আমরা ঘোষণা করেছি ফন্ট-ডিসপ্লে- এর জন্য সমর্থন এখন প্রদর্শন ক্যোয়ারী-স্ট্রিং প্যারামিটারের মাধ্যমে সমস্ত Google ফন্টের জন্য উৎপাদনে উপলব্ধ:
https://fonts.googleapis.com/css?family=Lobster&display=swap
font-display বর্ণনাকারী আপনাকে সিদ্ধান্ত নিতে দেয় যে আপনার ওয়েব ফন্টগুলি কীভাবে রেন্ডার করবে বা ফলব্যাক করবে, তাদের লোড হতে কতক্ষণ সময় লাগে তার উপর নির্ভর করে। এটি auto , block , swap , fallback এবং optional সহ বেশ কয়েকটি মান সমর্থন করে।
পূর্বে, Google ফন্ট থেকে ওয়েব ফন্টের জন্য font-display নির্দিষ্ট করার একমাত্র উপায় ছিল সেগুলিকে স্ব-হোস্ট করা কিন্তু এই পরিবর্তনটি তা করার প্রয়োজনকে সরিয়ে দেয়।
ডিফল্ট কোড এম্বেডগুলিতে font-display অন্তর্ভুক্ত করার জন্য Google ফন্ট ডকুমেন্টেশন আপডেট করা হয়েছে (নিচে মনে হচ্ছে)। আমরা আশা করি এটি আরও বিকাশকারীদের এই উত্তেজনাপূর্ণ সংযোজনটি চেষ্টা করতে উত্সাহিত করবে৷
এখানে একাধিক ফন্ট ফ্যামিলির সাথে ডিসপ্লে ব্যবহারের ত্রুটির একটি ডেমো রয়েছে। font-display: swap এর প্রভাব দেখতে DevTools নেটওয়ার্ক ইমুলেশন দিয়ে এটি ব্যবহার করে দেখুন।
আরো জন্য দেখুন
আমাদের আলোচনা ব্যবহারকারী-অভিজ্ঞতা উন্নত করার জন্য উন্নত কর্মক্ষমতা নিদর্শন ব্যবহার করার জন্য বেশ কয়েকটি প্রোডাকশন কেস স্টাডিও কভার করেছে। এর মধ্যে রয়েছে ইমেজ সিডিএন, ব্রোটলি কম্প্রেশন , স্মার্ট জাভাস্ক্রিপ্ট পরিবেশন এবং তাদের পৃষ্ঠাগুলির গতি বাড়ানোর জন্য প্রিফেচিং। আরও জানতে আলোচনা দেখুন :)