تُعدّ Nikkei إحدى أهم المؤسسات الإعلامية في اليابان، إذ يعود تاريخ تأسيسها إلى أكثر من 140 عامًا. بالإضافة إلى صحيفتهم المطبوعة، يتلقّون أكثر من 450 مليون زيارة شهريًا إلى مواقعهم الرقمية. بهدف تقديم تجربة أفضل للمستخدمين وتسريع أعمالهم على الويب، أطلقت شركة Nikkei بنجاح تطبيق ويب تقدّمي (PWA) - https://r.nikkei.com - في تشرين الثاني (نوفمبر) 2017. وقد حقّقوا نتائج رائعة من خلال المنصة الجديدة.
تحسين الأداء - تحسين مؤشر Speed Index بمقدار الضعف - تقليل وقت الاستجابة بمقدار 14 ثانية - تسريع التحميل بنسبة% 75 باستخدام ميزة "الجلب المسبق"
التأثير على النشاط التجاري - زيادة بنسبة 2.3 مرّة في الزيارات الواردة من نتائج البحث المجانية - زيادة بنسبة% 58 في الإحالات الناجحة (الاشتراكات) - زيادة بنسبة% 49 في عدد المستخدِمين النشطين يوميًا - زيادة بمقدار مرّتين في عدد مشاهدات الصفحات لكل جلسة
نظرة عامة على النشاط التجاري
التحدي
شهدت شركة Nikkei ارتفاعًا سريعًا في عدد الزيارات من الأجهزة الجوّالة إلى موقعها الإلكتروني القديم، وذلك لأنّ الهواتف الذكية أصبحت نقطة الدخول الرئيسية إلى الويب بالنسبة إلى العديد من المستخدمين. ومع ذلك، باستخدام Lighthouse، وهي أداة تدقيق تفحص صفحة ويب وتقدّم اقتراحات حول كيفية التحسين في فئات متعددة، تبيّن لهم أنّ موقعهم الإلكتروني لم يكن محسّنًا بالكامل للأجهزة الجوّالة في عدة مجالات، وأنّ سرعة تحميله كانت بطيئة جدًا.
كان يستغرق موقعها الإلكتروني حوالي 20 ثانية ليصبح تفاعليًا بشكل مستمر، وكان يبلغ متوسط مؤشر السرعة 10 ثوانٍ. بما أنّ% 53 من مستخدمي الأجهزة الجوّالة يغادرون أي موقع إلكتروني إذا استغرق تحميله أكثر من 3 ثوانٍ، أرادت شركة Nikkei تقليل وقت التحميل لتوفير تجربة أفضل وتسريع أعمالها على الويب.
لا شك في أهمية السرعة، لا سيما في ما يتعلق بالأخبار المالية. لقد جعلنا السرعة أحد مقاييسنا الأساسية، وقد لاقى هذا التغيير استحسان عملائنا.
تايهي شيغموري، مدير الاستراتيجية الرقمية
النتائج
حقّقت شركة Nikkei تحسّنًا ملحوظًا في الأداء. ارتفعت نتيجة Lighthouse من 23 إلى 82. وتحسّن قياس الوقت اللازم للتفاعل بمقدار 14 ثانية. كما ارتفعت نسبة الزيارات المجانية والسرعة ومعدّل الإحالات الناجحة وعدد المستخدمين النشطين يوميًا.
تطبيق الويب التقدّمي هو تطبيق متعدّد الصفحات (MPA) يقلّل من تعقيد الواجهة الأمامية، وهو مصمَّم باستخدام Vanilla JavaScript. عمل خمسة مهندسين أساسيين في الواجهة الأمامية لمدة عام لتحقيق هذا الأداء.
أثبت مهندسو الواجهة الأمامية في Nikkei أنّ تجربة المستخدم الرائعة تؤدي إلى تحسين أداء النشاط التجاري. نحن ملتزمون بمواصلة رحلتنا نحو تقديم مستوى جديد من الجودة على الويب.
هيرويوكي هيغاشي: مدير منتجات في شركة Nikkei
الحل
أنشأت شركة Nikkei وأطلقت تطبيق ويب تقدّميًا، باستخدام تصميم متجاوب وJavaScript العادي وبنية متعددة الصفحات، وركّزت على تقديم تجربة ممتعة للمستخدمين. ومن خلال إضافة مشغّل خدمة، تمكّنوا من تقديم أداء يمكن التنبؤ به، بغض النظر عن الشبكة. يضمن ذلك أيضًا توفّر أهم المقالات دائمًا وتحميلها بشكل فوري تقريبًا لأنّها مخزّنة باستخدام Cache Storage. أضافوا ملف بيان تطبيق الويب، وهذا الملف مع مشغّل الخدمات يتيح للمستخدمين تثبيت تطبيق الويب التقدّمي، ما يجعله سهل الوصول إليه. ولضمان التحكّم الكامل في الأداء، عملوا على تحسين JavaScript التابع لجهات خارجية.
أفضل الممارسات
- يمكنك تحسين سرعة التحميل والتفاعل من خلال استخدام واجهات برمجة تطبيقات حديثة على الويب، والضغط، وممارسات تحسين الرموز.
- تحسين تجربة المستخدم بشكل تدريجي من خلال إضافة ميزات "تطبيق الويب التقدّمي"، مثل إمكانية الاستخدام بلا اتصال بالإنترنت وميزة "الإضافة إلى الشاشة الرئيسية"
- إدراج ميزانيات الأداء في استراتيجية الأداء
نظرة متعمّقة في الجوانب الفنية
أهمية السرعة
أصبحت السرعة أكثر أهمية من أي وقت مضى. مع تحوّل الهواتف الذكية إلى جهاز التصفّح الرئيسي لدى العديد من المستخدمين، شهدت شركة Nikkei زيادة سريعة في عدد الزيارات من الأجهزة الجوّالة إلى خدمتها. ولكن باستخدام Lighthouse، أدركوا أنّ موقعهم الإلكتروني القديم لم يكن متوافقًا تمامًا مع الأجهزة الجوّالة، إذ بلغ متوسط "مؤشر السرعة" 10 ثوانٍ، وكان التحميل الأولي بطيئًا جدًا، وكانت حزمة JavaScript كبيرة. كان الوقت قد حان لتعيد شركة Nikkei بناء موقعها الإلكتروني وتعتمد أفضل الممارسات المتعلّقة بأداء الويب. في ما يلي النتائج والتحسينات الرئيسية على الأداء في تطبيق الويب التقدّمي الجديد.
الاستفادة من واجهات برمجة التطبيقات على الويب وأفضل الممارسات لزيادة سرعة التحميل
تحميل طلبات المفاتيح مسبقًا
من المهم تحديد أولويات تحميل المسار الحرج. باستخدام ميزة "الدفع من الخادم" في HTTP/2، يمكنهم تحديد أولويات حِزم JavaScript وCSS المهمة التي يعرفون أنّ المستخدم سيحتاج إليها.
تجنُّب الرحلات المتكرّرة والمكلفة إلى أي وجهة
كان الموقع الإلكتروني بحاجة إلى تحميل موارد تابعة لجهات خارجية لتتبُّع الإعلانات والعديد من حالات الاستخدام الأخرى. كانوا يستخدمون
<link rel=preconnect>
لإجراء تحليل مسبق لعملية تأكيد اتصال بروتوكول أمان طبقة النقل (TLS) وبروتوكول التحكّم في الإرسال (TCP) والتفاوض بشأنها، وذلك للمصادر الرئيسية التابعة لجهات خارجية.
التحميل المُسبَق الديناميكي للصفحة التالية
وعندما كانوا متأكدين من أنّ المستخدم سينتقل إلى صفحة معيّنة، لم يكتفوا بانتظار حدوث عملية الانتقال. تضيف شركة Nikkei بشكل ديناميكي
<link rel=prefetch>
إلى <head> وتجلب الصفحة التالية مسبقًا قبل أن ينقر المستخدم فعليًا على
الرابط. يتيح ذلك التنقّل الفوري بين الصفحات.
تضمين CSS الخاص بالمسار الحرج
يُعدّ تقليل ملفات CSS التي تحظر العرض من أفضل الممارسات لزيادة سرعة التحميل. يتضمّن الموقع الإلكتروني جميع ملفات CSS المهمة ضمن 0 أوراق أنماط تحظر العرض. أدّى هذا التحسين إلى تقليل سرعة عرض أوّل محتوى مفيد على الصفحة بأكثر من ثانية واحدة.
تحسين حِزم JavaScript
في التجربة السابقة، كانت حِزم JavaScript الخاصة بشركة Nikkei كبيرة الحجم، حيث بلغ وزنها الإجمالي أكثر من 300 كيلوبايت. ومن خلال إعادة كتابة الرمز البرمجي باستخدام JavaScript العادي وإجراء تحسينات حديثة على عملية التجميع، مثل تقسيم الرموز البرمجية استنادًا إلى المسارات وإزالة الرموز البرمجية غير المستخدَمة، تمكّن الفريق من تقليل هذا التضخّم. وقد تمكّنوا من تقليل حجم حزمة JavaScript بنسبة %80، ليصبح 60 كيلوبايت باستخدام RollUp.
أفضل الممارسات الأخرى التي تمّ تنفيذها
- الضغط: ضغط جميع الموارد القابلة للضغط باستخدام Gzip/Brotli وشبكة توصيل المحتوى (CDN) من Fastly
- التخزين المؤقت: تفعيل التخزين المؤقت عبر HTTP، التخزين المؤقت على مستوى الحافة
- تحسين الصور: استخدام imgix لتحسين الصور ورصد تنسيقها
- التحميل الكسول للموارد غير المهمة: استخدِم واجهة برمجة التطبيقات Intersection Observer API لتحميل الأجزاء في الجزء السفلي غير المرئي من الصفحة.
- وضع استراتيجية لتحميل خطوط الويب: إعطاء الأولوية لاستخدام خط النظام
- تحسين مقياس "سرعة عرض أوّل محتوى مفيد على الصفحة": عرض المحتوى من جهة الخادم
- استخدام ميزانيات الأداء: الحفاظ على انخفاض أوقات نقل JavaScript وتحليله/تجميعه
تحسين JavaScript التابع لجهات خارجية
مع أنّ تحسين JavaScript التابع لجهات خارجية ليس سهلاً مثل تحسين النصوص البرمجية الخاصة بك، نجحت شركة Nikkei في تصغير حجم جميع النصوص البرمجية المتعلقة بالإعلانات وتجميعها، ويتم الآن عرضها من شبكة توصيل المحتوى (CDN) الخاصة بها. عادةً ما توفّر علامات الإعلانات مقتطفًا لبدء تحميل النصوص البرمجية الأخرى المطلوبة، ما يؤدي غالبًا إلى حظر عرض الصفحة ويتطلّب أيضًا وقتًا إضافيًا للوصول إلى البيانات على الشبكة لكل نص برمجي يتم تنزيله. اتّبعت شركة Nikkei النهج التالي وحسّنت وقت الإعداد بمقدار 100 ملي ثانية، بالإضافة إلى تقليل حجم ملفات JavaScript بنسبة %30:
- تجميع جميع النصوص البرمجية المطلوبة باستخدام أداة تجميع JavaScript (مثل Webpack)
- تحميل النص البرمجي المجمّع بشكل غير متزامن، حتى لا يعيق عرض الصفحة
- ربط بانر الإعلان المحسوب بـ Shadow DOM (بدلاً من iframe)
- تحميل الإعلانات تدريجيًا عند تنقّل المستخدم باستخدام Intersection Observer API
تحسين الموقع الإلكتروني بشكل تدريجي
بالإضافة إلى عمليات التحسين الأساسية هذه، استفادت شركة Nikkei من ملف بيان تطبيق الويب ومشغّلات الخدمات لجعل موقعها الإلكتروني قابلاً للتثبيت وحتى يعمل في وضع عدم الاتصال بالإنترنت. باستخدام استراتيجية الذاكرة المؤقتة أولاً في عامل الخدمة، يتم تخزين جميع الموارد الأساسية وأهم المقالات في "مساحة تخزين الذاكرة المؤقتة" وإعادة استخدامها حتى في حالات الطوارئ، مثل الشبكة غير المستقرة أو غير المتصلة بالإنترنت، ما يوفّر أداءً ثابتًا ومحسّنًا.
Hack the Nikkei
نجحت شركة صحيفة يومية تقليدية يمتد تاريخها إلى أكثر من 140 عامًا في تسريع عملية التحوّل الرقمي من خلال الاستفادة من قوة الويب وتطبيقات الويب التقدّمية. أثبت مهندسو الواجهة الأمامية في Nikkei أنّ تجربة المستخدم الرائعة تؤدي إلى تحقيق أداء قوي في النشاط التجاري. ستواصل الشركة رحلتها في تقديم مستوى جديد من الجودة على الويب.