אחרי משחקי הביצועים אתמול חשבתי שיהיה מעניין לבדוק גם את הבלוג שלי פה בטוקוד ולראות מה Page Speed חושב עליו והאם אפשר לשפר. האמת שבאתי מאוד אופטימי לבדיקה כי בראש חשבתי שמדובר בסך הכל באתר סטטי כמעט בלי JavaScript ושרת שרוב הזמן מגיב מהר. לא נעים לשתף מה Page Speed חשב עליו, אבל בואו רק נגיד שזה לא תאם לציפיות. מסתבר שלאורך השנים הוספתי לאתר פיצ'רים קטנים בלי לחשוב על ההשפעה שלהם על זמני הטעינה, ובלי לחשוב עד הסוף אם אני מוסיף אותם בדרך הטובה ביותר. הטעויות הקטנות האלה מצטברות ומשפיעות.

אלה שלושת הטריקים שיישמתי כדי לשפר משמעותית את ציון ה Page Speed שעכשיו עומד על 94 לדף של פוסט מהבלוג:

1. טעינת נכסים סטטיים דרך Apache

האתר רץ על Rails וההמלצה באתרי ריילס היא לא להעמיס על השרת עם נכסים סטטיים (כלומר קבצי תמונות, js, css וכן הלאה). מספיק שבגלל עומס על השרת ייקח לו 3 שניות להיזכר שהוא צריך לשלוח קובץ CSS והאתר נטען לאט אצל מישהו. שרתי Apache ו nginx או CDN-ים למיניהם הרבה יותר טובים בשליחת קבצים סטטיים לגולשים, לכן הטריק הראשון היה להוריד משרת האפליקציה את המשימה הזאת ולהעביר אותה לשרת ה Apache שעומד לפניו.

2. השהיית טעינת JavaScript עד שנצטרך אותו

קופסת ה Comments שנמצאת פה מתחת לכל פוסט מגיעה מ disqus וה JavaScript שלהם הוא פח. נגן הוידאו שמשתמשים בו כדי לראות את הסרטים בקורסים מגיע מ Spotlightr ויש גם כמה אלמנטים של UI שמגיעים מספריית flowbite. את כל אלה העברתי לטעינה מושהית כך שייטענו רק כשנצטרך אותם, כלומר אם גולש באמת קורא את הפוסט וגולל עד למטה את העמוד אז נטען את תיבת ה Comments, אחרת אין טעם לטעון את ה JS שלהם. אם יש בעמוד סרט אפשר לטעון את הנגן של ספוטלייטר, אבל בטח לא צריך לטעון אותו בכל דף.

השינוי הזה מאוד שימח את Page Speed שמודד כמה זמן מעבד ה JavaScript של העמוד לקח.

3. מחיקת JavaScript שלא צריך

בהמשך להשהייה שמתי לב שיש גם ספריות JS שפעם השתמשתי בהן והיום כבר לא. הבולטת בהן היא Google Analytics ממנה נפרדתי לטובת Simple Analytics, אבל היו עוד כמה ספריות של UI שלא היה צריך. מחיקה של JavaScript תמיד משמחת את Page Speed וכך קיבלתי אצלם עוד כמה נקודות.

4. נקודות להמשך

אחרי השיפור בדפי הבלוג העבודה עדיין רחוקה מלהסתיים. יש עדיין קבצי JavaScript שאני חושב שאפשר לוותר עליהם, ה Page Speed חושב שעדיין יש לי יותר מדי CSS ואפשר לקצץ גם שם ועוד לא נגעתי בעמוד הבית או בדפי הקורסים. ועדיין יצאתי מהמשחק מחוזק ואופטימי לגבי שיפורים שעוד אפשר יהיה ליישם בהמשך.

הנקודה המרכזית שהיתה לי מעניינת בניסוי הזה היא שמושגים כמו הנתיב הקריטי ונכסים שחוסמים Render כבר מוטמעים בתוך הפריימוורקס וכמעט לא הייתי צריך לגעת בסדר הטעינה של דברים. גם מהירות הרשת היא מאוד טובה ואפשר לשלוח קבצים גדולים יותר בלי לפגוע בביצועים. האתגר המרכזי שעדיין נשאר הוא לכתוב ולשלוח פחות JavaScript, כי זמן הריצה הופך להיות צוואר הבקבוק של אתרים.