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

1. ‫الرحيم‬ ‫الرحمن‬ ‫الله‬ ‫بسم‬
‫منه‬ ‫كان‬ ‫من‬ ُ‫د‬‫ويزي‬ ،
ً ‫ّا‬‫جي‬‫ن‬ ‫ناداه‬ ‫من‬ ‫ُجيب‬‫ي‬‫و‬ ،
ً ‫خفيا‬ ‫دعاه‬ ‫من‬ ‫ُحب‬‫ي‬ ،‫العالمين‬ ّ
‫رب‬ ‫لله‬ ‫حمد‬‫ل‬‫ا‬
.‫العالمين‬ ّ
‫رب‬ ‫لله‬ ‫حمد‬‫ل‬‫ا‬ ،
ً ‫ّا‬‫رضي‬ ‫الوعد‬ ‫صادق‬ ‫كان‬ ‫من‬ ‫ويهدي‬ ،
ً ‫ّا‬‫وفي‬ ‫له‬ ‫كان‬ ‫من‬ ‫يكرم‬‫و‬ ،
ً ‫ّا‬‫ي‬ِ‫حي‬
Web performance - 6
‫في‬
‫خامس‬‫ل‬‫ا‬ ‫جزء‬‫ل‬‫ا‬
‫بالأداء؛‬ ‫خاصة‬‫ل‬‫ا‬ ‫المقالات‬ ‫سلسلة‬ ‫من‬
‫قياس‬ ‫وأساليب‬ ‫طرق‬ ‫عن‬ ‫حدثنا‬‫ت‬
‫ختلفة‬‫م‬‫ال‬ ‫الإصدارات‬ ‫بين‬ ‫الأداء‬ ‫مقارنة‬ ‫أو‬ ،‫بالمنافسين‬ ‫ومقارنته‬ ‫لتقييمه‬ ‫بالموقع‬ ‫خاص‬‫ل‬‫ا‬ ‫الأداء‬
‫من‬
‫الموقع‬
‫بعد‬
‫كل‬
release
،…
‫والآن‬
‫وصلنا‬
‫للمقال‬
‫الأخير‬
‫في‬
‫هذه‬
‫السلسلة‬
‫بفضل‬-
‫الله‬
‫خاص‬‫ل‬‫ا‬ ‫الأداء‬ ‫لتحسين‬ ‫مراعاتها‬ ‫بنا‬ ‫ينبغي‬ ‫التي‬ ‫الأمور‬ ‫بعض‬ ‫عن‬ ‫فيه‬ ‫وسنتحدث‬ ،-‫تعالى‬
‫عنه‬ ‫وسنتحدث‬ ،‫سكربت‬ ‫جافا‬‫ل‬‫ا‬ ‫وملفات‬ ‫والفيديوهات‬ ‫الصور‬ ‫ذلك‬ ‫ومن‬ ،‫بنا‬ ‫خاصة‬‫ل‬‫ا‬ ‫بالمواقع‬
‫المقالات‬ ‫في‬ ‫ُرح‬‫ط‬ ‫ما‬ ‫على‬ ‫وبناء‬ ‫النقطة‬ ‫هذه‬ ‫من‬ ‫لأنك‬ ،…‫الإمكان‬ ‫قدر‬ ‫ختصر‬‫م‬ ‫بشكل‬
‫هذا‬ ‫في‬ ‫أكثر‬ ‫والتعمق‬ ‫الأخطاء‬ ‫جة‬‫ل‬‫ومعا‬ ‫والتطبيق‬ ‫البحث‬ ‫رحلة‬ ‫في‬ ‫البدء‬ ‫يمكنك‬ ،‫السابقة‬
…‫وبكم‬ ‫بنا‬ ‫ونفع‬ ،‫خير‬ ‫لكل‬ ‫وإياكم‬ ‫الله‬ ‫وفقنا‬ ،‫الباب‬
‫تمثل‬
‫الصور‬
‫والفيديوهات‬
‫أكثر‬
‫من‬
70
%
-‫بالمتوسط‬-
‫من‬
‫جم‬‫ح‬
‫ال‬
bytes
‫التي‬
‫يتم‬
‫تحميلها‬
‫من‬
‫والفيديوهات‬ ‫بالصور‬ ‫المتعلقة‬ ‫المشاكل‬ ‫جة‬‫ل‬‫معا‬ ‫تعد‬ ‫لذلك‬ ،‫عام‬ ‫بشكل‬ ‫الإلكترونية‬ ‫المواقع‬
‫إحدى‬
‫حلول‬‫ل‬‫ا‬
‫المثالية‬
‫يعة‬‫والسر‬
‫لتحسين‬
،‫الأداء‬
‫وتمثل‬
‫الصور‬
‫ما‬
‫نسبته‬
51
%
-‫بالمتوسط‬-
‫تقريبا‬
‫من‬
‫جم‬‫ح‬
‫ال‬
bytes
‫التي‬
‫يتم‬
‫يلها‬‫تنز‬
‫من‬
‫الموقع‬
،‫الإلكتروني‬
‫و‬
25
%
-‫بالمتوسط‬-
‫من‬
‫جم‬‫ح‬
‫ال‬
bytes
‫التي‬
‫يتم‬
‫يلها‬‫تنز‬
،‫للفيديوهات‬
‫حسين‬‫ت‬‫و‬
‫الأداء‬
‫هنا‬
‫مهم‬
‫لعدة‬
،‫أسباب‬
‫أهمها‬
‫أنك‬

2. ‫أموالا‬ ‫ينفقون‬ ‫خاص‬‫ش‬‫الأ‬ ‫أو‬ ‫الدول‬ ‫من‬ ‫فكثير‬ ،‫النقود‬ ‫المستخدمين‬ ‫من‬ ‫الكثير‬ ‫على‬ ‫ستوفر‬
‫كثيرة‬
‫لشراء‬
‫حزم‬
‫بيانات‬
،!‫بالميجا‬
‫وكثير‬
‫من‬
‫المستخدمين‬
‫أيضا‬
‫لديهم‬
‫أجهزة‬
‫ذات‬
RAM
‫صغيرة‬
،‫حدودة‬‫م‬‫و‬
‫والصور‬
‫والفيديوهات‬
‫يتم‬
‫تحميلها‬
‫على‬
‫ال‬
RAM
،
‫فأنت‬
‫بذلك‬
‫أيضا‬
‫حرمتهم‬
‫خاصة‬‫ل‬‫ا‬ ‫التجربة‬ ‫على‬ ‫السيء‬ ‫التأثير‬ ‫ذلك‬ ‫يلي‬ ،!‫منهم‬ ‫ُرمت‬‫ح‬‫و‬ ‫خدماتك‬ ‫من‬ ‫الاستفادة‬ ‫من‬
…‫به‬ ‫خاص‬‫ل‬‫ا‬ ‫الذاتي‬ ‫بالشعور‬ ‫والمتعلقة‬ ‫بالمستخدم‬
:‫ومنها‬ ‫بالصور‬ ‫خاص‬‫ل‬‫ا‬ ‫الأداء‬ ‫لتحسين‬ ‫استخدامها‬ ‫يمكننا‬ ‫جيات‬‫ي‬‫استرات‬ ‫عدة‬ ‫هناك‬
1
.
Loading
:
‫استخدام‬
‫أسلوب‬
‫التحميل‬
‫المناسب‬
،‫للصور‬
‫مثل‬
‫استخدام‬
‫ال‬
lazy
loading
،
‫وهي‬
‫مهمة‬
،‫جدا‬
‫فبدلا‬
‫من‬
‫جلب‬
‫كل‬
‫الصور‬
‫عند‬
‫تحميل‬
‫الصفحة‬
‫مرة‬
،‫واحدة‬
‫يمكنك‬
‫مثلا‬
‫جلب‬
‫ما‬
‫تراه‬
،‫فقط‬
‫وعند‬
‫ال‬
scroll
‫يتم‬
‫جلب‬
،…‫المزيد‬
‫أو‬
‫تأخير‬
‫جلب‬
‫الصور‬
‫ليتم‬
‫جلبها‬
‫بال‬
background
…
2
.
‫اختيار‬
‫امتداد‬
/
‫نوع‬
‫الصورة‬
،‫المناسب‬
‫فمثلا‬
‫متى‬
‫نستخدم‬
SVG
‫ومتى‬
‫نستخدم‬
PNG
،‫؟‬
‫هل‬
‫نستخدم‬
WebP
‫؟‬
‫هل‬
‫نستخدم‬
JPEG
،‫؟‬
‫للإجابة‬
‫على‬
‫الأسئلة‬
‫من‬
‫هذا‬
‫التي‬ ‫والمساوئ‬ ،‫الإمتدادات‬ ‫هذه‬ ‫من‬ ‫نوع‬ ‫كل‬‫وميزة‬ ‫طبيعة‬ ‫تعلم‬ ‫أن‬ ‫عليك‬ ،‫النوع‬
‫يمكن‬
‫أن‬
‫تلحق‬
،…‫بها‬
‫فمثلا‬
‫سنستخدم‬
‫ال‬
SVG
‫إذا‬
‫كانت‬
‫الصورة‬
‫تعبر‬
‫عن‬
‫رموز‬
‫وأمر‬
‫غير‬
،‫واقعي‬
‫عبارة‬
‫عن‬
vectors
‫حتاج‬‫ت‬
‫لإعطائها‬
‫القليل‬
‫من‬
‫الألوان‬
،‫فقط‬
‫وهي‬
‫أفضل‬
‫من‬
‫استخدام‬
‫ال‬
icon fonts
،
‫بينما‬
‫مثلا‬
‫لو‬
‫كانت‬
‫الصورة‬
‫مثلا‬
PNG
‫فهناك‬
‫أكثر‬
‫من‬
‫خيار‬
‫بناء‬
‫على‬
‫نوع‬
،‫الصورة‬
‫فلو‬
‫كانت‬
‫الصورة‬
24bit color
‫و‬
8bit
transparency
،
‫فإنك‬
‫ستحصل‬
‫على‬
‫صورة‬
‫جمها‬‫ح‬
،‫كبير‬
‫وهنا‬
‫يفضل‬
‫أن‬
‫تستخدم‬
‫ال‬

3. webP
،
‫وبشكل‬
،‫عام‬
‫يعتبر‬
‫استخدام‬
‫الـ‬
WepP
‫خيارا‬
‫ممتازا‬
‫للامتداد‬
‫خاص‬‫ل‬‫ا‬
،‫بالصور‬
‫فهو‬
‫أفضل‬
‫بال‬
compression
‫من‬
‫ال‬
PNG, JPEG
‫ويدعم‬
‫ال‬
higher color
‫صورة‬ ‫على‬ ‫وستحصل‬ ‫الصورة‬ ‫دقة‬ ‫من‬ ‫الكثير‬ ‫خسر‬‫ت‬ ‫لن‬ ‫أنك‬ ‫يعني‬ ‫وهذا‬ ،‫أفضل‬ ‫بشكل‬
‫حتى‬ ‫تدعمه‬ ‫لم‬ ‫القديمة‬ ‫الإصدارات‬ ‫أو‬ ‫المتصفحات‬ ‫بعض‬ ‫جد‬‫ت‬ ‫قد‬ ‫لكن‬ ،!‫جما‬‫ح‬ ‫أقل‬
‫وقت‬
‫متأخر‬
‫حتى‬-
‫تاريخ‬
‫كتابة‬
‫هذا‬
،!-‫المقال‬
‫ومع‬
‫ذلك‬
‫قد‬
‫عد‬
ُ ‫ي‬
‫ال‬
WebP
‫من‬
‫أفضل‬
…‫حاليا‬ ‫خيارات‬‫ل‬‫ا‬
3
.
‫ذات‬ ‫صورة‬ ‫جلب‬ ‫فمثلا‬ ،‫ودقتها‬ ‫الشاشة‬ ‫جم‬‫ح‬ ‫على‬ ‫بناء‬ ‫للصور‬ ‫المناسب‬ ‫جم‬‫ح‬‫ال‬ ‫استخدام‬
‫تحميل‬ ‫منها‬ ‫حتملة‬‫م‬ ‫مشاكل‬ ‫بعدة‬ ‫لتسببه‬ ‫حيحا‬‫ص‬ ‫يكون‬ ‫لن‬ ‫الشاشات‬ ‫جميع‬ ‫على‬ ‫واحد‬ ‫جم‬‫ح‬
‫سوى‬ ‫التحميل‬ ‫هذا‬ ‫من‬ ‫تستفيد‬ ‫فلن‬ ‫قليلة؛‬ ‫دقتها‬ ‫أو‬ ‫صغيرة‬ ‫شاشة‬ ‫على‬ ‫كبيرة‬‫صورة‬
‫يمكن‬ ‫للصورة‬ ‫جم‬‫ح‬ ‫من‬ ‫أكثر‬ ‫وجود‬ ‫يعد‬ ‫لذلك‬ ،!‫أكثر‬ ‫بيانات‬ ‫واستهلاك‬ ‫العملية‬ ‫إبطاء‬
…‫الأداء‬ ‫لتحسين‬ ‫ممتازا‬ ‫أمرا‬ ‫جلبه‬
4
.
‫يفضل‬
‫حديد‬‫ت‬
‫جم‬‫ح‬
،‫الصورة‬
‫وذلك‬
‫لأن‬
‫الصورة‬
‫يتم‬
‫تحميلها‬
async
‫لذلك‬
‫فهي‬
‫تأتي‬
‫بعد‬
‫ال‬
first paint
،
‫بوجود‬
‫العرض‬
‫والارتفاع‬
‫فإننا‬
‫نضمن‬
‫عدم‬
‫حصول‬
‫مشكلة‬
‫التأرجح‬
‫لل‬
layout
‫والتي‬
‫حدثنا‬‫ت‬
‫عنها‬
…‫سابقا‬
:‫ومنها‬ ،‫أيضا‬ ‫بالفيديو‬ ‫خاص‬‫ل‬‫ا‬ ‫الأداء‬ ‫لتحسين‬ ‫استخدامها‬ ‫يمكننا‬ ‫جيات‬‫ي‬‫استرات‬ ‫عدة‬ ‫وهناك‬

4. 1
.
Compress
،‫الفيديو‬
‫فهو‬
‫يقلل‬
‫من‬
‫جم‬‫ح‬‫ال‬
‫من‬
‫خلال‬
‫حذف‬
‫التفاصيل‬
‫المرتبطة‬
،‫بالفريم‬
‫مثل‬
‫ال‬
WebM, MPEG-4
…
2
.
‫ترتيب‬
‫ال‬
source
‫من‬
‫الأصغر‬
،‫للأكبر‬
‫لأن‬
‫أول‬
source
‫هو‬
‫ما‬
‫سيتم‬
‫جلبه‬
‫بشكل‬
…‫افتراضي‬
3
.
‫إضافة‬
‫ال‬
muted=true
‫إذا‬
‫كان‬
‫الفيديو‬
‫بلا‬
‫صوت‬
‫المتعلقة‬ ‫السكربت‬ ‫جافا‬‫ل‬‫ا‬ ‫مشاكل‬ ‫فإن‬ ،‫والفيديوهات‬ ‫الصور‬ ‫حول‬ ‫سابقا‬ ‫عنه‬ ‫حدثنا‬‫ت‬ ‫ما‬ ‫كل‬ ‫مع‬
‫الأداء‬ ‫على‬ ‫تؤثر‬ ‫أن‬ ‫يمكن‬ ‫التي‬ ‫ومشاكلها‬ ،!‫غيرها‬ ‫من‬ ‫أكبر‬ ‫السلبي‬ ‫تأثيرها‬ ‫يكون‬ ‫قد‬ ‫بالأداء‬
‫ملفات‬ ‫مع‬ ‫التعامل‬ ‫على‬ ‫حرص‬‫ل‬‫ا‬ ‫جب‬‫ي‬ ‫لذلك‬ ،!‫حقيقة‬ ‫أم‬ ‫كانت‬‫ية‬‫شعور‬ ،‫وعديدة‬ ‫متنوعة‬
‫وسائل‬ ‫عدة‬ ‫هناك‬ ‫لذلك‬ ،!‫حق‬‫ب‬ ‫لها‬ ‫اللازمة‬ ‫الأهمية‬ ‫وإعطائها‬ ‫حذر‬‫ب‬ ‫سكربت‬ ‫جافا‬‫ل‬‫ا‬ ‫وشيفرات‬
‫سكربت‬ ‫جافا‬‫ل‬‫ا‬ ‫ملف‬ ‫جم‬‫ح‬ ‫تقليل‬ ‫منها‬ ‫سكربت‬ ‫جافا‬‫ل‬‫با‬ ‫خاص‬‫ل‬‫ا‬ ‫الأداء‬ ‫لتحسين‬ ‫استخدامها‬ ‫يمكن‬
‫قدر‬
،‫الإمكان‬
‫وذلك‬
‫من‬
‫خلال‬
‫ال‬
compress
‫وال‬
splitting
‫وحذف‬
‫الشيفرة‬
‫جية‬‫م‬‫البر‬
‫أو‬ ‫فقط‬ ‫منها‬ ‫جزء‬ ‫تضمين‬ ‫يمكن‬ ‫هل‬ ‫ننظر‬ ‫خارجية‬ ‫مكتبة‬ ‫استخدام‬ ‫وعند‬ ،‫مستخدمة‬ ‫الغير‬
…‫لا‬ ‫أم‬ ‫العمل‬ ‫جاز‬‫ن‬‫لإ‬ ‫المطلوب‬ ‫وهو‬ ‫فقط‬ ‫منها‬ ‫جزء‬ ‫تحميل‬
‫فرعية‬ ‫روابط‬ ‫منها‬ ‫كل‬ ‫وفي‬ ،‫السلسلة‬ ‫لهذه‬ ‫كمراجع‬ ‫استخدمت‬ ‫التي‬ ‫الروابط‬ ‫(بعض‬ ‫للاستزادة‬
:)‫المزيد‬ ‫لقراءة‬ ‫إليها‬ ‫الولوج‬ ‫يمكنك‬
1
.
Image Type

5. 2
.
Web Performance
3
.
Performance Api
4
.
Understanding latency
5
.
TCP handshake
6
.
TLS
‫أن‬ -‫وتعالى‬ ‫سبحانه‬- ‫الله‬ ‫ونسأل‬ ،‫المقالات‬ ‫من‬ ‫السلسلة‬ ‫هذه‬ ‫في‬ ‫رحلتنا‬ ‫نهاية‬ ‫إلى‬ ‫وصلنا‬ ،‫والآن‬
.‫العالمين‬ ‫رب‬ ‫لله‬ ‫حمد‬‫ل‬‫ا‬ ‫أن‬ ‫دعوانا‬ ‫وآخر‬ ،‫ولكم‬ ‫لنا‬ ‫خير‬ ‫فيه‬ ‫لما‬ ‫وفقنا‬ ‫نكون‬
‫صغيرا‬ ‫ربياني‬ ‫ما‬‫ك‬ ‫ارحمهما‬ ‫رب‬ ،‫ولوالدي‬ ‫لي‬ ‫اغفر‬ ‫رب‬