חלק ממנהלי אתרי WordPress אובססיביים לגבי PageSpeed Insights או GTmetrix. העצה שלי, ושל רבים אחרים שמבינים הרבה יותר בנושא, היא שלא כדאי לייחס למדדים אלה חשיבות רבה יותר מכפי שהם באמת.
אם מהירות הטעינה הנתפסת היא טובה, אין צורך להציג הכל "בירוק". במקרים רבים הדבר אף משיג את התוצאה ההפוכה, מכיוון שאתה עלול ליפול למלכודת של אופטימיזציה יתר, או גרוע מכך, אתה עלול להרוס דברים אחרים בניסיון לתקן דבר אחד.
עם זאת, בין אם אתם חובבי WPO, מתעניינים באופטימיזציה או פשוט רוצים לשפר את תגובתיות האתר שלכם, הכלים האלה הם כמעט הכרחיים. הבעיה היא שהם מציגים "תמונות סטילס" שצולמו משרתים חיצוניים. אבל מה קורה כאשר אתם, כמנהלי האתר, גולשים בו? מה קורה עם המודעות שנטענות באיחור או עם התפריט שקופץ בדיוק כשאתם עומדים ללחוץ עליו?
מקור
Speed Auditor נולד כתגובה לצורך אישי בכמה כלי אבחון מקומיים פשוטים אך עוצמתיים. זה לא תוסף אופטימיזציה (הוא לא משנה דבר בקוד שלך), אלא תוסף ביקורת בזמן אמת.
אם אתם מחפשים תוסף טוב, אולי הטוב ביותר, בתשלום עבור WPO, שבעזרתו תוכלו לבצע שינויים וכיוונונים עדינים, תסתכלו על Perfmatters. אם, לעומת זאת, אתם מחפשים משהו חינמי ופשוט, בלי להתעסק עם הגדרות וכיוונונים, אבל עם הרבה אפשרויות, תוכלו לנסות את WPO Rocket Tweaks של Fernando Tellado, הזמין במאגר WordPress.
אם אינך יודע מהו צומת DOM או מדד חביון, אל תדאג. Speed Auditor נועד לעזור לך להבין את אתר האינטרנט שלך במבט אחד:
- האינדיקטור החכם: סמל שמשנה את צבעו יופיע בסרגל הניהול שלך. אם הוא ירוק, ה-LCP שלך (הזמן שלוקח לראות את הדברים החשובים ביותר) הוא אופטימלי. אם הוא הופך לכתום או אדום, יש משהו שדורש את תשומת לבך.
- ביקורת בזמן הגלישה: אין צורך להגדיר שום דבר מורכב. אתה מפעיל את התוסף, ובזמן שאתה בודק את הפוסטים שלך, הוא פועל ברקע ומנתח אם התמונות שלך כבדות מדי או אם השרת שלך מגיב באיטיות.
- דוחות אנושיים נוספים: בלחיצה אחת, הורד קובץ .txt שתוכל לשלוח למפתח שלך או לשמור כדי להשוות תוצאות לאחר יישום השינויים.
מתחת למכסה המנוע
גרסה 1.1.8 מנסה לספק אבחון מעמיק יותר כדי לחסוך זמן התעסקות בקונסולת הדפדפן.
- זיהוי LCP מדויק: התוסף מזהה בדיוק איזה אלמנט (תמונה או בלוק טקסט) הפעיל את Largest Contentful Paint.
- ניתוח עומק DOM: חיוני כדי למנוע "גודל DOM מוגזם". Speed Auditor מפרק את מספר הצמתים לפי אזורים (כותרת, תוכן, תחתית) ומזהיר אותך אם הקינון עולה על 15-20 רמות.
- Media Latency Monitor: מודד את זמן ההעברה בפועל (Resource Timing API) של תמונות. אם הורדת תמונה אורכת 500 מילי-שניות, התוסף מסמן אותה כקריטית.
- אפס השפעה על השרת: כל העיבוד מתבצע בצד הלקוח (הדפדפן). אין שאילתות מסד נתונים כבדות או תהליכי PHP שמאטים את האתר.
הקפיצה הגדולה. בקרוב: Speed Auditor 1.1.9 (עם "Radar CLS")
עד כה, Cumulative Layout Shift (CLS) היה נתון מופשט בדוח. ידעת שמשהו זז, אבל לא תמיד ידעת מה. בקרוב מאוד, בגרסה 1.1.9, זה ישתנה.
יש להציג את כפתור ה"הדגשה" של הרדאר או ה-CLS החזותי.
דמיינו שאתם מפעילים מצב "רדאר" שמצייר ריבועים אדומים על כל אלמנט שזז בזמן שאתם גוללים. זה, מה שכמה תוספים כבר עושים, בהצלחה כזו או אחרת, הוא תמיד עזר ויזואלי שימושי מאוד כדי לנסות לתפוס את ה"עודפים" שלפעמים נעלמים מעינינו.
- האם זה באנר AdSense שמקדם את התוכן שלך? תראה אותו עם מסגרת אדומה. תוכל להעמיק בנושא כאן.
- האם זו תמונה ללא ממדים מוגדרים? הרדאר יזהה אותה.
- התמדה מוחלטת: תוכלו לגלוש בכל האתר עם הרדאר מופעל; התוסף יזכור שאתם רוצים להמשיך לבדוק ויזואלית כל פינה.
עדכון זה יכלול גם מילון מונחים טכני קצר, אשר יורחב ויכלול טיפים ומדריכים, שיוטמעו בלוח הבקרה של WordPress, כך שמונחים כמו ins, iframe או figure כבר לא יהיו תעלומה.
הרעיון הוא לשפר הן את תגובת הניתוח והן את הדוחות הנוצרים, כאשר אני בודק אותו בתרחישים שונים, ואם אני מקבל הצעות לשיפור או אזהרות על שגיאות.
גרסה 1.1.8 זמינה כעת כדי לסדר את המדדים שלכם, ובקרוב, גרסה 1.1.9 תקל עוד יותר על תיקון היציבות הוויזואלית של WordPress. אם תתקינו אותה עכשיו, תקבלו את העדכון בקרוב.
איך זה עובד?
הקוד פועל לפי שלושת השלבים הבאים:
1. PerformanceObserver
לדפדפן (Chrome, Edge, Opera) יש ממשק API מובנה בשם Performance API. התוסף רושם "צופה" בשם PerformanceObserver המותאם במיוחד לסוג הקלט layout-shift.
בכל פעם שמשהו זז על המסך לאחר שצויר לראשונה, הדפדפן מייצר אירוע. התוסף לוכד את האירוע ומוציא ממנו שני נתונים מרכזיים:
- ערך הקיזוז: (המספר הזה הוא 0.0145).
- הגורם הבעייתי: הדפדפן מודיעה לתוסף בדיוק איזה צומת HTML הועבר.
2. המסנן "אינטראקציה אחרונה"
זה המקום שבו התוסף מנסה להיות חכם. לא כל התנועות הן "רעות". אם אתה לוחץ על תפריט נפתח והתוכן גולל מטה, זו תנועה צפויה מצד המשתמש.
התוסף בודק מאפיין בשם hadRecentInput. אם נגעת במקש או לחצת במהלך 500 המילי-שניות האחרונות, הדפדפן מסמן תנועה זו כ"צפויה" והתוסף מתעלם ממנה כדי למנוע תוצאות חיוביות כוזבות. הוא מזהה רק תנועות המתרחשות באופן בלתי צפוי (כגון מודעה המופיעה לפתע).
3. עיבוד חזותי (התיבות האדומות)
ברגע שהתוסף מקבל את האלמנט שהועבר, החלק הוויזואלי נכנס לפעולה:
- חישוב קואורדינטות: משתמש בפונקציה בשם getBoundingClientRect() כדי לברר היכן נמצא האלמנט על המסך באותו רגע מדויק (פיקסל למעלה, פיקסל שמאלה).
- הזרקת מסגרת: צור
divעם מיקום מוחלט, גבול אדום של 2 פיקסליםומדד zגבוה מאוד כדי לצייר מעל הכל. - התווית: הוסף תיבה קטנה בפינה השמאלית העליונה של התיבה האדומה עם שם התווית (ins, img, div) וערך ה-CLS המצטבר.
מדוע זה עדיף על דוח חיצוני?
כלים כגון PageSpeed לעיתים אינם מצליחים לזהות CLS מכיוון שהם אינם גוללים עד לתחתית העמוד או אינם ממתינים לטעינת מודעות מסוימות.
התוסף, באמצעות שימוש בהתמדה, מודד את ה-CLS שנצבר לאורך כל זמן הגלישה של המשתמש בפועל. אם אלמנט זז מעט בתחילת הגלישה ומעט נוסף בעת הגלילה, התוסף מחבר את הנתונים ומדגיש אותם, ומספק לך את הנתון המדויק ביותר שגוגל תראה בסופו של דבר בדו"ח"Chrome User Experience" (CrUX) שלה.
