مرحبًا بالجميع! لقد مر وقت طويل منذ آخر مرة قمت فيها بكتابة مدونة، وسأعترف أن ذلك يجعلني حزينًا بعض الشيء. الحقيقة هي أن هناك الكثير لنتعلمه، وفي بعض الأحيان يبدو الأمر وكأنه لا يوجد وقت كافٍ للتعمق في كل شيء. من أنا تمزح، رغم ذلك؟ الحقيقة هي أنني كنت مماطلة كثيرًا مؤخرًا.

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

لذلك، دعونا نتعمق!

لماذا يهم أداء الويب

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

عندما يتعلق الأمر بقياس الأداء، فغالبًا ما يُعتبر Google هو المعيار الذهبي. توفر Google مجموعة من المقاييس الأساسية، المعروفة باسم Core Web Vitals، والتي تساعد المطورين على تتبع أداء مواقعهم على الويب وتحسينه. دعونا نقسمها:

حسب الرب Google هذه الأشياء مهمة في الأداء

• FCP (أول طلاء محتوى)
• LCP (أكبر طلاء محتوى)
• CLS (إزاحة التخطيط التراكمي)
• TTI (وقت التفاعل)
• INP (التفاعل مع الطلاء التالي)

لنستكشفها عن كثب

FCP (أول طلاء محتوى)

ما يقيسه: يقيس FCP الوقت الذي يستغرقه ظهور الجزء الأول من المحتوى (النص والصور وما إلى ذلك) على الشاشة بعد انتقال المستخدم إلى صفحتك. إنه مقياس بالغ الأهمية لأنه يقدم للمستخدمين تعليقات حول تحميل الصفحة. كلما كان FCP أسرع، كانت تجربة المستخدم أفضل.

كيفية تحسين FCP:

تقليل موارد حظر العرض: تقليل أو إزالة الموارد التي تمنع عرض الصفحة، مثل JavaScript أو CSS المتزامن. استخدم للموارد المهمة.

تأجيل جافا سكريبت غير الهامة: استخدم سمات التأجيل أو غير المتزامن للنصوص البرمجية غير الأساسية للتأكد من أنها لا تمنع الطلاء الأولي.

*استخدام العرض من جانب الخادم (SSR): * يساعد SSR في تقديم HTML الأولي بشكل أسرع، خاصة بالنسبة للمحتوى الديناميكي، حتى يتمكن المستخدمون من رؤية محتوى ذي معنى في وقت أقرب.

تحسين تسليم CSS: قلل حجم CSS وCSS المهم المضمّن، حتى يتمكن المتصفح من عرض المحتوى بشكل أسرع.

استخدام شبكة توصيل المحتوى (CDN): خدمة الأصول الثابتة من شبكة CDN لتقليل زمن الوصول وتسريع تسليم الموارد.

LCP (أكبر طلاء محتوى)

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

كيفية تحسين LCP:

تحسين الصور وضغطها: استخدم تنسيقات الصور الحديثة مثل WebP، وضغط الصور، وتأكد من تقديم أحجام الصور الصحيحة باستخدام سمات srcset والأحجام.

التحميل البطيء للصور الموجودة أسفل الطية: قم بتنفيذ التحميل البطيء للصور غير المرئية على الفور لإعطاء الأولوية لتحميل المحتوى الموجود في الجزء العلوي.

تحميل الموارد المهمة مسبقًا: استخدم العلامة لتحميل الموارد المهمة مثل الخطوط أو الصور الرئيسية أو ملفات الوسائط الكبيرة بسرعة أكبر.

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

تقليل البرامج النصية للجهات الخارجية: يمكن أن تؤدي إعلانات أو تحليلات أو نصوص برمجية أخرى من جهات خارجية إلى إبطاء LCP. تأجيل أو تحميل البرامج النصية غير الضرورية بشكل غير متزامن.

CLS (إزاحة التخطيط التراكمي)

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

كيفية تحسين CLS:

تعيين أبعاد الصور ومقاطع الفيديو: قم دائمًا بتضمين سمات العرض والارتفاع على الصور، أو استخدم مربعات نسبة العرض إلى الارتفاع CSS لحجز مساحة لعناصر الوسائط قبل تحميلها.

تجنب إدراج محتوى فوق المحتوى الموجود: تجنب إضافة محتوى ديناميكيًا فوق المحتوى الموجود ما لم يكن ذلك ضروريًا للغاية (مثل الإعلانات).

استخدام استراتيجيات تحميل الخطوط: عند تحميل الخطوط المخصصة، استخدم عرض الخط: مبادلة؛ لتجنب تغيرات التخطيط الناتجة عن تحميل الخط.

تجنب إدخال إعلانات جديدة أو نوافذ منبثقة بدون مساحة: تأكد من أن الإعلانات أو اللافتات أو النوافذ المنبثقة التي يتم تحميلها ديناميكيًا يتم وضعها في مساحة التخطيط لتجنب التحولات غير المتوقعة.

استخدم العناصر النائبة أو أدوات تحميل الصور بنفس مساحة الصورة

TTI (وقت التفاعل)

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

كيفية تحسين TTI:

تقليل وقت تنفيذ JavaScript: قم بتقسيم حزم JavaScript الكبيرة وتحميل البرامج النصية الأساسية فقط للتفاعل الأول. استخدم تقسيم التعليمات البرمجية في React (باستخدام React.lazy()) أو عمليات الاستيراد الديناميكية في JavaScript.
استخدام عمال الويب: قم بإلغاء تحميل المهام الثقيلة التي لا تتعلق بحظر واجهة المستخدم إلى عمال الويب للحفاظ على استجابة سلسلة الرسائل الرئيسية.
تأجيل المهام الطويلة: قم بتقسيم مهام JavaScript الطويلة إلى مهام أصغر لتجنب حظر الموضوع الرئيسي لفترة طويلة جدًا.
تحميل الموارد المهمة مسبقًا: تأكد من تحميل الموارد الأساسية اللازمة للتفاعل (البرامج النصية والأنماط) مسبقًا لتجنب التأخير في TTI.
تحسين CSS وJavaScript: تصغير التعليمات البرمجية الأساسية وضغطها وتحديد أولوياتها. استخدم اهتزاز الشجرة للتخلص من التعليمات البرمجية الميتة وضمان تنفيذ البرنامج النصي بشكل أسرع. استخدم آلية الضغط GZIP أو BROTLI

INP (التفاعل مع الطلاء التالي)

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

كيفية تحسين INP:

تقليل زمن انتقال الإدخال: تأكد من التعامل مع مدخلات المستخدم (النقرات وضغطات المفاتيح) بسرعة عن طريق تجنب مهام JavaScript الطويلة التي تحظر سلسلة المحادثات الرئيسية.

تحديد أولويات استجابة الإدخال: استخدم requestAnimationFrame أو requestIdleCallback للتعامل مع العمل غير العاجل أثناء وقت الخمول، مع ترك الموضوع الرئيسي مفتوحًا للتعامل مع التفاعل.

استخدم الارتداد والاختناق: عند التعامل مع تفاعلات المستخدم المتكررة (مثل التمرير أو الكتابة)، قم بإلغاء الارتداد أو خنق معالجات الأحداث لمنع واجهة المستخدم من عدم الاستجابة.

التحميل البطيء للتعليمات البرمجية غير الحرجة: قم بتأجيل تحميل الوظائف غير الهامة حتى بعد التفاعل الأولي.
على سبيل المثال، يمكنك التحميل البطيء للمكونات في React باستخدام React.lazy() وSuspense.

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

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

لمزيد من المدونات الرائعة حول الأداء، وأمن الويب، والرد، والزاوي، والرؤية، تابع متابعتي