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