На інтенсивності вивчаються прийоми верстки для досягнення максимального результату в системах автоматичної оцінки сторінок від 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
Аналіз сайтів
Приклади хороших та кривих проектів
Коментарі по кейсам учнів
Виявлення найважливіших проблем
Послідовність виправлення
Робота з критичним CSS
Ручний поділ стилів
Автоматизація поділу коду
Експерименти з npm critical
Ефективне налаштування critical
Теги, що прискорюють 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
Недостатній контраст кольору
Серверна сторона
Gzip стиск
Час кешу статики
Мініфікація html-відповіді
Https, http2
Оптимізація монстра
Приклад сайту на Vue + Vuetify
Стартові показники у червоній зоні
Виявлення ключових проблем
Виведення в зелену зону
Неминуче зло
Y.Метрика та G.Аналітика
Фрейми сторонніх сайтів
Java jascript, що не використовується
Nginx, Apache та час кешу