ΕργασίαQuick recap. Build a head + body that proves you know the 4 perf basics. Head: viewport meta + preconnect to https://cdn.example.com (crossorigin). Body: <img src='/below.jpg' alt='Below' loading='lazy' width='800' height='600'> and a <picture> with one <source srcset='/hero-2x.webp' media='(min-width: 800px)'> plus an <img src='/hero.webp' alt='Hero' width='1200' height='630'> fallback.
Recap: Performance & loading
50 XP5 min
Θεωρία
Quick recap — Module A7
12 lessons on shaving milliseconds. The 4 head-tags that survive every audit:
- `<meta name="viewport">` — mobile rendering at all (covered in A1, reused here).
- `<link rel="preconnect">` — warms TCP+TLS to a third-party origin before the first request.
- `<img loading="lazy">` — below-fold images don't block LCP.
- `<img srcset>` (or
<picture>) — phones don't download desktop-resolution hero images.
If any feels random, redo A7-01 / A7-03 / A7-06 / A7-09 then come back.
🔒
Εγγράψου για να αρχίσεις να προγραμματίζεις
Η θεωρία είναι ανοιχτή για όλους. Ο επεξεργαστής, η ζωντανή προεπισκόπηση και ο έλεγχος ξεκλειδώνουν με 7-ήμερη δωρεάν δοκιμή — απαιτείται κάρτα.
Εγγραφή — δωρεάν δοκιμή →Τα πρώτα 10 μαθήματα κάθε διαδρομής είναι δωρεάν. Δεν χρειάζεται κάρτα.