أفضل ممارسات أداء الويب

لماذا يهم الأداء

سرعة موقع الويب ليست ترفًا، بل هي مقياس عمل بالغ الأهمية. البيانات مقنعة:

• التحويلات — يؤدي تأخير تحميل الصفحة لمدة ثانية واحدة إلى تقليل التحويلات بنسبة 7% (تقدر أمازون خسارة الإيرادات السنوية بمبلغ 1.6 مليار دولار لكل 100 مللي ثانية من زمن الوصول).
• SEO — تستخدم Google مؤشرات أداء الويب الأساسية كإشارات تصنيف منذ عام 2021.
• تجربة المستخدم — 53% من مستخدمي الأجهزة المحمولة يغادرون المواقع التي يستغرق تحميلها أكثر من 3 ثوانٍ.
• إمكانية الوصول — تعمل المواقع الأسرع بشكل أفضل على الشبكات البطيئة والأجهزة القديمة.

كل مللي ثانية لها أهميتها. تتناول هذه المقالة استراتيجيات شاملة لجعل مواقع الويب الخاصة بك تشتعل بسرعة.

---

1. تحسين الأصول

التصغير

قم بإزالة المسافات البيضاء والتعليقات والأحرف غير الضرورية من HTML وCSS وJavaScript. تتعامل أدوات البناء الحديثة مع هذا تلقائيًا:

# Using Terser for JavaScript
npx terser input.js -o output.min.js --compress --mangle

# Using cssnano via PostCSS
npx postcss input.css -o output.min.css --use cssnano

# Using html-minifier
npx html-minifier input.html -o output.min.html --collapse-whitespace

التأثير — يؤدي التصغير عادة إلى تقليل أحجام الملفات بنسبة 30-60%.

تحسين الصورة

تمثل الصور أكثر من 50% من وزن الصفحة في معظم مواقع الويب.

الصيغ الحديثة:

• WebP — أصغر بنسبة 25-35% من تنسيق JPEG وبنفس الجودة. مدعوم في جميع المتصفحات الحديثة.
• AVIF — أصغر بنسبة 50% من تنسيق JPEG. استنادًا إلى برنامج ترميز الفيديو AV1. دعم متزايد.
• SVG — تنسيق متجه مثالي للأيقونات والشعارات والرسوم التوضيحية.

الصور المستجيبة:

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Description"
  loading="lazy"
/>

أدوات:

• Sharp (Node.js) — معالجة الصور من جانب الخادم.
• Squoosh — مُحسِّن الصور المعتمد على المتصفح.
• ImageOptim — ضغط بدون فقدان للإنتاج.
• Cloudinary / Imgix — تحسين الصور في الوقت الفعلي استنادًا إلى CDN.

التأثير — يمكن أن يؤدي التحسين المناسب للصورة إلى تقليل وزن الصفحة بنسبة 60-80%.

تقسيم التعليمات البرمجية واهتزاز الشجرة

تقسيم التعليمات البرمجية إلى تقسيم JavaScript إلى أجزاء يتم تحميلها عند الطلب:

// React lazy loading
const Dashboard = React.lazy(() => import('./Dashboard'));

// Webpack dynamic import
import(/* webpackChunkName: "chart" */ './Chart').then(module => {
  module.renderChart();
});

اهتزاز الشجرة يزيل الكود الميت. تقوم Webpack وRollup وesbuild بإزالة الصادرات غير المستخدمة أثناء التجميع. تأكد من استخدام وحدات ES ('import/export`) لكي تعمل اهتزاز الأشجار بفعالية.

---

2. الاستفادة من التخزين المؤقت

يخدم التخزين المؤقت الموارد التي تم جلبها مسبقًا من وحدة التخزين المحلية، مما يتجنب طلبات الشبكة تمامًا.

التخزين المؤقت للمتصفح (رؤوس HTTP)

# Apache .htaccess
<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif|js|css|svg|woff2)$">
  Header set Cache-Control "public, max-age=31536000, immutable"
</FilesMatch>

# Nginx
location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff2)$ {
    expires 1y;
    add_header Cache-Control "public, immutable";
}

بالنسبة لملفات HTML، استخدم أوقات ذاكرة تخزين مؤقت أقصر (max-age=0، must-revalidate) أو علامات ETag للتحقق من صحة الحداثة.

عمال الخدمة لـ Offline-First

يعمل عمال الخدمة كوكيل شبكة قابل للبرمجة في المتصفح:

// service-worker.js
const CACHE_NAME = 'v1';
const urlsToCache = ['/', '/styles.css', '/app.js'];

self.addEventListener('install', event => {
  event.waitUntil(
    caches.open(CACHE_NAME).then(cache => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      // Cache-first strategy for static assets
      return response || fetch(event.request);
    })
  );
});

استراتيجيات التخزين المؤقت لعامل الخدمة:

استراتيجية	حالة الاستخدام
ذاكرة التخزين المؤقت أولا	الأصول الثابتة (الصور، CSS، JS)
الشبكة أولا	مكالمات API، المحتوى الديناميكي
لا معنى لها أثناء إعادة التحقق	خلاصات الأخبار، ومنشورات المدونة
الشبكة فقط	النماذج وواجهات برمجة التطبيقات للدفع

التخزين المؤقت لحافة CDN

تقوم شبكة CDN (شبكة توصيل المحتوى) بتخزين المحتوى مؤقتًا على خوادم الحافة الموزعة جغرافيًا. مقدمي الخدمات المشهورين:

• Cloudflare — شبكة عالمية، حماية ضد هجمات DDoS، دعم HTTP/3.
• Fastly — التطهير في الوقت الحقيقي، وتكوين VCL.
• Akamai — على مستوى المؤسسات وعلى نطاق واسع.
• AWS CloudFront — تكامل عميق مع AWS، Lambda@Edge.

التأثير — يؤدي التخزين المؤقت لـ CDN إلى تقليل تحميل الخادم بنسبة 80%+ وتقليل زمن الوصول بنسبة 50-80% للمستخدمين العالميين.

---

3. تقليل موارد حجب العرض

يتوقف تحليل HTML مؤقتًا عندما يواجه المتصفح علامات <script> أو <link rel="stylesheet">. هذا يمنع التقديم.

التأجيل وغير المتزامن

<!-- Async: download in parallel, execute as soon as downloaded -->
<script async src="analytics.js"></script>

<!-- Defer: download in parallel, execute in order after HTML parsing -->
<script defer src="app.js"></script>

القاعدة الأساسية:

• استخدم "التأجيل" للنصوص البرمجية التي تحتاج إلى الوصول إلى DOM وترتيب التنفيذ.
• استخدم "غير متزامن" للنصوص البرمجية المستقلة (التحليلات والإعلانات).
• لا تستخدم أيًا منهما للبرامج النصية الهامة التي يجب تنفيذها على الفور.

تضمين CSS الحرجة

يلزم استخراج CSS وتضمينه للمحتوى الموجود في الجزء العلوي:

<head>
  <style>
    /* Inlined critical CSS */
    header { background: #333; color: white; }
    .hero { min-height: 80vh; display: flex; align-items: center; }
    /* ... only what's visible on initial load */
  </style>
  <!-- Deferred non-critical CSS -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
</head>

الأدوات: تعمل العناصر الحرجة (Node.js) وPenthouse وwebpack-critical على إنشاء CSS مضمّن تلقائيًا.

تلميحات الموارد

<!-- Preload critical resources early -->
<link rel="preload" href="hero-image.webp" as="image">

<!-- Preconnect to third-party origins -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://api.example.com">

<!-- Prefetch resources needed on the next page -->
<link rel="prefetch" href="next-page.html">

---

4. تحسين مسار العرض الحرج

مسار العرض الحرج هو سلسلة الخطوات التي يتخذها المتصفح لعرض الصفحة. يؤدي تحسينه إلى تقليل وقت التفاعل.

وقت استجابة الخادم

• حافظ على وقت البايت الأول (TTFB) أقل من 200 مللي ثانية.
• استخدم التخزين المؤقت من جانب الخادم (Varnish، Redis، Memcached).
• اختر استضافة سريعة وقواعد بيانات.
• استخدم CDN للمحتوى الديناميكي الثابت والمخزن مؤقتًا.

HTTP/2 وHTTP/3

بروتوكول	الميزات الرئيسية
HTTP/1.1	طلب واحد لكل اتصال (محدود)
HTTP/2	تعدد الإرسال، دفع الخادم، ضغط الرأس، البروتوكول الثنائي
HTTP/3	يتعامل الاتصال بدون RTT المستند إلى QUIC مع فقدان الحزم بشكل أفضل

يجعل HTTP/2 عملية التجميع أقل أهمية - حيث يمكنك خدمة العديد من الملفات الصغيرة دون الحاجة إلى حمل اتصال HTTP/1.1.

ضغط

# Enable Brotli (preferred, ~20% better than Gzip)
brotli on;
brotli_types text/plain text/css application/json application/javascript;

# Fallback Gzip
gzip on;
gzip_types text/plain text/css application/json application/javascript;
gzip_min_length 1000;
gzip_vary on;

---

5. مؤشرات الويب الأساسية

تعد مؤشرات أداء الويب الأساسية من Google هي المقاييس الثلاثة الأكثر تأثيرًا في تجربة المستخدم:

LCP (أكبر طلاء محتوى) — الهدف: <2.5 ثانية

يقيس أداء التحميل. يجب أن يتم عرض أكبر عنصر مرئي (الصورة الرئيسية، العنوان) بسرعة.

تحسين:

• تحسين وتحميل صورة LCP مسبقًا.
• تقليل موارد حظر العرض.
• استخدم CDN.
• فكر في استخدام fetchpriority="high" على عنصر LCP:

  <img src="hero.webp" fetchpriority="high" alt="Hero">
  

FID (تأخير الإدخال الأول) - الهدف: <100 مللي ثانية

يقيس التفاعل. تم استبداله بـ INP (التفاعل مع الطلاء التالي) في عام 2024.

تحسين:

• قم بتقسيم مهام JavaScript الطويلة (> 50 مللي ثانية).
• استخدم Web Workers للحسابات الثقيلة.
• قم بتأجيل جافا سكريبت غير الهامة.

CLS (إزاحة التخطيط التراكمي) - الهدف: <0.1

يقيس الاستقرار البصري. لا ينبغي أن تتغير العناصر بشكل غير متوقع.

تحسين:

• قم دائمًا بتعيين "العرض" و"الارتفاع" بشكل واضح على الصور ومقاطع الفيديو.
• حجز مساحة للإعلانات والتضمينات.
• استخدم "font-display: اختياري" للخطوط المخصصة.
• تجنب إدراج المحتوى فوق المحتوى الموجود.

img, video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Reserve space for dynamic content */
.ad-container {
  min-height: 250px;
}

---

6. التقنيات المتقدمة

تحميل كسول

يتم دعم التحميل البطيء الأصلي في جميع المتصفحات الحديثة:

<img src="photo.webp" loading="lazy" alt="Lazy loaded image">
<iframe src="map.html" loading="lazy"></iframe>

بالنسبة للمتصفحات الأقدم، استخدم مراقب التقاطع كبديل:

const observer = new IntersectionObserver(entries => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      observer.unobserve(img);
    }
  });
});

document.querySelectorAll('img[data-src]').forEach(img => observer.observe(img));

الاتصال المسبق والجلب المسبق لـ DNS

<!-- DNS prefetch resolves domain names early -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">

<!-- Preconnect establishes full connection (DNS + TCP + TLS) -->
<link rel="preconnect" href="https://fonts.googleapis.com">

تحسين الخط

/* Font-display controls how fonts render while loading */
@font-face {
  font-family: 'CustomFont';
  src: url('custom-font.woff2') format('woff2');
  font-display: swap; /* Show fallback text immediately */
}

/* Subset fonts to include only needed characters */
/* Use variable fonts for multiple weights in one file */

---

أدوات للقياس

أداة	يكتب	أفضل ل
منارة	مختبر	التدقيق والتوصيات
رؤى سرعة الصفحة	مختبر + حقل	المقاييس الخاصة بجوجل
اختبار صفحة الويب	مختبر	تحليل الشلال التفصيلي
أدوات تطوير Chrome	مختبر	الشبكة والأداء والتغطية
** أداء الحراسة **	رم	مراقبة المستخدم الحقيقي
** Datadog رم **	رم	تتبع الأداء من النهاية إلى النهاية
عيار	مستمر	ميزانيات الأداء وCI
المنارة CI	سي.آي	منع التراجعات

---

ميزانيات الأداء

تحديد ميزانية الأداء لمنع التراجعات:

{
  "budgets": [
    {
      "resourceType": "total",
      "budget": 500000
    },
    {
      "resourceType": "script",
      "budget": 150000
    },
    {
      "resourceType": "image",
      "budget": 200000
    },
    {
      "timing": {
        "metric": "interactive"
      },
      "budget": 5000
    }
  ]
}

---

خاتمة

أداء الويب هو الانضباط المستمر. ابدأ بالعناصر ذات التأثير الأعلى:

1. قم بقياس خط الأساس الحالي — استخدم Lighthouse وWebPageTest.
2. تحسين الصور — أكبر فوز سريع لمعظم المواقع.
3. تمكين التخزين المؤقت والضغط — تحقيق مكاسب سهلة مع عائد استثمار مرتفع.
4. التخلص من الموارد التي تحظر العرض — قم بتأجيل JS وCSS الهامة المضمّنة.
5. مراقبة مؤشرات الويب الأساسية — يمكنك التتبع في الميدان، وليس في المختبر فقط.

إن تحسين الأداء لا يتم "إنجازه" أبدًا - فهو يتطلب اهتمامًا مستمرًا، ولكن عائد الاستثمار في رضا المستخدم والتحويلات وتحسين محركات البحث يكون كبيرًا.