كيفية استخدام ملفات HAR لتحليل أداء المواقع الإلكترونية بفعالية عبر الزمن

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

توفر علامة تبويب الشبكة (Network tab) جدولاً شاملاً يضم جميع الأصول التي تم تحميلها على الصفحة. لا يقتصر دورها على عرض هذه الأصول فحسب، بل تقدم أيضاً معلومات جوهرية حول مصدرها (مثل النطاق ورمز حالة HTTP وحجمها)، والجهة التي بدأت الطلب، والترتيب الزمني لتحميلها في تمثيل متتالي يُعرف بـ Waterfall. يمكنك تخصيص هذا الجدول بإضافة المزيد من المعلومات عبر النقر بزر الفأرة الأيمن على أحد رؤوس الأعمدة واختيار أعمدة إضافية. تُعد أعمدة الحجم (Size)، والوقت (Time)، والتمثيل المتتالي (Waterfall) حاسمة لفهم أداء الصفحة بشكل دقيق. يُظهر عمود الحجم (Size) الحجم المضغوط للمورد (عند الاقتضاء)، بينما يعرض عمود الوقت (Time) المدة الإجمالية من بداية الطلب وحتى استلام البايت الأخير في الاستجابة. وأخيراً، يُوضح عمود التمثيل المتتالي (Waterfall) متى يتم تحميل الأصل بالتزامن مع الطلبات الأخرى، مما يكشف عن التبعيات والتأخيرات المحتملة. إن تحسينات الأداء غالباً ما تكون واضحة من خلال التغييرات في الكود أو بيئة التشغيل. ولكن كيف يمكننا تتبع ما يتم تحليله بواسطة علامة تبويب الشبكة (Network tab) بمرور الوقت؟ الإجابة تكمن في تصدير بيانات الصفحة بتنسيق HAR.

ما هو ملف HAR؟

ملف HAR، وهو اختصار لـ HTTP Archive (أرشيف بروتوكول نقل النص التشعبي)، هو في جوهره ملف JSON يحتوي على جميع المعلومات التفصيلية حول تفاعلات المتصفح مع صفحة ويب معينة. يتضمن هذا الملف المستند HTML، بالإضافة إلى ملفات JavaScript و CSS المرتبطة به. إلى جانب هذا المحتوى، يشتمل ملف HAR أيضاً على معلومات كافة الرؤوس (headers) وبيانات تعريف المتصفح (browser metadata)، مثل التوقيت الدقيق لكل طلب. من الأهمية بمكان الإشارة هنا إلى أن ملفات تعريف الارتباط (cookies) وبيانات النماذج (form data) يتم تسجيلها أيضاً في هذا الملف. لذا، يجب توخي الحذر الشديد لعدم تضمين معلومات حساسة (مثل التفاصيل الشخصية، كلمات المرور، أو أرقام بطاقات الائتمان) أثناء تدقيق الصفحات. علاوة على ذلك، يُنصح بشدة بإجراء تدقيق الصفحات في نوافذ التصفح الخاص (private windows أو incognito windows)، لتجنب تأثير إضافات المتصفح التي قد تعدل أوقات تحميل الصفحة وتؤثر على دقة التحليل.

كيفية إنشاء ملفات HAR

تُعد عملية إنشاء ملفات HAR سهلة ومباشرة عبر معظم المتصفحات الحديثة. إليك الخطوات التفصيلية لكل من Google Chrome و Firefox و Safari:

جوجل كروم (Google Chrome)

1. أغلق جميع نوافذ التصفح المتخفي (incognito windows) في متصفح Google Chrome.
2. افتح نافذة تصفح متخفي جديدة.
3. انتقل إلى القائمة: View > Developer > Developers Tools.
4. في لوحة أدوات المطورين (Developer Tools)، اختر علامة تبويب الشبكة (Network tab).
5. تأكد من تحديد مربعي الاختيار Preserve Log (للاحتفاظ بالسجل) و Disable cache (لتعطيل ذاكرة التخزين المؤقت) لتسجيل جميع التفاعلات بدقة.
6. أعد تحميل الصفحة (Refresh the page).
7. انقر على أيقونة تصدير ملف HAR (أيقونة السهم المتجه للأسفل) لتصدير الملف.
8. احفظ ملف HAR في الموقع الذي تختاره.

فايرفوكس (Firefox)

1. أغلق جميع نوافذ التصفح الخاص (private windows) في متصفح Firefox.
2. افتح نافذة تصفح خاص جديدة.
3. انتقل إلى القائمة: Tools > Developer > Network أو استخدم اختصار لوحة المفاتيح Ctrl+Shift+E.
4. أعد تحميل الصفحة (Refresh the page).
5. في أيقونة الترس (Cog icon) الموجودة في الجانب العلوي الأيمن من الصفحة، اختر Save All As Har.
6. احفظ ملف HAR.

سفاري (Safari)

1. تأكد من تحديد مربع الاختيار Show Develop menu in menu bar (إظهار قائمة التطوير في شريط القوائم) ضمن Safari > Preferences > Advanced.
2. اختر File > Open New Private Window.
3. قم بزيارة صفحة الويب التي تظهر فيها المشكلة.
4. اختر Develop > Show Web Inspector. ستظهر نافذة Web Inspector.
5. أعد تحميل الصفحة (Refresh the page).
6. انقر على زر Export في الجانب العلوي الأيمن من اللوحة.
7. احفظ ملف HAR.

قراءة وتحليل ملفات HAR

بمجرد حصولك على ملف HAR، يمكنك الاستعانة بالعديد من أدوات عرض ملفات HAR المتاحة عبر الإنترنت. من بين هذه الأدوات، يُفضل الكثيرون تلك التي أنشأها Jan Odvarko، والتي توفر واجهة سهلة الاستخدام وقدرات تحليلية ممتازة.

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

استخدام ملفات HAR لتحليل أداء الصفحة بفعالية

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

الخلاصة التقنية

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