العقاراتMid marketالإمارات10 أسابيعإعادة تصميمCS-2025-08 · مستوى ما نُشر 3

الصور كانت 80% من وزن الصفحة

موقع عقارات منتجه الصور، والصور نفسها هي ما جعله ثقيلاً على الجوال.

حجم الصفحة: 7.9MB1.3MB-84%
زمن الفتح على الجوال: 6.2s1.8s-71%
نسبة الاستفسار: 1.0x1.41x+41%

قياس من متصفحات زوار حقيقيين على مدى تسعين يوماً بعد التشغيل. المصدر: تقارير جوجل الميدانية وسجل الاستفسارات، أغسطس 2025

السياق

موقع عقارات فيه 2,400 عرض نشط، لكل عرض ما بين اثنتي عشرة وأربعين صورة، وأغلب الزوار يتصفحون من الجوال.

العائق

ما جعل الحل الواضح غير ممكن.

جودة الصورة هي المنتج نفسه. وأي فرق يلاحظه المشتري وهو يقارن عرضين جنباً إلى جنب كانت الشركة سترفضه، وهي محقّة.

سبب المشكلة

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

القرار

ما رفضناه، وما اخترناه بدلاً منه

أي شركة تستطيع وصف ما بنته. المفيد أن تعرف الحل الآخر الذي كان مطروحاً ولماذا استبعدناه.

استبعدناه

خدمة استضافة صور أسرع وأغلى

كانت ستوصّل الملفات الخطأ نفسها بسرعة أكبر. المشكلة ليست في سرعة النقل، بل في حجم ما يُنقل.

اخترناه

تجهيز نسخ بمقاسات متعددة وصيغة AVIF لحظة رفع الصورة

نجهّز النسخ مرة واحدة عند الرفع، لا في كل زيارة. ونرسل أصغر ملف يناسب شاشة الزائر، بجودة لا يفرّقها أحد عند ذلك الحجم.

التنفيذ

ما نُفِّذ على أرض الواقع

Next.jsCloudflare R2AVIFSharpVercel

01سبعة مقاسات لكل صورة بصيغتَي AVIF وWebP، تُجهَّز لحظة الرفع
02المتصفح هو من يختار المقاس المناسب لشاشة الزائر
03المعرض يحمّل أول صورة فوراً، وباقي الصور عند وصول الزائر إليها
04مقاس محجوز لكل صورة، فلا يقفز شيء أمام الزائر أثناء التحميل
05ضبط الجودة لكل مقاس، بمقارنة مباشرة أمام فريق الشركة

النتيجة

مقيسة بأداة، لا مقدَّرة بالتخمين

صار حجم الصفحة 1.3 ميجابايت بدل 7.9، وصارت تفتح على الجوال في 1.8 ثانية بدل 6.2. وارتفعت الاستفسارات لكل زيارة 41% دون تغيير حرف في العروض أو أسعارها.