কীভাবে আপনার ওয়েবসাইটে চিত্র লোড করা অনুকূল করা যায়

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

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

সমস্যা

এখানে সমস্যাটি হ'ল প্রায়শই চিত্রগুলি লোড করার সময় সাইট নথিটি ইতিমধ্যে লোড হয়। এটি আপনার পৃষ্ঠায় ফাঁকা বিভাগে ফলাফল দেয় যেখানে কোনও চিত্র লোড হতে ধীর হয়। আপনি যা চান তা নয়

নীচের উদাহরণে, আমি একটি 4.8MB ব্যাকগ্রাউন্ড চিত্র সহ একটি সাধারণ ওয়েবসাইট তৈরি করেছি। আপনি দেখতে পাচ্ছেন, ডিওএম 1.14 সেকেন্ডের মধ্যে লোড হয়। মূলত, ব্যবহারকারী 1.14 সেকেন্ডের পরে সামগ্রীটি দেখতে পাবে। 3 জি নেটওয়ার্কের জন্য বেশ ভাল। তবে, ব্যবহারকারী ব্যাকগ্রাউন্ড চিত্রটি লোড করতে 27.32 সেকেন্ড সময় নেয় user ব্যবহারকারী ইতিমধ্যে এই মুহূর্তে আপনার ওয়েবসাইট ছেড়ে চলে যেতে পারে।

একটি দ্রুতগতি 3G সেলুলার নেটওয়ার্কের উপর 4.8MB ব্যাকগ্রাউন্ড চিত্র সহ একটি সাধারণ, দুর্বল অপ্টিমাইজড ওয়েবসাইট

মনে হয় এটিই আপনার ব্যবহারকারীর অভিজ্ঞতা হ্রাসের কারণ নয়। ২০১০ সালে গুগল জানিয়েছিল যে পৃষ্ঠার গতি র‌্যাঙ্কিং অ্যালগরিদমের একটি কারণ। আমি ধরে নিই যে কয়েক বছর ধরে এটি ক্রমবর্ধমান গুরুত্বপূর্ণ ফ্যাক্টর হিসাবে পরিণত হয়েছে। গুগল বিকাশকারীদের তাদের সম্মেলনে পৃষ্ঠার পারফরম্যান্স সম্পর্কে শিক্ষিত করার জন্য প্রচুর বিনিয়োগ করছে বলে মনে হয়।

সমাধান

কীভাবে আমরা এই সমস্যাটি কাটিয়ে উঠব? ওয়েল আমরা প্রথমে যা করতে পারি তা হ'ল ইন্টারনেটে বিভিন্ন সরঞ্জাম ব্যবহার করে ওয়ালপেপারটি সংকুচিত করা। এটি একটি সহজ জয় এবং লোডিং সময়কে প্রায় দশ সেকেন্ডে হ্রাস করে। এটি একটি বড় পদক্ষেপের মতো মনে হচ্ছে, তবে দশ সেকেন্ড এখনও অনেক বেশি is

পরবর্তী পদক্ষেপটি হ'ল প্রকৃত চিত্রটি লোড করার আগে "স্থানধারক" চিত্রটি লোড করা। এই স্থানধারকটি মূল চিত্রটির একটি নিম্ন-রেজোলিউশন সংস্করণ। এই চিত্রটি তৈরি করার সময়, আমরা চিত্রটির রেজোলিউশনটি 7372 x 4392 পিক্সেল থেকে কমিয়ে 20 x 11 পিক্সেল করেছি। এর ফলে চিত্রের আকারটি 4.8 এমবি থেকে 900 বাইট হয়ে যায়।

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

এটি করার জন্য, আমরা প্রথমে নিম্ন-রেজোলিউশন চিত্রটি লোড করতে এবং তারপরে পটভূমিতে উচ্চ-রেজোলিউশন চিত্রটি সংযোজিতভাবে লোড করতে চাই। উচ্চ রেজোলিউশন চিত্রটি লোড হয়ে গেলে, আমরা নিম্ন রেজোলিউশনটিকে উচ্চ রেজোলিউশন চিত্রের সাথে প্রতিস্থাপন করতে চাই।

এটি অর্জন করতে আমি নীচের জাভাস্ক্রিপ্টটি ব্যবহার করেছি যা আমি শেষের বডি ট্যাগের আগে লোড করেছিলাম। এইভাবে আমাদের স্ক্রিপ্টটি আমাদের পৃষ্ঠার বিষয়বস্তু অবরোধ করে না।

(() => strict 'কঠোর ব্যবহার করুন'; // পৃষ্ঠাটি লোড করা হয়েছে কনট অবজেক্টস = ডকুমেন্ট.জেট এলিমেন্টসওয়াই ক্লাসনাম ('asyncImage');
অ্যারে.ফ্রোম (অবজেক্টস)। মানচিত্র ((আইটেম) => {// চিত্রটি লোড করুন কনট img = নতুন চিত্র (); img.src = আইটেম.ড্যাটাসেট.এসসিআরসি; // চিত্রটি লোড হওয়ার পরে উত্স কোডটি প্রতিস্থাপন করুন এইচটিএমএল উপাদানগুলির img.onload = () => {আইটেম কোডস্লটলিস্ট.রেমোভ ('asyncImage'); রিটার্ন আইটেম.নোডনেম === 'আইএমজি'? = R ইউআরএল ($ {item.dataset.src}) `;};}); }) ();

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

...

বা

অপূর্ব ল্যান্ডস্কেপ সূর্যোদয়

চিত্রটি পরিবর্তিত হওয়ার সাথে সাথে স্ক্রিপ্ট উপাদানটির শ্রেণিটি সরিয়ে দেয়, আমরা চাইলে আমরা দুর্দান্ত কিছু সিএসএস রূপান্তর করতে পারি। উদাহরণস্বরূপ, একটি সরল দ্রবীভূতকরণের ফলে চিত্রটি প্রতিস্থাপনের সাথে সাথেই দ্রবীভূত হবে।

উপসংহার

তাহলে আমরা কী করলাম? আমরা ব্যবহারকারীর অভিজ্ঞতা উন্নত করেছি, আমাদের ওয়েবসাইট দ্রুত লোড করেছি, দ্রুত সংযোগ ছাড়াই ব্যবহারকারীদের জন্য অ্যাক্সেস উন্নত করেছি এবং সম্ভবত গুগলে আমাদের র‌্যাঙ্কিং উন্নত করেছি। এত ছোট একটি পরিবর্তনের জন্য এটি একটি বড় উন্নতি।

নতুন পরিস্থিতি যেখানে আমরা প্রথমে একটি নিম্ন রেজোলিউশন চিত্র লোড করি এবং তারপরে এটি মূল চিত্রের সাথে প্রতিস্থাপন করি

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

আমাদের আর অদ্ভুত চিত্রের রেন্ডারিংয়ের সমস্যা নেই এবং ব্যবহারকারীর একটি দ্রুত পেইন্টের প্রথম কোট দেয়।

এখানে একটি কাজের উদাহরণ দেখুন

অলস চিত্র লোড হচ্ছে

আপনি যদি আরও বেশি করে চিত্রের লোডিং উন্নত করতে চান তবে আপনার চিত্রগুলি লোড করতে দেরি করার বিষয়টি বিবেচনা করুন।

অলস লোডিং এমন একটি কৌশল যা ব্যবহারকারীর ভিউপোর্টে সরাসরি প্রদর্শিত না হওয়া চিত্রগুলি লোড হয় না। ছবিটি ভিউপোর্টের প্রান্তের কাছে যাওয়ার সাথে সাথে এটি লোড হবে।

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

আশা করি আপনি এই নিবন্ধটি পড়া উপভোগ করেছেন এবং এই উন্নতিটি নিজেই উপভোগ করেছেন :)। কয়েকটি তালি বলতে অনেক বোঝায়।