"تحسين تسليم الوسائط في الشبكات منخفضة السرعة: دليل تقني لمنصتي Lernce وحسومات"

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

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

بالنسبة لمنصتي دراجون سوفت الرائدتين: Lernce للتعليم الرقمي وسوق حسومات (Husomat)، تمثل أصول الوسائط عنق الزجاجة التشغيلي الأكبر:

تعتمد منصة Lernce على لافتات وصور مصغرة للدورات التعليمية، بالإضافة إلى صور المدربين لبناء الثقة وتصنيف المسارات بوضوح.
تتيح منصة حسومات (Husomat) للمستخدمين والتجار الأفراد إمكانية رفع صور المنتجات مباشرة من هواتفهم الذكية، وعادةً ما تكون هذه الصور بصيغة JPEG غير مضغوطة وبأحجام تتراوح بين 3 و8 ميجابايت للصورة الواحدة.

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

يستعرض هذا الدليل التقني كيفية تصميم وبناء مسار معالجة وضغط مؤتمت للصور باستخدام Node.js ومكتبة sharp الشهيرة.

---

التصميم الهيكلي لمسار تحسين الوسائط

يعمل النظام بشكل مؤتمت بالكامل، حيث يقوم باعتراض أصول الصور المرفوعة، وتطهيرها من البيانات الوصفية غير الضرورية (Metadata)، ثم تغيير حجمها إلى أبعاد متجاوبة متعددة، وأخيراً ضغطها وتصديرها بصيغتي WebP و AVIF.

[ الصورة المرفوعة من العميل (JPG/PNG) ] ---> [ Express Ingress ]
                                                   |
                                                   v
                                          [ Sharp Processor ]
                            (تطهير البيانات / تغيير الأبعاد / تعديل الاتجاه)
                                                   |
                        +--------------------------+--------------------------+
                        |                                                     |
                        v                                                     v
              [ ضغط بصيغة AVIF ]                                   [ ضغط بصيغة WebP ]
            (eff: 5, qual: 55-60%)                               (eff: 5, qual: 75-80%)
                        |                                                     |
                        v                                                     v
           /uploads/img-400.avif                                 /uploads/img-400.webp
           /uploads/img-800.avif                                 /uploads/img-800.webp
           /uploads/img-1200.avif                                /uploads/img-1200.webp
                        |                                                     |
                        +--------------------------+--------------------------+
                                                   |
                                                   v
                                     [ برمجية التخزين المؤقت ]
                            (Cache-Control: public, max-age=31536000)
                                                   |
                                                   v
                                        [ العرض المتجاوب للعميل ]
                                    (استخدام <picture> وتحميل كسول)

---

الخطوة الأولى: إعداد معالج الصور في بيئة Node.js

نستخدم مكتبة sharp عالية الأداء المعتمدة على مكتبة libvips الأساسية، والتي تتميز بسرعتها الفائقة التي تتجاوز مكتبات المعالجة التقليدية مثل ImageMagick بمراحل.

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

import express from 'express';
import multer from 'multer';
import sharp from 'sharp';
import path from 'path';
import { promises as fs } from 'fs';

const app = express();
const upload = multer({
  limits: { fileSize: 10 * 1024 * 1024 }, // حد أقصى للملف: 10 ميجابايت
  fileFilter: (req, file, cb) => {
    const allowedTypes = /jpeg|jpg|png|webp/;
    const ext = allowedTypes.test(path.extname(file.originalname).toLowerCase());
    const mime = allowedTypes.test(file.mimetype);
    if (ext && mime) return cb(null, true);
    cb(new Error('يُسمح فقط برفع صور JPEG، PNG، و WebP.'));
  }
});

const BREAKPOINTS = [400, 800, 1200]; // الأبعاد المعتمدة: مصغرة، متوسطة، ولافتة عريضة
const UPLOAD_DIR = path.resolve('public/uploads');

app.post('/api/media/upload', upload.single('image'), async (req, res) => {
  try {
    if (!req.file) {
      return res.status(400).json({ error: 'لم يتم رفع أي ملف.' });
    }

    const { buffer, originalname } = req.file;
    const baseSlug = path.parse(originalname).name
      .toLowerCase()
      .replace(/[^a-z0-9]/g, '-')
      .replace(/-+/g, '-');
    
    const uniqueId = Date.now();
    const outputFilename = `${baseSlug}-${uniqueId}`;
    
    // التأكد من وجود مجلد الرفع
    await fs.mkdir(UPLOAD_DIR, { recursive: true });
    
    const processedImages = [];

    for (const width of BREAKPOINTS) {
      // إنشاء كائن sharp من الذاكرة المؤقتة مرة واحدة لكل بعد لتوفير طاقة المعالجة
      const transformer = sharp(buffer)
        .rotate() // تعديل اتجاه الصورة تلقائياً بناءً على بيانات EXIF للكاميرا
        .resize({
          width,
          withoutEnlargement: true,
          fit: 'inside'
        });

      // 1. معالجة وتصدير صيغة AVIF (الجيل الجديد: الأفضل للسرعات البطيئة)
      const avifName = `${outputFilename}-${width}.avif`;
      await transformer
        .clone()
        .avif({ quality: 55, effort: 4 })
        .toFile(path.join(UPLOAD_DIR, avifName));
      
      processedImages.push({ width, format: 'avif', url: `/uploads/${avifName}` });

      // 2. معالجة وتصدير صيغة WebP (صيغة واسعة التوافق وذات حجم اقتصادي)
      const webpName = `${outputFilename}-${width}.webp`;
      await transformer
        .clone()
        .webp({ quality: 75, effort: 4 })
        .toFile(path.join(UPLOAD_DIR, webpName));
        
      processedImages.push({ width, format: 'webp', url: `/uploads/${webpName}` });
    }

    return res.status(200).json({
      success: true,
      originalName: originalname,
      images: processedImages
    });
  } catch (error) {
    console.error('فشلت معالجة الصورة:', error);
    return res.status(500).json({ error: 'فشل خادم معالجة وضغط الصور.' });
  }
});

> [!NOTE] > لقد قمنا بتعيين دقة ضغط AVIF عند القيمة 55 ودقة WebP عند 75. توضح التجارب أن هذه القيم تحقق التوازن المثالي: تقليص هائل لحجم الملف دون حدوث أي تدهور مرئي للعين البشرية على شاشات الأجهزة.

---

الخطوة الثانية: إعداد ترويسات التخزين المؤقت

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

قم بتهيئة Express (أو خادم Nginx) لتوصيل ترويسات تخزين مؤقت طويلة الأمد:

// برمجية Express وسيطة لتقديم الملفات مع ترويسات Cache-Control صارمة
app.use('/uploads', express.static(UPLOAD_DIR, {
  maxAge: '1y', // الاحتفاظ بالملف لمدة عام
  immutable: true, // تأكيد عدم تغير الملف نهائياً (تتم إدارته عبر الطابع الزمني المدمج بالاسم)
  lastModified: true,
  setHeaders: (res, path) => {
    res.setHeader('Cache-Control', 'public, max-age=31536000, immutable');
    res.setHeader('Access-Control-Allow-Origin', '*'); // السماح بالوصول عبر المنصات المختلفة
  }
}));

يضمن دمج الطابع الزمني (Timestamp) في اسم كل صورة تحديث الصورة تلقائياً في متصفح العميل (مثل صور حسابات المدرسين في Lernce أو تحديثات إعلانات حسومات) بشكل آمن ودون تعارض مع إعدادات الـ immutable.

---

الخطوة الثالثة: تطبيق واجهة المستخدم المتجاوبة في المتصفح

لضمان قيام متصفح العميل بتنزيل أصغر حجم ممكن، نقوم بهيكلة واجهة المستخدم باستخدام وسم <picture> المدعوم في HTML5. يقوم المتصفح تلقائياً باختيار أفضل صيغة مدعومة بالترتيب التالي (AVIF ثم WebP ثم JPEG كخيار أخير) والأبعاد الأنسب وفقاً لدقة وحجم شاشة المستخدم.

<picture>
  <!-- عرض صيغة AVIF للمتصفحات الحديثة -->
  <source srcset="/uploads/course-banner-17231844-400.avif 400w,
                  /uploads/course-banner-17231844-800.avif 800w,
                  /uploads/course-banner-17231844-1200.avif 1200w"
          sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
          type="image/avif">

  <!-- عرض صيغة WebP كخيار بديل افتراضي -->
  <source srcset="/uploads/course-banner-17231844-400.webp 400w,
                  /uploads/course-banner-17231844-800.webp 800w,
                  /uploads/course-banner-17231844-1200.webp 1200w"
          sizes="(max-width: 600px) 400px, (max-width: 1024px) 800px, 1200px"
          type="image/webp">

  <!-- صورة احتياطية للمتصفحات القديمة -->
  <img src="/uploads/course-banner-17231844-800.webp"
       alt="لافتة إعلانية كورس تعليمي متكامل"
       loading="lazy"
       decoding="async"
       width="800"
       height="500"
       style="width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover;">
</picture>

الخصائص البرمجية المعتمدة في هذا الكود:

srcset: تربط عناوين الصور المخصصة بأبعادها الفعلية وعرضها بالبكسل.
sizes: تخبر المتصفح بالعرض الفعلي الذي ستشغله الصورة في الصفحة بناءً على شاشات الأجهزة.
loading="lazy": تؤجل تنزيل الصور البعيدة عن الشاشة حتى يقترب تصفح المستخدم منها، مما يوفر استهلاك البيانات الأولي.
decoding="async": تقوم بفك تشفير الصور خارج الخيط الرئيسي لضمان سلاسة حركة الموقع ومنع تجمد الواجهات.
aspect-ratio: تحافظ على حيز الصورة قبل اكتمال تحميلها، لمنع حدوث التغير المفاجئ في الهيكل (CLS) وهو أمر بالغ الأهمية لتجربة المستخدم ومؤشرات السيو (SEO).

---

تقييم الأداء التقني والنتائج

يؤدي تطبيق هذا المسار إلى تغيير شامل لسرعة واستهلاك المنصة البرمجية. نوضح أدناه تقييم أداء مقارن لصورة منتج مرفوعة على سوق "حسومات" (الحجم الأصلي: 4.6 ميجابايت بصيغة JPEG):

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

---

تبنّ هندسة برمجيات فائقة الأداء لمشروعك

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

هل أنت مستعد لتحسين أداء أنظمتك الحالية، بناء تطبيقات متطورة لشركتك، أو إطلاق مواقع ويب مجهزة لبيئات الاتصال المحلية؟ تواصل مع دراجون سوفت اليوم لمناقشة مشروعك مع فريقنا الهندسي وحجز استشارة تقنية شاملة.

كل المقالات

أحدث المقالات

"هندسة المزامنة الفورية والمراسلة في ظل قيود الشبكة: دراسة حالة لمنصتي Lernce وحسومات"

١٨ آب ٢٠٢٦