Nikkei צבר היסטוריה של יותר מ-140 שנה בתחום המדיה, והוא אחד מעסקי המדיה המהימנים ביותר ביפן. בנוסף לעיתון המודפס, יש להם יותר מ-450 מיליון ביקורים בחודש בנכסים הדיגיטליים שלהם. כדי לספק חוויית משתמש טובה יותר ולהאיץ את הפעילות העסקית שלה באינטרנט, Nikkei השיקה בנובמבר 2017 אפליקציית Progressive Web App (PWA) – https://r.nikkei.com. עכשיו הם מקבלים תוצאות מדהימות מהפלטפורמה החדשה.
שיפור בביצועים - מדד מהירות משופר פי 2 - זמן עד לפעילות מלאה ב-14 שניות - טעינה מהירה יותר ב-75% עם שליפה מראש
ההשפעה על העסק - פי 2.3 את התנועה האורגנית - 58% יותר המרות (מינויים) - 49% יותר משתמשים פעילים ביום - פי 2 צפיות בדפים לכל סשן
סקירה עסקית
אתגר
חברת Nikkei ראתה עלייה מהירה בתנועה מהנייד לאתר הקודם של החברה, כשסמארטפונים הפכו לנקודת הכניסה העיקרית של המשתמשים באינטרנט. עם זאת, באמצעות Lighthouse, כלי ביקורת שסורק דפי אינטרנט ונותן המלצות לשיפור בקטגוריות מרובות, בעלי החברה הבינו שהאתר לא עבר אופטימיזציה מלאה לניידים באזורים מרובים, והטעינה שלו איטית מאוד.
לאחר כ-20 שניות, האתר שלהם הפך לאינטראקטיבי בעקביות, והדירוג שלו הוא כ-10 שניות בממוצע באינדקס המהירות. ניקיי ידעה ש-53% מהמשתמשים בנייד ינטשו את חוויית הטעינה אם הטעינה נמשכת יותר מ-3 שניות, ולכן רצתה לקצר את זמן הטעינה כדי לספק חוויה טובה יותר ולהאיץ את הפעילות העסקית שלה באינטרנט.
הערך של מהירות הוא נושא מרכזי, במיוחד כשמדובר בחדשות פיננסיות. שינינו את המהירות כאחד מהמדדים העיקריים שלנו, והלקוחות שלנו התעניינו בשינוי.
טאיהיי שיגמורי, מנהל, אסטרטגיה דיגיטלית
תוצאות
ניקי השיג שיפורי ביצועים מרשימים. הציון שלהם ב-Lighthouse זינק מ-23 ל-82. הזמן עד לפעילות מלאה השתפר ב-14 שניות. עלה גם התנועה האורגנית, המהירות, שיעור ההמרה ומשתמשים יומיים פעילים.
ה-PWA היא אפליקציה שכוללת כמה דפים (MPA) שמפחיתה את המורכבות של ממשק הקצה, ומתבססת על ה-JavaScript של וניל. חמישה מהנדסי ליבה עבדו במשך שנה כדי להשיג את הביצועים האלה.
מהנדסי החזית של Nikkei הוכיחו שחוויית משתמש מעולה מניבה ביצועים טובים לעסקים. אנחנו משקיעים את כל המאמץ כדי להמשיך ליצור רמה חדשה של איכות באינטרנט.
הירויוקי היגאשי. מנהלת מוצר, Nikkei
פתרון
ניקי יצר והשיק Progressive Web App תוך שימוש בעיצוב רספונסיבי, ב-Vanilla JavaScript ובארכיטקטורה מרובת דפים, הם התמקדו ביצירת חוויית משתמש מהנה. הוספת קובץ שירות (service worker) אפשרה להם לספק ביצועים צפויים ללא קשר לרשת. כך אפשר גם לוודא שהמאמרים המובילים תמיד זמינים ונטענות כמעט מיד, כי הם מאוחסנים באמצעות אחסון במטמון. הם הוסיפו מניפסט של אפליקציית אינטרנט, ויחד עם קובץ השירות (service worker) שלהם, המשתמשים יכולים להתקין את ה-PWA כך שהיא נגישה בקלות. כדי להבטיח שהביצועים יהיו בשליטתם המלאה, הם עשו אופטימיזציה ל-JavaScript של צד שלישי.
שיטות מומלצות
- שפרו את מהירות הטעינה ואת האינטראקטיביות באמצעות ממשקי API מודרניים לאינטרנט, דחיסה ושיטות אופטימיזציה של קוד.
- אפשר לשפר בהדרגה את חוויית המשתמש על ידי הוספת תכונות PWA כמו תמיכה אופליין והוספה למסך הבית.
- הגדירו תקציבי ביצועים כאסטרטגיית ביצועים.
ניתוח טכני
המהירות חשובה
המהירות חשובה יותר מתמיד. כאשר סמארטפונים הפכו למכשיר הגלישה העיקרי של משתמשים רבים, Nikkei נהנתה מעלייה מהירה בתנועה מהנייד בשירות שלהם. אבל במהלך השימוש ב-Lighthouse, הבינו שהאתר הקודם לא עבר אופטימיזציה מלאה לנייד, ומדד המהירות נמשך בממוצע 10 שניות, טעינה ראשונית איטית מאוד וחבילת JavaScript גדולה. ניקיי הגיע הזמן לבנות מחדש את האתר ולהתאים את השיטות המומלצות לביצועי אינטרנט. אלו התוצאות והאופטימיזציות העיקריות בביצועים של ה-PWA החדש.
שימוש בממשקי API לאינטרנט ובשיטות מומלצות כדי להאיץ את הטעינה
טעינה מראש של בקשות חשובות
חשוב לתת עדיפות לטעינת הנתיב הקריטי. באמצעות HTTP/2 Server Push, הם יכולים לתת עדיפות לחבילות JavaScript ו-CSS קריטיות, שהם יודעים שהמשתמש צריך.
הימנעות מנסיעות הלוך ושוב ויקרות מרובות לכל מוצא
האתר היה צריך לטעון משאבים של צד שלישי למעקב, למודעות ולתרחישים רבים אחרים לשימוש. הם השתמשו ב-<link rel=preconnect> כדי לפתור מראש לחיצת יד ב-DNS/TCP/SSL ובמשא ומתן עבור מקורות המפתח האלה של צד שלישי.
שליפה מראש (prefetch) באופן דינמי של הדף הבא
כשהם היו בטוחים שהמשתמש ינווט לדף מסוים, הם לא חיכו רק עד שהניווט יתרחש. Nikkei מוסיפה באופן דינמי את <link rel=prefetch> ל-<head> ומאחזרת מראש את הדף הבא לפני שהמשתמש לוחץ על הקישור. כך מתאפשר ניווט מיידי בדפים.
CSS של נתיב קריטי מוטבע
צמצום של חסימת עיבוד CSS היא אחת מהשיטות המומלצות לטעינה מהירה. האתר מקצה את כל ה-CSS הקריטי באמצעות 0 גיליונות סגנונות של חסימות. האופטימיזציה הזו הפחיתה את הצגת התוכן המשמעותי הראשון ביותר משנייה אחת.
אופטימיזציה של חבילות JavaScript
בממשק הקודם, חבילות ה-JavaScript של Nikkei התנפחו והגיעו ליותר מ-300KB בסך הכול. באמצעות שכתוב ל-JavaScript של וניל ואופטימיזציות מודרניות של חבילות, כמו רעידת גוש בניינים וניעור עצים, הם הצליחו לחתוך את ההגדלה. הם הפחיתו את גודל חבילת JavaScript ב-80%, והורידו אותה ל-60KB בעזרת סיכום.
שיטות מומלצות נוספות שיושמו
- דחיסה: Gzip/Brotli, כל המשאבים הניתנים לדחיסה באמצעות Fastly CDN
- מטמון: הפעלת שמירה במטמון ב-HTTP, שמירה במטמון בצד הקצה
- אופטימיזציה של תמונות: משתמשים ב-imgix לאופטימיזציה ולזיהוי פורמט תמונה.
- טעינה מדורגת של משאבים לא קריטיים: שימוש בממשק ה-API של הצופה של הצומת כדי לטעון מקטעים בחלק הנגלל
- גיבוש אסטרטגיה של טעינת גופנים באינטרנט: יש לתת עדיפות לשימוש בגופנים של המערכת
- אופטימיזציה של הצגת התוכן העיקרי (FMP): רינדור בצד של שרת התוכן
- אמץ תקציבי ביצועים: הקפידו ששידור ה-JavaScript וזמני הניתוח וההידור יהיו נמוכים
אופטימיזציה של JavaScript של צד שלישי
ביצוע אופטימיזציה של סקריפטים של צד שלישי באמצעות JavaScript לא באותה מידה בהשוואה לסקריפטים שלך. עם זאת, Nikkei הקטינה וסיפקה בהצלחה את כל הסקריפטים הקשורים למודעות, שמוצגים עכשיו מרשת העברת התוכן (CDN) שלה. תגים שקשורים למודעות בדרך כלל מספקים קטע קוד להפעלה ולטעינה של סקריפטים נדרשים אחרים. במקרים רבים, התגים האלה חוסמים את עיבוד הדף ודורשים זמן נוסף ברשת לכל אחד מהסקריפטים שאתם מורידים. ניקיי קיבל את הגישה הבאה, ושיפר את זמן האתחול ב-100 אלפיות השנייה, ובנוסף צמצם את גודל ה-JS ב-30%:
- אגד את כל הסקריפטים הנדרשים באמצעות חבילה של JS (למשל, Webpack)
- המערכת טוענת את הסקריפט בחבילה כדי שהוא לא יחסום את עיבוד הדף.
- צירוף מודעת הבאנר המחושבת אל Shadow DOM (לעומת iframe)
- טעינה הדרגתית של מודעות בזמן גלילה של משתמש באמצעות Intersection Visiter API
שיפור הדרגתי של האתר
בנוסף לאופטימיזציות הבסיסיות האלה, Nikkei נעזרה ב-Web App Manifest וב-Service Workers כדי לאפשר את ההתקנה של האתר ואפילו לעבוד אופליין. באמצעות האסטרטגיה של שמירת המטמון ב-Service Worker, כל משאבי הליבה והמאמרים המובילים מאוחסנים ב-Cache Storage ומשתמשים בהם מחדש גם במצבים של מגבלות, כמו רשת לא יציבה או אופליין, במטרה לספק ביצועים עקביים ומשופרים.
לפרוץ את הניקיי
חברת עיתונים יומית מסורתית עם היסטוריה של מעל 140 שנים האיצה את תהליך הדיגיטציה באמצעות כוחה של האינטרנט וה-PWA. מהנדסי הקצה של ניקיי הוכיחו שחוויית משתמש מעולה מספקת ביצועים עסקיים טובים. החברה תמשיך במסע ליצור רמה חדשה של איכות באינטרנט.