it-swarm.asia

تحسينات شائعة لتقليل حجم صفحات HTML أو XHTML؟

ما هي بعض التحسينات الشائعة التي يتم تنفيذها لتقليل حجم صفحات HTML أو XHTML؟ بعض التي تتبادر إلى الذهن هي:

  • إزالة التعليقات ،
  • إزالة فراغ أبيض غريب ،
  • نقل الأنماط المضمنة المتكررة إلى ورقة أنماط CSS ،
  • إلخ.

ما هي بعض الآخرين؟ ما الذي يوفر أكبر ميزة يمكن تحقيقها تلقائيًا أو يمكن تنفيذها تلقائيًا بواسطة أداة أو وحدة نمطية؟

15
Chris W. Rea

لقد أوضحت Google توصياتها وأوضحتها على أنها الأفضل تقليل حجم حمولة المستخدم وهي تشمل التقنيات التالية:

  1. تمكين ضغط
  2. إزالة CSS غير المستخدمة
  3. تصغير جافا سكريبت
  4. تصغير CSS
  5. تصغير HTML
  6. تأجيل تحميل جافا سكريبت
  7. تحسين الصور
  8. خدمة الصور تحجيمها
  9. خدمة الموارد من عنوان URL ثابت

تعد هذه الاقتراحات جزءًا من مشروع Firefox/Firebug الإضافي مفتوح المصدر والمسمى Page Page . يشبه Yahoo! ' YSlow plugin. ستقوم الوظيفة الإضافية لسرعة الصفحة بالتحقق من العديد من التحسينات أكثر من تلك القائمة التي توضح بالتفصيل. كما يتم تقديم إرشادات استخدام سرعة الصفحة.

Yahoo! ' أفضل الممارسات لتسريع موقع الويب الخاص بك حدد مجموعة مماثلة من أفضل الممارسات:

  1. تقليل طلبات HTTP
  2. استخدم شبكة توصيل المحتوى
  3. إضافة انتهاء صلاحية أو رأس Cache-Control
  4. مكونات Gzip
  5. ضع أوراق الأنماط في الأعلى
  6. ضع البرامج النصية في الأسفل
  7. تجنب تعبيرات CSS
  8. جعل جافا سكريبت و CSS الخارجية
  9. تقليل عمليات البحث عن DNS
  10. ...

(قائمة Yahoo! طولها حوالي 35 عنصرًا ، ولا حاجة إلى اقتباسها بالكامل.)

يسمح لك كل من YSlow (رابط الصورة) و سرعة الصفحة (رابط الصورة) بإجراء اختبارات على صفحاتك ، مما يشير إلى أشياء يمكنك القيام بها وإظهار ما لديهما ، توصيات ، تم تنفيذها بالفعل.

5
Bryson

شخص ما سيقول أن الترميز يجب أن يكون Gzipped ، لذلك قد أكون كذلك.

إليك شرحًا مطولًا لما --- Gzip مع روابط حول كيفية إعداده على Apache و IIS .

--- مقالة حول WebReference تنص على أنك ستجد مكاسب الأداء التالية عند استخدام mod_gzip apache module.

عادةً ما يرى مشرفو المواقع زيادة بنسبة 150-160٪ في أداء خادم الويب ، ويتم استخدام نطاق ترددي يتراوح بين 70٪ و 80٪ في عرض نطاق HTML/XML/JavaScript ، باستخدام هذه الوحدة. إجمالي توفير النطاق الترددي حوالي 30 إلى 60 ٪

18
jessegavin

ربما لا يستحق كل هذا العناء.

لقد لعبت مع إزالة مسافة بيضاء في HTML قليلا ، ورأيت فقط خفض حجم 10 ٪ في الحمولة النافعة بعد gzipping.

من الناحية الواقعية ، تعمل إزالة المسافات البيضاء وإطعام الأسطر على عمل يقوم به الضغط بالنسبة لنا. نحن مجرد إضافة روعة من الكفاءة بمساعدة الإنسان:

 مضغوطة خام. [. _.]

(نعم هذا يقول CSS ولكن نفس القواعد الأساسية تنطبق على HTML أيضًا)

المشكلة هي،

  1. تقوم GZIP بـ 90٪ من العمل من أجلك ، لذلك يعد هذا تحسينًا كبيرًا للجنون. أقصد ، ربما إذا كنت غوغل أو ياهو.
  2. هذا التخفيض الإضافي في الحجم بنسبة 10٪ يأتي بتكلفة كبيرة جدًا لـ HTML غير قابل للقراءة تمامًا في "عرض المصدر"
10
Jeff Atwood

حسنًا ، صغيرة: احتفظ بأسماء العلامات والسمات صغيرة ومتسقة (كما هي الولايات القياسية ، بالمناسبة). سيزيد من نسبة الضغط بنسبة مئوية أو اثنتين.

6
Thomas Bonini

إذا كنت موقعًا كبير الحجم للغاية ، فقد تحتاج إلى التفكير في استخدام معرف كيان قصير للغاية وأسماء الفئات ، حيث إن هذا يقلل من حجم كل من صفحة HTML وصفحة CSS المستخدمة في تصميمه.

أيضا ، كن حذرا حول تكوين موقع منظم للغاية. من السهل إضافة أقسام div و span عندما لا تكون هناك حاجة إليها حقًا. قد ترغب أيضًا في النظر في استراتيجيات مثل الترحيل لمجموعات النتائج الكبيرة والإخراج المماثل.

في الواقع ، تنطوي عمليات التحسين هذه على الاسترداد المحدود للغاية (ولإستراتيجية الترحيل ، السلبيات المحتملة لكبار المسئولين الاقتصاديين) لتكون ذات قيمة للمواقع التي ليست في نفس فئة حركة المرور مثل Google. فقط اتبع توصية jessegavin لتمكين ضغط GZip/Deflate ويتم ذلك.

4
JasonBirch

الجمع بين المغلق المشتركة والصور وجافا سكريبت في ملف واحد. هذا لا يقلل من حجم الملف ولكنه سيقلل من عدد طلبات http. بالنسبة للملفات الأصغر ، يفوق مقدار الحمل http وقت التحميل. من السهل كتابة برنامج نصي يجمع بين ملفات css و javascript حتى تتمكن من إدارتها بشكل أسهل أثناء التطوير ولكن نشرها في ملف واحد.

راجع http://css-tricks.com/css-sprites لمزيد من المعلومات حول دمج الصور.

أيضًا ، تحقق من Closure Compiler من Google. لم أستخدمها ، ولكنها تدعي أنها تقوم بتنزيل جافا سكريبت وتشغيلها بشكل أسرع.

3
mcrumley

كما قال آخرون ، فإن أكبر فائدة تأتي من gzipping.

تأكد من استخدام عناصر 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>
3
DisgruntledGoat

إذا كنت تستخدم موقع ويب ASP.NET ، فاحرص على ViewState . يمكنه إنشاء حقول مخفية كبيرة جدًا في الصفحة ، مما يؤدي إلى زيادة التحميل في كثير من الأحيان في حين أنه ليس ضروريًا (لقد حدث لي بالفعل أن ViewState أثقل من بقية الصفحة).
هذا صحيح بشكل خاص إذا كنت تستخدم AJAX ، حيث سيتم إرسال ViewState ذهابًا وإيابًا مع كل طلب ، مما يؤدي إلى إبطاء موقع الويب الخاص بك وزيادة حجم حركة المرور.

الحل في رمز .net بالرغم من ذلك.

2
Julien N

قال آخرون ذلك ، لكنهم لم يصطدموا بالمنزل بشكل كافٍ: gzipping.

  1. تقريبا أي جهد ، أو عيوب.
  2. في تجربتي المحدودة ، يقلل حجم HTML بنسبة تتراوح بين 60 ٪ و 90 ٪.

تتطلب كافة التعديلات الأخرى التي يمكنك إجراؤها على HTML مزيدًا من الجهد/الصيانة ، ولا يكاد يكون لها أي تأثير بالمقارنة مع gzipping فقط والنسيان. إنهم ببساطة لا يستحقون الوقت ما لم تكن Google. أنت لست جوجل.

(كما ذكر الآخرون ، كلما كان HTML الخاص بك أكثر اتساقًا ، كلما زاد تأثير gzipping ، حيث إن gzipping - وفقًا لفهم محدودي - يبحث عن سلاسل متطابقة في ملفك ، ويستبدل كل مثيل متكرر برمز صغير يشير إلى أصلي ، لذلك فإن ممارسات التأليف مثل الاحتفاظ بسماتك بنفس الترتيب ، والحفاظ على كل ما تبذلونه من غلاف ، يمكن أن تساعد gzipping في أداء عملها.)

أوه - وإذا كنت تقلل HTML تلقائيًا في مرحلة ما من عملية الإنشاء/العرض ، فهذا لا يتطلب المزيد من الجهد/الصيانة. يتم سرد بعض minifiers HTML هنا:

https://stackoverflow.com/questions/728260/html-minification

1
Paul D. Waite

هناك مجموعة من أدوات تحليل وتحسين أداء الويب المجانية . يمكنك تجميع قائمة التحقق الكبيرة الخاصة بك من التقارير التي تقوم بإنشائها.

فيما يلي بعض النقاط المعاد صياغتها من تقييم أداء Zoompf -

  • تجنب المحتوى الذي تم إنشاؤه ديناميكيًا (الصورة). فكر في رسم صورة أو تغيير حجمها في وضع عدم الاتصال كملف صورة ثابت بدلاً من ذلك.
  • تجنب استخدام علامات الصورة بدون أبعاد.
  • يدعم Google Analytics (& Ads) التحميل غير المتزامن لملف JavaScript. في حالة استخدامك لها ، يمكنك اختيار تحميلها بشكل غير متزامن.
1
mvark

تتمثل الإستراتيجية التي يتم تجاهلها عادة في إزالة كل تعليمات HTML البرمجية غير الضرورية من الصفحة.

بالنسبة إلى أي مشروع معين ، سيتعين عليك تحديد أي من هذه الاستراتيجيات التي يجب استخدامها بناءً على إصدار HTML (X) الذي تستخدمه ، وطريقة استخدام موقع الويب.

(على ما يبدو ، لا يمكنني نشر أكثر من رابط تشعبي واحد لكل إجابة لأنني مستخدم جديد ، لذلك يجب نسخ عناوين URL هذه ولصقها ... آمل أن يكون ذلك كوشير.)

  • في HTML4 و HTML5 ، بالنسبة للعديد من العناصر ، لا تكون علامة الإغلاق مطلوبة. العلامة الافتتاحية للعنصر الأساسي غير مطلوبة أيضًا. نرى:

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

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

  • يمكن حذف البروتوكول (http :) جزء من عناوين URL HTTP.

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/

1
dzollman