حاجة الساعة ليست تصميم مستجيب بل أداء مستجيب

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

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

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

لذا ، فإن السؤال الكبير هو ماذا تفعل؟

تجاهل مفهوم تصميم سطح المكتب أولاً

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

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

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

ستقبل بالتأكيد حقيقة أن الانتظار إلى ما لا نهاية فقط للتحقق من موقع ويب لا يثير إثارة أي شخص. وفقًا لبعض الاستطلاعات التي أجراها Akamai و Gomez.com ، يتوقع حوالي 50 ٪ من مستخدمي الويب بشدة تحميل موقع ويب في غضون ثانيتين أو حتى أقل. هناك المزيد من فرص التخلي عن الموقع إذا فشل تحميل موقع الويب في المتصفح في غضون 3 ثوانٍ فقط! علاوة على ذلك ، تحتوي معظم مواقع التجارة الإلكترونية في الوقت الحاضر على عدد كبير من أزرار المشاركة الاجتماعية مثل Facebook و Google Plus و Twitter و LinkedIn وما إلى ذلك. هل تعلم أن هذه الأزرار تضيف أكثر من 500 كيلوبايت إلى موقعك المتجاوب وتؤثر على أدائه؟ يتطلب زر Facebook like وحده رمزًا مضغوطًا يبلغ 270 كيلوبايت! يتطلب أيضًا طلبات HTTP متعددة. بدلاً من ذلك ، استخدم أزرار المشاركة الاجتماعية استنادًا إلى عناوين URL حيث يؤثر هذا الحجم الضخم حتمًا على وقت تحميل موقع الويب سريع الاستجابة الخاص بك حتى لو كان اتصال الهاتف المحمول سريعًا.

يؤثر أداء موقع الويب تأثيرًا مباشرًا على أداء النشاط التجاري ، ولا يقوم موقع الويب بطيء الاستجابة بأي شيء مفيد لأي شركة. صدق أو لا تصدق ، لا يهتم معظم مستخدمي الجوال بإجراء بحث أو قراءة مقالات طويلة. يستخدم معظمهم أجهزتهم المحمولة للوصول بسهولة إلى Facebook و WhatsApp و Twitter وللانغماس في متعة التسوق عبر الإنترنت. علاوة على ذلك ، لم يعد الجوال اتجاهًا ، بل هو المستقبل.

وفقًا لإحصائيات Comscore للعام الماضي ، فقد زاد عدد مستخدمي الإنترنت للهاتف المحمول فقط في الولايات المتحدة بشكل حاد بينما تم تقليل مستخدمي سطح المكتب فقط إلى 10.6 بالمائة.

بحاجة لقول أي شيء آخر لإقناع؟

ضمان التدهور رشيق

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

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

دعونا نحصل على مثال على التدهور اللطيف. لنفترض أنك قمت بتصميم موقع ويب سريع الاستجابة مع ميزات JavaScript ولا يدعم المستعرض الخاص بك هذه الميزات أو قد يتم تعطيلها من جانب عميلك. إذن ، ما الذي يمكنك فعله للحصول على المحتوى؟ حسنًا ، في مثل هذه الحالة ، يسمح التدهور اللطيف للمتصفح الخاص بك بعرض المحتوى ضمن علامة "noscript".

يمكنك فهم هذا بشكل أفضل من خلال الترميز الوارد أدناه:

[xhtml]
<noscript>
<h1> عزيزي جون ، لقد واجهت مشكلة! </ h1>
<p> يفتقر متصفحك إلى دعم جافا سكريبت أو أنه معطل مؤقتًا.
تفضل بزيارة <a href="/support/browsers/"> دعم المتصفح </a> للحصول على المساعدة. </ p>
</noscript>
[/ xhtml]

هناك مثال آخر على التدهور اللطيف الذي أود مشاركته ، وهو استخدام HTML5 بواسطة YouTube لتشغيل مقاطع الفيديو. لنفترض أن متصفحك لا يدعم HTML5 ، فسيتم عرض الفيديو باستخدام Flash ، وإذا لم يكن Flash مثبتًا ، فستتلقى رسالة لتثبيته على جهازك المحمول. في كلتا الحالتين ، ستتمكن من مشاهدة الفيديو. ومع ذلك ، فإن أحد عيوب هذا التدهور الرشيق هو أنه على الرغم من أن الأداء جيد ، إلا أنه يتعين عليك التنازل عن بعض عناصر التصميم إذا كنت تستخدم متصفحات قديمة. أعتقد أن تحديد العناصر المرئية الأساسية لموقعك على الويب مسبقًا يمكن أن يفي بالغرض.

لا حاجة للاحتفاظ بالمكتبات غير المستخدمة

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

تحقق من توافر الميزات

يمكنك التحقق مما إذا كان جهازك يدعم ميزة معينة أم لا قبل تنشيطها. على سبيل المثال ، يحدث أنه على الرغم من أنك قمت بتثبيت أحدث إصدار من Google Chrome على هاتف Android القديم الخاص بك ، فإنه لا يزال لا يعرض موقع الويب الخاص بك. في بعض الأحيان ، في محاولة لتحميل مثل هذا الموقع ، يتعطل المتصفح بشدة لدرجة تجعل الجهاز المحمول بأكمله غير مستجيب. تحتاج إلى إعادة تشغيل الجهاز ، وهذا هو آخر شيء كنت ترغب فيه أليس كذلك؟ يعاني العديد من مستخدمي تطبيقات ويب معينة بالفعل بسبب هذه المشكلة.

أدى عدم توفر الميزات على الأجهزة وحتى الآن تصميم مواقع الويب أو التطبيقات إلى بعض المشكلات الملحوظة مثل الانهيار الفوري لتطبيقات Google Hangout على أجهزة Android في جميع أنحاء العالم بغض النظر عن نوع المتصفح. هذا على الرغم من حقيقة أن التطبيق كان تطبيقًا خفيف الوزن. قد تجادل بأن المستخدمين كانوا يستخدمون إصدارًا قديمًا من الهواتف الذكية التي تعمل بنظام Android ، ولكن من الصحيح أيضًا أن هذه الأجهزة لا تزال متاحة على الرف كعلامة تجارية جديدة في أي من متاجر الهواتف المحمولة. يواجه العديد من مستخدمي الأجهزة المحمولة نفس مشكلة الأداء مع تطبيق YouTube و Twitter أيضًا. حتى تحديث خدمة عرض الويب لنظام Android من Google عبر Google Play أدى إلى تجميد العديد من الهواتف الذكية لتصبح نوعًا من كابوس المستخدمين.

تحسين الصور

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

اجعل الصور بحجم أصغر باستخدام أداة مناسبة لتحسين الصورة. في الواقع ، ليس هناك ندرة في مثل هذه الأدوات عبر الويب. بعض الميزات البارزة التي يمكنك استخدامها هي Dynamic Drive و Smush it و Riot. إذا كنت محترفًا في Photoshop ، فيمكنك أيضًا تحسين حجم الصورة بنفسك. استخدم تقنية ضغط ذكية وقم بإزالتها من أي بيانات وصفية زائدة عن الحاجة. تحويل الرسومات إلى PNG ، والصور الغنية بالألوان إلى JPEG ، والصور المتحركة إلى GIF يؤدي أيضًا إلى الحيلة.

مُستعد للحالات القصوى

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

على سبيل المثال ، صفحة ويب تعرض بعض المقالات والمدونات والبيانات الصحفية. يجب أن يكون لها عنوان أيضًا. الآن ، ماذا سيحدث إذا كان يجب أن تعرض مساحة العنوان التي كنت تعتقد أنها تعرض "نصائح تصميم الويب المتجاوب" عنوانًا "10 نصائح وتقنيات أساسية لتصميم موقع ويب مستجيب ناجح"؟ الآن ، هذه حالة متطرفة.

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

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