PRPL হল একটি সংক্ষিপ্ত রূপ যা ওয়েব পৃষ্ঠাগুলিকে লোড করতে এবং দ্রুত ইন্টারেক্টিভ হওয়ার জন্য ব্যবহৃত একটি প্যাটার্ন বর্ণনা করে:
- দেরিতে আবিষ্কৃত সম্পদ প্রিলোড করুন ।
- যত তাড়াতাড়ি সম্ভব প্রাথমিক রুট রেন্ডার করুন ।
- প্রাক-ক্যাশে অবশিষ্ট সম্পদ।
- অলস লোড অন্যান্য রুট এবং অ-গুরুত্বপূর্ণ সম্পদ.
এই নির্দেশিকাটিতে, শিখুন কিভাবে এই কৌশলগুলির প্রতিটি একত্রে ফিট করে কিন্তু তারপরও কার্যক্ষমতা ফলাফল অর্জনের জন্য স্বাধীনভাবে ব্যবহার করা যেতে পারে।
Lighthouse সঙ্গে আপনার পৃষ্ঠা নিরীক্ষণ
PRPL কৌশলগুলির সাথে সামঞ্জস্যপূর্ণ উন্নতির সুযোগগুলি সনাক্ত করতে বাতিঘর চালান:
- DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
- লাইটহাউস ট্যাবে ক্লিক করুন।
- কর্মক্ষমতা এবং প্রগতিশীল ওয়েব অ্যাপ চেকবক্স নির্বাচন করুন।
- একটি প্রতিবেদন তৈরি করতে অডিট চালান ক্লিক করুন।
আরও তথ্যের জন্য, লাইটহাউসের সাথে পারফরম্যান্সের সুযোগগুলি আবিষ্কার করুন দেখুন।
প্রিলোড সমালোচনামূলক সম্পদ
একটি নির্দিষ্ট সংস্থান পার্স করা এবং দেরিতে আনা হলে Lighthouse নিম্নলিখিত ব্যর্থ অডিট দেখায়:
প্রিলোড হল একটি ঘোষণামূলক আনার অনুরোধ যা ব্রাউজারকে এমন একটি সংস্থানের অনুরোধ করতে বলে যা অন্যথায় ব্রাউজারের প্রিলোড স্ক্যানার দ্বারা আবিষ্কার করা যায় না, যেমন background-image বৈশিষ্ট্য দ্বারা উল্লেখিত একটি চিত্র। আপনার HTML ডকুমেন্টের মাথায় rel="preload" এর সাথে একটি <link> ট্যাগ যোগ করে দেরিতে আবিষ্কৃত সম্পদ প্রিলোড করুন:
<link rel="preload" as="image" href="hero-image.jpg">
একটি <link rel="preload"> নির্দেশিকা যোগ করা সেই সংস্থানের জন্য একটি অনুরোধ শুরু করবে এবং এটি ক্যাশে সংরক্ষণ করবে৷ ব্রাউজার তখন প্রয়োজনের সময় এটি পুনরুদ্ধার করতে সক্ষম হয়।
সমালোচনামূলক সংস্থানগুলি প্রিলোড করার বিষয়ে আরও তথ্যের জন্য, প্রিলোড সমালোচনামূলক সম্পদ নির্দেশিকা পড়ুন।
যত তাড়াতাড়ি সম্ভব প্রাথমিক রুট রেন্ডার করুন
আপনার সাইট স্ক্রিনে পিক্সেল রেন্ডার করার মুহূর্তে ফার্স্ট পেইন্টকে বিলম্বিত করে এমন সংস্থান থাকলে বাতিঘর একটি সতর্কতা প্রদান করে:
ফার্স্ট পেইন্টের উন্নতির জন্য, লাইটহাউস সমালোচনামূলক জাভাস্ক্রিপ্টকে ইনলাইন করার এবং async ব্যবহার করে বাকিগুলিকে পিছিয়ে দেওয়ার পাশাপাশি ভাঁজের উপরে ব্যবহৃত সমালোচনামূলক CSSকে ইনলাইন করার পরামর্শ দেয়। এটি রেন্ডার-ব্লকিং সম্পদ আনতে সার্ভারে রাউন্ড-ট্রিপ বাদ দিয়ে কর্মক্ষমতা উন্নত করে। যাইহোক, ইনলাইন কোড একটি উন্নয়ন দৃষ্টিকোণ থেকে বজায় রাখা কঠিন এবং ব্রাউজার দ্বারা আলাদাভাবে ক্যাশে করা যাবে না।
ফার্স্ট পেইন্ট উন্নত করার আরেকটি পদ্ধতি হল সার্ভার-সাইড আপনার পৃষ্ঠার প্রাথমিক HTML রেন্ডার করা । এটি ব্যবহারকারীর কাছে অবিলম্বে সামগ্রী প্রদর্শন করে যখন স্ক্রিপ্টগুলি এখনও আনা, পার্স করা এবং কার্যকর করা হচ্ছে। যাইহোক, এটি HTML ফাইলের পেলোড উল্লেখযোগ্যভাবে বৃদ্ধি করতে পারে, যা টাইম টু ইন্টারঅ্যাকটিভ এর ক্ষতি করতে পারে, অথবা আপনার অ্যাপ্লিকেশনটি ইন্টারেক্টিভ হতে যে সময় নেয় এবং ব্যবহারকারীর ইনপুটে সাড়া দিতে পারে।
আপনার অ্যাপ্লিকেশানে ফার্স্ট পেইন্ট কমানোর জন্য কোন একক সঠিক সমাধান নেই, এবং আপনার শুধুমাত্র ইনলাইনিং স্টাইল এবং সার্ভার-সাইড রেন্ডারিং বিবেচনা করা উচিত যদি সুবিধাগুলি আপনার অ্যাপ্লিকেশনের জন্য ট্রেডঅফের চেয়ে বেশি হয়। আপনি নিম্নলিখিত সংস্থানগুলির সাথে এই উভয় ধারণা সম্পর্কে আরও জানতে পারেন।
প্রাক-ক্যাশে সম্পদ
প্রক্সি হিসাবে কাজ করে, পরিষেবা কর্মীরা পুনরাবৃত্ত ভিজিট করার সময় সার্ভারের পরিবর্তে সরাসরি ক্যাশে থেকে সম্পদ আনতে পারে। এটি শুধুমাত্র ব্যবহারকারীদের অফলাইনে থাকাকালীন আপনার অ্যাপ্লিকেশন ব্যবহার করার অনুমতি দেয় না, তবে পুনরাবৃত্তি ভিজিট করার সময় দ্রুত পৃষ্ঠা লোড করার ফলাফলও দেয়।
একটি লাইব্রেরি যা প্রদান করতে পারে তার চেয়ে আপনার কাছে আরও জটিল ক্যাশিং প্রয়োজনীয়তা না থাকলে পরিষেবা কর্মী তৈরির প্রক্রিয়াটিকে সহজ করার জন্য একটি তৃতীয় পক্ষের লাইব্রেরি ব্যবহার করুন৷ উদাহরণস্বরূপ, ওয়ার্কবক্স এমন সরঞ্জামগুলির একটি সংগ্রহ সরবরাহ করে যা আপনাকে সম্পদ ক্যাশে করার জন্য একটি পরিষেবা কর্মী তৈরি এবং বজায় রাখার অনুমতি দেয়। পরিষেবা কর্মী এবং অফলাইন নির্ভরযোগ্যতা সম্পর্কে আরও তথ্যের জন্য, নির্ভরযোগ্যতা শেখার পথে পরিষেবা কর্মী নির্দেশিকা পড়ুন।
অলস লোড
আপনি নেটওয়ার্কের মাধ্যমে খুব বেশি ডেটা পাঠালে বাতিঘর একটি ব্যর্থ অডিট প্রদর্শন করে৷
এর মধ্যে সমস্ত সম্পদের ধরন অন্তর্ভুক্ত, তবে বড় জাভাস্ক্রিপ্ট পেলোডগুলি বিশেষত ব্যয়বহুল কারণ এটি ব্রাউজারকে পার্স করতে এবং কম্পাইল করতে সময় নেয়। উপযুক্ত হলে বাতিঘর এই জন্য একটি সতর্কতা প্রদান করে।
একটি ছোট জাভাস্ক্রিপ্ট পেলোড পাঠাতে যা শুধুমাত্র প্রয়োজনীয় কোড ধারণ করে যখন একজন ব্যবহারকারী প্রাথমিকভাবে আপনার অ্যাপ্লিকেশন লোড করে, চাহিদা অনুযায়ী সম্পূর্ণ বান্ডিল এবং অলস লোড অংশগুলিকে বিভক্ত করুন।
একবার আপনি আপনার বান্ডিলটি বিভক্ত করতে পরিচালিত হয়ে গেলে, আরও গুরুত্বপূর্ণ অংশগুলিকে প্রিলোড করুন ( প্রিলোড সমালোচনামূলক সম্পদ নির্দেশিকা দেখুন)। প্রিলোডিং নিশ্চিত করে যে ব্রাউজার দ্বারা আরও গুরুত্বপূর্ণ সংস্থান আনা এবং ডাউনলোড করা হবে।
চাহিদা অনুযায়ী বিভিন্ন জাভাস্ক্রিপ্ট খণ্ড বিভক্ত এবং লোড করার পাশাপাশি, লাইটহাউস অলস লোডিং অ-সমালোচনামূলক চিত্রগুলির জন্য একটি অডিটও প্রদান করে।
আপনি যদি আপনার ওয়েব পৃষ্ঠায় অনেকগুলি ছবি লোড করেন, একটি পৃষ্ঠা লোড করার সময় ভাঁজের নীচে বা ডিভাইস ভিউপোর্টের বাইরে থাকা সমস্তগুলিকে স্থগিত করুন (দেখুন চিত্রগুলিকে অলস লোড করতে lazysizes ব্যবহার করুন )৷
পরবর্তী পদক্ষেপ
এখন যেহেতু আপনি PRPL প্যাটার্নের পিছনের কিছু মৌলিক ধারণা বুঝতে পেরেছেন, আরও জানতে এই বিভাগে পরবর্তী নির্দেশিকাটি চালিয়ে যান। এটা মনে রাখা গুরুত্বপূর্ণ যে সমস্ত কৌশল একসাথে প্রয়োগ করার প্রয়োজন নেই। নিম্নলিখিত যে কোনো একটির সাথে করা যেকোনো প্রচেষ্টা লক্ষণীয় কর্মক্ষমতা উন্নতি প্রদান করবে।
- প্রিলোড সমালোচনামূলক সম্পদ.
- যত তাড়াতাড়ি সম্ভব প্রাথমিক রুট রেন্ডার করুন ।
- প্রাক-ক্যাশে অবশিষ্ট সম্পদ।
- অলস লোড অন্যান্য রুট এবং অ-গুরুত্বপূর্ণ সম্পদ.
আপনি PRPL নিদর্শন সম্পর্কে আরও পড়তে পারেন।