كيف يمكن تسريع زمن التصفح الخاص بموقعك؟

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

تختلف سرعة الموقع حسب طبيعة الأتصال بالأنترنت فقد يرى بعض الزوار الموقع الألكترنى من خلال وصلة (dial-up ) تتصل بخط الهاتف الأرض أو وصلة (ADSL) وغيرها من طرق الأتصال السلكية والا سلكية ولكن ليست هذة الطريقة التى نحكم بها على سرعة الموقع فعليك أولا اخذ الملاحظات الكافية عن حجم الموقع وحجم الملفات ثم معالجة تلك الملفات التى قد يتسسبب حجمها فى صعوبة التحميل والتصفح ولحسن الحظ توجد أداة مجانية تقوم بكل الحسابات الخاصة بموقعك وتعطيك نتائج زمن التصفح على وسائل الأتصال المختلفة وأيضا تعطيك نصائح لتحسين الموقع و بناء على تلك المعطيات تسطيع معرفة حجم الموقع والعناصر التى قد تتسبب فى تأخير تحميل الصفحة ومعالجتها http://www.websiteoptimization.com/services/analyze

وللمتصفح دور كبير فى سرعة التصفح ويجب على المصمم والمطور متابعة التطورات السريعة التى يتم ادخالها الى المتصفحات و أمكانيات كل متصفح وسرعته ودعمه للكود css ,html, javascripts ونجد فى

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

بالرغم من أدعاء شركة ميكروسوفت بأن متصفح 8Internet Explorer يدعم كود css2.1 التى أطلقت فى 1998 وهى النسخة المعدلة لكود css2 إلا ان الأختبارات أثبتت وجود العديد من الأخطاء bugs وعلى مطورى الويب متابعة تلك الأخطاء ومعرفة تأثيرها على الموقع .كما أن تلك المتصفحات تتدعم java ولكن نسخة safari للويندوز تحتاج الى برنامج مساعد plugin لدعم java وأيضا نجد أن Googlechrome لايدعم تكنولوجيا التلقيم المبسط للمحتوى Rss , Atom , ونلاحظ ايضا ان Internet Explorer لايدعم التحميل المتدرج للصور progressive JPG وهى تقنية مفيدة جدا فى حالة الصور كبيرة الحجم حيث يقوم المتصفح بعمل مسح أولى للصورة بجودة منخفضة جدا ثم يتبعه مسح متتالى لزيادة جودة الصورة وتفيد هذة التقنية بزيادة سرعة تحميل الصور على المتصفح كما أن متصفح بعض النسخ من متصفح Internet Explorer لايعرض الصور بالأمتداد PNG والتى قد عولجت بتقنية Gamma correction او color correction

اسباب بطء الموقع وكيفية تحسين السرعة

1-الكثير من الصور كبيرة الحجم عالية الجودة تتسبب فى كبر حجم الملف و بطء التصفح فيجب أولا معالجة الصور بطرق عديدة قبل التفكير فى وضعها على صفحة ويب على سبيل المثال استخدم برنامج لمعالجة الصور لتحديد طول وعرض الصورة و قص الزيادات وتغير امتداد الملف الى الامتداد JPG مع الصور الضوئية ذات الدقة اللونية العالية اما مع الصور الرسومية ذات الكثافة اللونية المحدودة و الصور المتحركة و اللوجو LOGO استخدم الأمتداد GIF وينصح بأستخدام الأمتداد PNG مع الصور الشفافة كما ان تقليل الجودة بما لايتعارض مع وضوح الألوان واستخدام خصائص الطول والعرض مع الصورة داخل الملف تساعد المتصفح على سرعة تحديد حجم الصورة وبالتالى سرعة زمن التحميل وينصح بعدم أستخدام الصور الكبيرة كخلفية للصفحة واستخدم بدلا منها رقائق الصور tile مع كود CSS للحصول على نفس الخلفية بأقل حجم وأسرع زمن ممكن.

url(images/diamond-bg.gif) repeat;

فى المثال السابق الصورة diamond-bg.gif هى صورة tile أى انها صورة رقيقة جدا حجمها قد لايتعدى 100 بايت والخاصية repeat تجعل الصورة تتكرر فى الاتجاه الافقى x والأتجاه الرأسى y .

ينصح أيضا بعمل ايقونة المفضلة favorite icon ويشار اليها ( favicon) وتوضع دائما بجانب عنوان الموقع على متصفح الأنترنت يمكن سحبها الى سطح مكتب الكمبيوتر أو وضعها فى قائمة التفضيلات و بالضغط عليها تشير دائما الى عنوان الوقع وبالرغم من انها ليست اساسية لتشغيل الموقع كما ان الكثير من زوار الموقع قد لايلاحظون وجودها إلا انها تساعد بقدر ما على تقليل حجم كمية البيانات bandwidth الذى قد ينتج فى حال عدم وجود favicon خاصة بالموقع حيث ان فى كل مرة يطلب فيها الزائر الصفحة يطلب المتصفح من الملف صورة favicon وفى حال عدم وجودها يتكون الخطأ 404 ويسجل فى ملف log/error file . ويمكن عمل المفضلة favicon بأستخدام محرر الصور بالحجم 16 16x أو 32 x 32 مع حفظها بالأمتداد ico ووضعها فى رأس الصفحة head كالتالى .

2- مساحة الأستضافة المشتركة قد تكون غير كافية بالرغم من انا بعض انواع الاستضافة قد تكون رخيصة وذات تحكم كامل او جزأى فى اعدادات الخادم ألا ان وضع الموقع خصوصا على مساحة استضافة مشتركة shared web hosting يؤدى الى التأثر بحالة المواقع الأخرى على نفس المضيف فإذا كان احد تلك المواقع نشيط جدا أو نتيجة لوجود نشاط زائد من الزوار على موقعك قد يؤثر ذلك على سرعة موقعك وأيضا ان كان احد تللك المواقع يحوى بعض الثغرات قد يؤدى الى تعرض الخادم الى الهجمات وضعف الخدمة .

3-الكثير جدا من الأكواد وأوامر الأتصال وأ ستدعاء البيانات تؤدى لبطء التصفح وقد لا يلاحظ بطء التصفح فى حالة المواقع الصغيرة والغير مشهورة ولكن مع زيادة حجم الموقع وشهرته يظهر جليا بطء التصفح وتأخر تحميل الصفحة على المتصفح ويمكن معالجة هذة المشكلة بعمل ذاكرة موقتة Caching لتخزين صفحات الموقع لأستدعاءها وقت التصفح بدلا من أعادة الأتصال بقاعدة البيانات واجهاد الخادم server web فى كل مرة يتم طلب الصفحة . كما يوجد ايضا العديد من التقنيات لضغط ملف الصفحة عند التصفح فتكون اسرع عند التحميل ولكنها فى الغالب تجهد الخادم Server . انظر الصور اسفل تبين كيف يطلب المتصفح الصفحة من الخادم Web Server

فى الحالة العادية يتم تحميل الصفحة كاملة من الخادم فى كل مرة يطلب فيها المتصفح عرض الصفحة من جديد بكامل محتواها

المتصفح :مرحبا ! عندك الصفحة اللى اسمها index.html

الخادم : سوف ابحث عنها ....

الخادم : بالتأكيد ياصديقى الصفحة موجودة عندى .

المتصفح : شكرا لك انا بنزلها عندى حتى يراها المستخدم .

المتصفح : اريد الصفحة index.html لو كانت اتعدلت من التاريخ 1 يوليو 2010

الخادم : دعنى افحص تاريخ تعديل الصفحة عندى

الخادم : انت محظوظ ! الصفحة لم يتم تعديلها منذ ذلك التاريخ. انت عندك اخر نسخة من الصفحة

المتصفح : عظيم ! سوف اعرض الصفحة من النسخة المخزنة عندى .

المتصفح : ممكن اخد الصفحة index.html لو البصمة ert2345 لاتتطابق مع البصمة اللى عندك

الخادم : دعنى افحص البصمة الألكترونية الموجودة عندى

الخادم : انت محظوظ البصمة متتطابقة ولا يوجد تعديل .

المتصفح : رائع سوف اعرض الصفحة المخزنة عندى.

المتصفح قائلا لنفسه : هل الصفحة index.html تعدت وقت الصلاحية 1 يوليو 2010 ؟

المتصفح : حقا! سوف اعرض الصفحة من الذاكرة .

4- لحجم الملف دور فى بطء التصفح فكلما زاد حجم الملف يزداد الزمن اللازم لتحميل الملف ويجب السيطرة قدر الأمكان على الحجم بأزالة المساحات البيضاء داخل الصفحة وتجنب كتابة اكود css و javascripts مدمجة بين السطور وكتابتها فى ملف خارجى مع مراعاة المعايير القياسية والأختصارات لكتابة كود على الكفاءة.

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

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

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

8-الأستخدام السىء من بعض الزوار والهاكرز قد يودى لبطء التصفح فبعض المستخدمين يقومون بضخ آلاف الرسائل الأعلانية من خلال بريد موقعك أو اضافة الأعلانات مباشرة الى صفحات الموقع فى مناطق اضافة التعليقات والرسائل والمنتديات مما يؤدى الى استهلاك الكثير من كمية البيانات bandwidth المخصصة للموقع و ارتفاع تكلفة الأستضافة Hosting ويمكن السيطرة على الفوضى التى قد يسببها البريد المزعج بوضع المرشحات filters لأصتياد تلك النوعية من الرسائل وصدها والحول دون وصولها الى صندوق البريد الخاص بالموقع ويفضل وضع شيفرة الأمان capatcha code فى اماكن التعليقات والرسائل والتسجيل لصد المحاولات غير المشروعة لأضافة محتوى خارجى أواعلان وتلك التقنية تعتمد على مزيج من الارقام والحروف تكتب بشكل عشوائى على صورة للتأكد من أن محاولة الأدخال بشرية وليست برنامج يحاول الكتابة بشكل آلى كما يمكن اضافة مرشحات تعمل على برتكول IP وماهية المحتوى وطريقة أرسال البيانات للحيلولة دون أضافة اى محتوى يضر بالموقع أو قاعدة البيانات .يمكنك تجربة احد اشهر المرشحات مجانا من خلال الموقع http://akismet.com

الاستنتاج و التعليق

كنيتيجة لما سبق فأن الحصول على موقع ذو كفاءة وسرعة عالية يتطلب التصميم الجيد جدا للموقع و تصغير حجم الملفات والصور وكتابة كود مختصر ذو كفائة عالية واستخدام خاصية الحفظ المؤقت caching وأخراج المحتوى فى ملفات html مع أختيار خطة استضافة مناسبة لحجم وأستخدام الموقع و الأخذ فى الأعتبار الأنتقال الى مضيف أكبر حجما أو تخصيص مساحة استضافة dedicated web hosting أو virtual private server (VPS) فى حالة أزدياد النشاط و شهرة الموقع .