במרדף המתמשך שלנו אחר מהירות הדף, לעתים קרובות אנו מוצאים את עצמנו חוזרים לאותה נקודה. למרות המאמצים של צוותי מוצר, שיווק וצמיחה להניע צוותים טכנולוגיים, משימות שיכולות לשפר את ביצועי האתר נדחות לעיתים קרובות עקב הצורך בשינוי מחדש, וגם כאשר הן מסתיימות, הן לא תמיד מניבות תוצאות מלאות. במחזור זה, כדאי לשקול כמה פרספקטיבות תובנות לגבי השגת ביצועים אמיתיים. לדוגמה, אילו לקחים אנו יכולים ללמוד מהמהירות של React.js ו-Vue.js או הרחבות SSR (עיבוד צד שרת) שלהם כמו Next.js ו-Nuxt.js בהשוואה לפלטפורמות אחרות? האם לא הגיע הזמן לבצע אופטימיזציה של MBs של קבצי jQuery ו-CSS? מתי יתעוררו חברות גדולות שמקריבות את ביצועי האינטרנט שלהן למפתחי קצה לא מושכלים? הבה נתייחס לשאלות הללו אחת אחת.
מדוע אתרים מבוססי Next.js ו-Nuxt.js מהירים?
הפלטפורמות Next ו-Nuxt, שהן מבנים ידידותיים ל-SEO הבנויים על React ו-Vue, בולטות בביצועי מהירות. אבל למה הפלטפורמות האלה כל כך מהירות?
React.js ו-Vue.js הן מסגרות מבוססות רכיבים שמפרקות כל עמוד לתת-רכיבים, כפי שמוצג להלן.
ניקח דוגמה מהעולם האמיתי כדי להמחיש את הנקודה הזו: דף רישום מסחר אלקטרוני. ניתן לחשוב על דף רישום זה כבעל רכיבי המשנה הבאים:
- כותרת
- רישום
- פרטי כניסה לרישום
- כותרת העמוד
- סימני דרך
- ספירת מוצרים
- סינון
- פילטר קטגוריה
- פילטר מחירים
- ...
- מִיוּן
- כרטיסי מוצר
- תמונה של המוצר
- פרטי מוצר
- שם המוצר
- מחיר מוצר
- מחיר חוצה
- מחיר מבצע
- אחוז הנחה
- מידע על מסע פרסום
- דִפּוּף
- תוכן קטגוריה
- פרטי כניסה לרישום
- תחתונה
בעת יצירת אפליקציה מבוססת רכיבים עם Nuxt.js, כל אחד מהרכיבים הללו מקודד בנפרד ונכלל בדף המאסטר. לדוגמה, שקול קובץ בשם ProductPhoto.js. לא משנה מה הפונקציות הדרושות לתמונות מוצר (קרוסלה, תצוגת תמונה רספונסיבית וכו'), קוד JS נכתב בתוך רכיב זה. באופן דומה, רק קובצי ה-CSS המשמשים את הרכיב הזה כלולים בו. המשמעות היא שרק הקבצים הנדרשים על ידי כל רכיב מופעלים אם נעשה שימוש ברכיב.
איך התהליך הזה מטופל כיום ברוב פלטפורמות האינטרנט?
קובץ script.js כולל קוד לכל דבר, החל מחברות, מסננים ודפי עגלה ועד לתפריט, שפועל בכל הדפים. התוצאה?
אתרים עם א קובץ JS בנפח 3 MB ו-CSS של 1.5 MB קוֹבֶץ. הבעיה העיקרית היא לא רק גדלי הקבצים אלא העובדה שאי אפשר לצפות שהמעבד של מכשיר נייד אנדרואיד ממוצע יבצע אלפי שורות קוד בתוך אלפיות שניות. על ידי הפעלת רק את הקוד שאתה צריך, אתה יכול להשיג שיפורי ביצועים.
כיצד לבטל משאבים חוסמי טיוח?
כיום, 32% ממיליון האתרים המובילים משתמשים בספריית הגופנים Font Awesome, שגודלה בממוצע בסביבות 1 KB. בהתחשב בטעינה אסינכרונית אינה מועדפת בגלל אפקט ה-Flick, חשבו כמה גופנים גלויים במסך הראשון של דף כאשר הוא נפתח בנייד או במחשב שולחני. מחקר קצר על 250 פלטפורמות שונות מצא בממוצע 50 אייקונים בשימוש (הנפוץ ביותר: עגלה, משתמש, תפריט, הודעה). לפיכך, כדי לטעון רק ארבעה אייקונים ללא בעיות, אנו טוענים את כל הספרייה.
איך מסגרות JS מתקדמות מנהלות את זה? על ידי ייבוא רק פורמט ה-SVG של הסמלים המשמשים ברכיב הרלוונטי, ביטול הצורך בטעינת ספריות גופנים או CSS שלמות.
מה אומרים לנו שימוש Bootstrap לעומת React JS?
לספריית Bootstrap JS יש נתח שוק של 26% בכל האתרים ברחבי העולם, בעוד שהשימוש ב-React הוא כ-4%. Bootstrap פופולרי בזכות הגמישות וקלות השימוש שלו, המאפשרת פיתוח מהיר. עם זאת, לגמישות זו יש מחיר: פונקציות JS כלליות, כיסוי קוד נרחב ופונקציות עבור תכונות שאולי לעולם לא תשתמש בהן כלולים בפרויקט שלך.
אז, בואו נשאל: מה עושה עלייה של יותר מ-100% בשימוש מה- 10,000 עד 1,000 האתרים המובילים מציינים? זה מראה שהטובים ביותר הופכים פרטים לטובתם להיות אפילו טובים יותר.
לסיכום, במקום לשכתב את האתרים שלנו עם טכנולוגיות כמו לאחר מכן, Nuxt, Angular, React, Vueוכו', עלינו להבין מה הטכנולוגיות הללו עושות נכון למהירות וליישם את השיטות המומלצות הללו על יישומי האינטרנט שלנו.
