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