المطاعم & الحياة الليلية

Au P'tit Zinc

95 في الأداء و100 في إمكانية الوصول على موقع تهيمن عليه الصور: هذا كان الرهان.

السنة
2026
مدة التصميم
3 أسابيع
التقنيات
Next.js · React · Tailwind · Vercel
  • التصميم
  • التطوير
  • SEO المحلي
  • التصوير (الإدارة الفنية)
زيارة الموقع(علامة تبويب جديدة)ناقش معنا مشروعًا مماثلًا

نسخة تجريبية نشرتها KAYZEN على عنوان Vercel؛ أما النطاق النهائي فهو ملك للعميل.

https://au-ptit-zinc.vercel.app/
الصفحة الرئيسية لموقع Au P'tit Zinc — المطاعم & الحياة الليلية، من إنجاز KAYZEN
الأداء في Lighthouse
95/100
إتاحة الوصول في Lighthouse
100/100
SEO في Lighthouse
100/100
إجراءات دائمة على الهاتف المحمول
3
نقطة الانطلاق

ما كان يجب حلّه.

السياق

Au P'tit Zinc حانة-مطعم (bistrot) على رصيف Pierre-Scize في الدائرة الخامسة بليون، مفتوح منذ عام 1992. عنوان من عناوين الحيّ، معروف بأجواء آخر السهرة بقدر ما هو معروف بمطبخه.

القيد

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

الحل

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

نتائج مقيسة لا مُعلنة

النتائج المسجّلة عند التسليم.

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

PageSpeed
95
الأداء: 95 من 100
100
إمكانية الوصول: 100 من 100
96
أفضل الممارسات: 96 من 100
100
تحسين محركات البحث: 100 من 100
التصميم والإدارة الفنية

كل خيار، وسببه.

  1. مظهر داكن دافئ

    خلفية فحمية، ولمسات نحاسية، وصور يغلب عليها اللون الكهرماني. الداكن هنا ليس موضة: إنه يستعيد ضوء المكان في الساعة التي يُتَّخذ فيها قرار الذهاب إليه.

  2. ثلاثة إجراءات، في المتناول دائمًا

    الحجز، والاتصال، والاتجاهات. شريط إجراءات ثابت على الهاتف المحمول يُبقيها متاحة طوال التمرير. إنه الشيء الوحيد الذي يأتي 80% من الزوار من أجله.

  3. عارض صور بلا فخاخ

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

لوحة ألوان المشروع

  • فحمي

    #171412

    الخلفية

  • نحاسي

    #B4763A

    اللمسات البارزة، الإجراء

  • عاجي

    #F3EDE4

    النص

  • أخضر القوارير

    #2E4034

    الأقسام الثانوية

النظام الطباعي

العناوين

Playfair Display

النص الأساسي

Inter 400

خط Serif عالي التباين للاسم والعناوين — روح الكونتوار الباريسي (le zinc) — وخط Sans-serif محايد لقائمة الطعام، التي يجب أن تُقرأ في ثانية واحدة.

الهندسة

ما يوجد تحت الغطاء.

  • Next.js
  • React
  • Tailwind
  • Vercel

  1. صورة واحدة ذات أولوية

    صورة الشاشة الأولى محمَّلة مسبقًا ومحددة الأبعاد بالسمات؛ وكل الصور الأخرى مؤجَّلة. هذا ما يتيح بلوغ 95 في الأداء على موقع قائم على الصور.

  2. صيغ حديثة وأحجام مناسبة

    لكل صورة عدة عروض، تُقدَّم عبر srcset. الهاتف لا يُنزّل صورة الحاسوب المكتبي — وهذا أول مصادر الهدر في مواقع المطاعم.

  3. حجز مُفوَّض لكن مؤجَّل

    وحدة الحجز لدى مزوّد خارجي تزن عدة مئات من الكيلوبايتات. لا تُحمَّل إلا عند النقر على «احجز»، لا عند تحميل الصفحة.

تحسين محركات البحث

كيف يصبح الموقع قابلًا للعثور عليه.

  1. استعلامات القرب

    «bistrot في ليون 5»، «مطعم على رصيف Pierre-Scize»، «أين نتناول العشاء في Vieux Lyon مساءً». إنها استعلامات قرار فوري، تُكتب غالبًا على بعد أقل من كيلومتر من المطعم.

  2. ترميز Restaurant كامل

    JSON-LD من نوع Restaurant يتضمن العنوان، والإحداثيات، والمواعيد، وفئة الأسعار، ونوع المطبخ، ورابطًا إلى قائمة الطعام. هذه الكتلة هي ما يعيد Google عرضه في اللوحة المحلية.

  3. تطابق مع ملف Google

    الاسم والعنوان والهاتف متطابقة حرفًا بحرف بين الموقع وملف المنشأة. وأي اختلاف، ولو في علامات الترقيم، يُضعف SEO المحلي.

إمكانية الوصول

قابل للاستخدام من الجميع.

منذ يونيو 2025، يفرض القانون الأوروبي لإمكانية الوصول (European Accessibility Act) إتاحة الوصول الرقمي على شريحة واسعة من الخدمات الإلكترونية. نتعامل معها منذ مرحلة التصميم، لا كتدارك لاحق.

  1. 100/100 على خلفية داكنة

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

هيكل الموقع

ما تم تسليمه.

  • الرئيسية
  • قائمة الطعام
  • المكان
  • الحجز
  • الوصول والمواعيد
  • التواصل
المنهجية

مراحل سير المشروع.

  1. الإدارة الفنية للصور

    الانتقاء والمعالجة: قيمة الموقع من قيمة صوره.

  2. التصميم

    مظهر داكن، وشريط إجراءات، وعارض صور مضبوط.

  3. التطوير

    صورة ذات أولوية، وsrcset، وحجز مؤجَّل.

  4. SEO المحلي

    ترميز Restaurant، والتطابق مع ملف Google.

أسئلة

ما يُطرح علينا كثيرًا.

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

أعمال أخرى

العودة إلى أعمالنا

مستوى الإتقان نفسه، لموقعك.

تدقيق مجاني لموقعك الحالي، وعرض سعر خلال 24 ساعة، وتعليل مكتوب — مثل الذي قرأته للتو. الدفع على ثلاث دفعات دون رسوم إضافية، مع التحقق من برامج الدعم المحلية قبل التوقيع.

حجز موعدعرض الأسعار
مشاركة