هناك عدة أهداف أساسية لبناء موقع إلكتروني عالي الأداء ومرن بتكلفة بيانات منخفضة.
تحتاج إلى إجراء تدقيق لكل هدف.
الهدف | لماذا؟ | ما الذي يجب اختباره؟ |
---|---|---|
ضمان الخصوصية والأمان وسلامة البيانات وتفعيل استخدام واجهات برمجة التطبيقات الفعّالة | أهمية استخدام بروتوكول HTTPS | تم تنفيذ HTTPS على جميع صفحات/مسارات الموقع الإلكتروني ومواد العرض. |
تحسين أداء التحميل | يغادر 53% من المستخدمين المواقع الإلكترونية التي يستغرق تحميلها وقتًا أطول من ثلاث ثوانٍ. | JavaScript وCSS اللذان يمكن تحميلهما بشكل غير متزامن أو مؤجَّل حدِّد أهدافًا للوقت المستغرَق في التفاعل وحجم الحمولة: على سبيل المثال، وقت التفاعل على شبكة الجيل الثالث. ضبط ميزانية مستنِدة إلى الأداء |
تقليل حجم الصفحة | • خفض تكلفة البيانات للمستخدمين الذين لديهم خطط بيانات محدودة • تقليل متطلبات تخزين تطبيقات الويب، وخاصةً بالنسبة إلى المستخدمين الذين يستخدمون الأجهزة منخفضة المواصفات • تقليل تكاليف الاستضافة والعرض • تحسين أداء العرض والموثوقية والمرونة | حدِّد ميزانية لوزن الصفحة: على سبيل المثال، التحميل الأول أقل من 400 كيلوبايت. تحقّق من صفحات الويب التي تستخدم كمية كبيرة من JavaScript. تحقَّق من أحجام الملفات للعثور على الصور والوسائط وHTML وCSS وJavaScript ذات الحجم الكبير. ابحث عن الصور التي يمكن تحميلها باستخدام طريقة التحميل الكسول، وتحقَّق من عدم استخدام الرموز البرمجية غير المستخدَمة، وذلك من خلال أدوات التغطية. |
تقليل طلبات الموارد | • تقليل مشاكل وقت الاستجابة • تقليل تكاليف العرض • تحسين أداء العرض وموثوقيته وقدرته على التحمل | ابحث عن الطلبات المفرطة أو غير الضرورية لأي نوع من الموارد. على سبيل المثال: الملفات التي يتم تحميلها بشكل متكرّر، وJavaScript الذي يتم تحميله بإصدارات متعددة، وCSS الذي لا يتم استخدامه مطلقًا، والصور التي لا يتم عرضها مطلقًا (أو يمكن تحميلها بشكل بطيء). |
تحسين استخدام الذاكرة | يمكن أن تصبح المساحة التخزينية العامل المحدود الجديد، خاصةً على الأجهزة الجوّالة. | استخدِم "مدير مهام Chrome" لمقارنة موقعك الإلكتروني بالمواقع الأخرى من حيث استخدام الذاكرة عند تحميل الصفحة الرئيسية واستخدام ميزات الموقع الأخرى. |
تقليل الحِمل على وحدة المعالجة المركزية (CPU) | تكون وحدة المعالجة المركزية (CPU) محدودة في الأجهزة الجوّالة، خاصةً الأجهزة ذات المواصفات المنخفضة | تحقّق من صفحات الويب التي تستخدم كمية كبيرة من JavaScript. يمكنك العثور على JavaScript وCSS غير المستخدَمَين باستخدام أدوات التغطية. تحقّق من حجم DOM المفرط والنصوص البرمجية التي يتم تنفيذها بدون داعٍ عند التحميل الأول. ابحث عن JavaScript المحمَّل في إصدارات متعدّدة، أو مكتبات يمكن تجنُّبها من خلال إعادة صياغة بسيطة. |
هناك مجموعة واسعة من الأدوات والأساليب لتدقيق المواقع الإلكترونية:
- أدوات النظام
- أدوات المتصفح المضمَّنة
- إضافات المتصفّح
- طلبات الاختبار على الإنترنت
- أدوات المحاكاة
- الإحصاءات
- المقاييس التي تقدّمها الخوادم وأنظمة الأعمال
- تسجيل الشاشة والفيديو
- الاختبارات اليدوية
في ما يلي النهج المناسب لكل نوع من أنواع عمليات التدقيق.
تسجيل طلبات الموارد: العدد والحجم والنوع والتوقيت
من الأماكن الجيدة للبدء عند تدقيق موقع إلكتروني هي التحقّق من الصفحات باستخدام أدوات الشبكة في المتصفّح. إذا لم تكن متأكدًا من كيفية إجراء ذلك، يمكنك استخدام لوحة شبكة "أدوات مطوري البرامج في 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 سريعة أو اتصال جوّال سريع، يمكنك إجراء الاختبار باستخدام معدل نقل بيانات منخفض ومحاكاة وقت استجابة مرتفع. تذكَّر أنّه عليك إجراء الاختبار على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي أيضًا، لأنّ بعض المواقع الإلكترونية تستخدِم ميزة "الاستكشاف" في Universal Analytics لعرض مواد عرض وتنسيقات مختلفة للأجهزة المختلفة. قد تحتاج إلى اختبار الأجهزة الفعلية باستخدام تصحيح الأخطاء عن بُعد، وليس فقط من خلال محاكاة الجهاز.
التحقّق من ذاكرة الجهاز وتحميل وحدة المعالجة المركزية
قبل إجراء تغييرات، احتفظ بسجلّ لاستخدام الذاكرة ووحدة المعالجة المركزية.
في Chrome، يمكنك الوصول إلى "إدارة المهام" من قائمة "نافذة". هذه طريقة بسيطة للتحقّق من متطلبات صفحة الويب.
اختبار أداء التحميل الأول والتحميلات اللاحقة
إنّ Lighthouse و WebPagetest و Pagespeed Insights مفيدة لتحليل السرعة وتكاليف البيانات واستخدام الموارد. سيتحقّق WebPagetest أيضًا من ملف التخزين المؤقت للمحتوى الثابت ووقت وصول أول بايت وما إذا كان موقعك الإلكتروني يستخدم خدمات CDN بفعالية.
حفظ النتائج
- WebPagetest: لكل نتيجة اختبار عنوان URL خاص بها.
- إحصاءات PageSpeed: على الإنترنت تتضمّن أداة "إحصاءات PageSpeed" الآن بيانات تقرير تجربة المستخدم في Chrome التي تُبرز إحصاءات الأداء الفعلي.
- Lighthouse: يمكنك حفظ التقارير من لوحة تدقيق "أدوات مطوري البرامج في Chrome" من خلال النقر على زر التنزيل:
اختبار متطلبات تطبيقات الويب التقدّمية الأساسية
يساعدك Lighthouse في اختبار الأمان، والوظائف، وإمكانية الاستخدام، والأداء، وأداء محرّك البحث. وعلى وجه التحديد، يتحقق Lighthouse ممّا إذا كان موقعك الإلكتروني ينفِّذ ميزات تطبيقات الويب التقدّمية بنجاح، مثل مهام الخدمة وبيان تطبيق الويب.
يختبر Lighthouse أيضًا ما إذا كان بإمكان موقعك الإلكتروني تقديم تجربة مقبولة بلا إنترنت.
يمكنك تنزيل تقرير Lighthouse بتنسيق JSON، أو إذا كنت تستخدم إضافة Lighthouse في Chrome، يمكنك مشاركة التقرير كملف Gist في GitHub: انقر على زر المشاركة واختَر "فتح في العارض" ثم انقر على زر المشاركة مرة أخرى في النافذة الجديدة وانقر على "الحفظ بتنسيق 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". يمكنك الحصول على سجلّ في الوقت الفعلي لسرعة تحميل مكوّنات الصفحة: العناصر السريعة والعناصر البطيئة. يمكنك حفظ تسجيلات الفيديوهات وتسجيلات الشاشة للمقارنة مع التحسينات اللاحقة.
يمكن أن تكون المقارنة جنبًا إلى جنب بين الإصدار القديم والإصدار الجديد طريقة رائعة لإظهار التحسينات.
وماذا أيضًا؟
احصل على Web Bloat Score (نتيجة بيانات Web Bloat Score) إذا كان ذلك مناسبًا. هذا اختبار ممتع، ولكنه يمكن أن يكون أيضًا طريقة مقنعة لإظهار تضخم التعليمات البرمجية - أو لإظهار أنك أجريت تحسينات.
يقدّم التقرير ما هي تكلفة موقعي الإلكتروني؟، الموضَّح أدناه، دليلاً تقريبيًا على التكلفة المالية لتحميل موقعك الإلكتروني في مناطق مختلفة.
ويتوفر العديد من الأدوات الأخرى المستقلة وعلى الإنترنت: ألقِ نظرة على perf.rocks/tools.