تصميم صفحة الهبوط: ما الذي يمكن قياسه فعلًا

صفحة الهبوط صفحة واحدة بهدف واحد، وأغلب ما يُكتب عن تصميمها نصائح لا سبيل إلى التحقق منها: عنوان جذاب، زر بارز، دليل اجتماعي. هذا الدليل يقف عند الجانب الآخر فقط، أي ما له رقم أو قاعدة مكتوبة في توثيق رسمي: عتبات الأداء التي تحدد إن كان الزائر سيرى صفحتك من أصله، وقواعد الحقول في توثيق HTML ومعايير WCAG، وما يتغيّر في التخطيط حين تصير اللغة عربية، وكم زيارة يحتاجها اختبار A/B قبل أن تعني نتيجته شيئًا.

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

الأداء: الحكم يقع قبل أن يُقرأ العنوان

تنشر Google حدودًا رقمية لثلاثة مؤشرات تقيس تجربة الزائر الفعلية، ولكل منها حد «جيد» محدد. ويُقاس كل مؤشر على حدة للجوال وسطح المكتب، وعند الشريحة المئوية 75 لا عند المتوسط. بعبارة أخرى، الربع الأبطأ من زياراتك هو الذي يقرر نتيجتك.

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

أي عنصر يقرر زمن LCP في صفحتك

التوثيق يحصر العناصر المؤهلة للقياس في قائمة قصيرة: عنصر img، وعنصر image داخل svg، وعنصر video (يُحتسب زمن صورة الملصق)، وأي عنصر يحمل صورة خلفية محمّلة بالدالة url()، وعناصر الكتل التي تحتوي نصًا. لاحظ أن تدرّج CSS لا يدخل في القائمة، فالخلفية المتدرجة تحت العنوان لا تُقاس، بينما صورة الغلاف التي وضعها المصمم خلفية بـ url() تُقاس.

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

التفاعلات التي تدخل في INP، والتي لا تدخل

يرصد INP ثلاثة أنواع فقط: النقر بالماوس، واللمس على الشاشة، وضغط مفتاح في لوحة المفاتيح. التمرير في الصفحة والتحويم بالمؤشر والتكبير خارج الحساب تمامًا.

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

الشريط الترويجي: متى يكلّفك CLS ومتى لا يكلّفك

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

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

النموذج: كل حقل يُدفع ثمنه من جهة الزائر

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

ثلاث نقاط في هذا الجدول تُخطأ أكثر من غيرها.

الأولى أن autocomplete ليس رفاهية. تكتب MDN أن القيم الصحيحة تحقق معيار 1.3.5 من WCAG 2.2، وأن القيمة المخترعة التي يكتبها المطوّر للتحايل على الملء التلقائي تُسقط المعيار لأن غرض الحقل لم يعد قابلًا للتحديد برمجيًا. وتعطيل الملء التلقائي على النموذج كله لأسباب أمنية يحرم مستخدمًا يعتمد عليه من أسهل طريق لإتمام طلبه.

الثانية أن type="tel" لا يتحقق من صيغة الرقم، ويشرح التوثيق السبب: صيغ أرقام الهاتف تختلف كثيرًا حول العالم. لهذا يصير نمط pattern صارم مكتوب على مقاس رقم مصري مصيدةً لزائر سعودي يكتب رقمه بصيغة أخرى، أو لزائر يبدأ رقمه بمفتاح دولي. اقبل الصيغتين ونظّف الرقم على الخادم.

الثالثة أن type="number" مكتوب في التوثيق أنه غير مناسب لقيم تتكوّن من أرقام لكنها ليست أعدادًا، مثل الرموز البريدية وأرقام البطاقات. الرقم القومي ورقم الهاتف من الفئة نفسها: استخدم type="tel" أو حقلًا نصيًا مع inputmode.

وسؤال «كم حقلًا أطلب» له إجابة عملية لا تحتاج إحصاءً: اطلب ما ستستعمله خلال 48 ساعة. حقل «حجم الشركة» الذي لا يغيّر شيئًا في ترتيب المتابعة هو تكلفة على الزائر وحده. باقي المعايير التي تخص النماذج والأخطاء والتنقل بلوحة المفاتيح في دليل إمكانية الوصول للمواقع العربية.

العربية واتجاه القراءة: ما ينكسر فعليًا

نقطة البداية سطر واحد: <html dir="rtl" lang="ar">. الاتجاه معلومة دلالية تُضبط على وسم الصفحة لا في ملف الأنماط، وعلى أساسه يصير أول السطر يمينًا، فيقع الزر الرئيسي في بداية القراءة تلقائيًا إن كان التخطيط مكتوبًا بخصائص CSS المنطقية (margin-inline-start وinset-inline-end وأخواتهما) بدل left وright المثبّتة.

بعد ذلك تبدأ التفاصيل التي تظهر في النسخة العربية ولم تظهر في التصميم الإنجليزي الذي بُني عليه:

• تباعد الحروف. تحذّر MDN من أن letter-spacing على كتابة عربية يفصل الحروف التي يُفترض أن تبقى موصولة، فيبدو النص مكسورًا. العنوان الرئيسي المتباعد الحروف الذي يبدو أنيقًا باللاتينية يخرب الكلمة العربية.
• الارتفاع. توثيق W3C للتدويل يذكر العربية ضمن الكتابات التي تحتاج ارتفاعًا أكبر مما تحتاجه اللاتينية، سطرًا وبين السطور. الزر المضبوط بارتفاع ثابت والبطاقة المحسوبة على ثلاثة أسطر إنجليزية هما أول ما يقصّ النص.
• النصوص القصيرة. يسجّل التوثيق نفسه أن نسبة التمدد في الترجمة ترتفع كلما قصر النص المصدر، وأن النصوص القصيرة هي التي تُحشر في أضيق المساحات: بجانب حقل، داخل صورة، في شريط تبويبات محدود العرض. ونص الزر هو أقصر نص في صفحتك وأعلاه خطرًا. والوثيقة تضيف أن العربية يصعب اختصارها، لأن الكلمة تُبنى من جذر مضغوط بسوابق ولواحق وتغييرات داخلية، فالحل ليس اختصار الجملة بل إفساح مساحة تتمدد.

تبقى الأرقام والتواريخ. القيمة الافتراضية لنظام الأرقام في Intl تتبع لغة الزائر لا صفحتك، ويمكنك التحقق في سطر واحد: new Intl.NumberFormat('ar-EG').format(1500.5) يعطي ١٬٥٠٠٫٥، والسطر نفسه بـ ar-AE يعطي 1,500.5. معنى ذلك أن سعر العرض وموعد انتهائه قد يظهران بشكل رقمي مختلف لزائر مصري وزائر إماراتي على الصفحة نفسها، وأن الخلط بين شكلي الأرقام داخل صفحة واحدة يحدث من غير أن يكتبه أحد. اختر شكلًا واحدًا وافرضه صراحة في كل موضع تعرض فيه رقمًا أو تاريخًا.

زر واتساب: متى يسبق النموذج، وكيف تعرف أنه يعمل

في أسواقنا كثير من الصفقات تبدأ برسالة لا بنموذج. صيغة الرابط موثّقة عند واتساب: https://wa.me/<number> بالرقم كاملًا بالصيغة الدولية، بلا أصفار بادئة ولا أقواس ولا شرطات، ويمكن إضافة ?text= برسالة مُرمَّزة تظهر جاهزة في حقل الكتابة.

الرسالة المعبّأة مسبقًا هي أهم تفصيلة في الزر، لأن المحادثة تنتقل خارج موقعك ولا يصلك منها أي سياق. اجعلها تحمل ما يعرّف مصدرها، مثل «أرغب في عرض الصيانة لشهر أكتوبر»، فتعرف من أول سطر أي صفحة أرسلت هذا العميل.

ما يُقاس عندك هو النقرة نفسها. الرابط يخرج إلى نطاق آخر، فيلتقطه GA4 ضمن النقرات الصادرة في القياس المحسّن مع نطاق الرابط وعنوانه، من غير كود إضافي، وتفاصيل بنائه حدثًا رئيسيًا في دليل ماذا تقيس في GA4.

وهناك قيد يخص واجهتنا العربية: الزر الرسمي «Chat on WhatsApp» متاح بالإنجليزية فقط حتى سبتمبر 2026، وإرشادات واتساب تطلب استخدامه كما هو بلا تعديل. فأمامك خياران صريحان: الزر الرسمي بنصه الإنجليزي، أو زر من تصميمك بنص عربي تتحمّل أنت فيه تباينه ومساحة لمسه واسمه البرمجي.

أما المفاضلة نفسها فتُحسم بسؤال واحد: ماذا تحتاج قبل أن ترد؟ إذا كان ردّك يعتمد على بيانات منظّمة (المحافظة، الميزانية، تاريخ التركيب، عدد الفروع) فالنموذج يجمعها مرة واحدة ويسجّل موافقة الزائر على التواصل. وإذا كانت خطوة الزائر التالية سؤالًا لا بيانات، فالنموذج يضيف احتكاكًا بلا مقابل. أكثر الصفحات فائدة تضع الاثنين وتقيسهما، ثم تحذف الأضعف بعد أن تعرف.

القياس: أربعة أحداث تكشف أين تنكسر الصفحة

الثلاثة الأولى تصلك من القياس المحسّن في GA4 بلا كود إضافي متى كانت خياراتها مفعّلة، والرابع يُرسَل صراحة. وعند تقييم النتيجة، الرقم الذي يهم ليس عدد النماذج بل تكلفة العميل المؤهَّل؛ البنود التي تجعل هذا الرقم أقل من حقيقته في دليل حساب تكلفة اكتساب العميل.

اختبار A/B: الحساب قبل الأداة

ابدأ بتصحيح شائع: Google Optimize لم يعد متاحًا منذ 30 سبتمبر 2023، وانتهت معه كل التجارب التي كانت تعمل يومها، وتحيل Google الآن إلى تكاملات مع أدوات خارجية مثل AB Tasty وOptimizely وVWO. كثير من الأدلة العربية ما زالت ترشّحه.

والسؤال الذي يسبق اختيار الأداة: هل عندك زيارات تكفي أصلًا؟ ينشر دليل NIST/SEMATECH الإحصائي الصيغة المعتمدة لأقل حجم عينة عند اختبار نسبة، ومنها تخرج أرقام صفحتك. بتطبيقها على صفحة تحوّل 2% حاليًا، بمستوى دلالة 5% وقوة 90%، يحتاج اكتشاف ارتفاع إلى 3% نحو 2,500 زيارة، ويحتاج اكتشاف ارتفاع إلى 2.5% نحو 9,200 زيارة، وإلى 2.4% نحو 14,000.

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

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

ما الذي تقيسه Google في صفحتك داخل الإعلان

إن كانت صفحتك تستقبل إعلانات بحث، فهناك تقييم جاهز لها في حسابك. يُحتسب تقييم الجودة من ثلاثة مكوّنات أحدها «تجربة الصفحة المقصودة»، ويُقارن كل مكوّن بالمعلنين الآخرين الذين ظهروا لطلب البحث نفسه خلال آخر 90 يومًا. وتكتب Google صراحة أن التقييم أداة تشخيص لا تدخل مزاد الإعلانات، فهو مؤشر على موضع الخلل لا رقم يُحسَّن لذاته.

ويذكر مسرد Google ما يتكوّن منه هذا المكوّن: فائدة ما تقدّمه الصفحة وصلته بما يبحث عنه الزائر، وسهولة تنقّله داخلها، وكم رابطًا تحمل، وما توقّعه من الإعلان قبل أن ينقر عليه. لاحظ أن «سهولة التنقل» مذكورة إلى جانب «عدد الروابط»، وهو ما يضبط نصيحة شائعة: تركيز الصفحة على إجراء واحد شيء، وحذف كل رابط حتى سياسة الخصوصية وبيانات التواصل شيء آخر.

وبند سياسي يُنسى عند استخدام أدوات بناء الصفحات الخارجية: تشترط Google أن تشترك الصفحة المقصودة وعنوان URL المعروض في النطاق نفسه.

من أين تبدأ

1. قِس الصفحة على الجوال وسجّل قيم المؤشرات الثلاثة قبل أي تعديل.
2. حدد عنصر LCP فعليًا بدل تخمينه، وعالجه وحده.
3. راجع النموذج سطرًا سطرًا: autocomplete، ونوع الحقل، والتسمية، ونص رسالة الخطأ.
4. افتح الصفحة بعرض هاتف وانظر إلى نص الزر والعنوان: هل قُصّا أو انكسرت حروفهما؟
5. فعّل الأحداث الأربعة، وانتظر أسبوعين قبل أن تُقرِّر أي شيء.

أسئلة شائعة

هل أحذف القائمة العلوية من صفحة الهبوط؟

احذف ما يقود الزائر بعيدًا عن الهدف، وأبقِ ما يحتاجه ليثق: طريقة تواصل مباشرة، وشروط العرض وسياسة الخصوصية منشورتين حيث يجدهما. توثيق Google يذكر سهولة التنقل وعدد الروابط معًا كعاملين في تجربة الصفحة المقصودة، فالمطلوب صفحة مركّزة لا صفحة معزولة.

ما معدل التحويل الجيد لصفحة هبوط؟

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

هل تكفي أداة اختبار المتصفح للحكم على الأداء؟

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

صفحة هبوط لكل إعلان أم صفحة واحدة لكل الحملات؟

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

المصادر

• Largest Contentful Paint (LCP) وInteraction to Next Paint (INP) وCumulative Layout Shift (CLS)، web.dev من Google.
• The autocomplete HTML attribute وinputmode وinput type="tel" وinput type="number" وletter-spacing، MDN Web Docs.
• Web Content Accessibility Guidelines (WCAG) 2.2، W3C، توصية بتاريخ 12 ديسمبر 2024.
• Text size in translation، W3C Internationalization.
• دليل واتساب لروابط بدء المحادثة، مركز مساعدة واتساب.
• أحداث القياس المحسّن والأحداث المقترحة، مساعدة Google Analytics.
• إيقاف Google Optimize، مساعدة Google.
• لمحة عن تقييم الجودة والصفحة المقصودة، مساعدة Google Ads.
• Sample sizes required، NIST/SEMATECH e-Handbook of Statistical Methods.

جميع الصفحات أعلاه روجعت بتاريخ 22 سبتمبر 2026.

تبني صفحة هبوط لحملة قادمة، أو تعيد بناء صفحة لا تأتي بنتيجة؟ اشرح المشروع لفريق سنابل عبر خدمة تصميم تجربة وواجهة المستخدم، ويأتيك الرد في أقل من 24 ساعة: نطاق مقترح للعمل، ومدة تنفيذ مع رقم تقديري للتكلفة. لا رسوم على ذلك، ولا يترتب عليه أي ارتباط.