مقدمة
إنّ تطبيق الويب السريع هو تطبيق ويب ناجح. ولا تكتمل مهمتك كمطوّر إلا بعد تحسين كل من الأداء الفعلي والأداء المُلاحظ لتطبيقك. وليس هذا هو الإجراء الصحيح فقط لضمان حصول المستخدمين على تجربة ممتازة، بل هناك أسباب عملية ومهمة جدًا للنشاط التجاري لإجراء التحسين. سجّلت شركة Amazon انخفاضًا بنسبة% 1 في المبيعات لكل 100 ملي ثانية من وقت استجابة الموقع الإلكتروني، وسجّلت Google انخفاضًا بنسبة% 20 في عدد الزيارات لكل 0.5 ثانية من التأخير (مرجع). هذه أرقام حقيقية لها آثار حقيقية على نشاطك التجاري وتطبيق الويب.
إنّ سرعة الويب مهمة جدًا، حتى أنّ Google تبذل جهدًا كاملاً مخصّصًا لجعل الويب أسرع. إذا كنت بحاجة إلى سبب آخر لتحسين أداء تطبيقك، أعلنت Google عن إضافة سرعة الصفحة إلى خوارزمية الترتيب.
هناك العديد من أفضل الممارسات المنشورة لتحسين أداء تطبيق الويب، بما في ذلك كتابان رائعان (High Performance Web Sites وEven Faster Web Sites). يتم دمج التقنيات على الخادم (تنفيذ رؤوس التحكّم في ذاكرة التخزين المؤقت الصحيحة) وعلى العميل (توفير سمتَي عرض الصورة وارتفاعها) في استراتيجية شاملة لتحسين الأداء. مع توفّر الكثير من النصائح والخدع، من الصعب أحيانًا قياس كيفية ربطها جميعًا بالحياة الواقعية وتطبيق الويب الفعلي.
لحسن الحظ، توفّر أدوات مطوّري البرامج في Chrome (المضمّنة في كل مثيل من Chrome) أداة ممتازة تتحقّق من تطبيق الويب وتقدّم اقتراحات مخصّصة لتحسين الأداء وتقليل وقت الاستجابة. ستتناول هذه المقالة "لوحة عمليات التدقيق"، التي تشبه في نطاقها أداة YSlow الشائعة جدًا، وكيفية استخدامها لتسريع موقعك الإلكتروني وتقليل وقت الاستجابة وزيادة رضا المستخدمين.
تجدر الإشارة إلى أنّ أداة "لوحة عمليات التدقيق" لا تتوفّر حاليًا إلا في Chrome، ولكننا نتوقع أن يتم دمجها في متصفّحات WebKit الأخرى في نهاية المطاف.
البدء
لتوضيح كيف يمكن أن تقترح "لوحة عمليات التدقيق" تحسينات على أداء تطبيقات الويب، سنوجّه الأداة إلى موقعنا الإلكتروني www.html5rocks.com. وسنستخدم "لوحة عمليات التدقيق" للمساعدة في جعل موقعنا الإلكتروني أسرع.
يمكنك بدء استخدام "أدوات المطوّرين" بسهولة باستخدام رمز Chrome (في أعلى يسار نافذة Chrome) واختيار "الأدوات" > "أدوات المطوّرين".
لمزيد من المعلومات حول كيفية البدء في استخدام "أدوات المطوّرين"، يُرجى الاطّلاع على المستندات الرسمية.
تقع لوحة "عمليات التدقيق" في لوحة أزرار الأدوات الرئيسية. بعد اختيار "لوحة عمليات التدقيق"، ستلاحظ أنّها لم تُجري بعد تحليل تطبيق الويب. قد يكون تشغيل جميع الأساليب الاستكشافية بطيئًا، خاصةً لتطبيق ويب كبير مثل Gmail، لذلك تكون الأداة غير مفعّلة تلقائيًا.
لنلقِ نظرة عن كثب من خلال النقر على زر "تشغيل" الذي يُعيد تحميل تطبيق الويب مع تفعيل الأساليب الاستقرائية للأداء. بعد إعادة تحميل الصفحة، ستظهر لك قائمة بالاقتراحات مشابهة لقطة الشاشة أدناه.
ستلاحظ أنّ "لوحة عمليات التدقيق" تحدّد الاقتراحات حسب درجة الخطورة، مع وضع نقطة حمراء على الاقتراحات الأكثر خطورة ونقطة صفراء على الاقتراحات ذات الخطورة المتوسطة. يساعدك هذا الترميز اللوني في تحديد أولويات الاقتراحات، مع التركيز على أهمّها (والمحقِّقة لأكبر المكاسب) أولاً.
يشير الرقم الوارد بين قوسين بعد الاقتراح إلى عدد النُسخ التي رصدتها "أداة التدقيق". على سبيل المثال، كان هناك 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 اسم حقل، يجب ألا تستخدم ذاكرة التخزين المؤقت الاستجابة لتلبية طلب لاحق بدون إعادة إثبات الصلاحية بنجاح مع خادم المصدر. ويسمح ذلك لخادم المصدر بمنع التخزين المؤقت حتى من خلال ذاكرات التخزين المؤقت التي تم إعدادها لعرض ردود قديمة على طلبات العميل".
لهذا السبب تحديدًا، تنصح "لوحة عمليات التدقيق" بتفعيل ميزة التخزين المؤقت، وإلا سيرسل الخادم والعميل معلومات يُحتمَل أن تكون مكرّرة.
الآن بعد أن تأكّدنا من السبب الأساسي لاقتراح "التدقيق"، كيف يمكننا حلّ هذه المشكلة؟ في هذه الحالة، يتضمن الحلّ الإعدادات أو الرموز البرمجية من جهة الخادم. استنادًا إلى الإعداد، يمكنك تفعيل ميزة التخزين المؤقت من خلال إعدادات خادم الويب أو من خلال الإعدادات في إطار عمل تطبيق الويب. وعلى وجه التحديد، يجب تضمين عنوان Expires وCache-Control: private مع مَعلمة max-age لأي مورد تريد تخزينه مؤقتًا.
الاقتراحات هي مجرد اقتراحات
تذكَّر أنّ لوحة "عمليات التدقيق" تقترح تحسينات استنادًا إلى أساليب استكشافية عامة. وهي تطبّق أفضل الممارسات التي تم اكتسابها على مدار سنوات عديدة على تطبيق الويب المحدّد. وفي معظم الأحيان، تكون هذه الاقتراحات دقيقة ويجب أخذها بعين الاعتبار.
ومع ذلك، هناك بعض الحالات التي قد يكون فيها الاقتراح صحيحًا ولكنّه قد لا يؤدي إلى أيّ تحسين فعلي. على سبيل المثال، إذا كانت صفحتك تتضمّن صورة كبيرة واحدة فقط، ستنصحك "لوحة عمليات التدقيق" بإضافة سمتَي العرض والارتفاع إلى علامة <img> (لكي يعرف محرّك العرض أبعاد الصورة بدون الحاجة إلى تنزيلها وفحصها). على الرغم من أنّ هذه نصيحة رائعة بشكل عام، إلا أنّها لن تساعد كثيرًا إذا كانت الصورة هي العنصر الوحيد على الصفحة.
احرص على تطبيق هذه الاقتراحات بعد فهمها. ولا تنسَ قياس الأداء قبل التغييرات وبعدها للتأكّد من حدوث تحسّن فعلي.
ملخّص
لوحة "عمليات التدقيق" هي أداة ممتازة وسهلة الاستخدام ستوضّح لك بسرعة كيفية تحسين أداء تطبيق الويب. والسرعة هي سمة مهمة لتطبيقات الويب، لأنّ العديد من الشركات قد اكتشفت ارتباطات مباشرة بين الأداء والأرباح أو النشاط. إنّ تحسين أداء تطبيقك ليس فقط هو الخيار المناسب للمستخدمين، بل هو الخيار المناسب لتحسين أرباح نشاطك التجاري.