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