أداء الويب

📅 آخر تحديث: ٢٩ يوليو ٢٠٢٦
✍️ نُشر في: ٢٩ يوليو ٢٠٢٦
الموسوعة الحرة

يشير أداء الويب إلى سرعة تحميل صفحات الويب وعرضها على متصفح المستخدم . أما تحسين أداء الويب (WPO) ، أو تحسين مواقع الويب، فهو مجال معرفي يُعنى بزيادة أداء الويب.

أظهرت الدراسات أن زيادة سرعة تحميل المواقع الإلكترونية تُسهم في تعزيز ولاء الزوار وزيادة رضاهم ، لا سيما مستخدمي الإنترنت البطيء ومستخدمي الأجهزة المحمولة. [ 1] [2 ] كما تُقلل سرعة تحميل المواقع من حجم البيانات المُرسلة عبر الإنترنت، مما يُخفض بدوره استهلاك الطاقة والأثر البيئي للموقع. [ 4 ] تشمل بعض العوامل المؤثرة على سرعة تحميل الصفحات: ذاكرة التخزين المؤقت للمتصفح/الخادم، وتحسين الصور، والتشفير (مثل SSL )، والتي بدورها تؤثر على وقت عرض الصفحات. يُمكن تحسين أداء صفحة الويب من خلال تقنيات مثل ذاكرة التخزين المؤقت متعددة الطبقات، والتصميم الخفيف لمكونات طبقة العرض ، والتواصل غير المتزامن مع مكونات الخادم.

تاريخ

في العقد الأول من عمر الإنترنت، انصبّ التركيز في تحسين أداء المواقع الإلكترونية بشكل أساسي على تحسين شيفرة المواقع وتجاوز حدود إمكانيات الأجهزة. ووفقًا لكتاب " ضبط أداء الويب" (Web Performance Tuning) لباتريك كيليليا، الصادر عام ٢٠٠٢، تضمنت بعض التقنيات المبكرة استخدام برامج خادم بسيطة أو CGI، وزيادة ذاكرة الخادم، والبحث عن فقدان الحزم وإعادة إرسالها. [ ٥ ] ورغم أن هذه المبادئ تُشكّل اليوم جزءًا كبيرًا من الأساس المُحسّن لتطبيقات الإنترنت، إلا أنها تختلف عن نظرية التحسين الحالية في قلة الجهود المبذولة لتحسين سرعة عرض المتصفح.

صاغ ستيف ساودرز مصطلح "تحسين أداء الويب" في عام 2004. [ 6 ] في ذلك الوقت، قدم ساودرز عدة تنبؤات بشأن تأثير تحسين أداء الويب كصناعة ناشئة على الويب، مثل سرعة المواقع الإلكترونية بشكل افتراضي، والدمج، ومعايير الويب للأداء، والآثار البيئية للتحسين، والسرعة كعامل تمييز. [ 7 ]

أشار سودرز في عام 2007 إلى نقطة رئيسية مفادها أن 80% على الأقل من الوقت اللازم لتنزيل موقع ويب وعرضه يتحكم فيه هيكل الواجهة الأمامية. ويمكن تقليل هذا التأخير من خلال فهم سلوك المتصفحات النموذجي، بالإضافة إلى كيفية عمل بروتوكول HTTP . [ 8 ]

تقنيات التحسين

يُحسّن تحسين أداء المواقع الإلكترونية تجربة المستخدم عند زيارة أي موقع، ولذلك فهو مطلوب بشدة من قِبل مصممي ومطوري المواقع . يستخدمون تقنيات متعددة لتبسيط مهام تحسين المواقع وتقليل أوقات تحميل صفحات الويب. تُعرف هذه العملية بتحسين واجهة المستخدم أو تحسين المحتوى. يركز تحسين واجهة المستخدم على تقليل أحجام الملفات و"تقليل عدد الطلبات اللازمة لتحميل صفحة معينة".

إضافةً إلى التقنيات المذكورة أدناه، يُعد استخدام شبكة توصيل المحتوى - وهي عبارة عن مجموعة من خوادم البروكسي موزعة في مواقع مختلفة حول العالم - نظام توصيل فعالًا يختار خادمًا لمستخدم معين بناءً على قربه من الشبكة. [ 9 ] وعادةً ما يتم اختيار الخادم الأسرع استجابةً.

تُعدّ التقنيات التالية من مهام تحسين مواقع الويب الشائعة الاستخدام، ويستخدمها مطورو الويب على نطاق واسع:

تفتح متصفحات الويب اتصالات بروتوكول التحكم بالنقل (TCP) منفصلة لكل طلب بروتوكول نقل النص التشعبي (HTTP) يتم إرساله عند تنزيل صفحة ويب. يُحدد مجموع هذه الطلبات عدد عناصر الصفحة المطلوبة للتنزيل. مع ذلك، يقتصر المتصفح على فتح عدد محدود من الاتصالات المتزامنة مع مضيف واحد. ولمنع حدوث اختناقات، يتم تقليل عدد عناصر الصفحة الفردية باستخدام تقنية دمج الموارد، حيث تُجمع الملفات الأصغر (مثل الصور) في ملف واحد. هذا يقلل من طلبات HTTP وعدد عمليات الإرسال والاستقبال اللازمة لتحميل صفحة الويب.

تُبنى صفحات الويب من ملفات برمجية مثل جافا سكريبت ولغة ترميز النص التشعبي (HTML). ومع ازدياد تعقيد صفحات الويب، تزداد ملفاتها البرمجية، وبالتالي تزداد سرعة تحميلها. يمكن لضغط الملفات تقليل حجم الملفات البرمجية بنحو 40%، [ 10 ] مما يُحسّن استجابة الموقع.

يُقلل تحسين التخزين المؤقت للويب من حمل الخادم، واستهلاك النطاق الترددي، وزمن الاستجابة . تستخدم شبكات توصيل المحتوى (CDNs) برامج تخزين مؤقت مخصصة لحفظ نسخ من المستندات التي تمر عبر أنظمتها. تعتمد العديد من منصات مواقع الويب، مثل SiteGround و IONOS و Wix و Hostinger ، على شبكات توصيل المحتوى العالمية وتقنيات التخزين المؤقت لتوفير تحميل أسرع للصفحات في مختلف المناطق الجغرافية. [ 11 ] [ 12 ] [ 13 ]

قد تُلبى الطلبات اللاحقة من ذاكرة التخزين المؤقت في حال استيفاء شروط معينة. توجد ذاكرة التخزين المؤقت للويب إما على جانب العميل (موقع أمامي) أو على جانب خادم الويب (موقع خلفي) لشبكة توصيل المحتوى (CDN ) . كما تستطيع متصفحات الويب تخزين المحتوى لإعادة استخدامه من خلال ذاكرة التخزين المؤقت لبروتوكول HTTP أو ذاكرة التخزين المؤقت للويب . عادةً ما تُوجّه طلبات متصفحات الويب إلى ذاكرة التخزين المؤقت لبروتوكول HTTP للتحقق من إمكانية استخدام استجابة مخزنة مؤقتًا لتلبية الطلب. في حال وجود تطابق، تُلبى الاستجابة من ذاكرة التخزين المؤقت. يُسهم ذلك في تقليل زمن استجابة الشبكة والتكاليف المرتبطة بنقل البيانات. تُهيأ ذاكرة التخزين المؤقت لبروتوكول HTTP باستخدام رؤوس الطلب والاستجابة.

يُفرّق تصغير حجم الشيفرة بين الشفرات التي يكتبها مطورو الويب وكيفية تفسير عناصر الشبكة لها. يزيل التصغير التعليقات والمسافات الزائدة، ويُقلّص أسماء المتغيرات لتقليل حجم الشيفرة، مما يُخفّض أحجام الملفات بنسبة تصل إلى 60%. بالإضافة إلى التخزين المؤقت والضغط، تعمل تقنيات الضغط مع فقدان البيانات (المشابهة لتلك المستخدمة مع ملفات الصوت) على إزالة معلومات الترويسة غير الضرورية، وتُقلّل جودة الصورة الأصلية في العديد من الصور عالية الدقة. هذه التغييرات، مثل تعقيد البكسل أو تدرجات الألوان، غير ملحوظة للمستخدم النهائي ولا تؤثر بشكل ملحوظ على إدراكه للصورة. تقنية أخرى هي استبدال الرسومات النقطية برسومات متجهة مستقلة عن الدقة . يُعدّ استبدال المتجهات الأنسب للصور الهندسية البسيطة.

يُقلل التحميل الكسول للصور والفيديوهات من وقت تحميل الصفحة الأولي، وحجمها الأولي، واستهلاك موارد النظام ، مما يُحسّن أداء الموقع الإلكتروني. [ 14 ] يُستخدم هذا الأسلوب لتأجيل تهيئة الكائن حتى الحاجة إليه. يقوم المتصفح بتحميل الصور في الصفحة أو المنشور عند الحاجة إليها، مثلاً عند تصفح المستخدم للصفحة، وليس جميع الصور دفعة واحدة، وهو السلوك الافتراضي الذي يستغرق وقتاً أطول بطبيعة الحال.

HTTP/1.x و HTTP/2

نظراً لأن متصفحات الويب تستخدم اتصالات TCP متعددة لطلبات المستخدمين المتوازية، فقد يحدث ازدحام واحتكار المتصفح لموارد الشبكة. ولأن طلبات HTTP/1 تأتي مصحوبة بعبء إضافي ، يتأثر أداء الويب بمحدودية النطاق الترددي وزيادة الاستخدام.

بالمقارنة مع HTTP/1 و HTTP/2

  • هو ثنائي بدلاً من نصي
  • يتم إرسالها بشكل كامل متعدد الإرسال بدلاً من أن تكون مرتبة ومحظورة
  • وبالتالي يمكن استخدام اتصال واحد للتوازي
  • يستخدم ضغط رأس الملف لتقليل الحمل الزائد
  • يسمح للخوادم بـ "دفع" الاستجابات بشكل استباقي إلى ذاكرة التخزين المؤقت للعميل [ 15 ]

Instead of a website's hosting server, CDNs are used in tandem with HTTP/2 in order to better serve the end-user with web resources such as images, JavaScript files and Cascading Style Sheet (CSS) files since a CDN's location is usually in closer proximity to the end-user.[16]

Metrics

In recent years, several metrics have been introduced that help developers measure various aspects of the performance of their websites. In 2019, Google introduced metrics such as Time to First Byte (TTFB), First Contentful Paint (FCP), First Paint (FP), First Input Delay (FID), Cumulative Layout Shift (CLS) and Largest Contentful Paint (LCP) allow for website owner to gain insights into issues that might hurt the performance of their websites making it seem sluggish or slow to the user. Other metrics including Request Count (number of requests required to load a page),[17] DOMContentLoaded (time when HTML document is completely loaded and parsed excluding CSS style sheets, images, etc.),[18] Above The Fold Time (content that is visible without scrolling),[19] Round Trip Time,[19] number of Render Blocking Resources (such as scripts, stylesheets),[20] Onload Time, Connection Time, Total Page Size help provide an accurate picture of latencies and slowdowns occurring at the networking level which might slow down a site.[21][22][23]

Modules to measure metrics such as TTFB, FCP, LCP, FP etc are provided with major frontend JavaScript libraries such as React,[24]NuxtJS[25] and Vue.[26] Google publishes a library, the core-web-vitals library that allows for easy measurement of these metrics in frontend applications. In addition to this, Google also provides the Lighthouse, a Chrome dev-tools component and PageSpeed Insight a site that allows developers to measure and compare the performance of their website with Google's recommended minimums and maximums.[27]

In addition to this, tools such as the Network Monitor by Mozilla Firefox help provide insight into network-level slowdowns that might occur during transmission of data.[21]

References

  1. ↑"Google Adds Site Speed To Search Ranking". Retrieved 4 December 2012.
  2. ↑ شارون، بيل. "WPO | الاستعداد لحركة مرور يوم الاثنين الإلكتروني" . CDNetworks . تم الاسترجاع في 4 ديسمبر 2012 .
  3. ↑ ساودرز، ستيف. "الويب أولاً للهواتف المحمولة" . تم الاطلاع عليه بتاريخ 4 ديسمبر 2012 .
  4. ↑ بيلونش، ألبرت (10 أكتوبر 2012). "تحسين أداء الويب للجميع" . تم الاطلاع عليه بتاريخ 4 ديسمبر 2012 .
  5. ↑ كيليليا، باتريك (2002). تحسين أداء الويب . سيباستوبول: أورايلي ميديا. ص 480. ISBN  059600172X.
  6. ↑ فريك، تيم (2016). التصميم من أجل الاستدامة: دليل لبناء منتجات وخدمات رقمية أكثر مراعاة للبيئة . بوسطن: أورايلي ميديا. ص 195. ISBN  978-1491935774.
  7. ↑ فريك، تيم (2016). التصميم من أجل الاستدامة: دليل لبناء منتجات وخدمات رقمية أكثر مراعاةً للبيئة . بوسطن: أورايلي ميديا. ص 56. ISBN  978-1491935774.
  8. ↑ ساودرز، ستيف (2007). مواقع الويب عالية الأداء . فارنهام: أورايلي ميديا. ص 170. ISBN  978-0596529307تمت أرشفة هذا النص من المصدر الأصلي في 8 مارس 2019.
  9. ↑ سافريموتو، أنطوان؛ ماثيو، برتراند؛ فاتون، ساندرينا (2019). "تأثير بروتوكولات الإنترنت وشبكات توصيل المحتوى على تصفح الويب" (ملف PDF) . المؤتمر الدولي العاشر للاتحاد الدولي لمعالجة المعلومات (IFIP) حول التقنيات الجديدة والتنقل والأمن (NTMS) لعام 2019 (ملف PDF) . ص 6. doi : 10.1109/NTMS.2019.8763827 . ISBN  978-1-7281-1542-9.
  10. ↑ ساكاموتو، ياسوتاكا؛ ماتسوموتو، شينسكي؛ توكوناغا، سيكي؛ سايكي، ساتشيو؛ ناكامورا، ماساهيدي (فبراير 2015). "دراسة تجريبية حول تأثيرات تصغير حجم البرامج النصية وضغط بروتوكول HTTP لتقليل حركة البيانات". المؤتمر الدولي الثالث لعام 2015 حول المعلومات الرقمية والشبكات والاتصالات اللاسلكية (DINWC) . معهد مهندسي الكهرباء والإلكترونيات (IEEE). الصفحات 127-132 . doi : 10.1109/DINWC.2015.7054230 . ISBN  978-1-4799-6376-8.
  11. ↑ ماسونر، ليز (19 ديسمبر 2024). "أفضل 10 خدمات استضافة مواقع إلكترونية لعام 2025" . فوربس أدفايزر . تم الاطلاع عليه بتاريخ 28 يناير 2026 .
  12. ↑ "مقارنة بين Wix وSquarespace في عام 2026: جربت كلا المنصتين - رأيي النهائي" . سايبرنيوز . 6 مايو 2022. تاريخ الاطلاع: 28 يناير 2026 .
  13. ↑ "استضافة المواقع في أستراليا 2026: أفضل 9 شركات استضافة تم اختبارها من حيث السرعة والسعر" . سايبرنيوز . 2024-07-08 . تم الاطلاع عليه بتاريخ 2026-01-28 .
  14. ↑ "التحميل الكسول - أداء الويب | MDN" . developer.mozilla.org . تم الاطلاع عليه بتاريخ 15 مارس 2022 .
  15. ↑ "الأسئلة الشائعة حول بروتوكول HTTP/2" . مجموعة عمل HTTP . تم الاطلاع عليه بتاريخ 14 أبريل 2017 .
  16. ↑ "HTTP/2 - اختبار وتحليل أداء واقعي" . CSS Tricks . تم الاطلاع عليه بتاريخ 14 أبريل 2017 .
  17. ↑ تحسين أداء الويب على الأجهزة المحمولة . 2015. ISBN 9781785284625.
  18. ↑ سكفورتش، برونو؛ بيرنا، ماريا أنطونيتا؛ باكلر، كريغ؛ كوريتش، إيفان؛ بيت، كريستوفر؛ يانكوف، تونينو؛ لافاريان، رضا؛ بيرمان، دانيال؛ بوشفرة، أحمد؛ جيمس، هايدن؛ أنتولوفيتش، زوران؛ ريبيرو، كلاوديو (2018). مجموعة أداء الويب . سايت بوينت بي تي واي. ISBN 9781492069805.
  19. مجلة سماشينغ (24 سبتمبر 2014). تحسين الأداء: تقنيات واستراتيجيات . شركة سماشينغ ماغازين المحدودة. رقم ISBN 9783944540948.
  20. ↑ فرين، بن (2022). تصميم مواقع الويب المتجاوبة باستخدام HTML5 وCSS . دار نشر باكت. رقم ISBN 9781803231723.
  21. 1 2 "قياس الأداء - تعلم تطوير الويب | MDN" . developer.mozilla.org . تم الاطلاع عليه بتاريخ 9 يناير 2023 .
  22. ↑ "قياس أداء الويب في عام 2023: الدليل الشامل" . ريكورد ميتريكس . تم الاطلاع عليه بتاريخ 9 يناير 2023 .
  23. ↑ "قائمة مراجعة أداء الواجهة الأمامية لعام 2021 (PDF، Apple Pages، MS Word)" . مجلة Smashing . 12 يناير 2021. تاريخ الاسترجاع: 9 يناير 2023 .
  24. ↑ "قياس الأداء | إنشاء تطبيق React" . create-react-app.dev . 20 يونيو 2020. تم الاطلاع عليه بتاريخ 9 يناير 2023 .
  25. ↑ "@nuxtjs/web-vitals" . npm . تم الاسترجاع في 2023-01-09 .
  26. ↑ "vue-web-vitals" . npm . 22 مايو 2021. تم الاسترجاع في 9 يناير 2023 .
  27. ↑ "مقاييس الأداء التي تركز على المستخدم" . web.dev . تم الاطلاع عليه بتاريخ 9 يناير 2023 .