Каталог
Веб-разработка с нуля: четыре курса по порядку.
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Каталог
HTML, затем CSS, JavaScript и SQL. Каждый курс говорит, что нужно знать до него и что вы будете уметь после.
Загружаем курсы…
Урок 54 из 70 · 11 мин
link rel=stylesheet, preload, preconnect, script defer и async: порядок загрузки, от которого зависит скорость сайта.
Дизайнер прислал CSS-файл и фирменный шрифт. Куда это?
Стили — в head, чтобы я рисовал сразу красиво. Скрипты — с defer, чтобы не тормозили меня.
<link rel="stylesheet">head, файл общий для всех страниц.<link rel="stylesheet" href="/style.css">defer · asyncdefer — по порядку после разбора HTML; async — сразу как скачался, порядок не важен.async, основной скрипт — defer.preload · preconnect · prefetchpreload — грузи сейчас, preconnect — заранее соединись с сервером, prefetch/modulepreload — на потом, dns-prefetch — узнай адрес заранее.<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>aspreload: font, image, style, script.<link rel="preload" href="/fonts/brand.woff2" as="font" type="font/woff2" crossorigin>imagesrcsetlink rel="preload" as="image": варианты картинки, как srcset.<link rel="preload" as="image" imagesrcset="hero-400.jpg 400w, hero-800.jpg 800w" imagesizes="100vw">imagesizesimagesrcset — как sizes у img.<link rel="preload" as="image" imagesrcset="a.jpg 400w, b.jpg 800w" imagesizes="50vw">blockingblocking="render" у link, script, style.<link rel="stylesheet" href="/critical.css" blocking="render">Дизайнер прислал файлы. Подключи в head стили style.css, скрипт app.js с defer и предварительное соединение preconnect с https://fonts.gstatic.com.
style.css — пока нетapp.js с defer — пока нетpreconnect к шрифтам — пока нетВыберите один ответ.
Как подключить независимый скрипт аналитики, чтобы он не тормозил показ страницы и не зависел от порядка?
Выберите один ответ.
Где подключают основной CSS-файл?
Выберите один ответ.
Как попросить браузер загрузить главный шрифт как можно раньше?
Проверяем состояние обучения…