וורדפרס - שיפור הזמן לאינטראקציה

כדי לוודא שאתר וורדפרס מספק חוויית משתמש טובה, יש לטפל בכמה מדדים ו- TTI הוא אחד מהם. כמדד ממוקד משתמש, מחזיק מדד Time to Interactive ב- 10% מציון הביצועים העולמי המחושב על ידי Lighthouse. זה אולי לא המדד המשפיע ביותר על הציון הסופי, אך התסכול שחווה המשתמש מ- TTI נמוך, עלול להוביל אותו ליציאה מהדף אליו הגיע או אפילו גרוע יותר – נטישת האתר.

Time To Interactive מודד את המהירות שבה מבקרים יכולים ליצור אינטראקציה מלאה עם הדף אליו הגיעו. זהו מדד "מעבדה" משמעותי להערכת תגובת עומס המשפיע ישירות על האופן בו המשתמשים תופסים ביצועים ואינטראקציה. מדד ה- TTI נמדד מתי העמוד מתחיל להיטען כאשר משאבי המשנה העיקריים שלו נטענו והוא מסוגל להגיב במהירות לפעולת של המשתמש. כלומר, TTI מודד כמה מהר דף יכול לבצע כל קוד JavaScript עבור רכיבים כדי להגיב במהירות לכל פעולת משתמש (זה עוזר לזהות איזה דף נראה אינטראקטיבי). לדוגמה: משתמש יכול לראות כפתור קריאה לפעולה על המסך. הוא מנסה ללחוץ עליו, אבל שום דבר לא קורה: לא ניתן ללחוץ על האלמנט. מתסכל… מדד TTI עוזר לזהות את העמודים שנראים אינטראקטיביים, אך למעשה, הם לא. TTI הולך יד ביד עם זמן החסימה הכולל (Total Blocking Time) כי יחד הם מספקים תובנות לגבי היענות הדף לפעולה של המשתמש.

Lighthouse הוא כלי פתוח וקוד אוטומטי המסייע למפתחים בשיפור איכות דפי האתרים שלהם על ידי ביקורות מהירות, ביצועים, נגישות, UX ואופטימיזציה למנועי חיפוש (SEO). כדי לספק חוויית משתמש טובה, אתרים צריכים לשאוף לקבל ציון בין 90 ל- 100.

ניתן לשפר TTI באתרי וורדפרס על ידי אופטימיזציה של קבצי ה- JS (כולל קוד צד שלישי), כאשר כל סוג של אמצעי טוב אשר ישפר את ביצועי JS, ישפר ככל הנראה את ה- TTI. מומלץ להתמקד תמיד בהעדפות הסדר והטעינה של המשאבים ובמספר וגודל הבקשות. ישנן 8 אופטימיזציות לביצועים המומלצות ליישום על מנת לשפר הזמן לאינטראקציה ולשפר את המהירות הכוללת של אתר וורדפרס:

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

עיכוב JS והפחתת JS שאינו בשימוש: על ידי עיכוב ביצוע JS והסרה או צמצום JS שאינו בשימוש, עולה הסיכוי לשפר את הביצועים ואת ציון ה- TTI של הדף. הרעיון העיקרי הוא לעכב את טעינת כל קבצי ה- JS עד שמתרחשת אינטראקציה עם המשתמש, כמו לחיצה על כפתור או גלילה לסוף הדף. נקודת התחלה טובה היא לבדוק את תרשים מפל GTmetrix של הדף כדי לראות היכן נטען JavaScript. לאחר הביקורת ניתן לקבוע אם ה- JS "רע" מגיע מהקוד של הדף או מאפליקציית צד שלישי.

צמצום JS ו- CSS: משמעות צמצום הקוד הינה להסיר כל עומס ופיסוק חסר תועלת: קווים חדשים, רווחים וכדומה. אלמנטים אלו יכולים לעזור בקריאת הקוד והבנתו, אך הם עלולים גם להיות אחראים להאטת האתר. ביטול קוד "חסר תועלת" יפנה זמן לשרשור הראשי להתמקד במשימות חשובות יותר. שוב, מדובר בפינוי מקום וזמן לתוכן הרלוונטי ביותר שיועבר קודם. Coverage tab ב- DevTools של דפדפן כרום יכולה לעזור למצוא JavaScript וקוד CSS שאינם בשימוש.

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

הפחת את TTFB – Time to First Byte: להשגת ציון TTI טוב, שרת אחסון האתר צריך להיות מהיר. כדי להפחית את זמן תגובת השרת: מומלץ לבחור ספק אחסון אתרים המספק ללקוחותיו שרתים מהירים, אמינים ויעילים. ניתן להשתמש בשירות CDN (CDN מהיר ברחבי העולם יספק משלוח תוכן מהיר יותר). מומלץ השתמש במערכת ניהול מטמון מתקדמת. מומלץ להשתמש בדחיסת GZIP. יש לבבצע אופטימיזציה למסד הנתונים של האתר ולהשתמש בגרסה העדכנית של PHP.

שליחת בקשות DNS מראש: במידה וקיים באתר וורדפרס קוד של צד שלישי כמו סרטון המתארח ב- Vimeo או גופנים של Google, יש לשלוח מראש את בקשת ה- DNS וכך להקטין את זמן הטעינה של האתר.הרעיון הוא להשתמש ב- Preconnect כדי ליצור קשרים מוקדמים לתסריטים של צד שלישי במקום להמתין עד שיבקשו זאת.

טעינת גופנים מראש: הודות לטעינת גופנים מראש, ניתן "לאלץ" את דפדפן המבקר לטעון את הגופנים החשובים בשלב מוקדם. גופן מותאם אישית הוא חלק מכריע במיתוג האתר ולכן חשוב מאוד להציג אותו באתר. עם זאת, ישנן כמה שיטות מומלצות לטעינת גופני אינטרנט מראש בכדי למנוע בעיות ביצועים. להלן שלוש המלצות: להשתמש בפורמט הגופן הנכון (woff ו- woff2), לטעון גופנים מראש (כמוסבר בסעיף להלן), להשתמש בהצהרת הגופן הנכונה (משפחת הגופנים הנכונה).

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