سرعة الموقع: لماذا تهم وكيف تحسّنها

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

لماذا تهم السرعة؟

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

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

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

مؤشرات أداء الويب الأساسية (Core Web Vitals)

حددت جوجل ثلاثة مؤشرات تقيس تجربة الزائر الفعلية:

• LCP (Largest Contentful Paint): الوقت حتى يظهر أكبر عنصر مرئي في الشاشة الأولى، وهو غالبًا الصورة الرئيسية أو العنوان الكبير. يقيس «متى يرى الزائر المحتوى المهم».
• INP (Interaction to Next Paint): سرعة استجابة الصفحة للتفاعلات، كالنقر واللمس والكتابة، طوال مدة الزيارة. حل محل مؤشر أقدم اسمه FID، ويقيس «هل تستجيب الصفحة حين ألمسها».
• CLS (Cumulative Layout Shift): مقدار تحرك عناصر الصفحة بشكل غير متوقع أثناء التحميل. يقيس «هل تبقى الصفحة ثابتة أم تقفز».

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

كيف تقيس: بيانات المختبر وبيانات الزوار الحقيقيين

هناك نوعان من القياس، ولكل منهما دور:

• بيانات الزوار الحقيقيين (Field Data): تُجمع من متصفحات زوار فعليين على مدى الأيام الثمانية والعشرين السابقة، وتظهر في PageSpeed Insights وفي تقرير مؤشرات أداء الويب الأساسية داخل Google Search Console. هي المرجع الحقيقي، لكنها تحتاج عددًا كافيًا من الزيارات، فقد لا تظهر لموقع جديد أو صغير.
• بيانات المختبر (Lab Data): اختبار محاكى على جهاز وشبكة محددين، تقدمه أداة Lighthouse المدمجة في أدوات المطور بمتصفح كروم، وتعرضه PageSpeed Insights أيضًا. مفيدة لتشخيص الأسباب وتجربة الإصلاحات فورًا. ولأن الاختبار لا يتضمن تفاعلًا حقيقيًا فهو لا يقيس INP مباشرة، ويعرض بدلًا منه مؤشرًا قريبًا هو إجمالي وقت الحظر (TBT).

قِس القوالب لا الصفحة الرئيسية وحدها: الصفحة الرئيسية، وصفحة خدمة أو منتج، وصفحة هبوط إعلانية، وصفحة المقالة إن كان لديك محتوى. واقرأ قسم التشخيص في التقرير، فهو يسمي الصورة أو السكربت المسبب. ولا تطارد الرقم 100 في درجة Lighthouse؛ الدرجة مؤشر مختبري مفيد، والهدف تجربة الزائر.

الصور: أكبر مكسب وأسرعه

الصور من أشيع أسباب بطء مواقع الشركات والمتاجر، وإصلاحها لا يتطلب إعادة بناء الموقع:

• المقاس الصحيح: صورة بعرض 4000 بكسل من الكاميرا لا مكان لها في مساحة عرضها 800 بكسل. صدّر الصور بالمقاس الذي تُعرض به تقريبًا، مع نسخة بضعف المقاس للشاشات عالية الكثافة.
• الصيغ الحديثة: صيغتا WebP وAVIF تعطيان عادة ملفات أصغر من JPEG وPNG بجودة مماثلة. تحقق من دعم المتصفحات لجمهورك، أو قدّم بديلًا عبر عنصر picture.
• الضغط: جودة تصدير متوسطة إلى مرتفعة تكفي غالبًا للصور الفوتوغرافية دون فرق تلاحظه العين. قارن بنفسك قبل الاعتماد.
• الصور المتجاوبة: السمتان srcset وsizes تسمحان للمتصفح باختيار النسخة المناسبة لعرض الشاشة، فلا يحمّل الهاتف صورة الحاسوب.
• التحميل الكسول (Lazy Loading): السمة loading بقيمة lazy تؤجل تحميل الصور البعيدة عن الشاشة الأولى حتى يقترب منها الزائر. لكن لا تطبقها على الصورة الرئيسية في أعلى الصفحة، لأنها غالبًا عنصر LCP نفسه، وتأجيلها يبطئه.
• الأولوية: أعطِ الصورة الرئيسية أولوية عالية بالسمة fetchpriority، واحجز أبعاد كل صورة بالعرض والارتفاع لتفادي القفزات.

<img src="hero-800.webp"
     srcset="hero-800.webp 800w, hero-1600.webp 1600w"
     sizes="(max-width: 800px) 100vw, 800px"
     width="800" height="450" fetchpriority="high"
     alt="فريق العمل في موقع المشروع">

<img src="project-1.webp" width="600" height="400" loading="lazy"
     alt="واجهة المبنى بعد التنفيذ">

وللفيديو قواعده: تجنب فيديو الخلفية الثقيل الذي يعمل تلقائيًا في الشاشة الأولى على الجوال، واستخدم صورة غلاف. وإن ضمّنت فيديو من منصة خارجية، فاعرض صورة مصغرة لا يُحمَّل المشغل الكامل إلا عند النقر عليها، فمشغل الفيديو المضمّن يجلب سكربتات كثيرة حتى لو لم يشاهده أحد.

الخطوط: جمال له ثمن

كل خط وكل وزن ملف مستقل يُحمَّل. وكثير من الخطوط العربية تحمل أشكالًا متعددة للحروف، فقد تكون ملفاتها أكبر من نظيراتها اللاتينية. قواعد عملية:

• اكتفِ بعائلتين على الأكثر، وبالأوزان التي تستعملها فعلًا، كالعادي والعريض.
• استخدم صيغة WOFF2، وهي الأكثر ضغطًا لخطوط الويب.
• اجعل النص يظهر فورًا بخط احتياطي حتى يكتمل تحميل الخط، باستخدام font-display بقيمة swap.
• حمّل مسبقًا الخط الأساسي الذي يظهر في الشاشة الأولى فقط، لا كل الخطوط.
• قلّص ملف الخط (Subsetting) إلى الحروف التي تحتاجها إن كانت رخصة الخط تسمح بذلك.
• اختر خطًا احتياطيًا قريبًا في مقاسه من خطك الأساسي، حتى لا يقفز النص حين يتبدل الخط.

السكربتات والأدوات الخارجية

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

• أدوات المحادثة المباشرة، وبكسلات الإعلانات لأكثر من منصة، وأدوات تسجيل الجلسات والخرائط الحرارية، وأدوات الاختبارات والتجارب.
• إضافات نظام إدارة المحتوى التي يحمّل كل منها سكربتاته وأنماطه في كل صفحة، حتى في الصفحات التي لا تستعمله.
• مكتبات كاملة تُحمَّل لأداء مهمة صغيرة، كشريط صور متحرك أو تأثير عند التمرير.

راجع قائمة السكربتات كل ربع سنة واسأل عن كل واحد: من يستخدم بياناته؟ وهل ما زال ضروريًا؟ احذف ما لا يستخدمه أحد، وحمّل الباقي بالسمتين defer أو async حيث يناسب، وأجّل غير الضروري حتى يتفاعل الزائر أو يكتمل التحميل. وجمع الوسوم في أداة إدارة وسوم ينظمها لكنه لا يلغي تكلفتها. وإن كنت على نظام إدارة محتوى، فعدد الإضافات وجودتها يؤثران في السرعة كثيرًا، كما يبين دليل أنظمة إدارة المحتوى.

الخادم والتخزين المؤقت والضغط

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

• جودة الاستضافة وموقعها: استضافة مزدحمة أو بعيدة جغرافيًا عن جمهورك تضيف تأخيرًا في كل طلب. تفاصيل الاختيار في اختيار الاستضافة والنطاق وشهادة SSL.
• التخزين المؤقت للصفحات: في أنظمة إدارة المحتوى تُبنى الصفحة عند كل زيارة من قاعدة البيانات، والتخزين المؤقت يحفظ نسخة جاهزة منها تُقدَّم فورًا.
• التخزين المؤقت في المتصفح: ترويسة Cache-Control تخبر المتصفح بمدة الاحتفاظ بالملفات الثابتة. الملفات التي يتغير اسمها مع كل إصدار، كأن يضاف إلى اسمها رمز قصير، يمكن تخزينها سنة كاملة بأمان.
• شبكة توصيل المحتوى (CDN): تنسخ الملفات الثابتة إلى خوادم موزعة جغرافيًا، فتُقدَّم من أقرب نقطة إلى الزائر. اختر شبكة لها نقاط قريبة من جمهورك في الخليج ومصر.
• الضغط: تفعيل ضغط Brotli أو gzip على الخادم للملفات النصية مثل HTML وCSS وجافاسكربت يقلص حجمها كثيرًا. أما الصور فمضغوطة أصلًا بصيغتها.
• بروتوكولات حديثة: تأكد أن استضافتك تدعم HTTP/2 أو HTTP/3، فهما يحسّنان تحميل ملفات متعددة في الوقت نفسه.

Cache-Control: public, max-age=31536000, immutable

هذه القيمة مناسبة للملفات الثابتة ذات الأسماء المتغيرة مع كل إصدار فقط، لا لصفحات HTML التي يتغير محتواها.

ثبات الصفحة: القضاء على القفزات

أسباب ارتفاع CLS محدودة ومعروفة: صور ومقاطع مضمّنة بلا أبعاد محجوزة، وإعلانات أو شرائط عروض تُحقن فوق المحتوى بعد تحميله، وخطوط يتغير مقاسها حين تحل محل الخط الاحتياطي. الحل: احجز مساحة كل عنصر مسبقًا بالعرض والارتفاع أو بخاصية aspect-ratio، واعرض شريط الموافقة على ملفات تعريف الارتباط فوق المحتوى لا داخله بحيث لا يدفعه، ولا تُدخل عناصر جديدة فوق ما يقرؤه الزائر إلا استجابة لفعل منه.

خطة تحسين عملية بالترتيب

1. قِس أربعة قوالب رئيسية على الجوال، وسجّل LCP وINP وCLS ودرجة المختبر كنقطة بداية.
2. عالج الصور: المقاسات والصيغ والتحميل الكسول لما تحت الشاشة الأولى، وأولوية الصورة الرئيسية.
3. احذف السكربتات والإضافات غير المستخدمة، وأجّل الباقي.
4. قلّص الخطوط واضبط طريقة عرضها.
5. فعّل التخزين المؤقت والضغط وشبكة توصيل المحتوى، أو انتقل إلى استضافة أفضل إن بقي زمن استجابة الخادم مرتفعًا.
6. احجز أبعاد العناصر لتثبيت الصفحة.
7. أعد القياس، وراقب بيانات الزوار الحقيقيين في Search Console خلال الأسابيع التالية.

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

أخطاء شائعة

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

خلاصة عملية

• اعرف أهدافك: LCP حتى 2.5 ثانية، وINP حتى 200 ملّي ثانية، وCLS حتى 0.1، لثلاثة أرباع الزيارات على الأقل.
• استخدم PageSpeed Insights وLighthouse للتشخيص، وتقرير Search Console لبيانات الزوار الحقيقيين.
• ابدأ بالصور، ثم السكربتات الخارجية، ثم الخطوط، ثم الخادم والتخزين المؤقت.
• احجز أبعاد كل صورة وعنصر مضمّن، ولا تحقن محتوى فوق ما يقرؤه الزائر.
• ضع ميزانية أداء، وأعد القياس بعد كل تغيير كبير أو إضافة أداة جديدة.
• تذكر أن السرعة جزء من تجربة الجوال كاملة، فراجع معها التصميم المتجاوب والدليل الشامل لبناء موقع شركتك.