01. تقليل طلبات HTTP تقليل طلبات HTTP
ستؤدي الصور وCSS والنصوص البرمجية والفلاش وما إلى ذلك إلى زيادة عدد طلبات HTTP، وقد يؤدي تقليل عدد هذه العناصر إلى تقليل وقت الاستجابة. قم بكتابة العديد من JS وCSS في ملف واحد إن أمكن، ومن الممارسات السيئة أيضًا كتابة الصور مباشرة في الصفحة، ويجب عليك كتابتها في CSS، واستخدام CSS Sprite لتجميع الصور الصغيرة ثم استخدام الخلفية للعثور على الموضع؛ استخدم "خريطة الصور" (وضع عناوين URL مختلفة على نفس الصورة، يمكن لهذه الطريقة تقليل عدد طلبات الصور. بعد الاختبار، يكون وقت الحصول على خريطة الصور أسرع بنسبة 56٪ من وقت الحصول على كل صورة على حدة. خريطة الصور هناك طريقتان، إحداهما هي "خريطة الصور من جانب الخادم" والأخرى هي "خريطة الصور من جانب العميل". يتمثل التنفيذ من جانب الخادم في تمرير إحداثيات XY التي نقر عليها المستخدم إلى الخادم، ثم يقوم الخادم بتمرير إحداثيات XY التي نقر عليها المستخدم إلى الخادم. يرسم الجانب العمليات المقابلة. استخدم علامات MAP في المقدمة. طريقة خريطة الصورة تجعل صيانة البرمجة أكثر صعوبة).
02. استخدم شبكة توصيل المحتوى باستخدام تقنية CDN
“شبكة توصيل المحتوى”. والغرض منه هو نشر محتوى موقع الويب على "حافة" الشبكة الأقرب إلى المستخدم عن طريق إضافة طبقة جديدة من بنية الشبكة إلى الإنترنت الحالي.
مميزات CDN:
1. تسريع ذاكرة التخزين المؤقت المحلية – يعمل على تحسين سرعة الوصول إلى مواقع الشركات (خاصة المواقع التي تحتوي على عدد كبير من الصور والصفحات الثابتة)، ويحسن بشكل كبير من استقرار المواقع ذات الطبيعة المذكورة أعلاه.
2. خدمة النسخ المتطابق - تقضي على تأثير اختناقات الاتصال البيني بين مختلف المشغلين، وتحقق تسريع الشبكة بين المشغلين، وتضمن حصول المستخدمين في الشبكات المختلفة على جودة وصول جيدة.
3. التسريع عن بعد – يقوم مستخدمو الوصول عن بعد بتحديد خادم ذاكرة التخزين المؤقت بشكل ذكي وتلقائي استنادًا إلى تقنية موازنة تحميل DNS واختيار أسرع خادم ذاكرة تخزين مؤقت لتسريع الوصول عن بُعد.
4. تحسين عرض النطاق الترددي - إنشاء خادم Mirror Cache عن بعد تلقائيًا للخادم، وقراءة البيانات من خادم Cache عند وصول المستخدمين عن بعد إليه، مما يقلل عرض النطاق الترددي للوصول عن بعد، ومشاركة حركة مرور الشبكة، وتقليل الحمل على خادم WEB للموقع الأصلي ، إلخ.
5. مكافحة الهجمات العنقودية – يمكن لعقد CDN الموزعة على نطاق واسع وآلية التكرار الذكية بين العقد أن تمنع بشكل فعال اختراقات المتسللين وتقليل تأثير هجمات DDOS المختلفة على موقع الويب، مع ضمان جودة الخدمة الجيدة.
03. أضف انتهاء الصلاحية أو رأس التحكم في ذاكرة التخزين المؤقت لتعيين "انتهاء صلاحية ملف الرأس" أو "ذاكرة التخزين المؤقت الثابتة"
تستخدم المتصفحات التخزين المؤقت لتقليل عدد طلبات HTTP وتسريع وقت تحميل الصفحة. إذا تمت إضافة وقت انتهاء صلاحية طويل إلى رأس الصفحة، فسيقوم المتصفح دائمًا بتخزين العناصر الموجودة في الصفحة مؤقتًا. ومع ذلك، إذا تغير شيء ما في الصفحة، فيجب تغيير الاسم، وإلا فلن يتم تحديث العميل بشكل نشط.
(1) المفهوم
يتم استخدام التحكم في ذاكرة التخزين المؤقت للتحكم في ذاكرة التخزين المؤقت لـ HTTP (قد لا يتم تنفيذه جزئيًا في HTTP/1.0، فقط Pragma: يتم تنفيذ no-cache)
التنسيق: التحكم في ذاكرة التخزين المؤقت: توجيه ذاكرة التخزين المؤقت
يمكن أن يكون توجيه ذاكرة التخزين المؤقت كما يلي:
يستخدم عند الطلب:
|.
|.
|. "الحد الأقصى للعمر" "=" دلتا ثانية
|. "الحد الأقصى" [ "= دلتا-ثواني]
|. "دقيقة جديدة" "=" دلتا ثانية
|.
|.
|."ملحق ذاكرة التخزين المؤقت"
المستخدمة في الرد:
|.
|. "خاص" [ "=" <"> اسم الحقل <"> ]
|. "بدون ذاكرة تخزين مؤقت" [ "=" <"> اسم الحقل <"> ]
|.
|.
|.
|.
|. "الحد الأقصى للعمر" "=" دلتا ثانية
|. "s-maxage" "=" دلتا ثانية
|."ملحق ذاكرة التخزين المؤقت"
الوصف الجزئي:
مقسمة وفقًا لما إذا كان يمكن تخزينها مؤقتًا
يشير العام إلى أنه يمكن تخزين الاستجابة مؤقتًا بواسطة أي ذاكرة تخزين مؤقت.
يشير "خاص" إلى أنه لا يمكن معالجة رسالة الاستجابة بالكامل أو جزء منها لمستخدم واحد بواسطة ذاكرة التخزين المؤقت المشتركة. يسمح هذا للخادم بوصف استجابة جزئية فقط من المستخدم غير صالحة لطلبات المستخدمين الآخرين.
تشير no-cache إلى أنه لا يمكن تخزين رسالة الطلب أو الاستجابة مؤقتًا (تم استبدال HTTP/1.0 بـ no-cache الخاص بـ Pragma)
بناءً على ما يمكن تخزينه مؤقتًا
يتم استخدام no-store لمنع نشر المعلومات المهمة عن غير قصد. سيؤدي إرساله في رسالة الطلب إلى استخدام كل من رسائل الطلب والاستجابة للتخزين المؤقت.
بناءً على مهلة ذاكرة التخزين المؤقت
يشير الحد الأقصى للعمر إلى أنه يمكن للعميل تلقي استجابات بعمر لا يزيد عن الوقت المحدد بالثواني.
يشير min-fresh إلى أنه يمكن للعميل تلقي الاستجابات بوقت استجابة أقل من الوقت الحالي بالإضافة إلى الوقت المحدد.
يشير max-stale إلى أنه يمكن للعميل تلقي رسائل الاستجابة بعد فترة المهلة. إذا تم تحديد قيمة للرسائل التي لا معنى لها، فيمكن للعميل ذلك
يتلقى رسائل الرد التي تقع ضمن فترة المهلة المحددة.
تمثل انتهاء الصلاحية مدة الوجود، مما يسمح للعميل بعدم التحقق (إرسال طلب) قبل هذا الوقت، وهو ما يعادل الحد الأقصى للعمر.
تأثير. ولكن إذا كانت موجودة في نفس الوقت، فسيتم تجاوزها بواسطة الحد الأقصى لعمر التحكم في ذاكرة التخزين المؤقت.
التنسيق: انتهاء الصلاحية = "انتهاء الصلاحية" ": تاريخ HTTP
على سبيل المثال: تنتهي الصلاحية: الخميس، 01 ديسمبر 1994 الساعة 16:00:00 بتوقيت جرينتش (يجب أن تكون بتنسيق جرينتش)
(2) التطبيق
قم بتعيين انتهاء الصلاحية والتحكم في ذاكرة التخزين المؤقت من خلال HTTP META:
<meta http-equiv=”Cache-Control” content=”max-age=7200″ />
<meta http-equiv=”انتهاء الصلاحية” content=”الإثنين، 20 يوليو 2009 23:00:00 بتوقيت جرينتش” />
الإعدادات المذكورة أعلاه هي مجرد أمثلة، ويمكن استخدام أي منها في الممارسة العملية. إذا تمت كتابته بهذه الطريقة، فسيكون صالحًا فقط لصفحة الويب، ولن يتم استخدامه للصور أو الطلبات الأخرى في صفحة الويب، ولن يقوم بأي تخزين مؤقت. علاوة على ذلك، هناك المزيد من الطلبات المقدمة من العميل، على الرغم من أنه يقوم فقط بالتحقق من حالة آخر تعديل، إلا أن زيادة الطلبات يجب أن يكون لها تأثير على سرعة التصفح.
إذا كنت تريد إضافة ذاكرة تخزين مؤقت إلى الملف، فيمكنك استخدام وحدة mod_expire الخاصة بـ Apache ( http://httpd.apache.org/docs/2.2/mod/mod_expires.html )، والتي تتم كتابتها كـ
<IfModule mod_expires.c>
انتهاء الصلاحية قيد التشغيل
انتهاء الصلاحيةالافتراضي "الوصول بالإضافة إلى يوم واحد"
</IfModule>
أتذكر أنه تم ضبط ExpiresActive على "تشغيل" ولم أقم بضبطه على "تشغيل" في البداية، ويبدو أن YSlow لا يمكنه العثور على آلية التخزين المؤقت مهما حدث. إذا تمت إضافتها بهذه الطريقة، فسيتم تضمينها بشكل افتراضي. إذا كنت تريد استهداف أنواع MIME الفردية، فيمكنك:
ExpiresByType image/gif "الوصول بالإضافة إلى 5 ساعات و3 دقائق"
بالإضافة إلى ذلك، عند النقر فوق تحديث في المتصفح، تكون جميع الطلبات المرسلة من قبل العميل بحد أقصى للعمر = 0، مما يشير إلى عملية التحقق. أرسل طلبًا إلى الخادم للتحقق من ذاكرة التخزين المؤقت، ثم قم بتحديث ذاكرة التخزين المؤقت بشكل عام احصل على 304 غير معدل، مما يعني عدم وجود تغيير.
04. مكونات Gzip ضغط Gzip
يعد تنسيق Gzip تقنية ضغط شائعة جدًا، وتتمتع جميع المتصفحات تقريبًا بالقدرة على فك ضغط تنسيق Gzip، ونسبة الضغط التي يمكن ضغطها كبيرة جدًا، حيث يبلغ معدل الضغط العام 85%. مضغوط أم لا، يمكنك اختباره هنا.
05. ضع أوراق الأنماط في الأعلى ضع CSS في الأعلى
استخدم علامة LINK لوضع ورقة الأنماط في رأس المستند حتى يتمكن المشاهدون من رؤية النمط الكامل لموقع الويب في أقرب وقت ممكن.
يتم عرض صفحات HTML خطوة بخطوة عندما يفتح المستخدمون الصفحة، نحتاج إلى مراعاة تجربة المستخدم - سرعة فتح صفحة الويب. الشرط الأول لعرض الصفحة هو HTML، ويتكون HTML من عناصر DIV واحدة تلو الأخرى، وCSS هو أساس كل شيء.
06. ضع البرامج النصية في الأسفل ضع JS في الأسفل
بعد عرض موقع الويب، يمكنك تعيين الوظائف بالطبع، يجب ألا تؤثر ملفات JS هذه على أداء المحتوى أثناء عملية التحميل.
نظرًا لأنه يتم عرض الصفحة تدريجيًا، فسيتم حظر المحتوى الموجود أسفل البرنامج النصي. لن يستمر عرض الصفحة حتى ينتهي تحميل البرنامج النصي. الموضع الصحيح
(1) السيناريو الأسوأ: ضع البرنامج النصي في الأعلى. سيؤدي ذلك إلى حظر عرض المحتوى اللاحق وتنزيل المكونات اللاحقة.
(2) أفضل سيناريو: ضع النص في الأسفل. لا يمنع عرض الصفحة.
07. تجنب تعبيرات CSS تجنب تعبيرات CSS
تعبيرات CSS فظيعة. هذا الشيء الذي يدعمه IE فقط يتطلب قدرًا كبيرًا جدًا من الحسابات عند تنفيذه، وسيتم إعادة حسابه في كل مرة تقوم فيها بتحريك الماوس، ولكن في بعض الأحيان يجب استخدام هذا لتوافق المتصفح.
08. اجعل JavaScript وCSS خارجيين
لقد تحدثنا عن التخزين المؤقت سابقًا بالنسبة لبعض JS وCSS الأكثر شيوعًا، يمكننا استخدام روابط خارجية، مثل ربط ملفات Jquery من Google.
09. تقليل عمليات بحث DNS تقليل عمليات بحث DNS
تقليل موقع الويب الذي يستدعي الموارد من الخارج.
يعثر الإنترنت على الخوادم حسب عنوان IP. يحتوي DNS أيضًا على حمولة. في الظروف العادية، يكون الوقت الذي يستغرقه المتصفح للعثور على عنوان IP لمضيف معين هو 20 إلى 120 مللي ثانية. من أجل تقليل الوقت المستغرق في عملية بحث DNS، يجب اعتماد بعض التقنيات التالية:
(1) ذاكرة التخزين المؤقت لنظام أسماء النطاقات
يمكن تخزين عمليات بحث DNS مؤقتًا لتحسين الأداء على جهاز الكمبيوتر الخاص بالمستخدم، بعد حل اسم المضيف، سيتم تخزين معلومات DNS المقابلة في ذاكرة التخزين المؤقت لنظام DNS لنظام التشغيل، مما يمكن أن يقلل الوقت المطلوب للاستخدام اللاحق. تحتوي بعض المتصفحات الأخرى أيضًا على وظائف التخزين المؤقت لنظام أسماء النطاقات (DNS) المقابلة. لكن عدد DNS المخزن مؤقتًا محدود. عادةً ما يأخذ نظام التشغيل قيمة TTL في الاعتبار، ويتجاهل المتصفح هذه القيمة ويحدد الوقت الخاص به.
(2) تل
يؤدي التخزين المؤقت لـ DNS إلى استهلاك النظام بعض الشيء، ولا يتغير عنوان IP الخاص بالخادم بالضرورة. يمكن أن يشير الخادم إلى المدة التي يمكن خلالها تخزين السجل مؤقتًا، ويحتوي سجل DNS الذي يتم إرجاعه بواسطة البحث على قيمة مدة البقاء (TTL) التي تشير إلى المدة التي يمكن للعميل خلالها تخزين السجل مؤقتًا. بشكل عام، يمكن ضبطه على يوم واحد.
10. تصغير JavaScript وCSS تقليل حجم JS وCSS
هناك مهارات في كتابة JS وCSS، استخدم أقل قدر من التعليمات البرمجية لتحقيق نفس الوظيفة، وتقليل المساحة البيضاء، وتعزيز المنطق، واستخدام الاختصارات، وما إلى ذلك. وبالطبع، هناك العديد من الأدوات التي يمكن أن تساعدك في تحقيق ذلك.
11. تجنب عمليات إعادة التوجيه
عند كتابة الرابط مرة أخرى، على الرغم من وجود فرق "/" نهائي واحد فقط بين "http://xxx.com" و"http://xxx.com/"، إلا أن النتائج تختلف قم بتحويل إعادة التوجيه السابقة إلى الأخيرة ثم انتقل إلى هذا الأمر، ويمكنك أيضًا استخدام الاسم المستعار أو mod_rewrite أو DirectorySlash في Apache.
بالإضافة إلى ذلك، تشمل استخدامات إعادة التوجيه ما يلي: ربط مواقع الويب المختلفة وتتبع زيارات موقع الويب وتجميل عناوين URL.
12. إزالة البرامج النصية المكررة إزالة البرامج النصية المكررة
لن يتعرف المتصفح على الكود الذي يتم استدعاؤه بشكل متكرر ويتجاهله، بل سيحسبه مرة أخرى، وهذا بالطبع إهدار كبير.
13. تكوين علامات ETags تكوين علامات ETags
لا أعرف ماذا حدث، لكنني حذفته في ملف htaccess.
14. جعل Ajax ذاكرة تخزين مؤقت قابلة للتخزين المؤقت Ajax
يستجيب Ajax في الوقت الفعلي قبل أن يتلقى المتصفح بيانات جديدة، يتم تخزين البيانات القديمة مؤقتًا، مما قد يؤدي إلى تحسين الكفاءة.
15. قم بمسح المخزن المؤقت في وقت مبكر قم بتحرير المخزن المؤقت في أقرب وقت ممكن
عندما يقوم المستخدم بتقديم طلب صفحة، يحتاج الخادم إلى قضاء 200 إلى 500 مللي ثانية لتجميع HTML، وكتابته بين الرأس والنص، وتحرير المخزن المؤقت. وبهذه الطريقة، يمكن إرسال رأس الملف أولاً، ثم بعد ذلك يمكن إرسال محتوى الملف لتحسين الكفاءة.
16. استخدم GET لطلبات AJAX استخدم GET لطلبات AJAX
تتفاعل طريقة Get مع الخادم مرة واحدة فقط (إرسال البيانات)، بينما تتطلب طريقة النشر تفاعلين (إرسال الرؤوس ثم البيانات).
17. مكونات ما بعد التحميل مكونات التحميل البطيئة
قم أولاً بتحميل المكونات الضرورية لتهيئة الصفحة، ثم قم بتحميل المكونات الأخرى. يمكن أن تكون طريقة التنفيذ المحددة هي "IFRAME المخفي" أو جافا سكريبت. يعد "YUI Image Loader" مثالًا جيدًا.
18. مكونات التحميل المسبق مكونات التحميل المسبق
لا يتعارض تحميل الأشياء التي يمكن استخدامها لاحقًا مع التحميل البطيء، والغرض منه هو توفير استجابة أسرع للطلبات اللاحقة. راجع تطبيق CSS sprites على صفحة Google الرئيسية.
19. تقليل عدد عناصر DOM تقليل عدد عناصر DOM
تعني بنية الصفحة المعقدة أوقات تنزيل واستجابة أطول، مما يؤدي إلى عرض أبطأ للصفحة. يعد استخدام العلامات بشكل أكثر معقولية وكفاءة لتنظيم الصفحات شرطًا أساسيًا لواجهة أمامية جيدة.
20. تقسيم المكونات عبر المجالات
الغرض الرئيسي هو تحسين إمكانية التنزيل المتوازي لمكونات الصفحة، ولكن احرص على عدم استخدام أكثر من 2-4 أسماء نطاقات ستتسبب في إهدار عمليات بحث DNS المذكورة أعلاه. يمكن أن يكون لدى IE طلبين فقط لنفس المجال في نفس الوقت. يمكن أن تستخدم عمليات التنفيذ شبكات CDN أو شبكات الحوسبة الموزعة الأخرى.
21. تقليل عدد إطارات iframe تقليل عدد إطارات iframe
يعد IFrame من المحرمات بالنسبة لتحسين محركات البحث، ويجب استخدام IFrame بشكل أكثر فعالية.
مزايا IFrame: جيد لتنزيل محتوى الطرف الثالث البطيء مثل الإعلانات، ووضع الحماية الأمنية، ونصوص التنزيل المتوازية
عيوب IFrame: حتى لو كان فارغًا، فإنه سيستهلك الكثير من الموارد ويمنع تحميل الصفحة، وهو أمر غير دلالي.
22. لا تظهر 404 في صفحة 404
تظهر 404 صفحة على الموقع نفسه (وليست نتائج البحث) وستؤثر 404 صفحة بلا معنى على تجربة المستخدم وتستهلك موارد الخادم.
23. تقليل حجم ملف تعريف الارتباط تقليل حجم ملف تعريف الارتباط
يتم تبادل ملفات تعريف الارتباط بين الخادم والمتصفح من خلال رؤوس الملفات، مما يقلل حجم ملف تعريف الارتباط قدر الإمكان ويحدد وقت انتهاء صلاحية معقول، مما يمكن أن يحسن الكفاءة بشكل كبير.
24. استخدم المجالات الخالية من ملفات تعريف الارتباط للمكونات استخدم أسماء النطاقات الخالية من ملفات تعريف الارتباط للمكونات
تعد قراءة ملفات تعريف الارتباط للمكونات الثابتة مضيعة للوقت، وهي طريقة جيدة لاستخدام اسم نطاق آخر خالٍ من ملفات تعريف الارتباط لتخزين مكوناتك الثابتة، أو يمكنك فقط تخزين اسم المجال باستخدام www في ملف تعريف الارتباط.
25. تقليل الوصول إلى DOM تقليل عدد مرات الوصول إلى DOM
JS بطيء جدًا في الوصول إلى DOM، لذا حاول عدم استخدام JS لتعيين تخطيط الصفحة.
26. تطوير معالجات الأحداث الذكية تطوير معالجات الأحداث المرنة
إذا تمت إضافة الكثير من العناصر في شجرة DOM إلى معالج الأحداث، فستكون كفاءة الاستجابة منخفضة بالتأكيد. تحتوي أداة أحداث YUI على طريقة onAvailable يمكنها مساعدتك في تعيين معالج أحداث DOM بمرونة.
27. اختر <link> بدلاً من @import استخدم <link> بدلاً من @import
استخدام @import في IE هو نفس استخدام <link> في أسفل الصفحة.
28. تجنب المرشحات تجنب استخدام المرشحات
إذا كنت بحاجة إلى شفافية Alpha، فلا تستخدم AlphaImageLoader، فهي غير فعالة ولا تنطبق إلا على IE6 والإصدارات الأقدم. استخدم صور PNG8. إذا كان يجب عليك استخدامه، أضف _filter لتجنب التأثير على مستخدمي IE7+.
29. تحسين الصور تحسين الصور
يعد تحويل GIF إلى PNG8 طريقة جيدة لتقليل الحجم، وهناك العديد من الطرق لمعالجة صور JPG وPNG لتحقيق نتائج التحسين.
30. تحسين CSS Sprites تحسين CSS Sprites
سيؤدي ترتيب الصور في CSS Sprites عموديًا ومضغوطًا قدر الإمكان، وترتيب الصور ذات الألوان المتشابهة معًا قدر الإمكان إلى تقليل حجم الصورة نفسها وزيادة سرعة عرض صورة الصفحة.
31. لا تقم بقياس الصور في HTML لا تقم بقياس الصور في HTML
استخدم صورة كبيرة كما تريد، لا تكن كسولًا.
32. اجعل favicon.ico صغيرًا وقابلاً للتخزين المؤقت قلل حجم favicon.ico وقم بتخزينه مؤقتًا
لا ينبغي تغيير ICO للمتصفح الخاص بالموقع بشكل متكرر، لذا قم بتخزينه مؤقتًا لفترة طويلة، ومن الأفضل التحكم فيه أقل من 1K.
33. احتفظ بالمكونات أقل من 25 كيلو بايت
لا يمكن لجهاز iPhone تخزين المكونات التي يزيد حجمها عن 25 كيلو بايت في ذاكرة التخزين المؤقت، وذلك قبل أن يتم ضغطها.
34. قم بتعبئة المكونات في حزمة مستندات متعددة الأجزاء قم بتعبئة المكونات في مستند متعدد الأجزاء
تمامًا مثل إضافة مرفق إلى رسالة بريد إلكتروني، يعد طلب HTTP كافيًا، ولكن هذه التقنية تحتاج إلى دعم بواسطة الوكيل الخاص بك، وهو ما لا يدعمه iPhone.
الصور المضمنة:
استخدم "البيانات: مخطط URL" لتضمين بيانات الصورة في الصفحة الفعلية. ما نراه عادة هو: http وftp وmailto وغيرها من الأوضاع. في الواقع، تم اقتراح وضع data:URL في وقت مبكر من عام 1995. وهذا يعني أنه يتم دمج أجزاء صغيرة من البيانات مباشرة في عنوان URL للرابط. النمط كما يلي: البيانات: [<mediatype>][;base64],<data>
تشير المعلمة الأولى إلى تنسيق الملف، مثل الصورة/gif.
لسوء الحظ، IE لا يدعم هذا الوضع حاليًا. بالإضافة إلى ذلك، حجم البيانات محدود أيضًا.
بيان: يأتي المحتوى من الإنترنت ويستند إلى 34 مقالة من Yahoo.