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

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

علامة تبويب شبكة Chrome

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

يمكنك إضافة المزيد من المعلومات إلى هذا الجدول بالنقر بزر الماوس الأيمن فوق أحد رؤوس الجدول واختيار أعمدة أخرى.

ستكون أعمدة الحجم والوقت والشلال ضرورية لفهم أداء الصفحة. ستعرض قيمة الحجم الحجم مضغوطًا بتنسيق gzip للمورد (عند الاقتضاء) ، بينما يعرض عمود الوقت المدة الإجمالية من بداية الطلب إلى استلام البايت النهائي في الاستجابة.

أخيرًا وليس آخرًا ، يوضح العمود الانحداري عند تحميل الأصل مع الطلبات الأخرى.

تحسينات الأداء ملحوظة من خلال التغييرات في التعليمات البرمجية / البيئة الخاصة بك. إذن كيف نتتبع ما يتم تحليله بواسطة علامة تبويب الشبكة؟ بتصدير الصفحة بتنسيق HAR.

ما هو ملف HAR؟

ملف HAR (اختصار لأرشيف HTTP) هو ملف JSON يحتوي على جميع المعلومات حول تفاعلات المستعرض مع الصفحة. سيحتوي على مستند HTML وملفات JS و CSS الخاصة به.

إلى جانب هذا المحتوى ، سيحتوي ملف HAR أيضًا على جميع معلومات الرؤوس والبيانات الوصفية للمتصفح (أي وقت كل طلب).

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

أيضًا ، يجب عليك تدقيق الصفحات في النوافذ الخاصة ، مما يتجنب ملحقات المستعرض. من المهم تجنب امتدادات المتصفح لأنها قد تعدل أوقات تحميل الصفحة.

توليد ملفات HAR

جوجل كروم

  • أغلق جميع نوافذ التصفح المتخفي في Google Chrome.
  • افتح نافذة جديدة للتصفح المتخفي في Google Chrome.
  • انتقل إلى عرض> المطور> أدوات المطورين.
  • في لوحة Developer Tools ، اختر علامة التبويب Network.
  • حدد مربعي الاختيار الاحتفاظ بالسجل وتعطيل ذاكرة التخزين المؤقت لتسجيل جميع التفاعلات.
  • قم بتحديث الصفحة.
  • انقر فوق تصدير HAR (رمز السهم لأسفل) لتصدير ملف HAR.
  • احفظ ملف HAR.

ثعلب النار

  • أغلق جميع النوافذ الخاصة في Firefox.
  • افتح نافذة خاصة جديدة في Firefox.
  • انتقل إلى Tools> Developer> Network أو ctrl-shift-E.
  • قم بتحديث الصفحة.
  • في أيقونة Cog (الجانب الأيمن العلوي من الصفحة) ، اختر Save All As Har.
  • احفظ ملف HAR.
علامة تبويب شبكة Firefox

سفاري

  • تأكد من تحديد خانة الاختيار إظهار قائمة التطوير في شريط القوائم ضمن Safari> التفضيلات> خيارات متقدمة.
  • اختر ملف> فتح نافذة خاصة جديدة.
  • قم بزيارة صفحة الويب حيث تحدث المشكلة.
  • اختر Develop> Show Web Inspector. تظهر نافذة Web Inspector.
  • قم بتحديث الصفحة.
  • انقر فوق "تصدير" في الجانب الأيمن العلوي من الجزء.
  • احفظ ملف HAR.
علامة التبويب Safari Network

قراءة ملفات HAR

بمجرد أن يكون لديك ملف HAR ، يمكنك تجربة عدد قليل من مشاهدي HAR عبر الإنترنت. المفضل لدي هو الذي ابتكره Jan Odavarko.

عارض هار

ما يعجبني في هذا العارض على وجه الخصوص هو حقيقة أنه يمكنك فتح ملفات متعددة في نفس الوقت ، مما يسهل المقارنة بينها.

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

يمكن أن تكون ملفات HAR مفيدة في جمع معلومات حول أصول الصفحة. نظرًا لأن لديك معلومات مفصلة حول محتواها ، يمكنك مقارنة ما تم تحسينه (أو لم يتم تحسينه في بعض الحالات) بعد إطلاق ميزة جديدة أو اكتمال إعادة التصميم ، على سبيل المثال.

أثناء سير العمل الخاص بي ، أرغب في تتبع قيم الحجم / الوقت النهائية لبضع صفحات من المنتج الذي أعمل عليه.

معلومات اكثر

  • قياس أوقات تحميل الموارد
  • الكود المصدري HAR Viewer

نشرت أيضا على مدونتي. إذا أعجبك هذا المحتوى ، فاتبعني على Twitter و GitHub. صورة الغلاف بواسطة William Daigneault / Unsplash