Damien Mugnier
97، 100، 100، 100: نتيجة Lighthouse بلا أخطاء على موقع كثيف الصور.
- السنة
- 2026
- مدة التصميم
- 3 أسابيع
- التقنيات
- React · Vite · Tailwind · Vercel
- التصميم
- التطوير
- الإدارة الفنية للتصوير
- SEO المحلي
نسخة تجريبية نشرتها KAYZEN على عنوان Vercel؛ أما النطاق النهائي فهو ملك للعميل.
- الأداء في Lighthouse
- 97/100
- إتاحة الوصول، والممارسات الجيدة، وSEO
- 100/100
- صورة ذات أولوية، وكل الصور الأخرى مؤجَّلة
- 1
ما كان يجب حلّه.
السياق
Damien Mugnier مبلّط وبنّاء في بوفالون (Beauvallon)، جنوب غرب منطقة ليون. يعمل على البلاط كبير الحجم، والرخام، والحجر الطبيعي، والتراسات، لعملاء من الفئة الراقية.
القيد
التموضع الراقي لا يُثبت إلا بالصورة: البلاط كبير الحجم المركَّب بإتقان يظهر في الفواصل والقصّات، لا في نص. كان المطلوب إذن موقعًا يعتمد اعتمادًا كبيرًا على الصور — ومعروف أن هذه هي وصفة الموقع البطيء.
الحل
التعامل مع الأداء بوصفه قيدًا في التصميم لا تحسينًا نهائيًا. أُعيدت معالجة كل صورة وقصّها وتقديمها بعدّة عروض حتى قبل الدمج. والنتيجة: 97 في الأداء لموقع محتواه بصري بالكامل تقريبًا — والعلامة الكاملة في المحاور الثلاثة الأخرى.
النتائج المسجّلة عند التسليم.
نتائج Lighthouse للموقع في بيئة الإنتاج. ننشرها كما هي: وعندما تكون إحداها منخفضة، نكتب سببها وخطة تصحيحها أدناه بدلًا من التكتم عليها.
كل خيار، وسببه.
المادة لوحةً للألوان
بيج الحجر، ورمادي الرخام، والأسود العميق. لوحة الألوان مأخوذة من المواد المركَّبة؛ فيتحدث الموقع والإنجازات اللغة نفسها.
صور كبيرة، وتأطير ضيّق
اللقطات الواسعة للغرف تُغرق العمل. التأطير ضيّق على القصّات والفواصل والوصلات — حيث يظهر الفرق بين مركِّب عادي وحرفي.
نص قليل، مكتوب بإتقان
في هذا التموضع، يُضعف النص الطويل الرسالة. كل صفحة لا تتجاوز بضع جمل دقيقة، بالمفردات الصحيحة للمواد.
لوحة ألوان المشروع
حجر
#D9CFC0
الخلفية، الأسطح
رخام رمادي
#7F8489
البنية
أسود عميق
#151719
النص، التباين
نحاس أصفر
#A3813F
التفاصيل
النظام الطباعي
العناوين
Cormorant Garamond 600
النص الأساسي
Inter 400
خط Serif رفيع وطويل يخدم التموضع، وخط Sans-serif متحفّظ للمعلومات. الطباعة في خدمة الصور، لا العكس أبدًا.
ما يوجد تحت الغطاء.
- React
- Vite
- Tailwind
- Vercel
ميزانية للصور محدَّدة قبل الدمج
حُدّد وزن أقصى لكل صفحة منذ البداية؛ وأُعدّت الصور لتلتزم به. إنه عكس النهج المعتاد، حيث يُحسَّن الأداء بعد ملاحظة البطء.
تحميل مؤجَّل منهجي
صورة واحدة ذات أولوية، وكل الصور الأخرى مؤجَّلة، والأبعاد مُعلَنة حتى لا يحدث أي انزياح في التخطيط.
لا مكتبة للحركة
الانتقالات بـ CSS خالص. في موقع تحمل فيه الصورة كل شيء، كانت إضافة مئة كيلوبايت من JavaScript للحركة ستكلّف نقاط الأداء التي تصنع الفرق.
كيف يصبح الموقع قابلًا للعثور عليه.
استعلامات المواد
«تركيب بلاط كبير الحجم ليون»، «رخام حمّام جنوب غرب ليون»، «تراس حجر طبيعي». العميل الراقي يبحث عن مادة، لا عن مهنة.
صور موصوفة ومسمّاة
نصوص بديلة وصفية وأسماء ملفات صريحة. البحث بالصور قناة حقيقية في مهن التشطيب.
قابل للاستخدام من الجميع.
منذ يونيو 2025، يفرض القانون الأوروبي لإمكانية الوصول (European Accessibility Act) إتاحة الوصول الرقمي على شريحة واسعة من الخدمات الإلكترونية. نتعامل معها منذ مرحلة التصميم، لا كتدارك لاحق.
100/100 في موقع قائم على الصور
تحمل كل صورة وصفًا مفيدًا — المادة، والمقاس، والغرفة — بدل نص بديل فارغ أو مكرَّر. الموقع البصري ليس محكومًا بأن يكون غير متاح.
ما تم تسليمه.
- الرئيسية
- البلاط كبير الحجم
- الرخام والحجر الطبيعي
- التراسات
- الإنجازات
- عرض السعر
مراحل سير المشروع.
ميزانية الأداء
وزن أقصى لكل صفحة محدَّد قبل الدمج.
الإدارة الفنية للتصوير
الانتقاء، والتأطير الضيّق، والإعداد بعدّة عروض.
التصميم
لوحة ألوان من المواد، ونص قصير ودقيق.
التطوير
CSS خالص، وتحميل مؤجَّل، وأبعاد مُعلَنة.
ما يُطرح علينا كثيرًا.
أعمال أخرى
الأمن السيبراني & تطبيق متعدد المنصاتSésame
مدير كلمات مرور لا يستطيع قراءة كلمات مروركم: كانت البنية نفسها هي البرهان.
الأمن السيبراني & تطبيق ويبSésame Éclair
سرّ واحد، وقراءة واحدة، ولا أثر: المفتاح لا يغادر الرابط أبدًا، والخادم لا يحتفظ إلا بكتلة غير مقروءة.
الامتثال للائحة GDPR & SaaSKonsent by Kayzen
مورّد أشرطة موافقة يدقّق الأشرطة هو خصم وحَكَم في آن واحد: كانت الاستقلالية هي المنتج نفسه.
مستوى الإتقان نفسه، لموقعك.
تدقيق مجاني لموقعك الحالي، وعرض سعر خلال 24 ساعة، وتعليل مكتوب — مثل الذي قرأته للتو. الدفع على ثلاث دفعات دون رسوم إضافية، مع التحقق من برامج الدعم المحلية قبل التوقيع.