تحسين و تسريع تحميل موقع ويب – تحليل

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

  • أولا مهم جيدا تنصيب firefox ما نحتاجه متصفح حر
  • تنصيب كإضافة ل firefox تطبيق firebug
  • تنصيب إضافة أخرى Page Speed مقدمة من google ويتم إضافتها إلى firebug
  • وأخيرا إضافة YSlow مقدمة من طرف yahoo!

مواقع لتجربة الموقع من نقطة أخري

أضن أنك قمت بتنصيب وتأهبت للبداية و البداية سيتم التعريف كيفيت إستعمال ما قمنا بتنصيبه

فيريفوكس الكل يعرفه لكن هناك البعض يعرف ويستعمل firebug وهو عبارة عن إضاقة للمتخصصين في تصميم المواقع و Page Speed و YSlow إضفتان مقدمتان من google و yahoo! لتحليل سرعة الموقع ويتم إضافتهم عند التنصيب إلى firebug لذالك الجميع موجود في الشريط السفليي يمينا

نقوم بإدخال الموقع الذي سنقوم بدراسة سرعته
عند إنتهاء تحميل الموقع ونضغط مرتين لفتح firebug ومنها نختار Net ستضهر صفحة بيضاء
نقوم بضغط زري Ctrl + F5 وهكذا نحصل على ناتج تحميل الموقع بدون دخول كاش المتصفح في الدراسة

نأخذ قلم و ورقة ونقوم بعمل هذا التصنيف مع معطياتك الضغط على كل من css،js،images،Flash
-*- توقيت التحمبل الإجمالي للموقع 7 ثواني
-*- 3.5 ثواني لتحميل html
-*- توقيت تحميل ملفات css هو 364ms
-*- توقيت تحميل ملفات js هو 293ms
-*- توقيت تحميل ملفات الصور هو 1.12s
*-* توقيت تحميل ملفات flash هو 0 لايوجد
نقوم هذه المرة ضغط F5 ونعيد نفس الحسابات
ستجد نفس النتيجة او خفض 50% من سرعة تحميل الموقع وهذا يرجع إلى دخول كاش المتصفح.
سؤال المليون هل أنت راضي على هذه النتيجة
بالنسبة لي لا 7 ثواني كثيرة على الزائر ف google يريد أن يكون موقعك يتم تحميله في 3 ثواني
لنكمل علينا إستخراج المشاكل التي يواجهها الموقع عبر تحلبل ما حصلنا عليه والمراد القيام به

تحليل ما يجب علينا معرفته

الأول html

هو أول ما يتم تحميله وعبر الإحصائيات هو ليس أكثر من 20% من مجموع تحميل الموقع وبنسبة ل 3.12 ثواني فهو كثير والمشاكل المتواجدة يمكن أن تكون في يد مستضيف الموقع عبر مشاكل سرعته أو إلى dns الخاصة به وهذا يعود على كل المواقع المتواجدة في ذالك المستضيف بمشكلة يصعب حلها إلى بالتغيير المستضيف أو عبر طلب منهم البحث عن حل لتلك المشكلة، ويمكن أن تكون المشكلة في الموقع بالذاته بالنسبة من يستعمل قواعد بيانات فيمكن أن تكون هناك ضغط على تلك القواعد لكثرتها او خطئ في عدم معرفت إستعمالها وإكمالا يمكن ان تكون المشكلة في ضرر في تلك البيانات وهذا لا نحسب له حسابا لذالك يتم إسترجاع متأخر لتلك المعلومات والحل هو عمل غسل لتلك البيانات يدويا عبر أوامر لتلك المهمة لو عبر phpmyadmin ل mysql
في mysql وعبر phpmyadmin نذهب إلى تلك القواعد ومن القواعد إلى الجداول ونقوم بتعليم الكل ونخطار إصلاح تلك القواعد وعبر الأوامر لتلك النوع من قواعد البيانات
REPAIR TABLE table_mysql

ثانيا CSS

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

ثالثا js

هي ملفات javascript وهذا النوع عليك التفكير 90 مرة قبل إضافته وإسأل نفسك لمذا أستعمله فيمكن أن تجيد الجواب لاأحتاجه لموقع ، وبما أننا لا نعرف شيئا على معايير الويب فموقعك عليه العمل بنفس الكفائة بدون إستعمال هذا النوع، وهناك نوع من أشخاص منا غريب الأطوار له يد طويلة وهو إضافة ما كل يجد أمامه بدون التفكير لما يتم إستخدامه أو لما يتم إحتياجه فسبيل المثال عدم إستعمال الزر اليمنى للفأر فما يفيد هذا فأولا الموقع لايتناسب مع معايير الويب وثانيا الزائر لايهمه ذالك في شيء غير الضغط عليه لترك الموقع بسرعة.
هذه الملفات بغرابة الإنسان لاتفهم إلى في البرمجة فمشاكلها للموقع لايتوقف بما أنها غريبة يتم تحميلها واحدة تلوى الأخرى وليس بالتتابع مثل css وإذا تم تواجد مشاكل في تحميلها يتم توقف تحميل الموقع بأكمله حتى تكتمل وهذان نقطتاك مهمتان لإعادة التفكير هل تحتاجها بالفعل
وإضافة إلى سبق يمكن أنك لم تضف أي واحدة لكن قمت بإضافة شئء من مكان ثالث مثل زر التويتر أو ازرار أخرى لخدمة معينة أو ساعة – هل تعرف أن كل زائر له ساعة في حاسوبه – أو شيء يستعمل خدمة ثالثة فهذه الخدمات تضيف أشياء لاتراها إلى بتحليل الموقع وهذا ما نقوم به كم ملفات وجدت وكم وقتا تحتاج لتحميلها في JS
هذه الخدمات من مواقع ثاثة سأتكلم عليها في جزء من هذه الأجزاء بالتفصيل لكن يمكن أن لا مفر من إستعمال ملف واحد أو إثنان لخدمة يحتاجها موقعك وليس خدمة ثالثة وهذا نعمل مثال أو أكثر من الأخطاء التي تحصل، تحتاج قبل إرسال رسالة من موقعك التحقق من الحقول التي يتم إرسالها لكن هل تلك الصفحة موجودة بكل الموقع إذا كان الجواب لا فلما تقوم بتحميلها في كل الموقع أليس أحرى أن تقوم بإستعمالها فيما تحتاجها لا أكثر. مثال أخر لكن هذا لابد أن تستعمل إثنان لا مفر منهما وجدت قائمة تعمل ب javascript وتقوم بإستعمال خصائص jquery هنا تحتاج إلى ملفان أنك ستقوم بإضافتهم لكن لم تفكر هل يمكنك إستعمال طريقة أخرى بإستعمال css، إذا أردت زر موقع nvidia فالقائمة الرئيسية لا تتقف خدمتها على javascript .
الحلول عند إحتياجك مكتبة javascript يمكنك إستعمال خدمت API ل Google وبهذا يمكنك التحميل الملف بسرعة أكثر من مكان أخر ولأن إلى ملفاتك التي قمت بإنشائها بعد عمل لها ترتيب في التحميل واحدة تلو الأخرى عليك ضغطها مثل السابق بدون ترك حتى فراغ وهذا إضافة إلى ما يتم إستخدامه ل css وهو yui.
والأن إلى شيء أخر ملف الكل يستعمله وهو ga.js وهو ملف التحليل الذي يتم إستعماله من طرف Analytics من خدمات google هل يوما جربت وضعه أخر الصفحة بعد /body وهكذا تترك تحميل الموقع يكون أوالا ثم هو.

رابعا الصور

يقلون الصورة أحسن من 1000 كلمة لكن المشكلة أن مساحتها أكبر ب 1000 مرة من تلك 1000 كلمة. موقع يحتوي صور كثيرة أو قليله تبقى مشكلة ،حلها عبر جمعها عبر CSS Sprite أو إنقاص حجميها (جزء من هذه الشرح) وإستعمال cdn لمن يحتاج إليه

خامسا flash

شيء مريخي للمواقع التي تحترم المعايير وبما أنه سيدخل html5 ليقوم بتعويضه فهو مثل الصور كل ما قل أحسن

التحليل بخدمة page speed

خدمة مقدمة من طرف google كتلميحة لكي يتم تسريع المواقع والعمل على ذالك وهذه الخدمة تقدم تفاصيل دقيقة بما عليك علملها

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

إستعمال Yslow

مقدم من طرف yahoo لكن هذا يعطيك نقطة من A إلى F إضافة إلى ما عليك إصلاحه

إكمال التحليل

يضهر أنك جمعت في الورقة ما ستقوم به لتسريع موقعك أو مواقع
لذالك سنبدأ بالصور في الجزء الثاني

محمد حنين

الإسم الكامل محمد حنين أحد geek من أمد طويل ، مطور ويب، محب للحرية، مستعمل نضام لينوكس، وأخيرا مجرم باللغة العربية للأسف في وقتها. معلومات أكثر عني أو الإتصال بي Mohammed Hanine

You may also like...

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *