دليل عملي لتحسين سرعة الموقع الإلكتروني

الموقع البطيء يكلّفك زوارًا وتحويلات وترتيبًا في نتائج البحث. تستخدم Google مؤشرات Core Web Vitals كإشارة ترتيب، وتُظهر الدراسات في القطاع باستمرار أن معدل الارتداد يرتفع بحدّة كلما زاد زمن التحميل. وبالنسبة للأنشطة التي تخدم السعودية والخليج، هناك عامل إضافي تتجاهله معظم الأدلة: البُعد الفيزيائي عن الخادم. فإذا كان موقعك مستضافًا في أوروبا أو أمريكا الشمالية، يقطع كل طلب رحلة ذهابًا وإيابًا بطول آلاف الكيلومترات قبل أن يرى زائرك في الرياض أو جدة أول بكسل.

يرشدك هذا الدليل إلى التحسينات التي تُحدث فرقًا حقيقيًا، بالترتيب الذي ينبغي أن تعالجها به.

الخطوة الأولى: القياس قبل التحسين

لا تُحسّن وأنت أعمى. ابدأ بوضع خط أساس باستخدام هذه الأدوات المجانية:

• PageSpeed Insights (pagespeed.web.dev) — يعطيك قياسات Core Web Vitals المخبرية والواقعية.
• WebPageTest (webpagetest.org) — اختر موقع اختبار قريبًا من جمهورك (مثل عقدة في الشرق الأوسط) لرؤية أزمنة واقعية.
• Chrome DevTools ← Lighthouse — شغّله محليًا أثناء التطوير.

ركّز على مؤشرات Core Web Vitals الثلاثة:

لاحظ أيضًا TTFB (زمن وصول أول بايت) — الزمن من إرسال الطلب حتى أول بايت من الاستجابة. ارتفاع TTFB يشير إلى مشكلة في الخادم أو الاستضافة، لا في الواجهة الأمامية.

الخطوة الثانية: تقليل زمن استجابة الخادم (TTFB)

هنا تكون الاستضافة والموقع الجغرافي أكثر ما يهمّ. استهدف أقل من 200 ميلي ثانية.

• استضف قريبًا من جمهورك. خدمة الزوار السعوديين من بنية تحتية داخل المملكة تقلّص عادةً رحلة الشبكة بشكل كبير مقارنةً بمركز بيانات خارجي. هذا هو أكبر مكسب منفرد لا يمكن لأي ضبط في الواجهة الأمامية أن يعوّضه — كما يُبقي بياناتك ضمن متطلبات الإقامة المحلية وفق نظام حماية البيانات الشخصية (PDPL) وضوابط الهيئة الوطنية للأمن السيبراني (NCA) وسدايا (SDAIA). تعمل الاستضافة السحابية لدينا داخل المملكة لهذا السبب بالضبط.
• استخدم إصدار PHP حديثًا. إصدار PHP 8.x أسرع بكثير من 7.x. في cPanel، اضبطه من MultiPHP Manager.
• فعّل OPcache. يقوم بترجمة وتخزين بايت-كود PHP في الذاكرة. تحقق بأمر php -i | grep opcache.enable.
• اضبط قاعدة بياناتك. أضف فهارس (Indexes) للأعمدة المستخدمة في WHERE وJOIN، وفعّل ذاكرة الاستعلامات عند الحاجة.

الخطوة الثالثة: تفعيل الضغط

تُضغط الأصول النصية (HTML وCSS وJS وJSON) بكفاءة عالية جدًا. ويتفوق Brotli على Gzip بنحو 15-20% في النصوص. فعّله على مستوى الخادم.

في Apache، أضف إلى ملف .htaccess:

<IfModule mod_brotli.c>
  AddOutputFilterByType BROTLI_COMPRESS text/html text/css application/javascript application/json image/svg+xml
</IfModule>
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/css application/javascript application/json image/svg+xml
</IfModule>

في Nginx:

gzip on;
gzip_types text/css application/javascript application/json image/svg+xml;
brotli on;
brotli_types text/css application/javascript application/json image/svg+xml;

تحقق بأمر: curl -H "Accept-Encoding: br" -I https://yourdomain.sa وابحث عن content-encoding: br.

الخطوة الرابعة: تحسين الصور

غالبًا ما تكون الصور أثقل جزء في الصفحة وأكثر عناصر LCP شيوعًا.

• قدّم صيغًا حديثة. صيغتا WebP وAVIF أصغر بنسبة 25-50% من JPEG/PNG بالجودة نفسها.
• غيّر الحجم ليطابق العرض. لا ترسل أبدًا صورة بعرض 4000 بكسل في مساحة عرضها 400 بكسل. استخدم srcset لتقديم الحجم المناسب لكل جهاز.
• حمّل الصور أسفل الطية بشكل كسول عبر loading="lazy"، لكن لا تحمّل أبدًا صورة LCP/الواجهة بشكل كسول — فذلك يؤخّرها.
• اضبط دائمًا width وheight ليحجز المتصفح المساحة، مانعًا التزحزح البصري (CLS).

<img src="hero.webp" width="1200" height="600" alt="صورة المنتج" fetchpriority="high">
<img src="thumb.webp" width="400" height="300" alt="تفصيل" loading="lazy">

اضغط الصور بأدوات مثل squoosh أو cwebp أو إضافة لمعالجة الصور. وفي ووردبريس، يمكن لإضافة تخزين مؤقت/تحسين أتمتة التحويل إلى WebP.

الخطوة الخامسة: تفعيل التخزين المؤقت

يتجنّب التخزين المؤقت إعادة توليد المحتوى الذي لم يتغيّر أو إعادة تنزيله.

التخزين المؤقت للمتصفح — أخبر المتصفحات بالاحتفاظ بالأصول الثابتة محليًا. في .htaccess:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
</IfModule>

تخزين الصفحات المؤقت — للمواقع الديناميكية (ووردبريس وغيرها)، قدّم HTML مُولَّدًا مسبقًا بدلًا من تشغيل PHP عند كل طلب. استخدم تخزينًا مؤقتًا للصفحة كاملة (من جانب الخادم أو عبر إضافة). يقلّص هذا غالبًا قيمة TTFB في الصفحات الديناميكية بشكل كبير.

الخطوة السادسة: تقليص أصول الواجهة وتأجيلها

• صغّر (Minify) ملفات CSS وJS لإزالة الفراغات والتعليقات.
• أجّل JavaScript غير الحرجة باستخدام defer أو async كي لا تحجب العرض.
• ضمّن CSS الحرجة للمحتوى أعلى الطية وحمّل الباقي بشكل غير متزامن.
• استخدم Preconnect للجهات الخارجية التي تعتمد عليها: <link rel="preconnect" href="https://fonts.example.com">.
• احذف الإضافات والنصوص البرمجية غير المستخدمة. كل وسم خارجي يضيف طلبات ومخاطرة.

الخطوة السابعة: أعد القياس وكرّر

شغّل PageSpeed Insights وWebPageTest مجددًا من موقع إقليمي. قارن بخط الأساس من الخطوة الأولى. التحسين عملية تكرارية — عالج أكبر عنق زجاجة، أعد القياس، ثم كرّر.

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

1. الاستضافة داخل المملكة / قرب جمهورك (أكبر مكسب لـ TTFB).
2. إصدار PHP حديث + OPcache + تخزين مؤقت للصفحات.
3. ضغط Brotli/Gzip.
4. صور محسّنة بحجم صحيح وصيغة حديثة.
5. ترويسات تخزين مؤقت للمتصفح.
6. أصول واجهة مُصغّرة ومؤجَّلة.

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

هل أنت مستعد لنقل موقعك إلى بنية تحتية سريعة ومتوافقة داخل المملكة؟ ابدأ الآن مع Skyline Cloud.