المقدّمة
إنّ تطبيق الويب السريع هو تطبيق ناجح على الويب. لا تنجز مهمتك كمطوّر برامج إلا بعد تحسين الأداء الفعلي للتطبيق والمتصور. لا يقتصر الأمر على ضمان حصول المستخدمين على تجربة ممتازة، ولكن هناك أسباب عملية ومهمة للغاية متعلقة بالنشاط التجاري لتحسين الأداء. وتمكّنت شركة Amazon من قياس انخفاض في المبيعات بنسبة 1% لكل 100 ملّي ثانية من وقت استجابة الموقع الإلكتروني، وقياست Google انخفاضًا في عدد الزيارات بنسبة 20% لكل تأخير قدره 0.5 ثانية (اقتباس. وهذه هي الأعداد الحقيقية التي لها تداعيات حقيقية على نشاطك التجاري وتطبيق الويب.
لدرجة أن سرعة الويب مهمة جدًا، تبذل Google جهدًا كبيرًا لجعل الويب أكثر سرعة. إذا كنت بحاجة إلى سبب آخر لتحسين أداء تطبيقك، تمّت إضافة سرعة الصفحة التي أعلنتها Google إلى خوارزمية الترتيب الخاصة بها.
هناك العديد من أفضل الممارسات المنشورة لتحسين أداء تطبيق الويب، بما في ذلك كتابان رائعان (مواقع الويب ذات الأداء العالي ومواقع الويب الأسرع حتى). يتم دمج الأساليب على الخادم (أي تنفيذ رؤوس التحكم الصحيحة في ذاكرة التخزين المؤقت) وعلى العميل (توفير سمات عرض الصورة وارتفاعها) في استراتيجية شاملة لتحسين الأداء. يصعب أحيانًا قياس مدى تطابق هذه النصائح مع الحياة الواقعية وتطبيق الويب الفعلي الذي تستخدمه.
لحسن الحظ، أدوات مطوري البرامج في Chrome (المضمّنة في كل مثيل من Chrome)، توفر أداة ممتازة تفحص تطبيق الويب وتقدم اقتراحات مخصصة لتحسين الأداء وتقليل وقت الاستجابة. تتناول هذه المقالة لوحة التدقيق المشابهة في نطاقها لأداة YSlow الشائعة للغاية، وكيفية استخدامها لتسريع موقعك الإلكتروني وتقليل وقت الاستجابة وزيادة رضا المستخدمين.
ملاحظة: لا تتوفر أداة لوحة التدقيق حاليًا إلا في متصفح Chrome، ولكننا نتوقع أن يتم دمجها في متصفحات WebKit الأخرى في النهاية.
البدء
لتوضيح كيفية اقتراح "لوحة التدقيق" لتحسين أداء تطبيقات الويب، سنوجِّه الأداة إلى www.html5rocks.com. وسنستخدم "لوحة التدقيق" للمساعدة في زيادة سرعة موقعنا الإلكتروني.
يمكنك بدء "أدوات مطوري البرامج" بسهولة باستخدام رمز Chrome (في أعلى يسار نافذة Chrome) واختيار "الأدوات" > "أدوات المطوّرين".
لمزيد من المعلومات حول كيفية بدء استخدام "أدوات مطوري البرامج"، يُرجى قراءة الوثائق الرسمية.
توجد لوحة التدقيق في لوحة أزرار الأدوات الرئيسية. ستلاحظ أنه بعد اختيار "لوحة التدقيق" لم يتم بعد تحليلها لتطبيق الويب الخاص بك. قد يكون تشغيل كل من استدلال الويب بطيئًا، خاصةً مع تطبيق ويب كبير مثل GMail، لذا يتم إيقاف الأداة افتراضيًا.
لنتعمق أكثر من خلال النقر فوق الزر "Run" (تشغيل)، والذي يعيد تحميل تطبيق الويب مع تشغيل استدلالات الأداء. بعد إعادة تحميل الصفحة، ستظهر لك قائمة اقتراحات مشابهة للقطة الشاشة أدناه.
ستلاحظ أنّ "لوحة التدقيق" تصنّف الاقتراحات حسب درجة الخطورة، حيث يتم تمييز الاقتراحات الأكثر حدّة بنقطة حمراء، في حين يتم تمييز اقتراحات الخطورة المتوسطة بنقطة صفراء. يساعدك الترميز اللوني هذا في تحديد أولويات الاقتراحات، مع التركيز على أهم (وأكبر المكاسب) أولاً.
الرقم بين القوسين، بعد الاقتراح، هو عدد الحالات التي اكتشفتها أداة التدقيق. على سبيل المثال، كان هناك 12 مثيلاً لـ "الاستفادة من التخزين المؤقت للمتصفح". يمنحك هذا فكرة عن عدد المرات التي يمكن فيها تطبيق الاقتراح.
استراتيجيات السرعة
كما ذكرنا سابقًا، هناك الكثير من الاستراتيجيات المعروفة والمختبرة بشكل كبير لتحسين أداء تطبيقات الويب. لن نتناول هذه المواضيع بالتفصيل في هذه المقالة، ولكن من السهل العثور على المزيد من المعلومات والتفاصيل. من بين الموارد المفيدة لمعرفة المزيد من المعلومات عن تفاصيل تحسين تطبيقات الويب لنجعل الويب أسرع البرامج التعليمية ووقت استجابة قابلية التوسيع العالي هو في كل مكان وتكلفك المبيعات.
تقوم لوحة التدقيق بتجميع اقتراحاتها في فئتين، هما استخدام الشبكة وأداء صفحة الويب.
وفقًا للجنة التدقيق، لتحسين استخدام الشبكة، يجب علينا:
- الاستفادة من التخزين المؤقت للمتصفح
- الاستفادة من التخزين المؤقت للخادم الوكيل
- تقليل حجم ملفات تعريف الارتباط
- عرض محتوى ثابت من نطاق بدون ملفات تعريف الارتباط
- تحديد أبعاد الصورة
لتحسين أداء صفحات الويب، يجب علينا:
- تحسين ترتيب الأنماط والنصوص البرمجية
- إزالة قواعد CSS غير المستخدمة
لنلقِ نظرة على إحدى الإستراتيجيات التي يمكننا التركيز عليها لتحسين أداء موقع htmlrocks.com.
الاستفادة من التخزين المؤقت للمتصفح
على سبيل المثال، لنستعرض أولاً الاقتراحات المتعلقة بالاستفادة من ذاكرة التخزين المؤقت للمتصفح. ماذا يعني ذلك على وجه التحديد؟ لتفتح الخيار في واجهة المستخدم، تظهر لنا التفاصيل التالية:
- لم يتم إدخال تاريخ انتهاء صلاحية لذاكرة التخزين المؤقت في الموارد التالية. قد لا تُخزِّن المتصفحات الموارد التي لا تحدد تاريخ انتهاء صلاحية.
- الموارد القابلة للتخزين المؤقت التالية ذات مدة حداثة قصيرة.
- الموارد التالية غير قابلة للتخزين المؤقت بشكل صريح. وننصحك بجعلها قابلة للتخزين المؤقت إن أمكن.
يعتبر تخزين الموارد في ذاكرة التخزين المؤقت وسيلة ممتازة لتحسين استخدام الشبكة، مما يؤدي إلى انخفاض فواتير النطاق الترددي للمطور وزيادة سرعة استجابة المستخدم. للأسف، لا توضّح لك الأداة ما عليك فعله بالضبط، لذا علينا التعمّق في الاقتراحات قليلاً واستخدام معرفتنا بتحسينات أداء تطبيقات الويب لتطبيق هذه الاقتراحات.
التخزين المؤقت
بدون التعمق في تخزين HTTP، يمكننا بالتأكيد تغطية بعض الأساسيات. يتضمن بروتوكول HTTP تعليمات التخزين المؤقت، ما يسمح للخادم والعميل بتقليل كمية البيانات التي يجب نقلها عبر السلك. على سبيل المثال، يمكن للخادم أن يطلب من العميل حفظ المورد محليًا لمدة زمنية معينة، وبالتالي القضاء على الحاجة لطلب المورد مرة أخرى. يمكن للعميل أيضًا أن يسأل ما إذا كان مورد الخادم أحدث من المورد المخزن محليًا. إذا كان المورد ثابتًا، يجب أن يطلب الخادم من العميل تخزين المورد محليًا وتجنُّب طلب ذلك من الخادم في المستقبل. هناك، كما يمكنك أن تتخيل، قدر هائل من التفاصيل بخصوص التخزين المؤقت لبروتوكول HTTP، ولكن الموضوع العام هو "تقليل كمية البيانات المرسلة عبر السلك عن طريق تخزين الموارد محليًا على العميل".
إصلاح الموارد غير القابلة للتخزين المؤقت
لنلقِ نظرة على أحد الاقتراحات بالتفصيل، ونتعرّف على كيفية ربط اقتراح التدقيق بأدوات أخرى في "أدوات مطوري البرامج". لنلقِ نظرة على وجه التحديد على كيفية إصلاح الخطأ "الموارد التالية غير قابلة للتخزين المؤقت بشكل صريح".
نظرًا لأن التخزين المؤقت يتم إنجازه عن طريق بروتوكول HTTP، نحتاج إلى النظر في طلب واستجابة HTTP لمورد http://www.html5rocks.com/. ما عليك سوى النقر على المورد لعرض الطلب الأصلي وعناوين الاستجابة وتفاصيلها.
يتم نقلك بعد ذلك إلى لوحة الشبكة أو الموارد أو المصادر (بناءً على نوع المورد الذي تم النقر عليه) مع مزيد من المعلومات. في هذه الحالة، سننتقل إلى لوحة "الشبكة".
نحن نحاول تأكيد أنّ الخادم أعلم العميل بأنه "لا تخزّن الصفحة الرئيسية للموقع الإلكتروني html5rocks.com مؤقتًا". للقيام بذلك، ننقر على المورد لإلقاء نظرة على عناوين الاستجابة، حيث إنها هي الرؤوس والإرشادات التي تم إرسالها من الخادم.
Cache-Control.بالتأكيد، أرسل الخادم العنوان "cache-Control: no-cache" إلى العميل. هذا، كما تتخيل، يخبر العميل أن يطلب دائمًا المورد وعدم تخزينه مؤقتًا محليًا. على وجه التحديد، نص مواصفات HTTP لـ "no-cache" على النحو التالي:
"إذا لم يحدد التوجيه no-cache اسم حقل، يجب ألا تستخدم ذاكرة التخزين المؤقت الاستجابة لتلبية طلب لاحق بدون إعادة التحقق بنجاح من خلال خادم المصدر. ويسمح هذا لخادم المصدر بمنع التخزين المؤقت حتى من خلال ذاكرات التخزين المؤقت التي تم ضبطها لعرض الاستجابات القديمة لطلبات العميل".
ولهذا السبب تنصح "لوحة التدقيق" بتمكين التخزين المؤقت، لأنه بخلاف ذلك، فإن الخادم والعميل يرسلان معلومات متكررة بشكل محتمل.
الآن بعد أن تأكدنا من السبب الجذري لاقتراح التدقيق، كيف يمكننا إصلاحه؟ وفي هذه الحالة، يشتمل الحل على إعداد أو رمز من جهة الخادم. واستنادًا إلى عملية الإعداد لديك، يمكنك تفعيل التخزين المؤقت من خلال ضبط خادم الويب أو من خلال عمليات الضبط في إطار عمل تطبيق الويب. وعلى وجه التحديد، عليك تضمين العنوان Expiration (انتهاء الصلاحية) و cache-Control: special مع مَعلمة max-age لأي مورد تريد تخزينه مؤقتًا.
الاقتراحات هي تلك الاقتراحات
تذكر أن لوحة التدقيق تقترح تحسينات بناءً على استدلالات عامة. فهو يطبّق أفضل الممارسات التي تم تعلمها على مدار سنوات عديدة، على تطبيق الويب لديك. وفي معظم الأحيان، تكون هذه الاقتراحات ثابتة ويجب أخذها بعين الاعتبار.
ومع ذلك، هناك بعض الحالات التي قد تكون فيها التوصية صحيحة ولكنها قد لا تؤدي في الواقع إلى أي تحسين. على سبيل المثال، إذا كانت صفحتك تحتوي على صورة كبيرة واحدة فقط، تنصح "لوحة التدقيق" بإضافة سمتَي العرض والارتفاع إلى العلامة <img> (حتى يعرف محرك العرض أبعاد الصورة بدون الحاجة إلى تنزيل الصورة وفحصها). في حين أنّ هذه النصيحة رائعة بشكل عام، لن تكون مفيدة بشكل كبير إذا كانت الصورة هي العنصر الوحيد في الصفحة.
لا تنسَ تطبيق هذه الاقتراحات بعد فهمها. ولا تنسَ قياس الأداء قبل التغييرات وبعدها لضمان حدوث تحسُّن حقيقي.
ملخّص
"لوحة التدقيق" هي أداة ممتازة وسهلة الاستخدام التي ستوضح لك بسرعة كيفية تحسين أداء تطبيق الويب. وتمثل السرعة سمة مهمة في تطبيق الويب، حيث وجد العديد من الشركات وجود روابط مباشرة بين الأداء والأرباح أو النشاط. إنّ تحسين أداء تطبيقك ليس التصرف الصحيح الذي يجب فعله للمستخدمين فحسب، بل هو التصرف الصحيح الذي يجب فعله لتحقيق أرباح لنشاطك التجاري.