সিএসএস স্প্রাইটস সহ আপনার সাইটের গতি বাড়িয়ে তুলছে

স্প্রাইটমাস্টার ওয়েব

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

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

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

এটি, পরিবর্তে, আপনার সাইটকে ধীর করে দেয়। ক ধীর স্থানে ব্যস্ততা এবং রূপান্তরগুলিতে নাটকীয় প্রভাব ফেলতে পারে যা আপনার শ্রোতা তৈরি করে। দুর্দান্ত ওয়েব ডেভেলপাররা যে কৌশলটি ব্যবহার করেন তা হ'ল সমস্ত চিত্রকে একটি একক ফাইলে রাখে ... যাকে বলা হয় a পরী। আপনার প্রতিটি ফাইলের চিত্রের জন্য অনুরোধ করার পরিবর্তে এখন কেবল একক স্প্রাইট চিত্রের জন্য একটি একক অনুরোধ থাকা দরকার!

আপনি সম্পর্কে পড়তে পারেন সিএসএস স্প্রাইটস সিএসএস-ট্রিকসে কীভাবে কাজ করে or স্মাগিং ম্যাগাজিনের সিএসএস স্প্রাইট পোস্ট আমার বক্তব্য এগুলি কীভাবে ব্যবহার করবেন তা আপনাকে দেখানোর জন্য নয়, কেবল আপনার বিকাশকারী দল এগুলিকে সাইটে অন্তর্ভুক্ত করার জন্য আপনাকে পরামর্শ দেওয়ার জন্য। সিএসএস ট্রিকস যে উদাহরণ সরবরাহ করে তার মধ্যে 10 টি চিত্র যা 10 টি অনুরোধ এবং 20.5 কেবি পর্যন্ত যুক্ত করে তা দেখায়। যখন একটি একক স্প্রাইটে জড়ো হয়, এটি 1 অনুরোধ যে 13 কেবি! 9 টি চিত্রের জন্য রাউন্ড ট্রিপ অনুরোধ এবং প্রতিক্রিয়ার সময়গুলি এখন চলে গেছে এবং ডেটার পরিমাণ 30% এর বেশি হ্রাস পেয়েছে। আপনার সাইটে দর্শকের সংখ্যা অনুসারে এটির গুণান্বিত করুন এবং আপনি সত্যিকার অর্থে কিছু সংস্থান মুণ্ডন করতে চলেছেন!

গ্লোবালনাভThe Olymp Trade প্লার্টফর্মে ৩ টি উপায়ে প্রবেশ করা যায়। প্রথমত রয়েছে ওয়েব ভার্শন যাতে আপনি প্রধান ওয়েবসাইটের মাধ্যমে প্রবেশ করতে পারবেন। দ্বিতয়ত রয়েছে, উইন্ডোজ এবং ম্যাক উভয়ের জন্যেই ডেস্কটপ অ্যাপলিকেশন। এই অ্যাপটিতে রয়েছে অতিরিক্ত কিছু ফিচার যা আপনি ওয়েব ভার্শনে পাবেন না। এরপরে রয়েছে Olymp Trade এর এন্ড্রয়েড এবং অ্যাপল মোবাইল অ্যাপ। আপেল নেভিগেশন বার একটি দুর্দান্ত উদাহরণ। প্রতিটি বোতামের কয়েকটি রাজ্য থাকে ... আপনি পৃষ্ঠায় থাকুন না কেন, পৃষ্ঠাটি বন্ধ থাকুন না বা বোতামটি চাপ দিচ্ছেন। সিএসএস বোতামের স্থানাঙ্কগুলি সংজ্ঞায়িত করে এবং ব্যবহারকারীদের ব্রাউজারে সঠিক অবস্থার অঞ্চলটি উপস্থাপন করে। এই সমস্ত রাজ্য একক গ্রাফিকের সাথে একসাথে পতিত হয় - তবে শৈলীর শিটের মধ্যে উল্লিখিত অঞ্চল অনুসারে অঞ্চলটি প্রদর্শিত হয়।

যদি আপনার বিকাশকারীগণ সরঞ্জাম পছন্দ করেন তবে সেখানে একটি টন আছে যা তাদের সহ সহায়তা করতে পারে including কম্পাস সিএসএস কাঠামো, রিকুয়েস্টরেডস ASP.NET এর জন্য, সিএসএস-স্প্রাইটার রুবির জন্য, সিএসএসপ্রিট স্ক্রিপ্ট ফটোশপের জন্য, স্প্রিটপ্যাড, স্প্রাইটরাইট, স্প্রাইটকো, জিরোস্প্রিটস, প্রকল্প ফন্ডুর সিএসএস স্প্রাইট জেনারেটর, স্প্রাইট মাস্টার ওয়েব, এবং স্প্রাইটমি বুকমার্কলেট।

এর স্ক্রিনশট স্প্রাইট মাস্টার ওয়েব:
স্প্রাইটমাস্টার ওয়েব

Martech Zone পুরো থিম জুড়ে ব্যাকগ্রাউন্ড চিত্র ব্যবহার করে না, তাই আমাদের এই মুহুর্তে এই কৌশলটি স্থাপন করতে হবে না।

2 মন্তব্য

  1. 1

    অপেক্ষা করুন ... পুরো সংগ্রহটি কোনও "চিত্র" (বা একটি "প্লেন") নয়, এবং প্রতিটি উপ-চিত্র (বা অ্যানিমেটেড বা ইন্টারেক্টিভভাবে পরিবর্তনগুলির ক্ষেত্রে চিত্রগুলির উপদল) একটি "স্প্রিট"?

    কারণ স্টাফটির নাম পরিবর্তন করা হয়েছে গতবার থেকে আমি এই ধরণের জিনিসটি পরিচালনা করেছি তবে আমি স্প্রাইটের শপথ করে বলতে পারি যে উপাদানটি শেষ হয়ে গেছে, এটি থেকে বড় ডেটা টেবিলটি নয়।

    ("স্প্রাইট টেবিল" ... এটি কি তাই না?)

    • 2

      আমরা দুটি ভিন্ন কথা বলতে পারি, মার্ক। সিএসএসের সাহায্যে, আপনি মূলত কোনও চিত্রের কোনও 'অংশ' নির্দিষ্ট স্থানাঙ্ক ব্যবহারের জন্য প্রদর্শন করতে পারেন। এটি আপনাকে আপনার সমস্ত চিত্র একক 'স্প্রাইটে' রাখার অনুমতি দেয় এবং তারপরে CSS এর সাথে আপনি যে অঞ্চলটি প্রদর্শন করতে চান তা কেবল নির্দেশ করে।

আপনি কি মনে করেন?

এই সাইট স্প্যাম কমাতে Akismet ব্যবহার করে। আপনার ডেটা প্রক্রিয়া করা হয় তা জানুন.