ما هي بعض التحسينات الشائعة التي يتم تنفيذها لتقليل حجم صفحات HTML أو XHTML؟ بعض التي تتبادر إلى الذهن هي:
ما هي بعض الآخرين؟ ما الذي يوفر أكبر ميزة يمكن تحقيقها تلقائيًا أو يمكن تنفيذها تلقائيًا بواسطة أداة أو وحدة نمطية؟
لقد أوضحت Google توصياتها وأوضحتها على أنها الأفضل تقليل حجم حمولة المستخدم وهي تشمل التقنيات التالية:
تعد هذه الاقتراحات جزءًا من مشروع Firefox/Firebug الإضافي مفتوح المصدر والمسمى Page Page . يشبه Yahoo! ' YSlow plugin. ستقوم الوظيفة الإضافية لسرعة الصفحة بالتحقق من العديد من التحسينات أكثر من تلك القائمة التي توضح بالتفصيل. كما يتم تقديم إرشادات استخدام سرعة الصفحة.
Yahoo! ' أفضل الممارسات لتسريع موقع الويب الخاص بك حدد مجموعة مماثلة من أفضل الممارسات:
(قائمة Yahoo! طولها حوالي 35 عنصرًا ، ولا حاجة إلى اقتباسها بالكامل.)
يسمح لك كل من YSlow (رابط الصورة) و سرعة الصفحة (رابط الصورة) بإجراء اختبارات على صفحاتك ، مما يشير إلى أشياء يمكنك القيام بها وإظهار ما لديهما ، توصيات ، تم تنفيذها بالفعل.
شخص ما سيقول أن الترميز يجب أن يكون Gzipped ، لذلك قد أكون كذلك.
إليك شرحًا مطولًا لما --- Gzip مع روابط حول كيفية إعداده على Apache و IIS .
--- مقالة حول WebReference تنص على أنك ستجد مكاسب الأداء التالية عند استخدام mod_gzip apache module.
عادةً ما يرى مشرفو المواقع زيادة بنسبة 150-160٪ في أداء خادم الويب ، ويتم استخدام نطاق ترددي يتراوح بين 70٪ و 80٪ في عرض نطاق HTML/XML/JavaScript ، باستخدام هذه الوحدة. إجمالي توفير النطاق الترددي حوالي 30 إلى 60 ٪
ربما لا يستحق كل هذا العناء.
لقد لعبت مع إزالة مسافة بيضاء في HTML قليلا ، ورأيت فقط خفض حجم 10 ٪ في الحمولة النافعة بعد gzipping.
من الناحية الواقعية ، تعمل إزالة المسافات البيضاء وإطعام الأسطر على عمل يقوم به الضغط بالنسبة لنا. نحن مجرد إضافة روعة من الكفاءة بمساعدة الإنسان:
مضغوطة خام. [. _.]
(نعم هذا يقول CSS ولكن نفس القواعد الأساسية تنطبق على 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.
تتطلب كافة التعديلات الأخرى التي يمكنك إجراؤها على HTML مزيدًا من الجهد/الصيانة ، ولا يكاد يكون لها أي تأثير بالمقارنة مع gzipping فقط والنسيان. إنهم ببساطة لا يستحقون الوقت ما لم تكن Google. أنت لست جوجل.
(كما ذكر الآخرون ، كلما كان HTML الخاص بك أكثر اتساقًا ، كلما زاد تأثير gzipping ، حيث إن gzipping - وفقًا لفهم محدودي - يبحث عن سلاسل متطابقة في ملفك ، ويستبدل كل مثيل متكرر برمز صغير يشير إلى أصلي ، لذلك فإن ممارسات التأليف مثل الاحتفاظ بسماتك بنفس الترتيب ، والحفاظ على كل ما تبذلونه من غلاف ، يمكن أن تساعد gzipping في أداء عملها.)
أوه - وإذا كنت تقلل HTML تلقائيًا في مرحلة ما من عملية الإنشاء/العرض ، فهذا لا يتطلب المزيد من الجهد/الصيانة. يتم سرد بعض minifiers HTML هنا:
https://stackoverflow.com/questions/728260/html-minification
هناك مجموعة من أدوات تحليل وتحسين أداء الويب المجانية . يمكنك تجميع قائمة التحقق الكبيرة الخاصة بك من التقارير التي تقوم بإنشائها.
فيما يلي بعض النقاط المعاد صياغتها من تقييم أداء Zoompf -
تتمثل الإستراتيجية التي يتم تجاهلها عادة في إزالة كل تعليمات HTML البرمجية غير الضرورية من الصفحة.
بالنسبة إلى أي مشروع معين ، سيتعين عليك تحديد أي من هذه الاستراتيجيات التي يجب استخدامها بناءً على إصدار HTML (X) الذي تستخدمه ، وطريقة استخدام موقع الويب.
(على ما يبدو ، لا يمكنني نشر أكثر من رابط تشعبي واحد لكل إجابة لأنني مستخدم جديد ، لذلك يجب نسخ عناوين URL هذه ولصقها ... آمل أن يكون ذلك كوشير.)
meiert.com/en/blog/20080601/optional-tags-in-html-4/
code.google.com/speed/articles/optimizing-html.html
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/