كيفية قياس أداء الموقع الأمامي
الحديث عن عملية التحسين غير موجود تقريبًا بين مصممي الويب العصريين الجدد. حتى العديد من مصممي الويب الذين ظلوا في العمل لمدة عشر سنوات أو أكثر لا يفهمون تمامًا أهمية تحسين الموقع.
بعد فترة طويلة من الوقت سيبدأ موقع الويب في التعطل. قد تحتوي ملفات الواجهة الأمامية على كتل مبالغ فيها من التعليمات البرمجية أو وحدات بت مخفية ومؤمنة. هذا هو الأكثر شيوعا يحدث داخل ملفات جافا سكريبت أو الصور. قد يكون من المهم إنشاء موقع ويب ممتع لتجربة المستخدم ، لكن من دون موقع ويب محسّن ، قد لا يكون لدى التصميم فرصة للتحميل بالكامل على المستخدمين غير الصبور.
النصائح أدناه مخصصة لمطوري الويب المبتدئين والمتوسطين المهتمين تحسين صفحاتهم على أكمل وجه. هناك العديد من التقنيات المتاحة وكل منها سيتصرف بشكل مختلف حسب القضايا التي يعاني منها موقعك. حاول تجريب بعض المناطق ومعرفة ما إذا كان يمكنك تطبيق هذه التقنيات على علاماتك الخاصة.
طلبات HTTP
في كل مرة يتم فيها تحميل موقع الويب الخاص بك ، يرسل طلب HTTP إلى خادم بعيد. يسمى هذا النوع من نقل البيانات بروتوكول الشبكة تستخدم خصيصا لتوزيع وتخزين ملفات النص العادي. وغالبًا ما تتضمن هذه التعليمات البرمجية للواجهة الأمامية الأساسية مثل HTML و CSS و JavaScript.
بمجرد إرسال الطلب ، سيقوم المستعرض بتحليل كل عنصر من عناصر الصفحة. بناءً على محرك التحليل ، سيتم تحميل كل موقع ويب بشكل مختلف وستظهر العناصر بترتيب مختلف بناءً على سرعات النقل. على سبيل المثال ، سيعرض Internet Explorer صفحات الويب مختلفة عن Chrome أو Safari ، وكلها تعمل على محركات تحليل مختلفة قليلاً عن Firefox أو Opera.
ما يجب مراعاته هو المدة التي يستغرقها وقت الطلب لكل ملف وإذا كان هذا الاتجاه ثابتًا. النظر في تلقي ما يزيد عن 100K أو 1 مليون زائر في الشهر. تتمثل مهمة المستعرض في تجميع كل عنصر من عناصر الصفحة وتحميل الملفات الخارجية في الذاكرة.
غالبًا ما تتضمن العوامل التي تضغط باستمرار مرجع السرعة المحسّن لموقع الويب JavaScript ملفات أو ملفات صور كبيرة. مع تعميم Verizon FiOS ، من الشائع أن تصل سرعات الإنترنت إلى 600 كيلو بايت في الثانية وتواصل التسلق! لسوء الحظ ، هذا ليس هو المعيار ، وحتى مع الاتصالات عالية السرعة ، من الممكن تجربة أخطاء التحسين.
العلاجات لأداء الموقع
نحن لسنا وحدنا في مجال تطوير الويب وتحسين الواجهة الأمامية. من أجل إكمال العمل المناسب ، هناك بعض الأدوات اللازمة للتعامل مع الوظيفة.
أصدرت Google مشروعًا بعنوان "سرعة الصفحة" تم تصميمه لمساعدة المطورين على تحسين مواقعهم على الويب والبحث عن أفضل مستويات الأداء. في الأصل ، بدأ المشروع كإضافة Firebug مفتوحة المصدر وتم قبوله الآن كمرجع تابع لجهة خارجية لاختبار الموقع.
هناك خيار آخر لمستخدمي Firebug وهو YSlow الوظيفة الإضافية لـ Yahoo! يحلل البرنامج النصي كل طلب صفحة ويب ويقترح الطرق الأكثر شيوعًا لتحسين الأداء. تستند هذه الاقتراحات إلى Yahoo! موارد المطورين لأفضل ممارسات التحسين في تصميم الويب.
قد يكون البرنامج كاشطًا قليلاً في البداية لأنه يحتوي على الكثير من المعلومات. ما عليك سوى التمسك بالأساسيات وباتباع الوثائق البسيطة ، يجب أن تكون العملية قطعة من الكعكة.
يهتم المطورون دائمًا بالقفز على مشروع لتحطيم الكود ، لذلك يجب أن يكون هذا الأمر غير ذكي. للحصول على القليل من المساعدة ، يمكنك مراجعة دليل مساعدة YSlow.
تقنيات السرعة
هناك بعض الحيل البسيطة التي يمكنك تطبيقها على موقع الويب الخاص بك على الفور لتسريع الأداء. الطريقة الأولى والأسهل هي فصل ملفات CSS و JavaScript.
ينتمي رمز CSS إلى رأس المستند. هذا مفيد لأن خصائص CSS تحتاج إلى التحليل أثناء تحميل DOM. بمجرد أن يتعرف متصفح الويب على أنماط CSS الخاصة بك في العنوان ، فسوف ينتظر عرض صفحة الويب بالكامل حتى يتم تحميل جميع الأنماط. وأيًا من الصور المستخدمة للرموز أو تصميمات الخلفية ستستغرق وقتًا ليتم تحميلها ويجب أن تفعل ذلك أولاً.
على الجانب الآخر ، قد يؤدي نقل جميع ملفات JavaScript إلى تذييل موقعك إلى حل أوقات أوقات الاستراحة بشكل كبير. تمنع العديد من المتصفحات التنزيلات المتوازية ، مما يعني أنه قبل تقديم الصفحة ، قد يتوقف متصفح الويب الخاص بالمستخدم لمدة 4 ثوان ليتم تحميل JS الخارجي بالكامل.
هذا ليس ممكنًا دائمًا ولا يعد ضروريًا دائمًا لكل موقع. إذا كانت صفحاتك تحمل نفس الشيء مع أوقات استجابة متساوية بغض النظر عن تضمين مواضع الملفات ، فلا تهتم بمناورة أي تشغيلات.
يتعذر تحميل المحتوى الديناميكي حتى يتم إكمال DOM بأكمله ، ولكن في بعض الأحيان ، سيعود ذلك إلى حدوث أخطاء. يتضمن اختبار CSS / JS لمعرفة ما إذا كان يمكنك إرجاع أي فوائد تحسين.
حجم ملف ضغط
أصبح ضغط الملفات الكبيرة شائعًا جدًا. يمكن الآن استخدامه في صفحات الويب لتقليل أوقات التحميل والحفاظ على أحجام الملفات منخفضة للغاية. لقد تم بالفعل إنجاز الكثير من العمل وبأدوات مثل ملفات YUI Compressor الصغيرة الحجم فهي عملية خالية من الطاقة.
هناك الكثير من الخدمات المجانية الأخرى على الويب للمساعدة في هذه المهمة أيضًا. تصغير CSS لديه واجهة ضغط CSS كاملة لجعل العملية بسيطة. يحتوي موقع الويب نفسه أيضًا على ضاغط جافا سكريبت مخصص يقوم بالكثير من نفس المهام مع الحفاظ على البرمجة النصية منظمة.
يمكنك أيضًا النظر في ضغط أكبر الصور في صفحات الويب الخاصة بك. يمكن القيام بذلك باستخدام أي برنامج لتحرير الصور مثل Adobe Photoshop أو GIMP من خلال إعادة تشكيل الصورة بدقة أقل. سيتم تصدير صور PNG أصغر بكثير في المتوسط من تنسيقات jpg أو TIFF. هناك أيضًا الكثير من الأدوات عبر الإنترنت مثل Image Optimizer للمساعدة في عملية الضغط.
فحص المصدر والمقاييس
هذا روتين لا يمارسه في الغالب مطورو الويب الذين يمكنهم تقديم نتائج مذهلة. من خلال تحليل جميع عناصر الصفحة في موقع الويب الخاص بك ، يمكنك معرفة ما الذي استغرق أطول وقت للتحميل والترتيب الذي تم تحميل كل قطعة فيه.
الأداة الأكثر شعبية Mozilla Firebug هي مكون إضافي لمتصفح Firefox. يقوم هذا التطبيق بتثبيت شريط أدوات صغير في أسفل المتصفح للتحقق من أوقات الاستجابة ومعلومات الرأس وعناصر الصفحة والبرامج النصية لكل موقع ويب. تم نقل البرنامج النصي أيضًا إلى Firebug Lite كملحق لبرنامج Google Chrome.
اباتشي مع mod_pagespeed
لن يتم تشغيل جميع الإعدادات على خادم الويب Apache ، لذلك هذا الخيار غير متاح دائمًا. هذه الوحدة مرتبطة مباشرة بـ جوجل رصد سرعة الصفحة ذكر مسبقا. في الواقع ، كانت شفرة mod_pagespeed تعتمد في الأساس على العديد من المكتبات من قواعد بيانات Google Code.
يتيح Apache لمسؤولي الخادم تثبيت حزم صغيرة تسمى الوحدات النمطية لتحسين أداء الخوادم الخاصة بهم. mod_pagespeed هي واحدة من هذه الوحدات التي تنفذ تقنيات التحسين تلقائيا في وقت التشغيل. هناك العديد من العمليات التي يجب إدراجها ، على الرغم من أن بعض التطبيقات الرئيسية تتضمن ضغط HTML / CSS / JS أثناء التخزين المؤقت وتخزين الصور مؤقتًا.
يقع المشروع حاليًا في Google وهو مفتوح للمطورين. تعمل Google مع GoDaddy لتطبيق mod_pagespeed على جميع حسابات الاستضافة التي تشغل خادم Apache HTTP.
على الرغم من توفر العديد من الخيارات الأخرى ، إلا أن تطوير الواجهة الأمامية يعد من أكثرها كثافة ، خاصة بالنظر إلى التحسين المسبق لصفحات الويب المهمة. يمكن أن يكون تحسين رؤوس المواقع والصور الكبيرة مهمة شاقة للغاية ومجزية.
النظر في بعض التقنيات المقدمة في هذه المقالة وانظر كيف يمكن تطبيقها في مشاريع الويب الخاصة بك. غالبًا ما لا يستغرق المطورون وقتًا كافيًا لتقدير عملهم وتنظيف أجزاء الكود القديمة. إذا كنت لا تزال تبحث عن بعض النصائح ، يجب عليك قراءة دليل تحسين الويب النهائي الخاص بنا للحصول على مؤشرات حول صيانة الواجهة الأمامية وتحسينات مريحة في الأداء.
