تحسين أداء الويب: Core Web Vitals وتحسين السرعة

ما هي Core Web Vitals؟

Core Web Vitals هي ثلاثة مقاييس رئيسية حددتها Google لقياس تجربة المستخدم: LCP (Largest Contentful Paint) وCLS (Cumulative Layout Shift) وINP (Interaction to Next Paint).

LCP يقيس وقت تحميل أكبر عنصر محتوى في الصفحة (عادةً صورة hero أو عنوان). يجب أن يكون أقل من 2.5 ثانية. LCP بطيء يسبب مغادرة المستخدمين للصفحة.

CLS يقيس التحولات غير المتوقعة في التخطيط أثناء التحميل. التحولات الناتجة عن الصور أو الإعلانات المتأخرة تزعج المستخدمين. يجب أن يكون أقل من 0.1.

INP يقيس وقت الاستجابة لتفاعلات المستخدم (النقرات، ضغطات المفاتيح). يجب أن يكون أقل من 200 مللي ثانية. INP بطيء يجعل الموقع غير قابل للاستخدام.

نتائج Core Web Vitals الجيدة مفيدة، لكنها لا تضمن ترتيبًا متقدمًا في البحث.

تحسين LCP

حمّل أكبر عنصر محتوى بسرعة. صورة hero أو العنوان الرئيسي عادةً هو عنصر LCP. أعطِ أولوية لتحميله.

لا تؤجل تحميل صورة LCP. استخدم التحميل الكسول للصور خارج مساحة العرض الأولى.

قلل وقت استجابة الخادم (TTFB). استخدم CDN (Content Delivery Network)، حسّن استعلامات قاعدة البيانات، نفّذ cache للصفحات.

تخص async وdefer ملفات JavaScript؛ يحتاج CSS غير الحرج إلى استراتيجية تحميل منفصلة.

Precache الموارد الحرجة بـ preload: <link rel="preload" as="image" href="hero.webp">. هذا يساعد المتصفح على اكتشاف الموارد مبكرًا.

تحسين CLS

أضف خصائص width وheight إلى عناصر الصورة والفيديو. هذا يسمح للمتصفح بحجز المساحة وتجنب تحول التخطيط.

احجز حاويات بحجم ثابت للإعلانات والـ embeds. الإعلانات المتأخرة تغير تخطيط الصفحة وتزيد CLS.

تحسين خطوط الويب: استخدم font-display: swap، precache الخطوط الحرجة. قلل مشاكل FOUT وFOIT.

قد تسبب العناصر المضافة فوق المحتوى دون حجز مساحة انزياحات في التخطيط.

استخدم transform وopacity في رسوم CSS. هذه الخصائص لا تُفعّل layout ولا تساهم في CLS.

تحسين INP

قلل وقت تنفيذ JavaScript. قسّم المهام الطويلة إلى أجزاء أصغر. المهام التي تتجاوز 50ms تؤثر سلبًا على INP.

تحسين event handlers. اكتب handlers تستجيب بسرعة للنقرات وضغطات المفاتيح. انقل الحسابات الثقيلة إلى Web Workers.

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

أجّل العمليات الثقيلة بـ requestIdleCallback وsetTimeout. انقل العمل غير الحرج إلى الخلفية أثناء تفاعلات المستخدم.

في frameworks مثل React/Vue، تجنب re-renders غير الضرورية. تخطَّ الحسابات غير الضرورية بـ useMemo وuseCallback وmemo.

تحسين السرعة العام

استخدم HTTP/2 أو HTTP/3. تمكّن معالجة متوازية لطلبات متعددة وضغط headers. مزودو hosting modern يدعمونها افتراضيًا.

فعّل ضغط Gzip أو Brotli. الموارد النصية (HTML، CSS، JS) تقلص 60-80%. فعّلها في إعدادات الخادم.

Cache assets ثابتة. عيّن مدد cache للمتصفح وCDN بـ headers Cache-Control. استخدم TTL طويل لـ assets unmutable.

أدمج CSS حرج inline، حمّل الrest async. أدمج CSS necessary لـ content above-the-fold في أعلى الصفحة.

قسّم JavaScript بـ code splitting. حمّل فقط الكود الضروري لكل صفحة. طبّق lazy loading بـ dynamic import().

Lazy load الصور. حمّل الصور تحت fold فقط عندما تصبح مرئية. خاصية loading="lazy" كافية.

Precache الموارد بـ prefetch وpreconnect. أنشئ اتصالات DNS وTCP مسبقًا بـ <link rel="preconnect" href="https://fonts.googleapis.com">.

أدوات القياس

Google PageSpeed Insights: تقرير أداء مبني على Lighthouse. يوفر درجات منفصلة لـ mobile وdesktop. يقدم اقتراحات تحسين.

Chrome DevTools Performance tab: يحلل عملية تحميل الصفحة خطوة بخطوة. يعرض long tasks وlayout shifts وpaint timing.

انتهى دعم إضافة Web Vitals. استخدم لوحة Performance في Chrome DevTools.

CrUX (Chrome User Experience Report): يجمع بيانات مستخدمين real. يظهر كتقرير Core Web Vitals في Search Console.

تقرير Core Web Vitals في Search Console: يصنّف URLs كـ 'جيد' و'يحتاج تحسين' و'ضعيف'. يعرض أي صفحات تحتاج تحسين.

• web.dev: LCP
• Chrome: Web Vitals
• Google Search: Page experience