شركة Nikkei تحقّق مستوى جديدًا من الجودة والأداء باستخدام تطبيق ويب تقدّمي (PWA) متعدد الصفحات

تتميّز شركة Nikkei بسجلّ من النشر يعود إلى أكثر من 140 عامًا، ما يجعلها من أكثر الأنشطة التجارية الإعلامية موثوقية في اليابان. بالإضافة إلى صحفها الورقية، تتلقّى الشركة أكثر من 450 مليون زيارة شهريًا إلى منصاتها الرقمية. لتوفير تجربة أفضل للمستخدمين وتسريع نشاطهم التجاري على الويب، أطلقت شركة Nikkei بنجاح تطبيق ويب تقدّمي (PWA) - https://r.nikkei.com - في تشرين الثاني (نوفمبر) 2017. ويشهدون الآن نتائج مذهلة من النظام الأساسي الجديد.

التحسينات في الأداء: - تحسين "مؤشر السرعة" بمقدار الضِعف - تسريع وقت التفاعل بمقدار 14 ثانية - تسريع التحميل بنسبة %75 باستخدام ميزة "التحميل المُسبَق"

التأثير في النشاط التجاري - 2.3 مرّة في الزيارات الواردة من نتائج البحث المجانية - زيادة بنسبة 58% في الإحالات الناجحة (الاشتراكات) - زيادة بنسبة 49% في عدد المستخدمين النشطين يوميًا - ضِعف عدد مشاهدات الصفحة لكل جلسة

تنزيل دراسة الحالة بتنسيق PDF

نظرة عامة على النشاط التجاري

التحدي

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

كان موقعها الإلكتروني يستغرق حوالي 20 ثانية ليصبح تفاعليًا بشكلٍ ثابت، وكانت مدّة التحميل تبلغ في المتوسّط 10 ثوانٍ وفقًا لمؤشر السرعة. وبما أنّ 53% من مستخدمي الأجهزة الجوّالة سيتخلّون عن التجربة إذا استغرقت عملية التحميل أكثر من 3 ثوانٍ، أرادت "نيكي" تقليل وقت التحميل لتقديم تجربة أفضل وتسريع وتيرة نشاطهم التجاري على الويب.

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

تايهيهي شيجموري، مدير الاستراتيجية الرقمية

النتائج

عملية التدقيق التي تم إجراؤها في نيسان (أبريل) 2018 على الموقع الإلكتروني القديم
تم إجراء تدقيق في نيسان (أبريل) 2018 على الموقع الإلكتروني القديم المستضاف على mw.nikkei.com

وحقّقت نيكي مكاسب مذهلة في الأداء. قفزت نتيجة Lighthouse لديهم من 23 إلى 82. تحسّن قياس الوقت المستغرَق للتفاعل بمقدار 14 ثانية. وازدادت أيضًا زيارات نتائج البحث المجانية والسرعة ومعدّل الإحالات الناجحة والمستخدمون النشطون يوميًا.

تطبيق الويب التقدّمي هو تطبيق متعدّد الصفحات (MPA) يقلل من تعقيد الواجهة الأمامية، ويُنشئ باستخدام Vanilla JavaScript. عمل خمسة مهندسين أساسيين في الواجهة الأمامية لمدة عام لتحقيق هذا الأداء.

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

هيرويوكي هيغاشي مدير المنتجات، Nikkei

الحل

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

أفضل الممارسات

  • حسِّن سرعة التحميل والتفاعل باستخدام واجهات برمجة التطبيقات الحديثة وضغط المحتوى وتحسين الرموز البرمجية.
  • يتم تحسين تجربة المستخدم تدريجيًا من خلال إضافة ميزات تطبيق الويب التقدّمي (PWA)، مثل الدعم بلا اتصال بالإنترنت و"الإضافة إلى الشاشة الرئيسية".
  • إنشاء ميزانيات الأداء في استراتيجية الأداء

نظرة تفصيلية على الجوانب الفنية

أهمية السرعة

أصبحت السرعة أكثر أهمية من أي وقت مضى. نظرًا لأن الهواتف الذكية أصبحت جهاز التصفح الرئيسي للكثير من المستخدمين، شهدت نيكي زيادة سريعة في حركة البيانات على الهاتف المحمول على خدمتها. من خلال استخدام Lighthouse، أدرك الفريق أنّ موقعه الإلكتروني القديم لم يكن محسَّنًا بالكامل للأجهزة الجوّالة، إذ يبلغ متوسط مدة "مؤشر السرعة" 10 ثوانٍ، وعملية تحميل أوّلي بطيء جدًا، وحزمة JavaScript كبيرة. كان الوقت قد حان لشركة Nikkei لإعادة بناء موقعها الإلكتروني وتطبيق أفضل الممارسات المتعلّقة بأداء الويب. في ما يلي النتائج وتحسينات الأداء المهمّة في تطبيق الويب التقدّمي الجديد.

الاستفادة من واجهات برمجة التطبيقات للويب وأفضل الممارسات لزيادة سرعة التحميل

التحميل المُسبق للطلبات الرئيسية

التحميل المُسبَق لطلبات المفاتيح

من المهم منح الأولوية لتحميل المسار الحرج. باستخدام ميزة "دفع الخادم" في HTTP/2، يمكنهم منح الأولوية لحِزم JavaScript و CSS المهمة التي يعرفون أنّ المستخدم سيحتاج إليها.

تجنُّب الرحلات المتكرّرة والمكلفة ذهابًا وإيابًا إلى أيّ وجهة

جارٍ تحميل موارد الجهات الخارجية.

كان الموقع الإلكتروني بحاجة إلى تحميل موارد تابعة لجهات خارجية للتتبّع والإعلانات والعديد من حالات الاستخدام الأخرى. وقد استخدموا <link rel=preconnect> لحلّ تأكيد الاتصال وتفاوض بروتوكول DNS/TCP/SSL مسبقًا لهذه المَراجع العميقة التابعة لجهات خارجية.

تحميل الصفحة التالية مسبقًا بشكل ديناميكي

الترجيع المُسبَق الديناميكي
الترجيع المُسبَق الديناميكي
الترجيع المُسبَق الديناميكي

وعندما كانوا على ثقة من أنّ المستخدم سينتقل إلى صفحة معيّنة، لم ينتظروا حدوث عملية التنقّل فقط. تضيف Nikkei بشكل ديناميكي <link rel=prefetch> إلى <head> وتُحضر الصفحة التالية مسبقًا قبل أن ينقر المستخدم على الرابط. يؤدي هذا إلى تفعيل التنقل الفوري في الصفحة.

ملف CSS مضمّن للمسار الحرج

ملف CSS مضمّن للمسار الحرج

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

تحسين حِزم JavaScript

تحسين حِزم JavaScript

وفي التجربة السابقة، كانت حزم JavaScript التي تخص نيكي متضخمة، وقد بلغ إجمالي حجمها 300 كيلوبايت. ومن خلال إعادة كتابة JavaScript العادية و تحسينات الحِزم الحديثة، مثل التجميع المستنِد إلى المسار وإزالة المحتوى غير المُستخدَم، تمكّنوا من تقليل هذا الحجم الكبير. قامت الشركة بتقليل حجم حزمة JavaScript بنسبة 80%، وخفضها إلى 60 كيلوبايت من خلال برنامج البيانات المجمّعة.

أفضل الممارسات الأخرى التي تم تنفيذها

تحسين JavaScript التابع لجهة خارجية

على الرغم من أنّه ليس من السهل تحسين برامج JavaScript التابعة لجهات خارجية مقارنةً بالنصوص البرمجية الخاصة بك، نجحت Nikkei في تصغير جميع النصوص البرمجية ذات الصلة بالإعلانات وتجميعها، والتي يتم عرضها الآن من شبكة توصيل المحتوى (CDN) الخاصة بها. توفّر العلامات ذات الصلة بالإعلانات عادةً مقتطفًا لبدء نصوص برمجية أخرى مطلوبة وتحميلها، ما يؤدي غالبًا إلى حظر عرض الصفحة وتتطلب أيضًا وقت استجابة إضافيًا على الشبكة لكل نص من النصوص البرمجية التي يتم تنزيلها. اتّبعت Nikkei الخطوات التالية وحسّنت وقت الإعداد بمقدار 100 ملي ثانية، بالإضافة إلى تقليل حجم JavaScript بنسبة %30:

  • تجميع جميع النصوص البرمجية المطلوبة باستخدام أداة تجميع JavaScript (مثل Webpack)
  • يتم تحميل النص البرمجي المجمّع بشكل غير متزامن، حتى لا يمنع عرض الصفحة.
  • إرفاق إعلان البانر المحسوب بنموذج Shadow DOM (بدلاً من iframe)
  • التحميل التدريجي للإعلانات عند تمرير المستخدم باستخدام واجهة برمجة التطبيقات Intersection Observer API

تحسين الموقع الإلكتروني تدريجيًا

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

Hack the Nikkei

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

مراجع إضافية