أداء الويب

يشير أداء الويب إلى سرعة تحميل صفحات الويب وعرضها على متصفح المستخدم . أما تحسين أداء الويب (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 ]} يُستخدم هذا الأسلوب لتأجيل تهيئة الكائن حتى الحاجة إليه. يقوم المتصفح بتحميل الصور في الصفحة أو المنشور عند الحاجة إليها، مثلاً عند تصفح المستخدم للصفحة، وليس جميع الصور دفعة واحدة، وهو السلوك الافتراضي الذي يستغرق وقتاً أطول بطبيعة الحال.

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

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

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

بدلاً من خادم استضافة الموقع الإلكتروني، تُستخدم شبكات توصيل المحتوى (CDN) بالتزامن مع بروتوكول HTTP/2 لتحسين خدمة المستخدم النهائي من خلال توفير موارد الويب مثل الصور وملفات جافا سكريبت وملفات CSS، وذلك لأن موقع شبكة توصيل المحتوى عادةً ما يكون أقرب إلى المستخدم النهائي. ^{[ 16 ]}

في السنوات الأخيرة، ظهرت العديد من المقاييس التي تساعد المطورين على قياس جوانب مختلفة من أداء مواقعهم الإلكترونية. ففي عام ٢٠١٩، قدمت جوجل مقاييس مثل زمن استجابة الخادم (TTFB)، وأول عرض للمحتوى (FCP)، وأول عرض للصفحة (FP)، وتأخير الإدخال الأول (FID)، والتحول التراكمي للتخطيط (CLS)، وأكبر عرض للمحتوى (LCP)، مما يتيح لمالكي المواقع الإلكترونية فهم المشكلات التي قد تؤثر سلبًا على أداء مواقعهم، وتجعلها تبدو بطيئة أو غير سلسة للمستخدم. تُساعد مقاييس أخرى، تشمل عدد الطلبات (عدد الطلبات اللازمة لتحميل صفحة)، ^{[ 17 ]} ووقت تحميل محتوى DOM (الوقت اللازم لتحميل وتحليل مستند HTML بالكامل باستثناء ملفات CSS والصور وما إلى ذلك)، ^{[ 18 ]} ووقت ظهور المحتوى الظاهر (المحتوى المرئي دون الحاجة إلى التمرير)، ^{[ 19 ]} ووقت الاستجابة الكاملة، ^{[ 19 ]} وعدد موارد حظر العرض (مثل البرامج النصية وملفات CSS)، ^{[ 20 ]} ووقت التحميل، ووقت الاتصال، وحجم الصفحة الإجمالي، في توفير صورة دقيقة عن زمن الاستجابة والتباطؤ الذي يحدث على مستوى الشبكة، والذي قد يُبطئ الموقع. ^{[ 21 ] [ 22 ] [ 23 ]}

تُوفّر مكتبات جافا سكريبت الرئيسية للواجهة الأمامية، مثل React [ ^{24 ] و} NuxtJS ^{[ 25 ]} و Vue ^{[ 26 ]} ، وحداتٍ لقياس مؤشرات الأداء الرئيسية مثل TTFB وFCP وLCP وFP وغيرها . كما تُصدر جوجل مكتبة core-web-vitals التي تُسهّل قياس هذه المؤشرات في تطبيقات الواجهة الأمامية. إضافةً إلى ذلك، تُوفّر جوجل أيضًا Lighthouse، وهو مُكوّن من أدوات مطوّري Chrome، وPageSpeed ​​Insight، وهو موقع يُتيح للمطوّرين قياس أداء مواقعهم الإلكترونية ومقارنته بالحدود الدنيا والقصوى المُوصى بها من جوجل ^{[ 27 ] .}

بالإضافة إلى ذلك، تساعد أدوات مثل "مراقب الشبكة" من موزيلا فايرفوكس في توفير نظرة ثاقبة على حالات التباطؤ على مستوى الشبكة التي قد تحدث أثناء نقل البيانات. ^{[ 21 ]}