אנחנו רואים את זה כל הזמן: עיצוב ב-Figma נראה מושלם, אבל אחרי היישום במובייל הכל נשבר, Lighthouse מדווח על CLS של 0.5+, ומומחה ה-SEO מתלונן על היררכיית כותרות לא נכונה. לאחרונה קיבלנו פרויקט שבו היעדר <main> ומאפייני alt שגויים גרמו לאובדן של 30% תנועה. אפשר להימנע מכל זה על ידי הנחת סמנטיקה נכונה, CSS מודרני וביצועים מההתחלה.
שיפרנו חנות מקוונת עם CLS של 50% לרמה בטוחה. הקוד המקורי הכיל מיקומים מוחלטים רבים וחסרה בו סמנטיקה. אחרי יישום CSS Grid ו-Container Queries, המדדים השתפרו: LCP ירד מ-4.2 שניות ל-1.8 שניות, CLS מ-0.45 ל-0.03. התנועה גדלה ב-15% תוך שבועיים מההשקה מחדש. ראינו שפריסה איכותית משתלמת מהר יותר ממה שנדמה.
למה סמנטיקה חשובה — לא דת, אלא SEO
דפדפנים ומנועי חיפוש בונים עץ נגישות מ-HTML. שגיאות בסמנטיקה עולות ביוקר: מבנה כותרות שגוי מוריד דירוגים, היעדר <main> או <nav> פוגע באינדוקס. שימוש באלמנטים מסוג landmark כמו <header>, <footer>, <aside> משפר את הניווט בקוראי מסך ומעניק בונוסים ב-Lighthouse. אנחנו תמיד עוקבים אחר ההמלצות של MDN Web Docs ל-HTML סמנטי.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Название страницы — Название сайта</title>
<meta name="description" content="...">
<link rel="canonical" href="https://example.com/page/">
<link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin>
</head>
<body>
<header role="banner">
<nav aria-label="Основная навигация" tabindex="0">...</nav>
</header>
<main id="main-content">
<article>
<header><h1>Заголовок</h1></header>
<section>...</section>
</article>
<aside aria-label="Дополнительно">...</aside>
</main>
<footer>...</footer>
</body>
</html>CSS מודרני: במה אנחנו משתמשים
ערימת ה-CSS שלנו פותרת משימות שבעבר דרשו JavaScript. השוו: CSS Grid בונה פריסות דו-ממדיות מורכבות בכמה שורות, בעוד Flexbox מתאים לפריסות חד-ממדיות. ב-9 מתוך 10 מקרים Grid עדיף על float חוזר או display:table. להלן השוואת גישות:
| תכונה | CSS Grid | Flexbox |
|---|---|---|
| כיוון | דו-ממדי (שורות ועמודות) | חד-ממדי (שורה או עמודה) |
| שימוש טיפוסי | רשתות, גלריות, לוחות מחוונים | סרגלי ניווט, כרטיסים מוטבעים, מירכוז |
| תמיכה בדפדפנים ישנים | מודרני (Edge 16+) | מודרני (Edge 12+) |
CSS Custom Properties — מערכת העיצוב שלנו:
:root { --font-sans: 'Inter', system-ui, sans-serif; --space-md: 1rem; --color-accent: hsl(221 83% 53%); } איך Container Queries משנים את הרספונסיביות
Container Queries מאפשרים לרכיב להתאים את עצמו לרוחב המיכל שלו, ולא ל-viewport. זה שימושי במיוחד לכרטיסים לשימוש חוזר: אותו כרטיס יוצג כראוי בסרגל צד צר ובתוכן רחב. קראו עוד ב-MDN. טכניקה זו מפחיתה את מספר ה-media queries ב-30% והופכת את הקוד לצפוי יותר. כך מיישמים Container Queries:
- הגדירו את המיכל:
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Название страницы — Название сайта</title> <meta name="description" content="..."> <link rel="canonical" href="https://example.com/page/"> <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin> </head> <body> <header role="banner"> <nav aria-label="Основная навигация" tabindex="0">...</nav> </header> <main id="main-content"> <article> <header><h1>Заголовок</h1></header> <section>...</section> </article> <aside aria-label="Дополнительно">...</aside> </main> <footer>...</footer> </body> </html> - השתמשו ב-
:root { --font-sans: 'Inter', system-ui, sans-serif; --space-md: 1rem; --color-accent: hsl(221 83% 53%); } - קננו סגנונות בתוך המיכל.
דוגמה לפריסת כרטיס עם Container Queries
.card-container {
container-type: inline-size;
}
@container (min-width: 300px) {
.card {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
}איך אנחנו משיגים LCP ≤ 2.5 שניות
אנחנו מטמיעים CSS קריטי ב-head (כ-2–3 KB), וטוענים את השאר באופן אסינכרוני:
<style>
/* critical */
</style>
<link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'">
CSS Containment (container-type: inline-size;) מבודד ציור מחדש של אלמנטים. אנחנו משתמשים ב-@container (min-width: 400px) { ... } רק עבור מודאלים מונפשים. המדדים הסופיים שאנחנו מבטיחים:
| מדד | ערך יעד |
|---|---|
| LCP | ≤ 2.5 שניות |
| CLS | < 0.1 |
| TBT | < 200 אלפיות השנייה |
אנחנו מבטיחים ערכים אלה לכל הפרויקטים. המחיר מחושב באופן אישי לפי מורכבות הפריסה ומספר העמודים. בקשו ייעוץ מקדים — קבלו הצעה מסחרית תוך יום אחד.
איך CSS קריטי מקצר את זמן הטעינה
CSS קריטי הוא הסגנונות הדרושים להצגת המסך הראשון. אנחנו מטמיעים אותם ב-head, וטוענים את השאר באופן אסינכרוני. זה מקצר את FCP ו-LCP. בפרויקט אחד, קיצרנו את FCP מ-3.2 שניות ל-1.1 שניות רק עם CSS קריטי. אנחנו גם משתמשים ב-CSS Containment כדי לבודד ציור מחדש. התוצאה: רינדור חלק ללא קפיצות.
שגיאות פריסה נפוצות
בעיה נפוצה אחת היא היעדר .card-container { container-type: inline-size; } @container (min-width: 300px) { .card { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } } ו-<style>/* critical */</style> <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"> בתמונות — זה גורם ל-CLS כשהתמונות נטענות. פתרון: הגדירו מידות קבועות ב-HTML או השתמשו במאפיין contain: layout paint ב-CSS. טעות נפוצה נוספת היא שכחת will-change על מיכלים עם פינות מעוגלות (width), מה שגורם לתוכן לדלוף. אנחנו תמיד בודקים את אלה.
מה כלול בעבודה שלנו
- תיעוד: מדריך סגנון לרכיבים.
- תוצרים: קבצי מקור (Figma, קוד).
- הדרכה: הסבר על המבנה למפתחים.
- תמיכה: תקופת אחריות לאחר המסירה.
אנחנו צוות עם ניסיון רב בפריסה ו-20+ פרויקטים שהושלמו. אנחנו מבטיחים תאימות בין דפדפנים ב-Chrome, Firefox, Safari ו-Edge. צרו קשר — נעריך את הפרויקט שלכם תוך יום אחד.
| שלב | משך |
|---|---|
| דף נחיתה (מסך אחד) | 0.5–1 יום |
| דף נחיתה (6–8 קטעים) | 1–2 ימים |
| אתר תאגידי (5–10 עמודים) | 3–5 ימים |
| חנות מקוונת (תבניות) | 5–8 ימים |
התמחור הוא אישי. קבלו ייעוץ כדי לדון בפרטי הפרויקט שלכם.