Придбаний Ідеальна верстка. 2020 (Дмитро Лаврик)

[Gadzhi]

ідеальна верстка для оцінки в Chrome Lighthouse і Google PageSpeed Insights від Дмитра Лаврика.

На інтенсиві вивчаються прийоми верстки для досягнення максимального результату в системах автоматичної оцінки сторінок від Google.


Інтенсив призначений для тих, хто:
Вивчив HTML і CSS на більш-менш нормальному рівні.
Не розуміє, чому інструменти Google лають його верстку.
Хоче освоїти верстку, правильну з точки зору Google.

програма курсу:
Огляд інструментів

• знайомство з Lighthouse
• знайомство з Page Speed Insights
• вибір цільового рівня
• реальність отримання 100 з 100
• вплив показників на SEO

базові вимоги гугла

• Швидка відповідь сервера
• адекватний розмір DOM
• критичні та звичайні стилі
• мінімізація розмірів статики
• Відсутність стрибків контенту

Спойлер: "інформація"

Основні показники

• First Contentful Paint
• Largest Contentful Paint
• First Input Delay
• Cumulative Layout Shift

Прискорюючі теги link

• Preload і Prefetch
• Preconnect
• асинхронний link stylesheet
• завантаження CSS з JS

зображення

• Webp, picture і source
• Img і srcset
• вказівка розмірів в html
• висновок різних розмірів
• ліниве завантаження зображень

шрифти

• сучасні формати шрифтів
• Link vs import
• Обов'язковий link preload
• властивість font-display
• підбір стандартного шрифту

популярні проблеми UI

• Inputs & labels
• посилання без тексту
• фрейми без title
• недостатній контраст кольору

неминуче зло

• Y. Метрика та G. Аналітика
• фрейми сторонніх сайтів
• невикористаний javascript
• nginx, apache та час кешу

https://privatelink.de/?https://pagespeed.dmitrylavrik.ru