উপরের ভাঁজ সামগ্রীর আকার কমিয়ে দিন

এই নিয়মটি ট্রিগার হয় যখন PageSpeed ​​Insights শনাক্ত করে যে পৃষ্ঠার উপরের ভাঁজ বিষয়বস্তু রেন্ডার করার জন্য অতিরিক্ত নেটওয়ার্ক রাউন্ড ট্রিপ প্রয়োজন।

ওভারভিউ

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

সুপারিশ

পৃষ্ঠাগুলি দ্রুত লোড করতে, ডেটার আকার সীমিত করুন (HTML মার্কআপ, চিত্র, CSS, JavaScript) যা আপনার পৃষ্ঠার উপরের ভাঁজ সামগ্রী রেন্ডার করার জন্য প্রয়োজন৷ এই কাজ করার বিভিন্ন উপায় আছে:

প্রথমে গুরুত্বপূর্ণ, ভাঁজ-উপরের বিষয়বস্তু লোড করতে আপনার HTML গঠন করুন

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

একটি সাইট দ্রুত লোড করার জন্য কীভাবে পুনর্গঠন করা যেতে পারে তার নিম্নলিখিত উদাহরণগুলি বিবেচনা করুন:

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

আপনার সংস্থান দ্বারা ব্যবহৃত ডেটার পরিমাণ হ্রাস করুন

একবার আপনার সাইটটি একাধিক ডিভাইসে ভালভাবে কাজ করার জন্য এবং প্রথমে সমালোচনামূলক সামগ্রী লোড করার জন্য পুনরায় ডিজাইন করা হয়ে গেলে, আপনার পৃষ্ঠা রেন্ডার করার জন্য প্রয়োজনীয় ডেটার পরিমাণ কমাতে নিম্নলিখিত কৌশলগুলি ব্যবহার করুন:
  • মিনিফাই রিসোর্স : এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট অপ্রয়োজনীয় হোয়াইটস্পেস এবং মন্তব্যগুলি সরিয়ে ছোট করা যেতে পারে। আরও অপ্টিমাইজেশানগুলি আপনার সংস্থানগুলির পরিবর্তনশীল নামগুলি পুনঃনামকরণকারী সরঞ্জামগুলির ব্যবহারের মাধ্যমে সম্ভব হতে পারে।
  • যেখানে সম্ভব ছবির পরিবর্তে CSS ব্যবহার করার কথা বিবেচনা করুন।
  • কম্প্রেশন সক্রিয়

প্রতিক্রিয়া

এই পেজটি কি সহায়ক ছিল?