HTML या XHTML पृष्ठ का आकार कम करने के लिए सामान्य अनुकूलन?

Question

HTML या XHTML पृष्ठ का आकार कम करने के लिए कुछ सामान्य अनुकूलन किए गए हैं? कुछ जो दिमाग में आते हैं:

• टिप्पणियां हटाना,
• विलुप्त व्हाट्सएप को हटाने,
• सीएसएस स्टाइलशीट के लिए दोहराए जाने वाले इनलाइन शैलियों को स्थानांतरित करना,
• आदि।

कुछ और क्या हैं? जो सबसे बड़े धमाके के लिए रुपये देते हैं या एक उपकरण या मॉड्यूल द्वारा स्वचालित रूप से प्रदर्शन किया जा सकता है?

Comments

बैंडविड्थ को कम करने

— मार्क हेंडरसन

नकल के लिए मेरी माफी - अनायास ही। जिज्ञासु, यद्यपि: यह प्रश्न पहले वाले से अधिक लोकप्रिय क्यों रहा है?

— क्रिस डब्ल्यू। रिएल

शायद इसलिए कि यह एक अलग तरीके से पूछा जाता है, optimizationविषय और प्रश्न में शब्द याद नहीं है !

— जुलिएन एन

Answer 1

Google ने पेलोड के आकार को कम से कम करने के लिए अपनी सिफारिशों को रेखांकित और समझाया है । उनमें निम्नलिखित तकनीकें शामिल हैं:

1. दबाव शुरू कर दो
2. अप्रयुक्त सीएसएस को हटा दें
3. जावास्क्रिप्ट को छोटा करें
4. CSS को छोटा करें
5. HTML को छोटा करें
6. जावास्क्रिप्ट का भार लोड करना
7. छवियों का अनुकूलन करें
8. स्केल की गई छवियों की सेवा करें
9. एक सुसंगत URL से संसाधन परोसें

ये सुझाव उनके ओपन-सोर्स फ़ायरफ़ॉक्स / फायरबग ऐड-ऑन प्रोजेक्ट का एक हिस्सा हैं, जिसे पेज स्पीड कहा जाता है । याहू के YSlow प्लगइन के समान। वास्तविक पेज स्पीड ऐड-ऑन उस सूची की तुलना में कई अधिक अनुकूलन के लिए जांच करेगा। पेज स्पीड का उपयोग करने के निर्देश भी प्रस्तुत किए गए हैं।

याहू! आपकी वेबसाइट को गति देने के लिए सर्वोत्तम अभ्यास सर्वोत्तम प्रथाओं के समान सेट की पहचान करते हैं:

1. HTTP रिक्वेस्ट को मिनिमाइज करें
2. सामग्री वितरण नेटवर्क का उपयोग करें
3. एक समय सीमा समाप्त करें या कैश-कंट्रोल हैडर जोड़ें
4. Gzip घटक
5. स्टाइल्सशीट्स को सबसे ऊपर रखें
6. तल पर लिपियों रखो
7. सीएसएस एक्सप्रेशन से बचें
8. जावास्क्रिप्ट और सीएसएस बाहरी बनाओ
9. DNS लुकअप कम करें
10. ...

(Yahoo! की सूची ~ 35 आइटम लंबी है, इसे संपूर्णता में उद्धृत करने की आवश्यकता नहीं है।)

दोनों YSlow (छवि लिंक) और पृष्ठ गति (छवि लिंक) चीजों का सुझाव दे आप कर सकते हैं कि और आप दिखा क्या, उनकी सिफारिशों के, पहले से ही लागू किया गया है, आप अपने पृष्ठों पर परीक्षण चलाने के लिए अनुमति देगा।

Comments

बस एक छोटा सा जोड़: ये प्रदर्शन दिशानिर्देश याहू पर रहते हुए स्टीव सौडर्स के काम के साथ शुरू हुए! उनकी पुस्तक "उच्च प्रदर्शन वेब साइटें" क्यों , उनके पीछे तर्क को रेखांकित करती हैं। पुस्तक को पढ़ना और जानकारीपूर्ण बनाना आसान है।

— जेसपर एम

Answer 2

कोई यह कहने जा रहा है कि मार्कअप होना चाहिए, इसलिए मैं भी एक हो सकता हूं।

यहाँ Apache और IIS पर इसे कैसे सेट किया जाए, इसकी लिंक के साथ Gzip क्या है, इसकी एक लंबी व्याख्या दी गई है ।

WebReference पर एक लेख बताता है कि mod_gzip Apache मॉड्यूल का उपयोग करते समय आपको निम्नलिखित प्रदर्शन लाभ मिलेंगे।

वेबमास्टर्स आमतौर पर वेब सर्वर के प्रदर्शन में 150-160% की वृद्धि, और इस मॉड्यूल का उपयोग करते हुए HTML / XML / JavaScript बैंडविड्थ में 70% की कमी का उपयोग करते हुए देखते हैं। कुल मिलाकर बैंडविड्थ की बचत लगभग 30 से 60% है

Comments

mod_gzipअपाचे 1.3 के लिए था, जो अब जीवन के अंत तक पहुंच गया है (अब समर्थित नहीं है - यह अभी भी काम करता है, हालांकि)। अपाचे 2 सीरीज के लिए बराबर है mod_deflate।

Answer 3

यह शायद इसके लायक नहीं है।

मैंने HTML में व्हाट्सएप को थोड़ा हटाने के साथ खेला है , और गज़िंग के बाद पेलोड में केवल 10% आकार में कमी देखी है।

वास्तविक रूप से, व्हॉट्सएप और लाइनफीड निष्कासन वह काम कर रहा है जो संपीड़न हमारे लिए कर रहा होगा। हम सिर्फ मानव-समर्थित दक्षता की थपकी जोड़ रहे हैं:

                  कच्चा संपीड़ित
सीएसएस 2,299 बाइट्स 671 बाइट्स को गोद लेना
अनुकूलित सीएसएस 1,758 बाइट्स 615 बाइट्स

(हाँ यह सीएसएस कहते हैं, लेकिन HTML में भी वही मूल नियम लागू होते हैं)

यह समस्या है,

1. GZIP आपके लिए 90% काम कर रहा है, इसलिए यह एक पागल सूक्ष्म अनुकूलन है। मेरा मतलब है, हो सकता है कि आप Google या Yahoo हो।
2. "दृश्य स्रोत" में पूरी तरह से अपठनीय एचटीएमएल की बल्कि खड़ी लागत में 10% अतिरिक्त आकार में कमी आती है

Answer 4

ठीक है, एक छोटा सा: टैग नाम और विशेषताओं को लोअरकेस और सुसंगत रखें (जैसे मानक जनादेश, वैसे)। यह संपीड़न अनुपात को एक या दो प्रतिशत बढ़ाएगा।

Comments

कैसे आवरण में फर्क पड़ता है? मुझे लगता है कि एक उत्सुक बात कहने के लिए ...

— ग्रांट पॉलिन

@ गौरतलब है: "ABCDE", "abcde", "Abcde", आदि की विविधता से "abcde" (मामला सटीक) के कई उदाहरणों को संपीड़ित करना आसान है

— क्रिस W. Rea

टिप के लिए धन्यवाद, जो समझ में आता है। मेरा कोड तो अच्छी हालत में है!

— पालिन

Answer 5

यदि आप एक बहुत ही उच्च-मात्रा साइट हैं, तो आप सुपर-शॉर्ट निकाय आईडी और वर्ग के नामों का उपयोग करने पर विचार कर सकते हैं, क्योंकि ये HTML पेज और CSS पेज दोनों के आकार को कम करते हैं ताकि इसे स्टाइल किया जा सके।

इसके अलावा, अत्यधिक संरचित साइट संरचना के बारे में सावधान रहें; जब उन्हें सही मायने में जरूरत नहीं होती है तो डिव और स्पैन सेक्शन को जोड़ना आसान होता है। आप बड़े परिणाम सेट और इसी तरह के आउटपुट के लिए पेजिंग जैसी रणनीतियों पर भी विचार कर सकते हैं।

वास्तव में, इन अनुकूलन में बहुत सीमित पेबैक (और पेजिंग रणनीति के लिए, संभावित एसईओ डाउनसाइड्स) उन साइटों के लिए इसके लायक है जो Google के समान ट्रैफ़िक श्रेणी में नहीं हैं। GZip / Deflate कम्प्रेशन को सक्षम करने और इसके साथ करने के लिए बस jessegavin की सिफारिश का पालन ​​करें ।

Answer 6

एक फाइल में सामान्य सीएसएस, चित्र और जावास्क्रिप्ट का मिश्रण करें। यह फ़ाइल आकार को कम नहीं करता है लेकिन यह http अनुरोधों की संख्या को कम करेगा। छोटी फ़ाइलों के लिए http ओवरहेड दूर डाउनलोड समय से अधिक है। सीएसएस और जावास्क्रिप्ट फ़ाइलों को संयोजित करने के लिए एक स्क्रिप्ट लिखना आसान है, ताकि आप विकास के दौरान उन्हें आसानी से प्रबंधित कर सकें लेकिन उन्हें एक ही फाइल पर तैनात कर सकें।

छवियों के संयोजन के बारे में अधिक जानकारी के लिए http://css-tricks.com/css-sprites देखें ।

इसके अलावा, Google से क्लोजर कंपाइलर देखें । मैंने इसका उपयोग नहीं किया है, लेकिन यह जावास्क्रिप्ट डाउनलोड और तेजी से चलाने का दावा करता है।

Comments

जब तक मैं गलत नहीं हूँ, सवाल विशेष रूप से HTML आकार को कम करने के बारे में है, जेएस / सीएसएस नहीं। यह पहले से ही एक और प्रश्न में शामिल है।

— असंतुष्टगीत

Answer 7

जैसा कि अन्य लोगों ने कहा है, सबसे बड़ा लाभ गिपिंग से होता है।

सुनिश्चित करें कि आप उपयुक्त HTML तत्वों का उपयोग करते हैं। इसके बजाय <div class="page-title">Hello World</div>, उपयोग करें <h1>Hello World</h1>।

और स्पष्ट एक: लेआउट के लिए तालिकाओं का उपयोग न करें! 960.gs की तरह एक साधारण ग्रिड प्रणाली का उपयोग करें (या अपना स्वयं का हल्का संस्करण रोल करें)। HTML आकार के बीच एक बड़ा अंतर हो सकता है, विशेष रूप से नेस्टेड तालिकाओं के साथ। की तुलना करें:

<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

यदि आप ASP.NET वेबसाइट का उपयोग कर रहे हैं, तो ViewState से सावधान रहें । यह पृष्ठ में बहुत बड़े छिपे हुए फ़ील्ड उत्पन्न कर सकता है, इसे अक्सर ओवरलोड करना, जबकि यह आवश्यक नहीं है (यह पहले से ही मुझे पता चला है कि ViewState बाकी पेज की तुलना में भारी है)।
यह विशेष रूप से सच है यदि आप AJAX का उपयोग करते हैं, क्योंकि ViewState हर अनुरोध के साथ आगे और पीछे भेजा जाएगा, जिससे आपकी वेबसाइट धीमी हो जाएगी और ट्रैफ़िक वॉल्यूम बढ़ जाएगा।

समाधान हालांकि .net कोड में है।

Answer 9

नि: शुल्क वेब प्रदर्शन विश्लेषण और अनुकूलन उपकरण का एक समूह है । आप अपनी स्वयं की बड़ी चेक-सूची को उन रिपोर्टों से संकलित कर सकते हैं जो वे उत्पन्न करते हैं।

यहाँ एक ज़ूम प्रदर्शन प्रदर्शन आकलन से कुछ पैराफ्रेस्ड बिंदु हैं -

• गतिशील रूप से उत्पन्न सामग्री (छवि) से बचें। इसके बजाय एक छवि को स्थिर छवि फ़ाइल के रूप में ऑफ़लाइन ड्राइंग या आकार देने पर विचार करें।
• आयामों के बिना छवि टैग का उपयोग करने से बचें।
• Google Analytics (विज्ञापन) अपनी जावास्क्रिप्ट फ़ाइल के अतुल्यकालिक लोडिंग का समर्थन करते हैं। मामले में, आप उनका उपयोग करते हैं, आप उन्हें अतुल्यकालिक रूप से लोड करने का विकल्प चुन सकते हैं।

Answer 10

आमतौर पर अनदेखी की गई रणनीति पृष्ठ से सभी अनावश्यक HTML कोड को निकालना है।

किसी भी दिए गए प्रोजेक्ट के लिए, आपको यह तय करना होगा कि आपके द्वारा उपयोग किए जा रहे (X) HTML संस्करण के आधार पर इनमें से कौन सी रणनीतियाँ हैं और जिस तरह से वेबसाइट का उपयोग होने जा रहा है।

(जाहिर है, मैं एक नए उपयोगकर्ता के बाद से प्रति उत्तर एक से अधिक हाइपरलिंक पोस्ट नहीं कर सकता, इसलिए इन URL को कॉपी और पेस्ट करना होगा ... मुझे आशा है कि कोषेर है।)

• HTML4 और HTML5 में, कई तत्वों के लिए, समापन टैग की आवश्यकता नहीं है। बॉडी एलिमेंट के लिए शुरुआती टैग भी आवश्यक नहीं है। देख:

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

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

• प्रोटोकॉल (HTTP :) HTTP URL का हिस्सा छोड़ा जा सकता है।

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

• <br> जैसे टैग के साथ, आप XHTML सिंटैक्स (<br />) में उपयोग किए गए स्लैश को तब तक छोड़ सकते हैं जब तक आपको वास्तव में XHTML का उपयोग करने की आवश्यकता न हो।

• यहाँ छोटे HTML दस्तावेज़ संरचनाओं के कुछ उदाहरण दिए गए हैं:

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

html5doctor.com/html-5-boilerplates/

Comments

मैं कह सकता हूँ कि यह एक कारण की अनदेखी है। यह शायद किसी भी अन्य विकल्प की तुलना में बहुत अधिक दर्दनाक है और शायद एक साइट को ईज़ी तोड़ सकता है। क्वेर मोड में IE दर्द

— निवारक है

सच सच; यह अनुकूलता / पहुंच पर प्रभाव डालेगा। लेकिन यह संदर्भ के लिए उपयुक्त होने पर ध्यान में रखने और उपयोग करने के लिए कुछ है।

— dzollman

Answer 11

दूसरों ने यह कहा है, लेकिन उन्होंने अभी इस बिंदु को पर्याप्त रूप से घर नहीं पहुँचाया है: gzipping।

1. वस्तुतः कोई प्रयास, या कमियां नहीं हैं।
2. मेरे सीमित अनुभव में, HTML का आकार 60% और 90% के बीच कम हो जाता है।

HTML में आपके द्वारा किए जा सकने वाले अन्य सभी ट्वीक को अधिक प्रयास / रखरखाव की आवश्यकता होती है, और शायद ही सिर्फ गिप्पी और भूलने की तुलना में कोई प्रभाव पड़ता है। जब तक आप Google नहीं होते हैं, वे बस समय के लायक नहीं होते हैं। आप Google नहीं हैं

(जैसा कि अन्य लोगों ने उल्लेख किया है कि, आपका HTML जितना अधिक सुसंगत है, उतने ही अधिक प्रभाव वाला gzipping होगा, जैसा कि - मेरी सीमित समझ के अनुसार - gzipping आपकी फ़ाइल में समान तारों की तलाश करता है, और प्रत्येक बार दोहराए जाने वाले उदाहरण को एक छोटे कोड के साथ संदर्भित करता है। मूल। इसलिए अपनी विशेषताओं को उसी क्रम में रखने और अपने सभी आवरणों को समान रखने के लिए संलेखन अभ्यास, आपके काम को करने में मदद कर सकता है।)

ओह - और अगर आप अपने निर्माण / सेवारत प्रक्रिया में किसी बिंदु पर अपने HTML को स्वचालित रूप से छोटा कर रहे हैं, तो इसके लिए अधिक प्रयास / रखरखाव की आवश्यकता नहीं है। कुछ HTML minifiers यहाँ सूचीबद्ध हैं:

/programming/728260/html-minification