שיפור זמני טעינת עמוד ב 2025
העולם משתנה כל הזמן וגם אצלנו בווב יש חידושים ובמיוחד בכל מה שקשור לארכיטקטורה של מערכות וההשפעה של אותה ארכיטקטורה על זמני טעינת העמוד. ממש בכניסה ל 2025 אני רוצה לחדד כמה רעיונות ישנים שעדיין עובדים ולזרוק את אלה שכבר לא רלוונטיים. אלה 10 טיפים שהייתי מאמץ גם לשנה הבאה בשביל לבנות אתרים שנטענים מהר:
פחות זה יותר - קובץ HTML קטן שנטען מ CDN יעלה הכי מהר אצל הלקוחות. חישבו טוב כל פעם שמכניסים פיצ'ר למערכת איך הוא משפיע על זמני טעינת העמוד והאם ניתן לבנות מנגנון דומה עם פחות קוד.
הקפידו לבקש את ה Cache - ההורדה הכי מהירה היא הורדה שלא קורית כי הקובץ כבר אצל הלקוח. שימו לב שאתם מגדירים Cache לכמה שיותר קבצים בעמוד. הקפידו לארגן את ה Assets של הדף שלכם כך שאפשר יהיה לשמור כמה שיותר ממנו ב Cache, כלומר השתמשו בשמות קבצים עם מזהים שאפשר לשמור ב Cache וחלקו את הקבצים כך ששינוי בקובץ אחד ישפיע רק על מעט קוד.
הגודל כן קובע - פעם המלצנו לאנשים לחבר יחד כמה שיותר קבצי JS או CSS לקובץ אחד כי היתה מגבלה על כמה קבצים דפדפן יכול להוריד במקביל וכל הורדה של קובץ נוסף דרשה Round Trip לשרת למשוך את הקובץ. כל זה לא רלוונטי יותר בזכות התפתחות בפרוטוקולי התקשורת. מצד שני דפדפנים לא התפתחו באותה מהירות כמו הרשת ולכן קובץ JS גדול יכול להשפיע לרעה בצורה מאוד משמעותית על זמן טעינת העמוד. בטאב Performance בדפדפן אפשר לראות את כל הקבצים שהעמוד טוען ובאיזו מידה כל קובץ משפיע על העבודה ב Main Thread. שימו לב למספרים האלה ושברו קבצי JS גדולים.
אבל לא תמיד - שימו לב שגם קבצים קטנים יכולים להשפיע על זמן העבודה של ה Main Thread, לפעמים אפילו יותר מקבצים גדולים. כן יש JavaScript שלדפדפן יותר קשה להריץ. אם ראיתם כאלה קבצים שברו גם אותם, ואם אלה קבצים של ספריית צד שלישי אל תתביישו לחפש ספרייה אחרת.
זמן התגובה של השרת היה ונשאר פקטור בסיסי בשיפור ביצועים. ה HTML צריך להישלח חזרה תוך פחות מחצי שניה, עדיף לכיוון ה 200 מילי.
לא צריך לעשות היום מה שאפשר לדחות למחר - נשלח לגולש רק את הקוד שהוא צריך, ורק את הגדרות העיצוב שהוא צריך. אם מישהו ניסה להגיע לדף "אודות" באתר הוא לא צריך לחכות שדף הבית ייטען. קודם תנו לבן אדם את מה שהוא רצה, אחרי זה תשתמשו ב preload כדי לטעון דפים אחרים ברקע אם לדעתכם יש בזה צורך.
ספריות צד שלישי יכולות להכביד. עדיף לבנות לבד אתר נגיש מאשר להטמיע תוסף נגישות. אם אתם לא מסתכלים ב Analytics לא צריך להוסיף את הסקריפט שלהם לעמוד.
תמונות ריספונסיביות זה עדיין רעיון טוב. אין טעם לשלוח תמונה גדולה ולהקטין אותה ב CSS.
טענו מראש (preload) את קבצי הפונטים, תמונות רקע וכל משאב אחר שה CSS שלכם עוד מעט יבקש כבר ב HTML.
הקשיבו למשתמשים - רוב שירותי האנליטיקס מאפשרים לשמור כמה זמן לקח למשתמשים אמיתיים לטעון את העמוד שלכם. זה המדד הכי טוב כדי להבין אם יש או אין בעיות ביצועים. היו ערניים לשינויים במדד זה והקפידו לצעוק כששינויי קוד מסוימים גורמים למשתמשים לחוות האטה בזמני הטעינה.