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 שניות בממוצע. חברת Nikkei ידעה ש-53% מהמשתמשים בנייד ינטשו אתר אם הטעינה שלו תימשך יותר מ-3 שניות, ולכן רצתה לקצר את זמן הטעינה כדי לספק חוויה טובה יותר ולשפר את הביצועים העסקיים שלה באינטרנט.
החשיבות של מהירות היא ברורה, במיוחד כשמדובר בחדשות פיננסיות. הפכנו את המהירות לאחד ממדדי הליבה שלנו, והלקוחות שלנו מעריכים את השינוי הזה.
טאהיי שיגמורי (Taihei Shigemori), מנהל, אסטרטגיה דיגיטלית
תוצאות
חברת Nikkei השיגה שיפורים מרשימים בביצועים. הציון שלהם ב-Lighthouse עלה מ-23 ל-82. השיפור במדידת הזמן עד שהאתר הופך לאינטראקטיבי היה 14 שניות. גם התנועה האורגנית, המהירות, שיעור ההמרה והמשתמשים הפעילים ביום עלו.
ה-PWA הוא אפליקציה מרובת דפים (MPA) שמפחיתה את המורכבות של ממשק הקצה, והוא בנוי באמצעות Vanilla JavaScript. חמישה מהנדסי חזית ליבה עבדו במשך שנה כדי להשיג את הביצועים האלה.
מהנדסי ה-front-end של Nikkei הוכיחו שחוויית משתמש מעולה מובילה לביצועים עסקיים טובים. אנחנו משקיעים מאמצים רבים כדי להמשיך במסע שלנו ולספק איכות ברמה חדשה באינטרנט.
הירויוקי היגאשי. מנהל מוצר, Nikkei
פתרון
חברת Nikkei יצרה והשיקה אפליקציית Progressive Web App (PWA) באמצעות עיצוב רספונסיבי, JavaScript רגיל וארכיטקטורה של כמה דפים. החברה התמקדה ביצירת חוויית משתמש מעולה. הוספת קובץ שירות (service worker) אפשרה להם לספק ביצועים צפויים, ללא קשר לרשת. בנוסף, כך אפשר לוודא שהמאמרים הפופולריים תמיד זמינים ונטענים כמעט באופן מיידי, כי הם מאוחסנים באמצעות Cache Storage. הם הוסיפו מניפסט של אפליקציית אינטרנט, ובשילוב עם קובץ השירות (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 גיליונות סגנונות שחוסמים את העיבוד. האופטימיזציה הזו קיצרה את הזמן להצגת התוכן העיקרי ביותר משנייה אחת.
אופטימיזציה של חבילות JavaScript
בגרסה הקודמת של האתר, חבילות ה-JavaScript של Nikkei היו גדולות מדי, והגיעו למשקל של יותר מ-300KB בסך הכול. באמצעות כתיבה מחדש ל-JavaScript רגיל ואופטימיזציות מודרניות של חבילות, כמו חלוקה לחלקים לפי נתיב ו-tree-shaking, הם הצליחו לצמצם את הנפח המיותר. הם הקטינו את גודל חבילת ה-JavaScript ב-80%, והוא ירד ל-60KB באמצעות RollUp.
שיטות מומלצות אחרות שהוטמעו
- דחיסה: Gzip/Brotli all compressible resources using 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 worker) כדי להפוך את האתר שלהם לניתן להתקנה ואפילו לאפשר לו לפעול במצב אופליין. באמצעות אסטרטגיית העדיפות למטמון ב-service worker, כל משאבי הליבה והמאמרים הפופולריים מאוחסנים ב-Cache Storage ונעשה בהם שימוש חוזר גם במצבי חירום כמו רשת לא יציבה או רשת במצב אופליין, וכך מתקבלים ביצועים עקביים ומותאמים.
Hack the Nikkei
חברה שמפעילה עיתון יומי מסורתי עם היסטוריה של יותר מ-140 שנה הצליחה להאיץ את הדיגיטליזציה שלה באמצעות אתר ואפליקציית PWA. מהנדסי הקצה של Nikkei הוכיחו שחוויית משתמש מעולה מובילה לביצועים עסקיים חזקים. החברה תמשיך במסע שלה להעלאת רמת האיכות באינטרנט.