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

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

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

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

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

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

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

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

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

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

المشكلة هي،

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

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

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

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

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

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

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

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

كما قال آخرون ، فإن أكبر فائدة تأتي من 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>

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

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

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

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

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

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

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

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

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

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

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

تتمثل الإستراتيجية التي يتم تجاهلها عادة في إزالة كل تعليمات 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/