• Home
  • ›
  • دروس سيو seo

تحسين سرعة وأداء المواقع والمتاجر من الأساسيات إلى الاحتراف

لماذا أداء الموقع مهم؟

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

ContentsCollapse

نطاق وعمق الموضوع

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

ما يميز هذا الدليل:

  • يركز على أساسيات أداء المواقع الإلكترونية
  • مُصمم خصيصاً للمبتدئين
  • يقدم عروضاً توضيحية عملية
  • يُبيّن مفاهيم الأداء الرئيسية بوضوح

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

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

الوحدة الأولى: لماذا تُعد السرعة مهمة؟

قبل البدء بتعلم الأداء، عليك أولاً فهم دوره في تجربة المستخدم، وكيف يمكن أن يُحسّن النتائج.

أهمية السرعة في تجربة المستخدم

السرعة ليست مجرد ميزة إضافية – إنها عنصر أساسي في نجاح موقعك الإلكتروني:

التأثير على المستخدمين:

  • تحسين رضا المستخدمين
  • زيادة معدلات التحويل
  • تقليل معدل الارتداد
  • بناء ثقة أكبر بالعلامة التجارية

التأثير على الأعمال:

  • زيادة الإيرادات والمبيعات
  • تحسين ترتيب محركات البحث
  • تقليل تكاليف البنية التحتية
  • ميزة تنافسية واضحة

الإحصائيات المهمة

حقائق يجب معرفتها:

  • كل ثانية تأخير تُقلل التحويلات بنسبة 7%
  • 53% من مستخدمي الهواتف يتركون المواقع التي تستغرق أكثر من 3 ثوانٍ للتحميل
  • المواقع السريعة تحصل على ترتيب أفضل في جوجل
  • تحسين السرعة بثانية واحدة يمكن أن يزيد التحويلات بنسبة 27%

السياق الأساسي لتعلم الأداء

تبدأ هذه الدورة بمقدمة موجزة تُقدّم سياقًا أساسيًا لأهمية تعلم الأداء، وتُعدّك لفهم المفاهيم التقنية القادمة.

الوحدة الثانية: اعتبارات عامة حول أداء لغة HTML

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

أهمية طلب HTML الأول

لماذا يُعد طلب HTML الأول حاسماً؟

  • إنه نقطة البداية لتحميل موقعك بالكامل
  • يحدد كيفية تحميل جميع الموارد الأخرى
  • يؤثر مباشرة على وقت العرض الأول
  • يُشكّل الانطباع الأول للمستخدم

المفاهيم الأساسية في أداء HTML

تغطي هذه الوحدة مفاهيم مهمة لضمان بدء أول طلب لملف HTML الخاص بموقعك بشكل صحيح:

1. التخزين المؤقت لملفات HTML

ما هو التخزين المؤقت؟ التخزين المؤقت يسمح للمتصفح بحفظ نسخة من ملف HTML لاستخدامها لاحقاً بدلاً من تحميلها في كل مرة.

أفضل الممارسات:

Cache-Control: public, max-age=3600
ETag: "33a64df551425fcc55e4d42a148795d9f25f89d4"
Last-Modified: Wed, 21 Oct 2024 07:28:00 GMT

الفوائد:

  • تقليل وقت التحميل بشكل كبير
  • تقليل الحمل على الخادم
  • تحسين تجربة المستخدم للزيارات المتكررة

2. حظر المُحلل (Parser Blocking)

ما هو حظر المُحلل؟ عندما يواجه المتصفح موارد معينة، يتوقف عن تحليل HTML حتى يتم تحميل هذه الموارد.

الموارد التي تحظر المُحلل:

  • سكريبتات JavaScript بدون async أو defer
  • سكريبتات مضمنة في <head>
  • استيراد CSS من داخل JavaScript

كيف تتجنب الحظر؟

<!-- بدلاً من هذا -->
<script src="script.js"></script>

<!-- استخدم هذا -->
<script src="script.js" defer></script>
<!-- أو -->
<script src="script.js" async></script>

3. حظر العرض (Render Blocking)

ما هو حظر العرض؟ الموارد التي يجب على المتصفح تحميلها ومعالجتها قبل أن يتمكن من عرض الصفحة.

الموارد التي تحظر العرض:

  • ملفات CSS الخارجية
  • خطوط الويب
  • بعض سكريبتات JavaScript

الحل الأمثل:

<!-- تحميل CSS الحرج بشكل مضمن -->
<style>
  /* CSS حرج للمحتوى فوق الطية */
  body { margin: 0; font-family: Arial; }
  .hero { height: 100vh; }
</style>

<!-- تأجيل CSS غير الحرج -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

نصائح عملية للتحسين

قائمة تحقق سريعة:

  • [ ] تفعيل التخزين المؤقت لـ HTML
  • [ ] تصغير ملفات HTML (Minification)
  • [ ] استخدام defer أو async للسكريبتات
  • [ ] تضمين CSS الحرج في HTML
  • [ ] إزالة المساحات البيضاء والتعليقات غير الضرورية

الوحدة الثالثة: فهم المسار الحرج

يُعدّ مسار العرض الحرج (Critical Rendering Path) مفهومًا أساسيًا في أداء الويب، ويتناول سرعة ظهور الصفحة في المتصفح عند عرضها لأول مرة.

ما هو المسار الحرج؟

التعريف: المسار الحرج هو تسلسل الخطوات التي يتبعها المتصفح لتحويل HTML وCSS وJavaScript إلى بكسلات على الشاشة.

خطوات المسار الحرج

1. بناء DOM (Document Object Model)

HTML → Parser → DOM Tree

ما يحدث:

  • المتصفح يقرأ HTML
  • يحوله إلى شجرة DOM
  • يمثل بنية الصفحة

2. بناء CSSOM (CSS Object Model)

CSS → Parser → CSSOM Tree

ما يحدث:

  • المتصفح يقرأ CSS
  • يحوله إلى شجرة CSSOM
  • يحدد كيف يجب تنسيق كل عنصر

3. بناء Render Tree

DOM + CSSOM → Render Tree

ما يحدث:

  • دمج DOM و CSSOM
  • إنشاء شجرة العرض
  • تحتوي فقط على العناصر المرئية

4. Layout (التخطيط)

ما يحدث:

  • حساب حجم وموضع كل عنصر
  • تحديد الأبعاد الدقيقة
  • معرفة مكان كل شيء على الشاشة

5. Paint (الرسم)

ما يحدث:

  • تحويل Render Tree إلى بكسلات
  • رسم العناصر على الشاشة
  • ظهور الصفحة للمستخدم

النظرية الكامنة وراء المسار الحرج

موارد حظر العرض

الموارد الحرجة:

  • CSS: يحظر العرض دائماً
  • JavaScript: يحظر العرض والتحليل
  • الخطوط: قد تسبب “فلاش النص غير المرئي”

تأثيرها:

وقت العرض = عدد الطلبات الحرجة × زمن الاستجابة

موارد حظر المُحلِّل

أمثلة:

  • <script src="app.js"></script> في <head>
  • سكريبتات مضمنة كبيرة
  • استيراد نماذج في JavaScript

كيف تُحسّن المسار الحرج؟

1. قلل عدد الموارد الحرجة

الاستراتيجية:

<!-- دمج ملفات CSS -->
<link rel="stylesheet" href="combined.css">
<!-- بدلاً من -->
<link rel="stylesheet" href="header.css">
<link rel="stylesheet" href="content.css">
<link rel="stylesheet" href="footer.css">

2. قلل حجم الموارد الحرجة

التقنيات:

  • تصغير CSS و JavaScript
  • ضغط Gzip/Brotli
  • إزالة الكود غير المستخدم
# مثال تصغير
npx terser script.js -o script.min.js -c -m

3. قصّر طول المسار الحرج

الطرق:

<!-- استخدام preload للموارد المهمة -->
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="font.woff2" as="font" crossorigin>

<!-- تأجيل الموارد غير الحرجة -->
<script defer src="analytics.js"></script>

4. حدد أولويات المحتوى فوق الطية

المحتوى فوق الطية (Above the Fold): ما يراه المستخدم أولاً بدون التمرير.

التحسين:

<style>
  /* Critical CSS - محتوى فوق الطية فقط */
  .hero { background: #333; color: white; height: 100vh; }
  .hero h1 { font-size: 3rem; }
</style>

<!-- باقي CSS يُحمل لاحقاً -->
<link rel="stylesheet" href="full-styles.css" media="print" onload="this.media='all'">

قياس المسار الحرج

أدوات القياس:

  • Chrome DevTools (Performance tab)
  • Lighthouse
  • WebPageTest

المقاييس المهمة:

  • FCP (First Contentful Paint): أول محتوى يظهر
  • LCP (Largest Contentful Paint): أكبر محتوى يظهر
  • TTI (Time to Interactive): وقت الجاهزية للتفاعل

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

أثناء تحميل الصفحة، يتم الرجوع إلى العديد من الموارد ضمن كود HTML الخاص بها، والتي تُحدد مظهر الصفحة وتصميمها وتفاعليتها.

أنواع الموارد وتأثيرها

1. موارد CSS

دور CSS:

  • تحديد مظهر الصفحة وتصميمها
  • التحكم في الألوان والخطوط والتخطيط
  • إنشاء الرسوم المتحركة والتأثيرات

التأثير على الأداء:

  • CSS يحظر العرض دائماً
  • ملفات CSS كبيرة تؤخر ظهور الصفحة
  • CSS غير المستخدم يهدر النطاق الترددي

أفضل الممارسات:

<!-- 1. CSS الحرج مضمن -->
<style>
  body { margin: 0; font-family: system-ui; }
  .header { background: #333; padding: 1rem; }
</style>

<!-- 2. CSS غير الحرج مؤجل -->
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

<!-- 3. استخدام media queries للتحميل الشرطي -->
<link rel="stylesheet" href="print.css" media="print">
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">

تصغير CSS:

/* قبل التصغير */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

/* بعد التصغير */
body{margin:0;padding:0;font-family:Arial,sans-serif}

2. موارد JavaScript

دور JavaScript:

  • إضافة التفاعلية إلى الصفحة
  • معالجة البيانات والمنطق
  • التواصل مع الخوادم (APIs)
  • تحديث DOM ديناميكياً

التأثير على الأداء:

  • JavaScript يحظر المُحلل والعرض
  • يستهلك وقت وحدة المعالجة المركزية
  • قد يؤخر التفاعل مع الصفحة

استراتيجيات التحميل:

<!-- 1. التحميل الافتراضي (يحظر التحليل) -->
<script src="script.js"></script>

<!-- 2. async - تحميل متوازٍ، تنفيذ فوري -->
<script async src="analytics.js"></script>

<!-- 3. defer - تحميل متوازٍ، تنفيذ بعد DOM -->
<script defer src="app.js"></script>

<!-- 4. module - دعم ES6 modules -->
<script type="module" src="main.js"></script>

الفرق بين async و defer:

         HTML Parsing
         |
async:   |--- Download ---> Execute
         |
defer:   |--- Download ---| ... |--- Execute

أفضل الممارسات:

// تقسيم الكود (Code Splitting)
// تحميل الوحدات عند الحاجة فقط
const loadModule = async () => {
  const module = await import('./heavy-module.js');
  module.init();
};

// استخدام Web Workers للعمليات الثقيلة
const worker = new Worker('worker.js');
worker.postMessage({ task: 'heavy-computation' });

3. الخطوط (Fonts)

دور الخطوط:

  • تحسين مظهر النصوص
  • تعزيز الهوية البصرية
  • تحسين قابلية القراءة

التأثير على الأداء:

  • تأخير عرض النصوص (FOIT/FOUT)
  • استهلاك نطاق ترددي
  • قد تحظر العرض

تحسين الخطوط:

<!-- 1. تحميل الخطوط مسبقاً -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin>

<!-- 2. استخدام font-display -->
<style>
  @font-face {
    font-family: 'MyFont';
    src: url('font.woff2') format('woff2');
    font-display: swap; /* عرض نص احتياطي فوراً */
  }
</style>

<!-- 3. استخدام خطوط النظام كبديل -->
<style>
  body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  }
</style>

خيارات font-display:

  • swap: عرض نص احتياطي فوراً
  • optional: استخدام الخط فقط إذا تحمل بسرعة
  • fallback: فترة قصيرة للنص الاحتياطي
  • block: إخفاء النص حتى يتحمل الخط

استراتيجية شاملة لتحميل الموارد

1. ترتيب الأولويات

<!DOCTYPE html>
<html>
<head>
  <!-- 1. CSS حرج مضمن -->
  <style>/* Critical CSS */</style>
  
  <!-- 2. تحميل موارد مهمة مسبقاً -->
  <link rel="preload" href="font.woff2" as="font" crossorigin>
  <link rel="preload" href="hero.jpg" as="image">
  
  <!-- 3. CSS غير حرج -->
  <link rel="preload" href="styles.css" as="style" onload="this.rel='stylesheet'">
  
  <!-- 4. JavaScript مؤجل -->
  <script defer src="app.js"></script>
</head>
<body>
  <!-- المحتوى -->
  
  <!-- 5. JavaScript غير حرج في النهاية -->
  <script async src="analytics.js"></script>
</body>
</html>

2. التحميل التدريجي

المبدأ: تحميل ما تحتاجه الآن، وتأجيل الباقي.

// تحميل وحدات عند الحاجة
document.querySelector('#show-comments').addEventListener('click', async () => {
  const { Comments } = await import('./comments.js');
  new Comments().render();
});

3. التخزين المؤقت الذكي

# للموارد الثابتة
Cache-Control: public, max-age=31536000, immutable

# للموارد المتغيرة
Cache-Control: public, max-age=3600, must-revalidate

قياس تأثير الموارد

استخدام Chrome DevTools:

  1. افتح DevTools (F12)
  2. اذهب إلى تبويب Network
  3. أعد تحميل الصفحة
  4. راقب:
    • حجم كل مورد
    • وقت التحميل
    • ترتيب التحميل
    • الموارد التي تحظر العرض

المقاييس المهمة:

  • Total Size: الحجم الإجمالي للموارد
  • Transfer Size: البيانات المنقولة فعلياً
  • Time to First Byte (TTFB): وقت استجابة الخادم
  • DOMContentLoaded: وقت جاهزية DOM
  • Load Event: وقت تحميل جميع الموارد

الوحدة الخامسة: ساعد المتصفح بتلميحات الموارد

تُعدّ تلميحات الموارد (Resource Hints) مجموعة من الميزات المتوفرة في لغة HTML والتي تُساعد المتصفح على تحميل الموارد بشكل أسرع، وربما بأولوية أعلى.

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

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

أنواع تلميحات الموارد

1. dns-prefetch

الغرض: حل DNS مسبقاً للنطاقات الخارجية

متى تستخدمه:

  • عند تحميل موارد من نطاقات خارجية
  • قبل الاتصال بـ APIs خارجية
  • للخطوط من Google Fonts

الاستخدام:

<!-- حل DNS لنطاق Google Fonts -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">

<!-- حل DNS لـ CDN -->
<link rel="dns-prefetch" href="https://cdn.example.com">

<!-- حل DNS لـ Analytics -->
<link rel="dns-prefetch" href="https://www.google-analytics.com">

الفوائد:

  • توفير 20-120ms في البحث عن DNS
  • مفيد للاتصالات عبر HTTP/1.1
  • استهلاك قليل للموارد

2. preconnect

الغرض: إنشاء اتصال مبكر كامل مع الخادم

ما يشمله:

  • DNS lookup
  • TCP handshake
  • TLS negotiation (للـ HTTPS)

متى تستخدمه:

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

الاستخدام:

<!-- اتصال كامل لـ CDN -->
<link rel="preconnect" href="https://cdn.example.com">

<!-- اتصال كامل للخطوط مع crossorigin -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<!-- اتصال كامل لـ API -->
<link rel="preconnect" href="https://api.example.com">

الفوائد:

  • توفير 100-500ms في وقت الاتصال
  • مفيد جداً للـ HTTPS
  • يحسن تحميل الموارد الحرجة

تحذير: لا تستخدمه لأكثر من 4-6 نطاقات لأنه يستهلك موارد

3. prefetch

الغرض: جلب موارد قد تحتاجها قريباً (للصفحة التالية)

متى تستخدمه:

  • للصفحات التي من المرجح أن يزورها المستخدم
  • للموارد المستخدمة في الخطوات التالية
  • لتحسين التنقل بين الصفحات

الاستخدام:

<!-- جلب الصفحة التالية -->
<link rel="prefetch" href="/next-page.html">

<!-- جلب صور الصفحة التالية -->
<link rel="prefetch" href="/images/next-page-hero.jpg">

<!-- جلب CSS للصفحة التالية -->
<link rel="prefetch" href="/css/next-page.css">

<!-- جلب JavaScript للصفحة التالية -->
<link rel="prefetch" href="/js/next-feature.js">

الخصائص:

  • تحميل بأولوية منخفضة
  • يتم في وقت الخمول (Idle time)
  • لا يحظر التحميل الحالي
  • يُخزن في cache المتصفح

مثال عملي:

// جلب مسبق ديناميكي عند hover
document.querySelectorAll('a[href^="/"]').forEach(link => {
  link.addEventListener('mouseenter', () => {
    const prefetch = document.createElement('link');
    prefetch.rel = 'prefetch';
    prefetch.href = link.href;
    document.head.appendChild(prefetch);
  });
});

4. preload

الغرض: تحميل موارد حرجة مسبقاً بأولوية عالية

متى تستخدمه:

  • للموارد الحرجة التي يكتشفها المتصفح متأخراً
  • للخطوط المهمة
  • للصور فوق الطية (Above the fold)
  • لملفات CSS و JavaScript المهمة

الاستخدام:

<!-- تحميل خط مسبقاً -->
<link rel="preload" href="/fonts/main-font.woff2" as="font" type="font/woff2" crossorigin>

<!-- تحميل صورة البطل مسبقاً -->
<link rel="preload" href="/images/hero.jpg" as="image">

<!-- تحميل CSS حرج مسبقاً -->
<link rel="preload" href="/css/critical.css" as="style">

<!-- تحميل JavaScript مهم مسبقاً -->
<link rel="preload" href="/js/app.js" as="script">

خاصية as المهمة:

<link rel="preload" href="resource" as="TYPE">

أنواع as المتاحة:

  • style – ملفات CSS
  • script – JavaScript
  • font – خطوط الويب
  • image – صور
  • fetch – XHR/Fetch requests
  • document – HTML لـ iframe
  • audio – ملفات صوتية
  • video – ملفات فيديو

الفوائد:

  • تحميل بأولوية عالية
  • ي
تقييم الموضوع
Rating:4.8 -4254 votes

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *