গ্রীষ্ম 2019 ইমেজ অপ্টিমাইজেশান সমীক্ষা থেকে প্রতিক্রিয়া

বিভিন্ন ইমেজ অপ্টিমাইজেশান কৌশল সম্পর্কে সমীক্ষা উত্তরদাতাদের মন্তব্য

Sam Dutton

এই পোস্টটি Google Web DevRel এর গ্রীষ্মকালীন 2019 ইমেজ অপ্টিমাইজেশান কৌশল সমীক্ষায় প্রাপ্ত ফ্রিফর্ম প্রতিক্রিয়া তালিকাভুক্ত করে। ওয়েব ফান্ডামেন্টাল এবং @ChromiumDev এর মাধ্যমে প্রতিক্রিয়া চাওয়া হয়েছিল। সমীক্ষার অনুপ্রেরণা ছিল কেন বেশিরভাগ সাইটগুলি ইমেজ অপ্টিমাইজেশানের সর্বোত্তম অনুশীলনগুলি অনুসরণ করে না যদিও তারা কর্মক্ষমতা উন্নত করার তুলনামূলকভাবে সহজ উপায় বলে মনে হয়। প্রতিক্রিয়া ডেটা এখানে তালিকাভুক্ত করা হয়নি কারণ জরিপ পদ্ধতিতে ত্রুটি ছিল।

শ্রোতা

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

মন্তব্য

ওয়েবপি

দ্রষ্টব্য: কেন এটি গুরুত্বপূর্ণ? WebP- এর মতো ইমেজ ফরম্যাটের ফলে JPEG এবং PNG-এর মতো পুরানো ফরম্যাটের তুলনায় ছোট ফাইল এবং ভালো মানের হতে পারে। পুরানো ব্রাউজারগুলির জন্য ফলব্যাক সহ আধুনিক ফর্ম্যাটগুলি ব্যবহার করার জন্য বেশ কয়েকটি কৌশল রয়েছে।

• "আমি WebP পছন্দ করি কিন্তু এটি এখনও পুরোপুরি প্রস্তুত নয়। তাছাড়া, আমাদের ওয়ার্ডপ্রেস WebP সমর্থন করে না। সবচেয়ে জনপ্রিয় ফটো এডিটিং অ্যাপগুলির মধ্যে একটি, ফটোশপ, বাক্সের বাইরেও WebP সমর্থন করে না। তাই আমরা করতে পারি' ইমেজ কম্প্রেশনের জন্য থার্ড পার্টি অ্যাপ বা পরিষেবার উপর নির্ভর করবেন না।"
• "Safari-এ WebP ব্যবহারযোগ্য করুন।"
• "আমি WebP ব্যবহার করতে পছন্দ করব যদি আমি সেগুলি ফটোশপ/ফিগমা/স্কেচ থেকে রপ্তানি করতে পারি এবং সমস্ত ব্রাউজার এটি সমর্থন করে।" [দ্রষ্টব্য: স্কেচ WebP সমর্থন করে]
• "পরবর্তী জেনার ফর্ম্যাটিং সমাধানটি দুর্দান্ত হবে।"
• "যখন ব্রাউজার সমর্থন দুর্বল হয় তখন ওয়েবপিকে এত কঠিনভাবে চাপানো বন্ধ করুন এবং স্ক্রিনশটের জন্য JPEG-এর পরিবর্তে PNG-এর প্রয়োজনীয়তা বিবেচনা করুন।"
• "Google ডক্স WebP সমর্থন করে না।"
• "আমরা একচেটিয়াভাবে WebP ব্যবহার করব, কিন্তু ব্রাউজার সামঞ্জস্য নিয়ে উদ্বিগ্ন।"
• "প্রথমে ব্রাউজারের সামঞ্জস্যতা ঠিক করুন এবং লিগ্যাসি ব্রাউজার আপডেট করুন বা লিগ্যাসি ফিক্স যোগ করুন, তারপরে লোকেরা WebP এর মত নতুন ইমেজ টাইপগুলি গ্রহণ করতে আরও বেশি ঝুঁকবে..."
• "প্লাগইন/থিম ডেভেলপারদেরকে WebP এবং অন্যান্য পরবর্তী-জেনার ইমেজ প্রকারে সমর্থন প্রদানের কথা বিবেচনা করতে উত্সাহিত করুন, যাতে অ-বিকাশকারীদের এটির সাথে বাজিমাত করতে না হয়।"

SVG এবং ভেক্টর ছবি

• "যদি সম্ভব হয় আমি (অ্যানিমেটেড) SVG ব্যবহার করছি। gatsby-image এর অনেক কিছু ঠিক করে দিয়েছে। কিন্তু যখন আপনি তারা কি করেছেন তা খতিয়ে দেখবেন, এটা সম্পূর্ণ অবাস্তব যে একটি সাধারণ ওয়েবসাইটকে ছবি পেতে এরকম কিছু তৈরি করতে হবে। সঠিকভাবে কাজ করার জন্য। ব্রাউজারকে এই দায়িত্ব আরও বেশি নিতে হবে।"
• " lottie.js এর সাথে SVG অ্যানিমেশন কিভাবে তৈরি করা যায় তা কি ডকুমেন্ট করা সম্ভব হবে?"
• "লোড হওয়ার সময় এড়াতে আমরা বেশিরভাগ সময় আমাদের ওয়েবসাইটে কম আকারের বড় রেজোলিউশনের JPEG ছবি ব্যবহার করার চেষ্টা করি। প্রতিক্রিয়াশীল ডিজাইনের জন্য গুণমান সরবরাহ করার জন্য আমরা SVG ব্যবহার করার বিষয়টিও নিশ্চিত করি।"
• "আমরা সম্ভব হলে ছবি ছাড়া সকলের জন্য অপ্টিমাইজড ভেক্টর গ্রাফিক্স ব্যবহার করার চেষ্টা করি।"

অন্যান্য ইমেজ ফরম্যাট

• "জিআইএফ ব্যবহার বন্ধ করার জন্য আমাদের [আমাদের] আরও ভালভাবে শিক্ষিত করা দরকার।"

অলস লোড হচ্ছে

দ্রষ্টব্য: কেন এটি গুরুত্বপূর্ণ? একটি পৃষ্ঠা লোড হওয়ার সাথে সাথে সমস্ত ছবি পাওয়ার পরিবর্তে ঠিক সময়ে ইমেজ ফাইলের অনুরোধ করা , কর্মক্ষমতা উন্নত করতে পারে এবং ডেটা খরচ কমাতে পারে৷

• "অলস লোডের মতো বৈশিষ্ট্যগুলি বিবেচনা করার সময় অনুগ্রহ করে ব্যবহারকারীকে মনে রাখবেন, কারণ অনেকের জন্য এটি বিরক্তিকর।"
• "অলস লোড বৈশিষ্ট্যটি ব্যাকগ্রাউন্ড-ইমেজের সাথে কাজ করুন দয়া করে।"
• "ফ্রেমওয়ার্কগুলিকে বাক্সের বাইরে আরও ভাল সম্পদ প্রক্রিয়াকরণ করা উচিত।"
• "আমরা অনেক আগেই অলস লোডিং থেকে রূপান্তরিত হয়েছি। লক্ষ লক্ষ ছবি এবং সাইটের ব্যবহারকারীর রিপোর্ট "লোড হচ্ছে না"
• "আমি প্রথাগত কৌশলগুলি ব্যবহার করার পরিবর্তে অলস লোডিংয়ের জন্য ইন্টারসেকশন অবজারভার API ব্যবহার করার বিষয়ে আরও ভাল বোঝার জন্য আগ্রহী।"
• "এটি আমার জন্য ভাল কাজ করে: pwafire.org/developer/codelabs/progressive-loading ।"

পটভূমি ছবি

• "আমি সাধারণত সিএসএসে ব্যাকগ্রাউন্ড হিসাবে ছবি লোড করি।"
• " <img> ট্যাগটি সমস্যাযুক্ত এবং সূক্ষ্ম বিবরণ নিয়ন্ত্রণ করা কঠিন, বিশেষ করে ব্যবহারকারীর জমা দেওয়া বিষয়বস্তুর সাথে। আমরা <div> এবং ব্যাকগ্রাউন্ড-ইমেজ স্টাইলিং অনেক বেশি ব্যবহার করি কারণ এটি আমাদের ব্যাকগ্রাউন্ড-আকার, ব্যাকগ্রাউন্ড- ব্যবহার করতে দেয়। অবস্থান, এবং ছবিটির ডান-ক্লিক সংরক্ষণ প্রতিরোধ করুন।"

স্বচ্ছতা

• "এটি 2019। আলফা স্বচ্ছতা ছাড়া JPG গুলি এখনও কীভাবে?"
• "আমি শুধুমাত্র ফটোগ্রাফের জন্য PNG ব্যবহার করি যখন আমার একটি স্বচ্ছ ব্যাকগ্রাউন্ডের প্রয়োজন হয়।"

নিম্নমানের ছবির স্থানধারক (LQIPs)

• "আমরা LQIPS ব্যবহার করি এবং এটি একটি দুর্দান্ত কৌশল যা দর্শকদেরকে উচ্চ মানের ছবি লোড না করে নিযুক্ত রাখতে খুব তাড়াতাড়ি।"

কর্মক্ষমতা

• "আমাদের ছবিগুলির সাথে সাম্প্রতিক পারফরম্যান্সের সমস্যা ছিল৷ একজন ব্যবহারকারী আমাদের সাইটে স্ক্রোল করার সাথে সাথে, আমরা পরবর্তী 60টি কার্ড দেখাই যার মধ্যে একটি থাম্বনেইল রয়েছে৷ একই ডোমেনে 6টি সংযোগ সীমার কারণে, থাম্বনেইলগুলিও ব্লক করা হয়েছিল৷ পরবর্তী AJAX অনুরোধ পরবর্তী 60টি কার্ড পাওয়ার জন্য যদি একজন ব্যবহারকারী নিচে স্ক্রোল করতে থাকে।"
• "আমরা HTTP/2 ব্যবহার করতে চাই কিন্তু আমাদের বেশিরভাগ গ্রাহকই IE11 ব্যবহার করে! তাই আমরা ডোমেন শার্ডিং/লোডিং AJAX JSON ডেটার অনুরোধ আলাদা ডোমেনের বাইরে নিয়ে যাচ্ছি।"

সাইজিং

দ্রষ্টব্য: কেন এটি গুরুত্বপূর্ণ? srcset বৈশিষ্ট্য বিকল্প চিত্র উৎস প্রদান করে। আপনি প্রস্থ বা পিক্সেল ঘনত্ব নির্দিষ্ট করেন যাতে ব্রাউজারটি মাত্রা গণনা করার জন্য ছবি ডাউনলোড করার প্রয়োজন ছাড়াই সবচেয়ে ছোট ছবি বেছে নিতে পারে।

• "অভ্যন্তরীণ আকারের জন্য দুঃখিত; উচ্চতা/প্রস্থ লাভ করা আমার কাছে ভাল বলে মনে হয়।"
• "কম আকার তৈরি করার উপায় খুঁজছেন, এই মুহূর্তে এটি ~12।"
• "চিত্রের গতিশীল আকার পরিবর্তন সত্যিই কঠিন এবং JS ছাড়া অসম্ভব।"
• " responsivebreakpoints.com এর মত একটি টুল web.dev এর জন্য ভালো :)।"

উচ্চ মানের এবং উচ্চ-রেজোলিউশনের ছবি

• "কিভাবে DPI গুণমান না হারিয়ে কম্প্রেস ছবি ডাউনলোড করবেন?"
• "আমরা একটি ডকুমেন্ট ম্যানেজমেন্ট কোম্পানি। আমাদের অ্যাপগুলি লক্ষ লক্ষ হাই-রেস স্ক্যান করা ছবিগুলি পরিচালনা করে, সাধারণত TIFF বা PDF।"
• "এটি একটি ঝামেলা। হাই-রেস img ফাইলগুলি প্রিন্ট ফরম্যাটের জন্য প্রয়োজনীয়; ওয়েবের জন্য অপ্টিমাইজ করা আবশ্যক। ওয়েবের জন্য চিত্রগুলি ছোট করা একটি ঝামেলা কিন্তু এটি একটি শো-স্টপার যদি লেখক শুধুমাত্র মুদ্রণ প্রকাশের জন্য নির্ধারিত চিত্রগুলির জন্য হালকা ফাইল সরবরাহ করেন৷ আমরা আর্টওয়ার্ক সহ পান্ডুলিপি জমা দেওয়ার প্রয়োজনীয়তা সম্পর্কে মিশ্র বার্তা দেওয়া বন্ধ করুন। তারপরে আমরা সেই উপকরণগুলি প্রক্রিয়াকরণের জন্য জটিল কর্মপ্রবাহের সাথে আবদ্ধ হই।"

ব্রাউজার ক্ষমতা

• "[বিল্ট-ইন] বৈশিষ্ট্য হিসাবে ব্রাউজার থেকে স্বয়ংক্রিয় প্রতিক্রিয়াশীল src ক্রপ করা খুবই উপযোগী হবে কারণ সমস্ত ছবিকে 4 আকারে ক্রপ করা এবং সমস্ত মার্কআপ লেখা সময়সাপেক্ষ৷ যদি আমরা একটি বড় ছবি আপলোড করতে পারি এবং একটি সাধারণ ছবি ট্যাগ লিখতে পারি৷ ব্রাউজারগুলি স্বয়ংক্রিয়ভাবে একাধিক src বৈশিষ্ট্য তৈরি করবে যা একটি বিজয়ী বৈশিষ্ট্য হবে।"
• "ব্যক্তিগতভাবে আমি যখন প্রতিক্রিয়াশীল চিত্রগুলির জন্য CSS দ্বারা চিত্র সেট করা হয় তখন পৃষ্ঠার রিফ্লো এড়াতে আমার খুব কষ্ট হয় (সর্বোচ্চ-প্রস্থ: 100%; উচ্চতা স্বয়ংক্রিয় বা উচ্চতা: প্রস্থ: 100%; উচ্চতা স্বয়ংক্রিয়), বিশেষত শিল্প নির্দেশনার সংমিশ্রণে অভিযোজিত ছবি/ছবি ট্যাগ থেকে। এড়ানোর সর্বোত্তম উপায় হল একটি স্থির চিত্র অনুপাতের জন্য "নেতিবাচক প্যাডিং হ্যাক" ব্যবহার করা এবং তারপরে এই অনুপাত বাক্সের ভিতরে চিত্রটি অবস্থান করা। আরও ভাল ব্রাউজার সমর্থন/প্রতিক্রিয়াশীল চিত্র পরিচালনা সত্যিই একটি দুর্দান্ত সাহায্য হবে!"
• "শুধু প্রথম ফ্রেম এনে GIF "অটোপ্লে" অক্ষম করুন।"

CDN এবং ছবি পরিষেবা

দ্রষ্টব্য: কেন এটি গুরুত্বপূর্ণ? ছবি পরিষেবাগুলি আপনার ছবিগুলিকে অপ্টিমাইজ করা সহজ করে তোলে৷ আপনি সাধারণত প্রতিটি ছবির একটি উচ্চ-রেজোলিউশন সংস্করণ আপলোড করুন এবং তারপরে প্রয়োজন অনুসারে ছবিটি অপ্টিমাইজ বা রূপান্তর করতে একটি ওয়েব পরিষেবা API ব্যবহার করুন। কনটেন্ট ডেলিভারি নেটওয়ার্ক (CDNs) ছবি এবং অন্যান্য ওয়েবসাইট সম্পদের বিতরণ এবং বিতরণকে অপ্টিমাইজ করে এবং কখনও কখনও অপ্টিমাইজেশান পরিষেবা প্রদান করে, যেমন ফাইল এক্সটেনশন পরিবর্তন না করে PNG বা JPEG-এর পরিবর্তে সমর্থনকারী ব্রাউজারগুলিতে WebP ছবিগুলি স্বয়ংক্রিয়ভাবে বিতরণ করা।

• "গুগলকে ক্লাউডফ্লেয়ারের মতো একটি বিনামূল্যের সিডিএন প্রদান করা উচিত।"
• "হয়তো বিভিন্ন প্রদানকারীর সাথে ডায়নামিক স্কেলিং এবং CDN সেট আপ করার জন্য আরও টুলিং চমৎকার হবে।"
• "একটি একক ওভারসাইজড ওভারকম্প্রেসড ইমেজ একটি খুব শালীন সমাধান যার কোন অতিরিক্ত উৎপাদন খরচ নেই। আপনার মোবাইলের জন্য প্রায় 1000 পিক্সেল প্রশস্ত ছবি প্রয়োজন (500px রেন্ডার প্রস্থ) এবং এটি বড়/ডেস্কটপ নন-রেটিনা ডিসপ্লেগুলির জন্য আপনার প্রয়োজনীয় আকারও। ইমেজ রিসাইজ করা সিডিএন একটি খুব খারাপ সমাধান, যদিও আমি অতীতে এটি ব্যবহার করেছি। সিএমএস-এর রিসাইজিং পরিচালনা করা উচিত এবং এটি সেট আপ করা খুব জটিল, একটি একক সমাধান একটি ভাল আপস (এখনকার জন্য)।"
• "ক্লাউডফ্লেয়ার আমাদের ছবিগুলিকে ব্যবহারকারীর ডিসপ্লের সাথে সর্বোত্তম মেলানোর জন্য স্বয়ংক্রিয়ভাবে স্কেল করে৷ তাই আমরা লোডিং সময় বাঁচাতে পারি কারণ ছবিগুলি ব্যবহারকারীর ডিসপ্লের সাপেক্ষে লোড করা হয়৷ উদাহরণস্বরূপ, যদি কোনও ব্যবহারকারী ফোনে থাকে তবে এটি লোড হবে না৷ ডেস্কটপ আকারের ব্যাকগ্রাউন্ড।"
• "ক্লাউডফ্লেয়ার আমাদের সেটিংস প্যানেলে একটি বাক্স চেক করা ছাড়া আমাদের কিছু করার ছাড়াই পটভূমিতে এটি করে।"
• "শুধু পুনরাবৃত্তি করার জন্য, ক্লাউডিনারির সহজতার কারণেই আমি সফলভাবে srcset ইত্যাদি ব্যবহার করতে পারি। কিন্তু ক্লাউডিনারি ব্যয়বহুল হয়ে ওঠে, সত্যিই দ্রুত। এটি বিকাশের অভিজ্ঞতার একটি বড় গর্ত বলে মনে হয়।"
• "আমাদের একটি স্মার্ট উপায়ে সহজেই স্বয়ংক্রিয়ভাবে ছবি ক্রপ করার একটি উপায় দরকার যাতে তারা বিভিন্ন প্রসঙ্গে বিভিন্ন দিক অনুপাতের সাথে কাজ করতে পারে।"
• "আমি আনস্প্ল্যাশের মতো অন্যান্য সরবরাহকারীদের থেকেও ছবি ব্যবহার করি যেখানে রেজোলিউশন, গুণমান এবং কম্প্রেশনের খুব কম নিয়ন্ত্রণ থাকে।"

CMS, প্ল্যাটফর্ম এবং ফ্রেমওয়ার্ক

• "আমি যখন সিএমএস ব্যবহার করে একটি সাইট তৈরি করি তখন ছবিগুলি ব্যবহার করার সর্বোত্তম উপায় কী তা খুঁজে বের করার জন্য আমি এখনও সংগ্রাম করি৷ লেখকরা বিভিন্ন মাত্রার সাথে ছবিগুলি কনফিগার করার প্রবণতা রাখেন এবং আশা করেন যে ছবিগুলি সঙ্কুচিত বা স্কেল না হবে৷ আমি নিশ্চিত নই যে এটি হয় কিনা৷ ছবিগুলিতে সর্বোচ্চ-প্রস্থ বা সর্বোচ্চ-উচ্চতা সেট করতে ঠিক আছে"
• "গত কয়েকটি প্রকল্পের জন্য গ্যাটসবাই-ইমেজ ব্যবহার করা হচ্ছে এবং কখনও পিছনে ফিরে তাকাইনি।"
• "ছবিগুলি প্রায়শই কঠিন অংশ হয় কারণ সেগুলি শেষ ব্যবহারকারীর দ্বারা CMS-এ রাখা হয়, তারা যে কোনও আকার, বিন্যাস ব্যবহার করতে পারে, কখনও কখনও আদর্শ চিত্র বিন্যাসে আসল চিত্র এবং মাত্রাগুলি উপলব্ধ নয়।"
• "ছবিগুলি রক্ষণাবেক্ষণ করা কঠিন যেহেতু আমাদের সিস্টেম স্ব-পরিষেবা যোগ করা নিয়ন্ত্রণগুলি কঠিন যদি না জিনিসগুলি রেজোলিউশনকে প্রভাবিত না করে স্বয়ংক্রিয়ভাবে ঘটে। এছাড়াও আমাদের জন্য ছবিগুলি মোবাইল বনাম ডেস্কটপে সঠিক দেখায় না"
• "আমি লোকেদের তাদের সাইটগুলি (ওয়ার্ডপ্রেস) অপ্টিমাইজ করতে সাহায্য করি৷ ছবির জন্য আমি সবচেয়ে বড় যে সমস্যাগুলি দেখেছি তা হল: ওয়েবপি তৈরি করতে একটি CDN বা প্লাগইনগুলির উপর নির্ভর করতে হবে৷ srcset/ছবিকে থিম বিকাশকারীদের দ্বারা সঠিকভাবে কোড করতে হবে৷ বেশিরভাগ অলস লোডিং প্লাগইনগুলি ধীরে ধীরে খারাপ UX দিয়ে লোড হয়৷ ব্যাকগ্রাউন্ড ইমেজগুলি অলস লোড করা কঠিন।"

খরচের সুবিধা

• "নতুন অনুশীলনগুলি কার্যকর কিন্তু সাইটগুলির বিকাশের সময় বাড়ায়।"
• "srcset এবং WebP-এর মতো নতুন মানগুলির আনুগত্যের অভাব অনেক ফরচুন 500 কোম্পানির দ্বারা গৃহীত হতে ধীর গতিতে হয়েছে। এটি দেখে, অনেক কোম্পানি বর্তমান ওয়েবসাইটের জন্য একটি অপ্রয়োজনীয় উন্নয়ন খরচ হিসাবে পরিবর্তনকে প্রতিরোধ করেছে। কার্যক্ষমতা লাভ ব্যাপকভাবে হয় না। শেষ ব্যবহারকারী (UX) দ্বারা আলোচনা করা হয়েছে বা রিপোর্ট করা হয়েছে৷ যদি কিছু থাকে তবে এটি ওয়েব থেকে ছবিগুলি সংরক্ষণ করা কিছুটা কঠিন করে তোলে৷"
• "একাধিক আকার, সংস্করণ তৈরি এবং পরিচালনা করা ব্যয়বহুল।"
• "তারা আমাদের সার্ভারে অনেক জায়গা নেয়।"

এসইও

• "গ্রহণযোগ্য চিত্রের গুণমান এবং ফাইলের আকারের মধ্যে ভারসাম্য বজায় রাখা কঠিন। একদিকে, আমি এসইও সুবিধার জন্য দ্রুত লোডিং চাই, কিন্তু অন্যদিকে, খারাপ মানের চিত্রগুলি UI/UX থেকে হ্রাস পাবে।"

ওয়েবে ছবির ভূমিকা

• "ওয়েবে অনেক বেশি। অকেজো ছবি ব্যবহার করা বন্ধ করুন যা লিখিত বিষয়বস্তুকে উন্নত করে না।"
• "আপনি কি এখনও সেই সময়ের কথা মনে করেন যখন ওয়েবে ছবি ছিল না এবং আমরা ASCII-আর্ট হিসাবে সেলফি শেয়ার করতাম?"

টুলিং, নির্দেশিকা, মান এবং সেরা অনুশীলন: হতাশা এবং অনুরোধ

• [একজন অংশগ্রহণকারী এই সমীক্ষার প্রতিক্রিয়ায় একটি ব্লগ পোস্ট লিখেছেন]
• "প্রয়োজনীয়তা ক্রমাগত পরিবর্তিত হচ্ছে বলে মনে হচ্ছে। একজন ওয়েব ডেভেলপার হিসাবে এটি অত্যন্ত হতাশাজনক কারণ প্রথম স্থানে ছবিগুলি সংরক্ষণ করা সময়সাপেক্ষ। আমরা যতটা সম্ভব অপ্টিমাইজ করি, আমরা সাইটটি পরীক্ষা করি এবং তারপর কয়েক মাস পরে Google সিদ্ধান্ত নিয়েছে যে চিত্রগুলি আরও বেশি সংকুচিত হতে পারে বা একটি ভিন্ন বিন্যাসে থাকা দরকার৷ এটি আমাদের ক্লায়েন্টকে সর্বোত্তম সম্ভাব্য সমাধান প্রদান করতে বাধা দেয় যা স্থায়ী হয় এবং পরিবর্তে তাদের এবং আমাদের জন্য একটি ব্যয়বহুল প্রচেষ্টা তৈরি করে৷ আমাদের কিছু ছোট ব্যবসার ক্লায়েন্ট কেবল এটি করে না আমাদের কাছে ছবিগুলি ঠিক করা এবং প্রয়োজনীয়তাগুলি মেনে চলার জন্য সেগুলিকে পুনরায় সংরক্ষণ করার জন্য বাজেট নেই৷ তাদের পরিচালনা প্যাকেজের মধ্যে এই কাজটি করার জন্য আমাদের কাছে বাজেট নেই৷ বিভিন্ন ডিভাইসের জন্য বিভিন্ন চিত্রের আকার কল করার জন্য কোড লেখা হল এছাড়াও সময় সাপেক্ষ। দীর্ঘ সময়ের জন্য সামঞ্জস্যপূর্ণ ছবি সংরক্ষণ করার একটি সিস্টেম নিয়ে আসাটা দারুণ হবে।"
• "হ্যাঁ, আমি মনে করি আপনি লাইটহাউসে "অনুরোধের সংখ্যা কম এবং ফাইলের আকার ছোট রাখুন" সব ভুল পেয়েছেন। যদি কোনো সাইট HTTP1.x-এর উপরে পরিবেশন করে তবে নিশ্চিত, কিন্তু যদি কোনো সাইট HTTP2-এর উপরে পরিবেশন করে তাহলে অনুরোধের সংখ্যা কম গুরুত্বপূর্ণ বা না এমনকি একই হোস্টনাম থেকে উদ্ভূত হলে একটি সমস্যা। আমার একটি লাইট ওয়েবসাইট আছে, কিন্তু আমি একই হোস্টনামে HTTP2-এর উপর মোট 30টি ছোট ওয়েবপি ফাইল লোড করি। ছোট" সমস্যা যেখানে এটি সুপারফাস্ট এবং একই হোস্টনামে HTTP2 এর কারণে অনুরোধের সংখ্যা কোনও সমস্যা নয়। এবং হ্যাঁ, ফাইলগুলি ইতিমধ্যেই ছোট (অধিকাংশ 1 KB থেকে 2 KB বা তার কম)। আমি একটি স্প্রাইট লোড করতে পারি কিন্তু তারপরে আরও সিএসএস কম্পিউটিং করতে হবে। তাই একই হোস্টনামের উপর HTTP2 নেওয়ার জন্য লাইটহাউসে অনুগ্রহ করে "রিকোয়েস্ট কাউন্ট কম এবং ফাইল সাইজ ছোট" রিপোর্ট আপডেট করুন।"
• "মানুষের জন্য তাদের ছবি সংকুচিত করার জন্য এটি একটি সংগ্রাম হয়েছে।"
• "ক্রস ব্রাউজার আচরণ অপ্রত্যাশিত থেকে যায় তাই সবচেয়ে সহজ সমাধানগুলি প্রায়শই নিরাপদ।"