এইচটিএমএল বা এক্সএইচটিএমএল পৃষ্ঠার আকার হ্রাস করার জন্য সাধারণ অপ্টিমাইজেশন?

Question

এইচটিএমএল বা এক্সএইচটিএমএল পৃষ্ঠার আকার হ্রাস করতে কিছু সাধারণ অপ্টিমাইজেশন কী করা হয়? কিছু মনে মনে আসে:

• মন্তব্য অপসারণ,
• বহিরাগত সাদা স্থান অপসারণ,
• পুনরাবৃত্তিমূলক ইনলাইন শৈলীগুলি একটি CSS স্টাইলশীটে সরিয়ে নেওয়া,
• প্রভৃতি

অন্য কিছু কি? কোনটি সবচেয়ে বড় ব্যাঙ্ক অফ দ্য বক অফার করে বা কোনও সরঞ্জাম বা মডিউল দ্বারা স্বয়ংক্রিয়ভাবে সম্পাদিত হতে পারে?

Comments

ব্যান্ডউইথ হ্রাস কার্যকর পদ্ধতিগুলির

— মার্ক হেন্ডারসন

অনুলিপিটির জন্য আমার ক্ষমা - অনিচ্ছাকৃত। কৌতূহলী, যদিও: কেন এই প্রশ্নটি প্রথমটির চেয়ে বেশি জনপ্রিয় হয়েছে?

— ক্রিস ডব্লিউ। রিয়া

সম্ভবত কারণ এটি একটি ভিন্ন উপায়ে জিজ্ঞাসা করা হয়েছে, optimizationবিষয় এবং প্রশ্নে শব্দটি অনুপস্থিত !

— জুলিয়েন এন

Answer 1

গুগল তাদের প্রস্তাবনাগুলিকে সর্বোত্তম ন্যূনতম পেওলড আকারের রূপরেখা তৈরি করেছে এবং ব্যাখ্যা করেছে । তারা নিম্নলিখিত কৌশল অন্তর্ভুক্ত:

1. কম্প্রেশন সক্রিয়
2. অব্যবহৃত সিএসএস সরান
3. জাভাস্ক্রিপ্ট Minify করুন
4. সিএসএস মাইনাইফ করুন
5. মিনিফাইটি এইচটিএমএল
6. জাভাস্ক্রিপ্ট লোডিং স্থগিত করুন
7. চিত্রগুলি অনুকূলিত করুন
8. ছোট আকারের চিত্র পরিবেশন করুন
9. ধারাবাহিক URL থেকে সংস্থানগুলি পরিবেশন করুন

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

ইয়াহু! আপনার ওয়েবসাইটের গতি বাড়ানোর সেরা অভ্যাসগুলি একই ধরণের সেরা অনুশীলনের সেটটি সনাক্ত করে:

1. এইচটিটিপি অনুরোধগুলি ছোট করুন
2. একটি সামগ্রী বিতরণ নেটওয়ার্ক ব্যবহার করুন
3. একটি মেয়াদসীমা বা একটি ক্যাশে-নিয়ন্ত্রণ শিরোনাম যুক্ত করুন
4. গিজিপ উপাদান
5. স্টাইলশীট শীর্ষে রাখুন
6. স্ক্রিপ্টগুলি নীচে রাখুন
7. সিএসএস এক্সপ্রেশন এড়িয়ে চলুন
8. জাভাস্ক্রিপ্ট এবং সিএসএসকে বাহ্যিক করুন
9. ডিএনএস লুকআপ হ্রাস করুন
10. ...

(ইয়াহু! এর তালিকাটি 35 ডলারের আইটেম দীর্ঘ, এটির পুরোপুরি উদ্ধৃতি দেওয়ার দরকার নেই))

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

Comments

কেবলমাত্র একটি সামান্য সংযোজন: এই পারফরম্যান্স নির্দেশিকা ইয়াহুতে থাকাকালীন স্টিভ সাউডার্সের কাজ দিয়ে শুরু হয়েছিল। তাঁর বই "হাই পারফরম্যান্স ওয়েব সাইট" এর পিছনে যুক্তিগুলির কারণগুলি তুলে ধরে । বইটি পড়া সহজ এবং তথ্যপূর্ণ।

— জেস্পার এম

Answer 2

কেউ বলতে যাচ্ছেন যে মার্কআপটি গিজিপ করা উচিত, তাই আমিও সম্ভবত এটির একটি হতে পারি।

এটি অ্যাপাচি এবং আইআইএসে কীভাবে সেট আপ করতে হবে তার লিঙ্কগুলির সাথে জিপ কী তার একটি দীর্ঘ ব্যাখ্যা এখানে রয়েছে ।

ওয়েব- রেফারেন্সে একটি নিবন্ধে বলা হয়েছে যে মোড_জজিপ অ্যাপাচি মডিউলটি ব্যবহার করার সময় আপনি নিম্নলিখিত কর্মক্ষমতা লাভগুলি পাবেন।

ওয়েবমাস্টাররা সাধারণত ওয়েব সার্ভারের পারফরম্যান্সে 150-160% বৃদ্ধি এবং এই মডিউলটি ব্যবহার করে এইচটিএমএল / এক্সএমএল / জাভাস্ক্রিপ্ট ব্যান্ডউইথের 70% - 80% হ্রাস দেখতে পায়। সামগ্রিকভাবে ব্যান্ডউইথ সঞ্চয় প্রায় 30 থেকে 60%

Comments

mod_gzipঅ্যাপাচি ১.৩ এর জন্য ছিল, যা এখন জীবনের শেষ প্রান্তে পৌঁছেছে (এটি আর সমর্থনযোগ্য নয় - এটি এখনও অবশ্যই কাজ করে)। অ্যাপাচি 2 সিরিজের সমতুল্য mod_deflate।

Answer 3

এটি সম্ভবত মূল্য নয়।

আমার আছে এইচটিএমএল-এ সাদা অংশটি কিছুটা সরিয়ে নিয়ে খেলেছি এবং জিপিংয়ের পরে পে-লোডে মাত্র 10% আকার হ্রাস পেয়েছি।

বাস্তবিকভাবে, সাদা স্থান এবং লাইনফিড অপসারণ এমন কাজ করছে যা আমাদের জন্য সংকোচনের কাজ করবে। আমরা কেবল মানব-সহায়তা দক্ষতার একটি ড্যাব যুক্ত করছি:

                  কাঁচা সংকুচিত
আনপটিমাইজড সিএসএস 2,299 বাইট 671 বাইট
সিএসএস 1,758 বাইট 615 বাইট অনুকূলিত হয়েছে

(হ্যাঁ এটি সিএসএস বলছে তবে একই বেসিক বিধিগুলি এইচটিএমএলকেও প্রযোজ্য)

সমস্যা হল,

1. জিজেডআইপি আপনার জন্য 90% কাজ করছে, সুতরাং এটি পাগল মাইক্রো-অপ্টিমাইজেশন। মানে, আপনি যদি গুগল বা ইয়াহু হন।
2. 10% অতিরিক্ত আকার হ্রাস "দেখার উত্স" এ সম্পূর্ণ অপঠনযোগ্য এইচটিএমএলটির পরিবর্তে খাড়া ব্যয়ে আসে

Answer 4

ঠিক আছে, একটি ছোট: ট্যাগ নাম এবং বৈশিষ্ট্যগুলি ছোট হাতের এবং সামঞ্জস্যপূর্ণ রাখুন (মান ম্যান্ডেট হিসাবে, উপায় হিসাবে)। এটি সংকোচনের অনুপাতকে শতাংশ বা দুই দ্বারা বাড়িয়ে তুলবে।

Comments

কেসিং কিভাবে একটি পার্থক্য করতে পারে? আমি দেখতে পেয়েছি যে একটি কৌতূহলী জিনিস ...

— গ্রান্ট প্যালিন

@ গ্রান্ট: "এবিসিডিই", "অ্যাবসিডি", "অ্যাবসিডি" ইত্যাদির চেয়ে "অ্যাবিসিডি" (কেস অবিকল) একাধিক উদাহরণ সংকোচন করা সহজ

— ক্রিস ডব্লিউ রিয়া

টিপটির জন্য ধন্যবাদ, এটি উপলব্ধি করে। আমার কোডটি তখন ভাল অবস্থায় আছে!

— অনুদান পালিন

Answer 5

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

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

বাস্তবে, গুগলের মতো একই ট্র্যাফিক বিভাগে নয় এমন সাইটগুলির জন্য এই অপ্টিমাইজেশনের অত্যন্ত সীমিত পেব্যাক রয়েছে (এবং পেজিং কৌশল, সম্ভাব্য এসইও ডাউনসাইড) worth জিজেপ / ডিফল্ট সংক্ষেপণ সক্ষম করতে এবং এটি দিয়ে সম্পন্ন করার জন্য কেবল জেসেগাভিনের পরামর্শ অনুসরণ করুন ।

Answer 6

সাধারণ সিএসএস, চিত্র এবং জাভাস্ক্রিপ্টগুলি একটি ফাইলে একত্রিত করুন। এটি ফাইলের আকার হ্রাস করে না তবে এটি http অনুরোধের সংখ্যা হ্রাস করবে। ছোট ফাইলগুলির জন্য http ওভারহেড ডাউনলোডের সময়ের চেয়ে অনেক বেশি। CSS এবং জাভাস্ক্রিপ্ট ফাইলগুলিকে একত্রিত করার জন্য একটি স্ক্রিপ্ট লিখন সহজেই যাতে আপনি বিকাশের সময় এগুলিকে আরও সহজে পরিচালনা করতে পারেন তবে সেগুলি একটি একক ফাইলে স্থাপন করতে পারেন।

চিত্রগুলির সংমিশ্রণ সম্পর্কে আরও তথ্যের জন্য http://css-tricks.com/css-sprites দেখুন ।

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

Comments

আমি ভুল না হলে প্রশ্নটি জেএস / সিএসএস নয়, বিশেষ করে এইচটিএমএল আকার হ্রাস করার বিষয়ে। এটি ইতিমধ্যে অন্য একটি প্রশ্নে আবৃত।

— অসন্তুষ্ট গোট

Answer 7

অন্যরা যেমন বলেছে, সর্বাধিক উপকারটি আসে জিজপিংয়ের মাধ্যমে।

আপনি উপযুক্ত এইচটিএমএল উপাদান ব্যবহার করেছেন তা নিশ্চিত করুন। পরিবর্তে <div class="page-title">Hello World</div>, ব্যবহার করুন <h1>Hello World</h1>।

এবং সুস্পষ্ট এক: লেআউট জন্য টেবিল ব্যবহার করবেন না! 960.gs (বা আপনার নিজস্ব লাইটওয়েট সংস্করণ রোল) এর মতো একটি সাধারণ গ্রিড সিস্টেম ব্যবহার করুন। এইচটিএমএল আকারের মধ্যে বিশেষত নেস্টেড টেবিলগুলির মধ্যে একটি বড় পার্থক্য থাকতে পারে। তুলনা করা:

<table cellpadding="3" cellspacing="0" border="0">
<tbody>
    <tr>
        <td width="200">...</td>
        <td width="600">...</td>
    </tr>
</tbody>
</table>

এবং

<div class="colSmall">...</div>
<div class="colLarge">...</div>

Answer 8

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

সমাধানটি । নেট কোডে রয়েছে ।

Answer 9

এখানে নিখরচায় ওয়েব পারফরম্যান্স বিশ্লেষণ এবং অপ্টিমাইজেশন সরঞ্জাম রয়েছে । তারা তৈরি করা প্রতিবেদনগুলি থেকে আপনি আপনার নিজের বড় চেক-তালিকাটি সংকলন করতে পারেন।

এখানে একটি জুম্পফ পারফরম্যান্স অ্যাসেসমেন্ট থেকে প্যারাফ্রেস করা পয়েন্টগুলির কয়েকটি রয়েছে -

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

Answer 10

একটি সাধারণভাবে উপেক্ষিত কৌশলটি পৃষ্ঠাটি থেকে সমস্ত অপ্রয়োজনীয় এইচটিএমএল কোড সরিয়ে ফেলা হয়।

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

(স্পষ্টতই, আমি একজন নতুন ব্যবহারকারী যেহেতু আমি প্রতি উত্তরে একাধিক হাইপারলিংক পোস্ট করতে পারি না, তাই এই ইউআরএলগুলি অনুলিপি করে আটকে দিতে হবে ... আমি আশা করি এটি কোশার।)

• এইচটিএমএল 4 এবং এইচটিএমএল 5 এ অনেক উপাদানগুলির জন্য ক্লোজিং ট্যাগের প্রয়োজন হয় না। শরীরের উপাদানগুলির জন্য খোলার ট্যাগও প্রয়োজন হয় না। দেখা:

meiert.com/en/blog/20080601/optional-tags-in-html-4/

code.google.com/speed/articles/optimizing-html.html

• এইচটিটিপি ইউআরএলগুলির প্রোটোকল (http :) বাদ দেওয়া যেতে পারে।

meiert.com/en/blog/20090218/performance-and-rfc-2396/

• <br> এর মতো ট্যাগগুলির সাহায্যে আপনি এক্সএইচটিএমএল সিনট্যাক্সে ব্যবহার করা স্ল্যাশ ছেড়ে দিতে পারেন (<br />) যদি না আপনি আসলে এক্সএইচটিএমএল ব্যবহার না করেন।

• এখানে ছোট HTML ডকুমেন্ট স্ট্রাকচারের কয়েকটি উদাহরণ রয়েছে:

meiert.com/en/blog/20080429/best-html-template/

html5doctor.com/html-5-boilerplates/

Comments

আমি বলতে পারি এটি কোনও কারণে উপেক্ষা করা হয়েছে। এটি সম্ভবত অন্য যে কোনও বিকল্পের তুলনায় অনেক বেশি বেদনাদায়ক এবং সম্ভবত কোনও সাইটকে ইজিও করতে পারে। কোয়ার্কস মোডে IE বেদনাদায়ক

— ওয়াল্টারজে 89

খুবই সত্য; এটির সামঞ্জস্যতা / অ্যাক্সেসযোগ্যতার উপর প্রভাব ফেলবে। তবে এটি যখন প্রসঙ্গে উপযুক্ত হয় তখন মনে রাখা এবং ব্যবহার করার মতো বিষয়।

— dzollman

Answer 11

অন্যরা এটি বলেছে, তবে তারা কেবলমাত্র পয়েন্টটি বাড়ির দিকে চালিত করেনি: গিজিপিং।

1. কার্যত কোনও প্রচেষ্টা বা ত্রুটি নেই।
2. আমার সীমিত অভিজ্ঞতায়, এইচটিএমএল আকার 60% থেকে 90% এর মধ্যে হ্রাস করে।

আপনি এইচটিএমএলে করতে পারেন এমন অন্যান্য সমস্ত টুইটের জন্য আরও প্রচেষ্টা / রক্ষণাবেক্ষণ প্রয়োজন এবং কেবল জিগিপিং এবং ভুলে যাওয়ার তুলনায় খুব কমই এর প্রভাব পড়ে effect আপনি গুগল না হলে এগুলি কেবল সময়ের জন্য উপযুক্ত নয়। আপনি গুগল নন।

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

ওহ - এবং আপনি যদি নিজের বিল্ড / সার্ভিং প্রক্রিয়াটির কোনও পর্যায়ে স্বয়ংক্রিয়ভাবে আপনার এইচটিএমএলকে মাইনাইফ করেন তবে এর জন্য আরও বেশি পরিশ্রম / রক্ষণাবেক্ষণের প্রয়োজন নেই। কিছু এইচটিএমএল মিনিফায়ার এখানে তালিকাভুক্ত করা হয়েছে:

/programming/728260/html-minification