זמן טעינה היא אחת המטריקות החשובות בעולמות הווב. הזמן שלוקח לאתר לעלות יכול לשנות את חוויית המשתמש ואפילו להשפיע על הקידום במנועי החיפוש.
הדעה הרווחת היא שהקטנת גודל המשאבים שהאתר צורך מספיקה כדי לשפר את קצב הטעינה, אך לא כך הדבר.
במאמר הבא אסקר כיצד להאיץ זמני טעינה בדפדפן בעזרת 5 דרכים שאולי את חלקם בכלל לא הכרתם.
הטמעת מדיניות מטמון
מדיניות מטמון או Cache-Policy, עוזרת לנו למנוע מהדפדפן לטעון משאבים של האתר לעיתים תכופות ע״י שמירתם במחשב של הגולש לטעינה חוזרת במידת הצורך.
לרוב נרצה להגדיר זמן קבוע למדיניות שמירת הקבצים במטמון, כשלאחריו הקבצים יזוהו כלא עדכניים כדי שהדפדפן יטען אותם מחדש וישמור גירסא יותר עדכנית.
נוכל להגדיר את מדיניות המטמון דרך האדרים שחוזרים מהשרת המגיש את הקבצים (Cache-Control) או תגיות meta מתוך ה HTML
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">שחרור משאבים חוסמים
ישנם סוגים שונים של משאבים חוסמים הדרושים לתפקוד האתר כמו קבצי CSS, JavaScript, HTML ו- Fonts.
הדפדפן עובד בצורה כזו שהוא מנסה לטעון את המשאבים שנכללו ועל פי הסדר שלהם.
כך למשל אם המשאב הראשון שנרצה לטעון יהיה קובץ JS, שאר האלמנטים בעמוד יחסמו מלהתרנדר. עד שיסיים להיטען הוא עלול לגרום למסך לבן גם אם הוא לא נחוץ לטעינה הראשונית.
טעינה על פי צורך – lazy load
כפי שהסברתי, משאבים יכולים לחסום את טעינת העמוד, אז למה לא לטעון אותם רק כשצריך?
״טעינה עצלה״ (Lazy load) נועדה להוריד מכמות המשאבים שהדפדפן צורך. אנו נטען אותם עפ״ דרישה. לדוגמא – תמונות יכולות להטען כאשר נכנסו ל viewport לאחר גלילה של הגולש.
ניתן להשיג זאת ע״י שימוש ב Intersection Observer API או שימוש ב lazy attribute על תגית תמונה או Iframe.
מה ניתן לעשות?
- להזיז משאבים כאלו לסוף תגית ה body כדי שיטענו רק אחרי שכל האלמנטים בעמוד התרנדרו.
- עבור קבצי CSS הימנעו משימוש ב
@importבתוכם. עדיף להשתמש בתגית link בתוך העמוד אותה ניתן למקם עפ״י חשיבותה עבור נראות האתר. - בטעינת קבצי JS השתמשו ב defer / async attributes שעוזרים להגדיר האם לטעון אותם בצורה אסינכרונית ואחרי שה DOM מוכן.
פיצול קוד
Code splitting היא טכניקה מוכרת ובשימוש נרחב בעיקר באפליקציות ווב. למשל, באותן אפליקציות נטען את הקבצים הדרושים לכל עמוד באפליקציה דרך שירות ה routing שלנו.
בעזרת פיצול הקוד אנחנו מבטיחים טעינה רזה וממוקדת יותר לצרכים של העמוד. שיטה זו ניתן להכיל גם על חוקי הסטייל בעמוד.
טכניקה אחת היא טעינת CSS נפרד לכל עמוד או מיקרו-פרונטאנד שהגדרנו. בנוסף יש גם את CSS-in-JS שם נוכל להגדיר CSS רלוונטי לקומפוננטה.
מיניפיקציה, אובפוסקציה ו- CDN
מניפיקציה מורידה תווים לא נחוצים מתוך הקבצים בכדי להקטינם, כמו רווחים, טאבים או כפילויות קוד.
אובפוסקציה משנה את המשתנים שהגדרנו בקבצי ה JS עד לכדי אות אחת וכך מקטינה את גודל הקבצים.
שרתי CDN מגישים קבצים סטטיים במהירות המירבית וזו למעשה טכניקה המשלימה את ה2 הראשונות. למשל, שרתי CDN יטענו את הקבצים מהשרת הכי קרוב למיקומו הפיזי של הגולש.
הסרת קוד שלא בשימוש – Tree shaking
כיום רוב הקוד שלנו עובר דרך כלי עיבוד בכדי להוציא תוצר מותאם ורזה יותר.
אותם כלים עוזרים בזיהוי קוד שכבר לא בשימוש ובזמן העיבוד ולהוציא אותו משם, כמו חוקי CSS או פונקציות JS.
תתפלאו לגלות מה כמות הקוד הלא שימושי שיכול להיוותר בפרויקט. לכן, תכונה זו חשובה מאוד לשיפור התוצרים שלנו.
לסיכום
זמן טעינה הוא מרכיב חשוב ברושם שהאתר שלנו משאיר, בין עם זה על המשתמש או על מנועי החיפוש.
הטכניקות שסקרתי למעלה מסבירות כיצד להאיץ את זמני הטעינה באתר שלכם ובכך לייעל אותו משמעותית.
הנה כמה מאמרים משלימים למיטיבי לכת: