সমান্তরাল সিএসএস ডাউনলোডের মাধ্যমে ওয়েব সাইটের কার্যকারিতা উন্নত করবেন?

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

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

আমি প্যারালালাইজেশন পারফরম্যান্সের উন্নতি করতে পারে না এমন কয়েকটি কারণ দেখছি বা কেবল খুব সামান্যই (কম HTTP রিকোয়েস্টগুলি ব্যবহারের সুবিধায় বিস্মিত):

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

সুতরাং, সিএসএস ফাইলগুলির জন্য এইচটিটিপি অনুরোধের সমান্তরালে কোনও লাভ কি?

নোট / আপডেট: সমস্ত সিএসএস ফাইলগুলি রেন্ডার-ব্লক করা। সিএসএস ফাইলগুলি ইতিমধ্যে সমালোচনামূলক পথে বাইরে সরানো হয়নি।

css performance

— ayke
সূত্র

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

— ফ্রাঙ্ক

এক উপায়ে, ব্রাউজারগুলি ইতিমধ্যে ব্যবহারের জন্য উপলব্ধ সংযোগের সংখ্যার ভিত্তিতে সমান্তরালে ডাউনলোড করে। এটি ব্রাউজারটি যে এইচটিএমএল পড়ছে তার উপর ভিত্তি করে।

— সান

এইচটিএমএল নথি থেকে লিঙ্কযুক্ত সিএসএস ফাইলগুলি সমান্তরাল ডাউনলোডের সাথে যুক্ত করা হয় কারণ এইচটিএমএল বিশ্লেষণ করা হয়; মূল বিষয়টি হ'ল অ-অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্ট লিঙ্কগুলি HTML পার্সারকে ব্লক করে, জাভাস্ক্রিপ্ট ডাউনলোড, পার্স এবং কার্যকর না হওয়া পর্যন্ত পরবর্তী ট্যাগগুলিকে ডাউনলোডের কাতারে যুক্ত হওয়া থেকে বিরত করে। ^[1]

এখানে একটি উদাহরণ যা ব্রাউজারটিকে চারটি ফাইল ক্রমান্বয়ে ডাউনলোড করতে বাধ্য করে (কমপক্ষে তিনটি রাউন্ড-ট্রিপ):

<head>
  <script src="js/fizz.js"></script>
  <link rel="stylesheet" href="css/foo.css"/>
  <script src="js/buzz.js"></script>
  <link rel="stylesheet" href="css/bar.css"/>
</head>

এখানে পুনরায় কাজ করা উদাহরণটি রয়েছে যাতে সমস্ত 4 টি ফাইল সমান্তরালে ডাউনলোড করা হয় (কমপক্ষে একটি রাউন্ড-ট্রিপ):

<head>
  <link rel="stylesheet" href="css/foo.css"/>
  <link rel="stylesheet" href="css/bar.css"/>
  <script async src="js/fizz.js"></script>
  <script src="js/buzz.js"></script>
</head>

অন্য দ্রষ্টব্য: সিএসএস ফাইলগুলি (ডিফল্টরূপে) রেন্ডার-ব্লকিং, পার্সার-ব্লকিং নয়; পৃষ্ঠাটি বিশ্লেষণ এবং ডিওএম নির্মিত অবিরত থাকবে, তবে সিএসএসএম নির্মিত না হওয়া পর্যন্ত রেন্ডার শুরু হবে না ।

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

সুতরাং, কেবল নিজের স্বার্থে আপনার সিএসএস ডাউনলোডগুলিকে সমান্তরাল করার কোনও সুস্পষ্ট সুবিধা নেই। তবে সর্বদা হিসাবে, পরিমাপ এবং পরীক্ষা!

আরও পড়ার জন্য, আমি গুগল থেকে 'ওয়েব ফান্ডামেন্টাল: পারফরম্যান্স পারফরম্যান্স' এই নিবন্ধগুলিতে সুপারিশ করছি: https://developers.google.com/web/fundamentals/performance/

[1]: এটি কিছু ব্রাউজারের অনুমানমূলক পার্সিং বৈশিষ্ট্যটিকে উপেক্ষা করছে:

https://docs.google.com/document/d/1JQZXrONw1RrjrdD_Z9jq1ZKsHguh8UVGHY_MZgE63II/preview?hl=en-GB&forcehl=1

https://developer.mozilla.org/en-US/docs/Web/HTML/Optimizing_your_pages_for_speculative_parsing

— রবার্ট কে। বেল
সূত্র

আরেকটি ভাল পঠিত, কিভাবে আপনার স্ক্রিপ্টের একই সময়ে ডাউনলোড করার রাখার সম্পর্কে, এখানে: stackoverflow.com/questions/436411/...

— joshreesjones

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

— চাওলি

আপনি কি "কীভাবে নিজের সিএসএস ডাউনলোডগুলিকে কেবল নিজের স্বার্থে সমান্তরাল করে তোলার কোনও সুফল পেতে পারেন" তা বিশদভাবে বর্ণনা করতে পারেন? উপরের উত্তরটি থেকে আমি কোনওভাবে এটি বের করতে পারিনি

— gaurav5430

@ গৌরভ ৫৪৩০ সিএসএস ফাইলগুলি বিভক্ত করার উপযুক্ত কারণ বলে মনে হচ্ছে না, উপরের-ভাঁজ রেন্ডার সময় (এবং সম্ভবত ক্যাশে অপ্টিমাইজেশন?)

— রবার্ট কে। বেল