كيف تسرّع موقعك؟

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

لاحظ بأن هذه المقالة تفترض بأنك تمتلك خبرة في الشفرات التي تستخدمها في موقعك، سواءً كانت HTML أو CSS أو JavaScript، إذا لم تكن تمتلك مثل هذه الخبرة، فلدي عرض لك في آخر هذا المقال.

ما الذي يجعل موقعك بطيئا؟

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

من بين أبسط الأمور التي يمكنك القيام بها لتسريع موقعك هو تقليل حجم صفحات موقعك، والصفحات تتكون عادة من عدة ملفات، أولها هو ملف HTML الذي يحمل محتوى الصفحة النصي، وهنالك أيضا ملفات الصور jpeg وgif وpng، وهنالك ملفات CSS التي تحدد شكل وتصميم موقعك، وهنالك أيضا ملفات JavaScript لإضافة التفاعلية إلى الصفحة، وهنالك العناصر الخارجية التفاعلية الأكبر حجما وأهمها ملفات Flash.

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

الأمر الثاني الذي يمكنك القيام به هو تقليل مجموع الملفات التي يجب جلبها، فعندما يقوم الزائر بزيارة صفحة ما، فإن المتصفح يقوم أولا بتنزيل ملف الصفحة الذي هو عبارة عن ملف HTML، بعد ذلك يقوم المتصفح بجلب ملفات الصور وملفات CSS وJavaScript الخارجية، كل واحد منها عبارة عن ملف مستقل، وعدد الملفات التي يجب جلبها بحد ذاته يؤدي إلى بطئ تحميل الصفحة، بغض النظر عن حجم الصفحة، فإذا كانت هنالك صفحة HTML واحدة كبيرة من 10 كيلوبايت دون أية ملفات خارجية، وصفحة HTML أخرى تتطلب الكثير من الملفات الخارجية، فإنها ستكون أبطأ، حتى لو كان مجموع هذه الملفات أيضا 10 كيلوبايت، وهذه المشكلة تظهر بصورة أوضح إذا كانت هذه الملفات الخارجية تأتي من مزودات مختلفة، كأن تكون صفحة HTML من مزود www.example.com والصور أو ملفات CSS أو JavaScript من مزود www.example.net.

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

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

سأكتفي الآن بهذه الأمور الأساسية الثلاثة دعنا ندخل في الجانب العملي وننظر لبعض الأمور المحددة التي يمكنك القيام بها لتسريع موقعك.

تقليل حجم ملفات HTML

هنالك عدة أمور يمكنك القيام لتقليل حجم صفحة HTML دون التأثير على الكيفية التي تظهر بها في المتصفح:

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

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

إزالة الخصائص المكررة. هنالك الكثير من الخصائص التي توضع في وسوم HTML من غير داع، أو أنها تتكرر بصورة مستمرة.

مثال على الخصائص التي لا داعي لها ضبط الخاصية align على القيمة right في مستند من اليمين إلى اليسار، فهذه القيمة هي القيمة الافتراضية ولا داعي لوضعها في المستند.

أما الخصائص المكررة فهي مثل ضبط الخاصية dir إلى القيمة rtl في كل فقرة من فقرات مستند ما، بينما يمكنك أن تضع هذه الخاصية مرة واحدة في الوسم HTML لتنطبق على المستند بأكمله.

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

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

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

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

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

استخدام هيئة الصور المناسبة لكل صورة

واحدة من الأمور الشهيرة التي تصيب الكثير من مصممي صفحات الانترنت بالحيرة هي الهيئة الأفضل لملفات الصور، هل هي هيئة GIF أم JPEG.

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

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

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

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

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

تعليمات CSS وسكريبتات JavaScript

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

استخدام معرفات أقصر. وما أعنيه بالمعرفات هي تلك الأمور مثل أسماء المتغيرات والدوال في JavaScript وأسماء الأنماط (classes) والمعرفات (IDs) في CSS، فبدلا من استخدام متغيرة اسمها strName يمكن اختزالها إلى n، بالطبع من الناحية برمجية، قد لا يكون هذا هو التصرف المثالي، لكن تركيزنا هنا هو على تسريع الموقع، وعليك أنت تقوم أنت بالموازنة ما بين الاثنين.

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

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

أمور أخرى؟

في هذه المقالة عرفت بعض الأمور التي يمكنك القيام بها لجعل موقعك أسرع وزوارك أسعد، إذا كنت لا تزال تريد المزيد من الطرق والتعليمات، فأنصحك بكتاب Speed Up Your Site لمؤلفه Andrew King الذي يحتوي على الكثير من النصائح والطرق المشابهة والأكثر تعمقا لتسريع موقعك.

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

→ عودة لقائمة المقالات