هناك عدة أهداف أساسية لإنشاء موقع إلكتروني فعّال ومرن بتكلفة بيانات منخفضة.
لكل هدف، تحتاج إلى تدقيق.
| الهدف | لماذا؟ | ما الذي يجب اختباره؟ |
|---|---|---|
| ضمان الخصوصية والأمان وصحة البيانات، وإتاحة استخدام واجهة برمجة التطبيقات بفعالية | أهمية بروتوكول HTTPS | تم تنفيذ بروتوكول HTTPS لجميع صفحات الموقع الإلكتروني/المسارات ومواد العرض. |
| تحسين أداء التحميل | يغادر %53 من المستخدمين المواقع الإلكترونية التي يستغرق تحميلها أكثر من ثلاث ثوانٍ | ملفات JavaScript وCSS التي يمكن تحميلها بشكل غير متزامن أو تأجيلها حدِّد أهدافًا لسرعة الاستعداد للتفاعل وحجم الحمولة، مثل سرعة الاستعداد للتفاعل على شبكة الجيل الثالث. تحديد ميزانية قائمة على الأداء |
| تقليل حجم الصفحة | • تقليل تكلفة البيانات للمستخدمين الذين لديهم خطط بيانات محدودة • تقليل متطلبات مساحة التخزين لتطبيقات الويب، وهو أمر مهم بشكل خاص للمستخدمين الذين لديهم أجهزة ذات مواصفات منخفضة • تقليل تكاليف الاستضافة والعرض • تحسين أداء العرض والموثوقية والمرونة | حدِّد ميزانية لحجم الصفحة، على سبيل المثال، أن يكون التحميل الأول أقل من 400 كيلوبايت. تحقَّق من استخدام JavaScript بشكل مكثّف. تحقَّق من أحجام الملفات للعثور على الصور والوسائط وHTML وCSS وJavaScript التي تستهلك مساحة كبيرة. ابحث عن الصور التي يمكن تحميلها بشكل كسول، وتحقَّق من الرموز غير المستخدَمة باستخدام أدوات التغطية. |
| تقليل طلبات الموارد | • تقليل مشاكل وقت الاستجابة • تقليل تكاليف عرض الإعلانات • تحسين أداء عرض الإعلانات وموثوقيته ومرونته | ابحث عن الطلبات المفرطة أو غير الضرورية لأي نوع من الموارد. على سبيل المثال: الملفات التي يتم تحميلها بشكل متكرر، وملفات JavaScript التي يتم تحميلها في إصدارات متعددة، وملفات CSS التي لا يتم استخدامها مطلقًا، والصور التي لا يتم عرضها مطلقًا (أو التي يمكن تحميلها بشكل بطيء). |
| تحسين استخدام الذاكرة | يمكن أن تصبح الذاكرة عائقًا جديدًا، خاصةً على الأجهزة الجوّالة | استخدِم "مدير مهام Chrome" لمقارنة موقعك الإلكتروني بالمواقع الإلكترونية الأخرى من حيث استخدام الذاكرة عند تحميل الصفحة الرئيسية واستخدام ميزات الموقع الإلكتروني الأخرى. |
| تقليل عبء وحدة المعالجة المركزية | تتضمّن الأجهزة الجوّالة وحدة معالجة مركزية محدودة، خاصةً الأجهزة ذات المواصفات المنخفضة | تحقَّق من استخدام JavaScript بشكل مكثّف. يمكنك العثور على محتوى JavaScript وCSS غير المستخدَم باستخدام أدوات التغطية. تحقَّق من حجم DOM الزائد والنصوص البرمجية التي يتم تشغيلها بدون داعٍ عند التحميل الأول. ابحث عن JavaScript الذي تم تحميله في إصدارات متعددة، أو المكتبات التي يمكن تجنّبها من خلال إعادة هيكلة بسيطة. |
هناك مجموعة واسعة من الأدوات والأساليب لتدقيق المواقع الإلكترونية:
- أدوات النظام
- أدوات المتصفّح المدمجة
- إضافات المتصفّح
- تطبيقات الاختبارات على الإنترنت
- أدوات المحاكاة
- إحصاءات Google
- المقاييس التي توفّرها الخوادم وأنظمة الأعمال
- تسجيل الشاشة والفيديو
- الاختبارات اليدوية
في ما يلي، ستتعرّف على النهج المناسب لكل نوع من أنواع التدقيق.
تسجيل طلبات الموارد: العدد والحجم والنوع والتوقيت
عند تدقيق موقع إلكتروني، من الأفضل البدء بالتحقّق من الصفحات باستخدام أدوات الشبكة في المتصفّح. إذا لم تكن متأكدًا من كيفية إجراء ذلك، يمكنك الاطّلاع على دليل البدء الخاص بلوحة الشبكة في "أدوات مطوّري البرامج في Chrome". تتوفّر أدوات مشابهة لمتصفّحات Firefox وSafari وInternet Explorer وEdge.
تذكَّر الاحتفاظ بسجلّ للنتائج قبل إجراء التغييرات. بالنسبة إلى طلبات الشبكة، يمكن أن يكون ذلك بسيطًا مثل لقطة شاشة، ويمكنك أيضًا حفظ بيانات الملف الشخصي كملف JSON. تتوفّر أدناه معلومات إضافية حول كيفية حفظ نتائج الاختبار ومشاركتها.
قبل البدء في تدقيق استخدام الشبكة، تأكَّد من إيقاف ذاكرة التخزين المؤقت للمتصفّح لضمان الحصول على إحصاءات دقيقة لأداء التحميل الأول. إذا كنت تستخدم حاليًا ميزة التخزين المؤقت من خلال مشغّل خدمات، يمكنك محو مساحة التخزين في Cache API. قد تحتاج إلى استخدام نافذة تصفّح متخفٍ (خاصة)، حتى لا تقلق بشأن إيقاف ذاكرة التخزين المؤقت للمتصفّح أو إزالة الإدخالات المخزّنة مؤقتًا سابقًا.
في ما يلي بعض الميزات والمقاييس الأساسية التي يجب التحقّق منها باستخدام أدوات المتصفّح:
- أداء التحميل: توفّر أداة Lighthouse ملخّصًا لمقاييس التحميل. كتب "أدي عثماني" ملخصًا رائعًا عن أهم اللحظات التي يمر بها المستخدم أثناء تحميل الصفحة.
- أحداث المخطط الزمني لتحميل الموارد وتحليلها، واستخدام الذاكرة إذا أردت التعمّق أكثر، يمكنك إجراء تحليل للذاكرة وJavaScript.
- إجمالي حجم الصفحة وعدد الملفات
- عدد ملفات JavaScript وحجمها
- أي ملفات JavaScript فردية كبيرة بشكل خاص (أكثر من 100 كيلوبايت مثلاً)
- ملفات JavaScript غير المستخدَمة يمكنك التحقّق من ذلك باستخدام أداة التغطية في Chrome.
- إجمالي عدد ملفات الصور وحجمها
- أي ملفات صور فردية كبيرة بشكل خاص
- تنسيقات الصور: هل هناك صور PNG يمكن أن تكون بتنسيق JPEG أو SVG؟ هل يتم استخدام WebP مع إجراءات احتياطية؟
- ما إذا تم استخدام تقنيات الصور السريعة الاستجابة (مثل srcset)
- حجم ملف HTML
- إجمالي عدد ملفات CSS وحجمها
- ملفات CSS غير المستخدَمة (في Chrome، استخدِم لوحة التغطية.)
- تحقَّق من الاستخدام غير الصحيح لمواد العرض الأخرى، مثل خطوط الويب (بما في ذلك خطوط الرموز).
- تحقَّق من المخطط الزمني في "أدوات مطوري البرامج" بحثًا عن أي شيء يحظر تحميل الصفحة.
إذا كنت تستخدم اتصال Wi-Fi سريعًا أو اتصال شبكة جوّال سريعًا، يمكنك إجراء الاختبار باستخدام محاكاة معدل نقل البيانات المنخفض ووقت الاستجابة العالي. تذكَّر إجراء الاختبار على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي، فبعض المواقع الإلكترونية تستخدم تقنية UA sniffing لتقديم مواد عرض وتنسيقات مختلفة للأجهزة المختلفة. قد تحتاج إلى إجراء الاختبار على أجهزة فعلية باستخدام تصحيح الأخطاء عن بُعد، وليس فقط باستخدام محاكاة الأجهزة.
التحقّق من الذاكرة وحِمل وحدة المعالجة المركزية
قبل إجراء التغييرات، احتفِظ بسجلّ لاستخدام الذاكرة ووحدة المعالجة المركزية.
في Chrome، يمكنك الوصول إلى "مدير المهام" من قائمة "النافذة". هذه طريقة بسيطة للتحقّق من متطلبات صفحة الويب.
اختبار أداء التحميل الأول واللاحق
تُعدّ أدوات Lighthouse وWebPagetest وإحصاءات PageSpeed مفيدة لتحليل السرعة وتكلفة البيانات واستخدام الموارد. ستتحقّق أداة WebPagetest أيضًا من التخزين المؤقت للمحتوى الثابت، ومدة تحميل أول بايت، وما إذا كان موقعك الإلكتروني يستخدم شبكات توصيل المحتوى (CDN) بشكل فعّال.
حفظ النتائج
- WebPagetest: لكل نتيجة اختبار عنوان URL خاص بها.
- إحصاءات PageSpeed: تتضمّن الآن أداة "إحصاءات PageSpeed" على الإنترنت بيانات تقرير تجربة المستخدم على Chrome التي تسلّط الضوء على إحصاءات الأداء في الواقع.
- Lighthouse: يمكنك حفظ التقارير من لوحة "التدقيق" في "أدوات مطوّري البرامج في Chrome" من خلال النقر على زر التنزيل:
اختبار متطلبات تطبيق الويب التقدّمي الأساسية
تساعدك أداة Lighthouse في اختبار الأمان والوظائف وسهولة الاستخدام والأداء وأداء محرك البحث. وعلى وجه التحديد، تتحقّق Lighthouse من نجاح موقعك الإلكتروني في تنفيذ ميزات تطبيقات الويب التقدّمية، مثل مشغّلات الخدمات وبيان تطبيق الويب.
تختبر Lighthouse أيضًا ما إذا كان بإمكان موقعك الإلكتروني توفير تجربة مقبولة بلا إنترنت.
يمكنك تنزيل تقرير Lighthouse بتنسيق JSON أو، إذا كنت تستخدم إضافة Lighthouse في Chrome، يمكنك مشاركة التقرير كملف GitHub Gist: انقر على زر المشاركة، واختَر "فتح في العارض"، ثم انقر على زر المشاركة مرة أخرى في النافذة الجديدة واختَر "حفظ كملف Gist".
استخدام الإحصاءات وتتبُّع الأحداث ومقاييس النشاط التجاري لتتبُّع الأداء الفعلي
إذا أمكن، احتفِظ بسجلّ لبيانات الإحصاءات قبل إجراء التغييرات، مثل معدلات الارتداد والوقت المستغرَق في الصفحة وصفحات الخروج، وأي بيانات أخرى ذات صلة بمتطلبات نشاطك التجاري.
وإذا أمكن، سجِّل المقاييس التجارية والفنية التي قد تتأثر، حتى تتمكّن من مقارنة النتائج بعد إجراء التغييرات. على سبيل المثال: قد يتتبّع موقع إلكتروني للتجارة الإلكترونية الطلبات في الدقيقة أو يسجّل إحصاءات لاختبارات الضغط والتحمّل. من المرجّح أن تتحسّن تكاليف التخزين في الخلفية ومتطلبات وحدة المعالجة المركزية وتكاليف العرض والمرونة إذا قلّلت حجم الصفحة وطلبات الموارد.
إذا لم تكن قد نفّذت الإحصاءات، فقد حان الوقت الآن. مقاييس الأعمال والتحليلات هي الحكم النهائي فيما إذا كان موقعك يعمل أم لا. يمكنك دمج ميزة تتبُّع الأحداث لإجراءات المستخدمين، مثل النقر على الأزرار وتشغيل الفيديوهات، إذا كان ذلك مناسبًا. قد تحتاج أيضًا إلى تنفيذ تحليل تدفق الهدف: المسارات التي يتنقل من خلالها المستخدمون نحو "الإحالات الناجحة".
يمكنك مراقبة سرعة الموقع الإلكتروني في "إحصاءات Google" للتحقّق من مدى ارتباط مقاييس الأداء بمقاييس النشاط التجاري. على سبيل المثال: "ما مدى سرعة تحميل الصفحة الرئيسية؟" مقارنةً بـ "هل أدى الدخول عبر الصفحة الرئيسية إلى عملية بيع؟"
تستخدم "إحصاءات Google" البيانات من Navigation Timing API.
قد تحتاج إلى تسجيل البيانات باستخدام إحدى واجهات برمجة التطبيقات لأداء JavaScript أو المقاييس الخاصة بك، على سبيل المثال:
const subscribeBtn = document.querySelector('#subscribe');
subscribeBtn.addEventListener('click', (event) => {
// Event listener logic goes here...
const lag = performance.now() - event.timeStamp;
if (lag > 100) {
ga('send', 'event', {
eventCategory: 'Performance Metric'
eventAction: 'input-latency',
eventLabel: '#subscribe:click',
eventValue: Math.round(lag),
nonInteraction: true,
});
}
});
يمكنك أيضًا استخدام ReportingObserver للتحقّق من تحذيرات الإيقاف النهائي والتدخّل في المتصفّح. وهذه إحدى واجهات برمجة التطبيقات العديدة للحصول على قياسات مباشرة من مستخدمين حقيقيين.
تجربة من الواقع: تسجيل الشاشة والفيديو
سجِّل فيديو لعملية تحميل الصفحة على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي. ويعمل هذا بشكل أفضل مع معدلات الإطارات العالية وإذا أضفت شاشة مؤقت.
قد تحتاج أيضًا إلى حفظ التسجيلات الرقمية للشاشة. تتوفّر العديد من تطبيقات تسجيل الشاشة لأجهزة Android وiOS وأجهزة الكمبيوتر المكتبي (ونصوص برمجية لتنفيذ الإجراء نفسه).
تعمل ميزة تسجيل فيديو لعملية تحميل الصفحة بشكل مشابه جدًا لعرض شريط الصور المتحركة في WebPagetest أو التقاط لقطات الشاشة في "أدوات مطوّري البرامج في Chrome". ستحصل على سجلّ حقيقي لسرعة تحميل مكوّنات الصفحة: ما هو سريع وما هو بطيء. احفظ تسجيلات الفيديو وتسجيلات الشاشة لمقارنتها بالتحسينات اللاحقة.
يمكن أن تكون المقارنة جنبًا إلى جنب قبل وبعد طريقة رائعة لإظهار التحسينات!
وماذا أيضًا؟
إذا كان ذلك مناسبًا، يمكنك الحصول على نتيجة تضخّم الويب. هذا اختبار ممتع، ولكنه قد يكون أيضًا طريقة مقنعة لإظهار تضخم التعليمات البرمجية - أو لإظهار أنك أجريت تحسينات.
What Does My Site Cost?، الموضّحة أدناه، دليلاً تقريبيًا للتكلفة المالية لتحميل موقعك الإلكتروني في مناطق مختلفة.
تتوفّر العديد من الأدوات المستقلة الأخرى على الإنترنت: يمكنك الاطّلاع على perf.rocks/tools.