تصميم المواقع و كيفية تسريع إظهار الصور

إستخدام الـ CSS

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

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

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

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

CSS يأتي للنجدة.

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

الطريقة:

أولا إعمل نمط أو كلاس لإخفاء الصور. إحتفظ به في رأس الصفحة بين

بهذة الطريقة

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

هذا هو كل شيء. ستلاحظ بأن الصفحة المقصودة قد تم تحميلها و كأنها صفحة نص عادية. ستكون الصور جاهزة و محفوظة في الكاش (cache).  و بهذا عندما يتوجه الزائر للصفحة التالية سيجد بأن الصور جاهزة و لن يضطر للإنتظار: يجب ملاحظة أن الصور المطلوب إظهارها يتم حذف الكلاس منها. أي إستخدم الكلاس للإخفاء فقط. للأسف لا يمكن عرض ذلك هنا لأن محرر النصوص يعتقد بأنها محاولة للإختراق فيقوم بمسح البرمجة الخاصة و لكن بكل تأكيد تستطيع عمل ذلك أثناء تصميم الموقع.

------------------------------
الحقوق محفوظة لـ ezweblogic.com
------------------------------