تحسين سرعة الموقع ومؤشرات أداء الويب الأساسية (Core Web Vitals: LCP, FID/INP, CLS)

يا هلا بالجميع! كـ مبرمج سعودي، دايم أسمع عن أهمية سرعة الموقع وأثرها على تجربة المستخدم ونتائج البحث. اليوم، بنتكلم عن مؤشرات جوجل الأساسية لأداء الويب (Core Web Vitals) وكيف نحسنها. الموضوع مو بس عشان جوجل، الموضوع عشان المستخدمين ما يطفشون من موقعك ويطلعون منه. خلينا ندخل في الموضوع على طول بدون مقدمات طويلة.

1. LCP (Largest Contentful Paint) - أكبر محتوى مرئي

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

ملاحظة: أكبر عنصر ممكن يكون صورة (<img>)، فيديو (<video>)، أو حتى عنصر فيه خلفية صورة (background-image)، أو كتلة نصية كبيرة.

كيف تحسن الـ LCP؟

• تحسين وقت استجابة الخادم (Server Response Time): كل ما كان الخادم أسرع، كل ما بدأ تحميل المحتوى أسرع. استخدم CDN، حسن استعلامات قاعدة البيانات، وراجع استضافة موقعك.
• تحسين الصور والفيديوهات:
  • اضغط الصور (compress) وقلل حجمها.
  • استخدم صيغ حديثة مثل WebP أو AVIF.
  • حط أبعاد الصور (width و height) عشان المتصفح يحجز لها مساحة.
  • استخدم التحميل الكسول (lazy loading) للصور اللي مو في الجزء العلوي من الصفحة.
• تقليل حظر عرض JavaScript و CSS: حاول تخلي ملفات الـ CSS والـ JS اللي تمنع ظهور المحتوى أقل حجم ممكن. استخدم async أو defer لملفات الـ JavaScript اللي مو ضرورية للعرض الأولي.
• تحميل الموارد الحرجة مسبقًا (Preload Critical Resources): إذا عندك خطوط معينة (fonts) أو ملفات CSS ضرورية لظهور أكبر محتوى، حملها مسبقًا.

مثال على تحميل مسبق لخط (font):

<link rel="preload" href="/fonts/my-awesome-font.woff2" as="font" type="font/woff2" crossorigin>

2. FID (First Input Delay) / INP (Interaction to Next Paint) - تأخر التفاعل الأول / التفاعل حتى ظهور التغيير

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

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

ملاحظة مهمة: ركز على تحسين INP لأنه هو المستقبل. يقيس مدى استجابة الموقع من أول تفاعل وحتى ظهور التغيير الناتج عن هذا التفاعل على الشاشة.

كيف تحسن الـ FID / INP؟

• تقليل وقت تنفيذ JavaScript: هذا هو العدو الأول لاستجابة الموقع.
  • قسم مهام JavaScript الطويلة (Long Tasks) إلى مهام أصغر.
  • استخدم Web Workers للمهام الثقيلة عشان ما تشغل الـ Main Thread.
  • قلل من استخدام المكتبات والسكريبتات الخارجية اللي مالها داعي.
• تحسين الشيفرة البرمجية (Code Optimization): تأكد أن أكواد الـ JavaScript عندك فعالة وما فيها عمليات معقدة غير ضرورية.
• إزالة الـ Third-party scripts غير الضرورية: سكربتات الإعلانات، تحليلات الطرف الثالث، وغيرها ممكن تكون بطيئة وتأثر على الاستجابة. حملها بـ defer أو async قدر الإمكان، أو حملها بعد تفاعل المستخدم الأول.

مثال على كود JavaScript ممكن يسبب تأخير (Long Task):

function doHeavyCalculation() {
        let result = 0;
        for (let i = 0; i < 1000000000; i++) {
            result += i;
        }
        console.log(result); // This blocks the main thread
    }
    // Call this function on page load or user interaction
    // doHeavyCalculation();

3. CLS (Cumulative Layout Shift) - تراكم تحول التخطيط

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

ملاحظة: التحول غير المتوقع في التخطيط هو المشكلة. لو المستخدم ضغط على زر وظهر محتوى جديد، هذا ليس تحول غير متوقع.

كيف تحسن الـ CLS؟

• تحديد أبعاد الصور والفيديوهات: دايمًا حط width و height للصور والفيديوهات عشان المتصفح يحجز لها مساحة قبل ما تحمل.
• حجز مساحة للعناصر الديناميكية: إذا عندك إعلانات أو محتوى يتم تحميله لاحقًا، احجز له مساحة فارغة (مثلاً بـ min-height) عشان ما يدف العناصر الثانية لما يظهر.
• تجنب إدخال المحتوى فوق المحتوى الموجود: إلا إذا كان هذا رد على تفاعل المستخدم. يعني لا تخلي إعلان أو تنبيه يظهر فجأة ويدف باقي المحتوى لتحت.
• استخدام خاصية transform للتحريكات: لما تسوي تحريكات (animations)، استخدم خاصيات الـ CSS مثل transform بدل ما تستخدم خصائص تغير التخطيط (مثل width أو height أو top أو left).
• تحميل الخطوط (Fonts): حاول تحمل الخطوط اللي تستخدمها مسبقًا، أو استخدم font-display: optional أو swap بحذر. ممكن استخدام preload للخطوط يقلل من مشكلة تغيير الخطوط.

مثال على حجز مساحة لصورة:

<img src="my-image.jpg" alt="وصف الصورة" width="600" height="400">

ومثال على حجز مساحة لإعلان:

<div class="ad-container" style="min-height: 250px;">
        <!-- محتوى الإعلان هنا -->
    </div>

خلاصة الكلام

تحسين سرعة الموقع ومؤشرات Core Web Vitals مو بس رفاهية، صار ضرورة قصوى. يؤثر على ترتيب موقعك في محركات البحث، والأهم من كذا، يؤثر على تجربة المستخدم ورضاه. دايمًا استخدم أدوات مثل Lighthouse، PageSpeed Insights، و Chrome DevTools عشان تراقب أداء موقعك وتعرف وين المشكلة بالضبط. الشغل مستمر، ومتابعة الأداء بشكل دوري هي مفتاح النجاح.

يعطيكم العافية!

← السابقالفهرس