في إحدى الليالي، كنت أمرر على أحد التطبيقات الاجتماعية الشهيرة، كانت أصابعي تمرر بقوة كبيرة، وفجأة علقت بعض الصور المتتالية عالية الدقة في دوائر لمدة خمس أو ست ثوانٍ - حرفياً، كدت أن أرمي هاتفي بعيداً في تلك اللحظة. ربما تكون قد واجهت هذا النوع من الأشياء السيئة، أليس كذلك؟ يمكن لبطء تحميل الصور أن يكون قاتلاً لمنصات التواصل الاجتماعي، ولا يملك المستخدمون الصبر لانتظار التخزين المؤقت. خاصة الآن لا يمكن نقل التطبيقات الاجتماعية لمواجهة هجمات DDoS أو برامج الزحف الخبيثة، دون استخدام CDN عالية الدفاع ببساطة لا يمكن أن تتفوق على ذلك، ولكن الحماية المضافة، غالبًا ما يتم سحب السرعة مرة أخرى. هذا ليس كذلك، ركض العديد من الأصدقاء ليسألني: “مع CDN عالية الدفاع CDN، لكن الصورة أبطأ، هل يمكنك أن تأخذ في الاعتبار الأمان والخبرة؟”
تكمن المشكلة هنا: يعتقد الكثير من الناس أن مجموعة من شبكات CDN عالية الدفاع لا بأس بها، في الواقع، قد لا يكون التكوين الافتراضي مناسبًا لسيناريوهات الصور على الإطلاق. شبكة CDN عالية الدفاع من أجل مقاومة الهجمات، وعادةً ما تزيد من روابط المصادقة أو عقد التوجيه، وسوء التعامل معها سيؤدي إلى إبطاء طلب الصورة. لقد اختبرت ثلاث خدمات سائدة - CDN5 و CDN07 و 08Host، ووجدت أنه في ظل الإعدادات الافتراضية، قد يكون وقت تحميل الصورة الأولى أكثر من 200 مللي ثانية من دون CDN. في الوقت الحاضر، حتى شبكات CDN يجب أن “تمنع زملاء الفريق”، يجب أن تكون قادرًا على ضبطها.
لا تتوقع فقط أن يقوم بائعو شبكات CDN بتحسينها من أجلك، فقد لا تتناسب حلولهم العامة مع عملك. غالبًا ما يكون السبب الجذري لبطء تحميل الصور هو ثلاثة أشياء: حجم الصورة كبير جدًا، وترتيب الطلب غير معقول، واستراتيجية التخزين المؤقت لشبكة CDN غير مجدية. خاصة على المنصات الاجتماعية، حيث يقوم المستخدمون بتحميل صور ذات دقة متفاوتة في الدقة، وتتجاوز صورة PNG غير المضغوطة بسهولة 10 ميغابايت، مما يضع ضغطاً مباشراً على رابط الإرسال لشبكة CDN عالية الدقة. هناك مشكلة أخرى تتمثل في أن العديد من المطورين من أجل توفير الوقت، وتحميل جميع الصور بشكل متزامن ومباشر لتحميل جميع الصور، يتم فتح الصفحة لإطلاق عشرات الطلبات، وأصبح حد التزامن لشبكة CDN عنق الزجاجة.
تفكيري هو: مزيج “الضغط + التحميل البطيء” الذي يخترق عنق الزجاجة في السرعة، ثم ضبط التكوين لخصائص شبكة CDN عالية الدفاع. بادئ ذي بدء، دعنا نتحدث عن الضغط - لا تصدق ما يقوله “الضغط بدون فقدان البيانات كافٍ”، فالصور الاجتماعية لا تحتاج إلى الاحتفاظ بالصورة الأصلية. عادةً ما أستخدم عادةً تنسيق WebP + ضغط بدون فقدان للصور، ويقاس من تقليل حجم PNG بمقدار 70% أو أكثر، وبالكاد يمكن للعين المجردة رؤية الفرق. إليك برنامج ضغط ImageMagick النصي المعتاد الذي أستخدمه في عملية التحميل لأتمتة العملية:
لاحظ أنه لا ينبغي أن تكون معلمة -الجودة أقل من 80، وإلا سيكون التشويش واضحًا جدًا. يمنع تحجيم حد العرض (1920×1080) المستخدمين من سحب شبكة CDN عن طريق تمرير صور بدقة 4K، واللاحقة > تعني التحجيم بشكل متناسب. بالمناسبة، احرص على إضافة -strip لإزالة معلومات Exif، والتي يمكن أن توفر الكثير من البيانات الزائدة عن الحاجة. بعد المعالجة، يمكن الضغط على صورة أصلية بحجم 3 ميغابايت إلى حوالي 300 كيلوبايت، عند استخدام CDN5 أو نقل CDN 08Host، يتم تحسين معدل الوصول إلى ذاكرة التخزين المؤقت بشكل كبير، لأن المزامنة بين العقد تكون أسرع للملفات الصغيرة.
الضغط لا يكفي، عليك أن تجعل شبكة CDN تخزين الصور مؤقتاً بكفاءة. غالبًا ما تحتوي شبكات CDN عالية الدفاع مثل CDN07 على آليات تخزين مؤقت متعددة الطبقات، ولكنها قد تتجاهل متغيرات الصور بشكل افتراضي. من المستحسن فرض رؤوس التخزين المؤقت، مثل إرجاع Cache-Control: عام، max-age=2592000 (30 يومًا) لصور WebP. لا تستخدم سلاسل الاستعلام للتمييز بين إصدارات الصور (مثل image.jpg?v=2)، والتي ستؤدي إلى إبطال ذاكرة التخزين المؤقت لشبكة CDN، وبدلاً من ذلك استخدم تجزئة اسم الملف (مثل image-abc123.webp)، بحيث يمكن تخزين عقدة CDN مباشرةً وتجنب التعارضات.08دعم الواجهة الخلفية لـ CDN5 للمطابقة المنتظمة لمسار استراتيجية التخزين المؤقت للصور، والتي تعد أكثر مرونة من الإعدادات العامة لـ CDN5.
التالي هو التحميل المتأخر (التحميل البطيء)، والذي يعمل بشكل جيد بشكل خاص مع تدفقات الخلاصات الاجتماعية. المبدأ بسيط: إعطاء الأولوية لتحميل الصور في المنطقة المرئية، وتحميل الباقي عندما يقوم المستخدم بالتمرير. إن تقليل عدد طلبات الشاشة الأولى يقلل بشكل طبيعي من الضغط على شبكة CDN عالية الوضوح - ففي النهاية، يتم تشغيل تحديات التحقق من الصحة أو عمليات التحقق من المسار على الصور الضرورية فقط. في الوقت الحاضر تدعم المتصفحات في الأصل التحميل=”كسول”، ولكن للتوافق مع الإصدارات القديمة، اعتدتُ على تنفيذ ذلك بنفسي باستخدام واجهة برمجة تطبيقات Intersection Observer:
ملاحظة لإضافة data-src إلى علامة img لتخزين عنوان URL الحقيقي، وضع src صورة عنصر نائب (صورة شفافة 1×1 بكسل). عند قياسها في بيئة CDN07، انخفض عدد طلبات صور الصفحة الرئيسية من 40+ إلى 6-8، وكان وقت تحميل الشاشة الأولى أسرع بمقدار 1.3 ثانية. ومع ذلك، لا تكن كسولاً في التحميل أكثر من اللازم، يجب أن تظل الصور الرئيسية للشاشة الأولى محملة مسبقًا، وإلا فإن المستخدم يأتي لرؤية فراغ كبير أكثر صعوبة.
هناك أيضًا بعض تقنيات التحسين في شبكة CDN عالية الأمان نفسها. على سبيل المثال، يمكن أن يؤدي تمكين بروتوكول HTTP/2 إلى تعدد الطلبات، لتجنب امتلاء عدد اتصالات TCP بطلبات الصور.08Host الافتراضي على HTTP/2، ولكن يجب فتح CDN5 يدويًا في وحدة التحكم. بالإضافة إلى ذلك، اضبط إعدادات الضغط في عقدة CDN - gzip شائع، لكن التأثير على الصورة ضعيف، يوصى بفتح ضغط Brotli (يدعم CDN07 الأفضل)، يمكن رفع معدل ضغط الموارد المستند إلى النص مرة أخرى 20%. هناك أيضًا مأزق صغير: قد تؤذي قواعد WAF لشبكة CDN عالية الدفاع طلبات الصور عن طريق الخطأ، مثل الحكم الخاطئ على وكيل المستخدم أو المرجع، تذكر أن تضيف مسار الصورة الثابتة إلى القائمة البيضاء، أو أن إرجاع 403 لسبب غير مفهوم سيكون مضحكاً.
أخيرًا لا تنسَ المراقبة واختبار A/B. بعد توصيل شبكة CDN، قم بتشغيل نتائج منتظمة باستخدام WebPageTest أو GTmetrix، مع التركيز على LCP (الحد الأقصى لرسم المحتوى) و CLS (إزاحة التخطيط). لقد واجهت ارتفاعًا مفاجئًا في زمن انتقال عقدة معينة من CDN5، مما أدى إلى تحميل بطيء للصور التي تم تشغيلها في وقت متأخر جدًا، ولم تأتي الصور متأخرة إلا عندما كان المستخدمون يقومون بالتمرير بشكل محموم. تم حل المشكلة عن طريق تقسيم اسم النطاق (img1.example.com، img2.example.com) لتوزيع ضغط عقد CDN.
ولكي نكون صادقين، لا يوجد حل واحد فقط للتحسين، بل يجب تعديله باستمرار. تحميل الصورة الاجتماعية هو مشروع منهجي: الضغط لتقليل الحجم، والتحميل البطيء لتقليل التزامن، وتكوين CDN لتعزيز كفاءة ذاكرة التخزين المؤقت - لا غنى عن الثلاثة. يمكن لوظيفة الضغط الذكي 08Host التي تم اختبارها مؤخرًا 08Host، وفقًا لحالة الشبكة ضبط جودة الصورة ديناميكيًا (جودة تدهور شبكة 4G 80%، Wi-Fi لاستعادة الجودة الأصلية)، وهي ملائمة بشكل خاص للمشهد الاجتماعي المتنقل. وبالطبع، إذا كنت تستخدم CDN07، يمكنك دمج واجهة برمجة تطبيقات تحسين الصور الخاصة بهم لمعالجة الحجم والتنسيق في الوقت الفعلي، مما يوفر عليك عناء نشر خدمات الضغط.
باختصار، لا تأخذ CDN الدفاعي العالي كصندوق أسود، فهو درع ورمح في نفس الوقت عند ضبطه بشكل صحيح. الآن يفرش المستخدم الخريطة بسرعة، كما يتم منع الهجوم، والفريق الذي لا يضطر الأولاد أخيرًا إلى الاستيقاظ في منتصف الليل للتعامل مع الانهيار - هذه التجربة، قيمة!
