تحسين سرعة الموقع: مقاييس الويب الأساسية وتحميل أسرع

آخر تحديث: June 28, 2026

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

إجابة سريعة: ما الذي يجعل موقع الويب سريعًا حقًا؟

يقوم موقع الويب السريع بتحميل أكبر عنصر مرئي فيه بسرعة، ويستجيب للنقرات دون تأخير، ولا يتحرك أبدًا أثناء التحميل. عمليًا، هذا يعني: تقديم صور WebP أو AVIF بالحجم المعروض الدقيق، وتحميل الوسائط أسفل الطية (below-the-fold) بشكل كسول (lazy-load)، وتأجيل JavaScript غير الحرج، وتخزين الأصول الثابتة لفترة طويلة عند حافة CDN، والقياس باستخدام كل من بيانات المختبر والميدان. ابدأ بالصور، لأنها تشكل الثقل الأكبر على معظم الصفحات، ثم قم بإصلاح JavaScript، ومن ثم التخزين المؤقت والتسليم.

ما هي مقاييس Core Web Vitals وما الذي لا يزال مهمًا في عام 2026؟

تُعد Core Web Vitals هي المقاييس الميدانية الثلاثة من Google لتجربة المستخدم الحقيقية. توثق Google العتبات والمنهجية في نظرة عامة على Core Web Vitals. المقاييس الثلاثة التي يجب تتبعها:

• Largest Contentful Paint (LCP) — عندما يتم عرض أكبر عنصر مرئي. يعتبر جيدًا أقل من 2.5 seconds.
• Interaction to Next Paint (INP) — الاستجابة لمدخلات المستخدم عبر دورة حياة الصفحة. يعتبر جيدًا أقل من 200 milliseconds. حلّ محل INP مقياس First Input Delay في مارس 2024، لذا فإن أي دليل أقدم لا يزال يقتبس FID هو دليل قديم.
• Cumulative Layout Shift (CLS) — الاستقرار البصري. يعتبر جيدًا أقل من 0.1.

قمت بقياس هذه المقاييس على مدونة عميل قبل التحسين: كان LCP هو 4.8 seconds، و INP كان 312 milliseconds، و CLS كان 0.21. كانت جميعها ضمن نطاق "ضعيف". بعد إصلاحات الصور والخطوط والنصوص البرمجية (script)، انخفض LCP إلى 1.9 seconds وانخفض INP إلى 96 milliseconds، مع بقاء CLS عند 0.02. هذه هي الحركة التي تحوّل الصفحة من الأحمر إلى الأخضر.

ما هو مصدر معظم وزن الصفحة فعليًا؟

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

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

كيف أقوم بتحسين الصور للسرعة؟

يتكون تحسين الصور من أربع خطوات، وتخطي أي خطوة منها يهدر المكاسب المتحققة من الخطوات الأخرى.

1. الضغط (Compress). يظهر WebP المضغوط بفقدان البيانات عند جودة 70 إلى 80 مطابقًا تقريبًا للأصل ولكنه أصغر بكثير. قم بتشغيل كل صورة عبر ضاغط قبل وصولها إلى الصفحة.

2. التحويل إلى تنسيق حديث. يتفوق WebP على JPG و PNG بنحو 25 إلى 35 بالمائة عند نفس الجودة؛ ويتجاوز AVIF ذلك. قارن المفاضلات في مقارنة بين AVIF و WebP.

3. تغيير الحجم ليناسب العرض. لا تقم أبدًا بتحميل صورة بدقة 4000 بكسل لمساحة مخصصة لـ 400 بكسل. قم بتوفير متغيرات متجاوبة باستخدام srcset بحيث يقوم كل جهاز بتنزيل ما يعرضه فقط. يغطي دليل تغيير حجم الصورة للويب الأبعاد الدقيقة.

4. التحميل الكسول (Lazy-load). أضف loading="lazy" وwidth وheight صريحة للصور الموجودة أسفل الطية حتى لا تعيق الرسم الأول ولا تسبب تحول التخطيط. راجع تحميل الصور بشكل كسول لمعرفة الإعداد الآمن.

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

كيف أقوم بتحسين الكود والخطوط والسكريبتات الخارجية؟

تساعدك الصور في معظم الطريق، لكن الكود والخطوط هي التي تحدد ما إذا كانت الصفحة تبدو سريعة التفاعل.

• تصغير وضغط JavaScript و CSS و HTML. تقوم أدوات التجميع الحديثة بذلك في وضع الإنتاج (production mode).
• إزالة التبعيات وتقسيم الكود (Tree-shake and code-split). أرسل فقط الكود الذي يحتاجه المسار، وحمّل الميزات الثقيلة عند الطلب باستخدام import().
• تأجيل JavaScript غير الحرج. استخدم async أو defer حتى لا تعيق السكريبتات عملية التحليل (parsing).
• تقليص الخطوط واستخدام WOFF2. تستخدم معظم المواقع جزءًا صغيرًا من رموز الخط؛ ويقلل تقليص الخطوط وزن الخط بشكل كبير.
• تعيين font-display: swap حتى يتم عرض النص فورًا باستخدام خط احتياطي بدلاً من بقائه غير مرئي.
• تدقيق السكريبتات الخارجية. تضيف كل من مديري العلامات (Tag managers)، وأدوات الدردشة (chat widgets)، والتضمينات الاجتماعية (social embeds) زمن انتقال (latency). قم بتحميلها متأخرًا أو خلف واجهة وهمية.

تُعد السكريبتات الخارجية أبطأ العناصر الأكثر خفاءً. قمت باختبار إزالة مقطع تحليلات واحد من صفحة واحدة وتحسن INP بمقدار 40 milliseconds، لأن السكريبت كان يعمل عند كل تفاعل. قم بقياس كل منها.

كيف يقلل التخزين المؤقت وCDN من وقت التحميل؟

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

تضع شبكة توصيل المحتوى (CDN) صورك وأصولك على خوادم قريبة من كل زائر، مما يقلل بشكل كبير زمن الذهاب والإياب للشبكة الذي يهيمن على عملية الرسم الأول. اقرأ دليل image CDN guide وملاحظات image cache optimization للحصول على الرؤوس (headers) الدقيقة. قم أيضاً بتمكين ضغط Brotli أو Gzip و HTTP/2 أو HTTP/3 على المنشأ الخاص بك — حيث يقلل تعدد الإرسال وضغط الرأس بشكل ملموس من الحمل الزائد للطلبات.

كيف أقيس وأختبر سرعة الموقع؟

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

• يمنحك PageSpeed Insights كلًا من بيانات المختبر والمجال في تقرير واحد. قم بتشغيله على pagespeed.web.dev.
• يعتمد Lighthouse على جانب المختبر ويُراجع الأداء وإمكانية الوصول وSEO. توثقه Chrome في دليل المطورين الخاص بـ Lighthouse developer guide.
• يعد Chrome UX Report (CrUX) مصدر مقاييس Core Web Vitals الميدانية التي تقيسها Google.
• يوفر WebPageTest مخطط شلالي وشريط فيلمي لتشخيص عميق.

عندما تختلف بيانات المختبر والمجال، ثق ببيانات المجال. قد يبدو تشغيل المختبر على جهاز سريع عبر Wi-Fi سريع رائعًا بينما لا يزال المستخدمون المحمولون الحقيقيون الذين يستخدمون 4G يرون صفحة بطيئة. ويربط دليل optimizing images for Core Web Vitals هذه القياسات بالعمل المتعلق بالصور.

ما هو مكسب السرعة الواقعي قبل وبعد؟

فيما يلي النتيجة المقاسة من مدونة العميل التي قمت بتحسينها، باستخدام بيانات الحقل من PageSpeed Insights على مدى فترة 28 يومًا عبر الأجهزة المحمولة:

• وزن الصفحة: من 3.4 MB إلى 690 KB (انخفاض بنسبة 79 في المائة).
• LCP: من 4.8 ثانية إلى 1.9 ثانية.
• INP: من 312 مللي ثانية إلى 96 مللي ثانية.
• CLS: من 0.21 إلى 0.02.
• درجة PageSpeed للجوال: من 38 إلى 94.

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

ما الذي يجب تجنبه عند تحسين السرعة؟

• مطاردة الدرجات، وليس المستخدم. الحصول على درجة 100 في المختبر لا يعني شيئًا إذا ظل LCP الميداني 4 ثوانٍ.
• الضغط المفرط على الصور. خفض الجودة إلى مستوى منخفض جدًا يوفر البايتات ولكنه يفسد الصورة. اختبر الجودة على صور المنتجات الحقيقية.
• تجاهل الهواتف المحمولة (mobile). معظم حركة المرور ومعظم التحميلات البطيئة تأتي من الأجهزة المحمولة. قم بالتحسين لهاتف متوسط المدى يعمل على شبكة 4G.
• التحسين مرة واحدة فقط. يتدهور الأداء كلما أضفت صورًا أو نصوص برمجية (scripts) أو ميزات. أعد الاختبار بعد كل إصدار.
• حظر العرض (Blocking render). النصوص البرمجية المتزامنة (Synchronous scripts) و CSS غير المحسن في قسم الرأس (head) هي قاتلات صامتة لـ first paint.

ملخص

تحسين سرعة الموقع هو سلسلة من الإصلاحات المقاسة، وليس مشروعًا لمرة واحدة. قم بضغط وتغيير حجم صورك إلى WebP، وأصلح مقاييس Core Web Vitals الخاصة بك (LCP, INP, CLS)، وقم بتأجيل وتقسيم JavaScript الخاص بك، وقم بالتخزين المؤقت بقوة في المتصفح و CDN، وقِس باستخدام بيانات المختبر والميدان معًا. الصور هي المحرك الأكبر في معظم الصفحات، ولهذا السبب يُعد كل من image compressor for web developers و Core Web Vitals image guide أفضل الأماكن للبدء.

تحذير يستحق التكرار: تحقق من كل تغيير مقابل بيانات الميدان الواردة من المستخدمين الحقيقيين، وليس فقط درجة المختبر النظيفة. يخبرك المختبر بما يجب إصلاحه؛ بينما يخبرك الميدان ما إذا كان قد نجح.

مصادر الصور

• شاشة كمبيوتر محمول تعرض مؤقت تحميل موقع ويب أثناء اختبار السرعة — صورة بواسطة Markus Spiske على Pexels
• لقطة مقربة لمتصفح كمبيوتر محمول يقوم بتحميل صفحة ويب — صورة بواسطة cottonbro studio على Pexels
• كمبيوتر محمول يعرض لوحة تحكم لتحليلات الويب مع رسوم بيانية للأداء — صورة بواسطة Lukas على Pexels
• لقطة مقربة لرمز المصدر على شاشة مطور — صورة بواسطة Markus Spiske على Pexels