צילום x-ray
של משקל העמוד
הדביקו את ה-HTML של העמוד וראו את השלד של מה שהוא טוען; כל סקריפט, גיליון סגנון, תמונה, פונט והטמעה, כשהכבדים מסומנים ועם רשימת תיקונים לפי עדיפות. בלי בדיקת רשת; הכל רץ לגמרי בדפדפן שלכם.
הדביקו. סרקו. הקלו.
הערה כנה: בלי בדיקת רשת הכלי הזה לא יכול לדעת גדלי העברה אמיתיים; הוא סופר את מה שה-HTML מבקש מהדפדפן להביא. התמונה המבנית הזו היא המקום שבו מסתתרות רוב בעיות המשקל. למדידת בייטים בפועל, הריצו את אותו עמוד דרך לשונית ה-Network של כלי המפתחים (DevTools) בדפדפן שלכם אחר כך.
טבלת עלות משוערת
| משאב | כמות | בקשות | מה זה עולה |
|---|
כל משאב חיצוני
Yetty מגישה את העמודים שלכם כ-HTML סטטי ונקי על CDN גלובלי; בלי זמן ריצה של בונה, בלי מרק סקריפטים, מהיר מעצם הבנייה.
ששת הדברים
שמכבידים על עמוד
סקריפטים
חיצוני מול מוטמע, והבייטים של קוד מוטמע. JavaScript הוא הבייט היקר ביותר ברשת; הוא חייב גם להיטען וגם לרוץ.
גיליונות סגנון
כל גיליון סגנון חיצוני חוסם רינדור עד שהוא מגיע. פחות, קטן יותר, או CSS קריטי מוטמע, מנצחים.
תמונות
היעדר width/height גורם לקפיצת פריסה; היעדר loading="lazy" מוריד תמונות מחוץ למסך שאף אחד עדיין לא רואה.
פונטים
כל משפחת פונט ומשקל הם הורדה שיכולה להבהב או להזיז טקסט. שתי משפחות בדרך כלל מספיקות בהחלט.
הטמעות
YouTube, מפות ווידג'טים חברתיים הם האבנים הגדולות; מאות KB כל אחד עוד לפני שמישהו מבצע פעולה. השתמשו בחזיתות של טעינה-בלחיצה.
ה-HTML עצמו
סקריפטים מוטמעים, סגנונות ו-blobs של base64 מנפחים את המסמך; המשאב האחד שאי אפשר לטעון בעצלתיים.
משקל עמוד,
בפשטות
כמה כבד צריך להיות עמוד אינטרנט?
עמוד האינטרנט החציוני היום שוקל בערך 2 MB, אבל אתרים מהירים מכוונים הרבה יותר נמוך; פחות מ-1 MB בהעברה, ופחות מכ-50 בקשות. מה שהכי מזיק הוא לא מספר גדול אחד אלא הצורה: עשרות סקריפטים קטנים עולים בקשה כל אחד, והטמעת YouTube אחת יכולה למשוך יותר JavaScript מכל שאר העמוד יחד.
האם הטמעות YouTube ומפות באמת מאטות עמוד?
כן; לרוב הם הדבר הכבד ביותר בעמוד. הטמעת YouTube רגילה טוענת בערך חצי מגה-בייט של סקריפטים עוד לפני שמישהו לוחץ Play, ומפה אינטראקטיבית דומה. התיקון הסטנדרטי הוא חזית (facade): הציגו תמונה ממוזערת סטטית, וטענו את ההטמעה האמיתית רק כשהמבקר לוחץ עליה.
למה תמונות צריכות מאפייני width ו-height?
בלעדיהם הדפדפן לא יודע כמה מקום תתפוס תמונה, ולכן העמוד קופץ בזמן שהתמונות נטענות; הקפיצה הזו היא Cumulative Layout Shift, אחד ממדדי ה-Core Web Vitals של Google. הוספת width ו-height (או CSS aspect-ratio) שומרת את המקום מראש, ו-loading="lazy" מונע מתמונות מחוץ למסך להיטען בכלל עד שצריך.
עוד כלים חינמיים: ארגז הכלים המלא · מבקר טקסט alt לתמונות · ממחיש שרשראות הפניה · הדרך הטובה ביותר לארח אתר שנבנה ב-AI