Чек-лист проверки фронтенда

По данному краткому списку можно проверить фронтенд сайта или веб‑приложения для выявления и последующего исправления ошибок или недочётов.

• Сайт нормально отображается в браузерах? Для быстрого теста — современные версии Chrome, Mobile Safari (iOS), Mobile Chrome (Android). Расширенный тест: добавляем проверку в Firefox, Safari, EDGE. Полный тест — согласно ТЗ.
• Нужны ли все подключаемые скрипты и стили? Если нет — убрать лишнее, так как это увеличивает время загрузки сайта. Используйте Tree shaking в JavaScript, динамическую подгрузку модулей, JIT‑классы CSS (Tailwind) или модульный CSS.
• Можно ли что‑то загружать не блокируя отрисовку? Если да, то перенести загрузку «на потом» или в async.
• Timeline загрузки адекватен? Оптимизировать последовательность при необходимости — сначала загружать самое необходимое для первой отрисовки и начала взаимодействия, остальное — уже после.
• Размер страницы со всеми ресурсами соответствует количеству и качеству отображаемого содержания? Если нет, то выявить причины и устранить их: убрать большие изображения, лишние ресурсы и прочее. Или, как минимум, отложить «тяжелую» загрузку на «после отрисовки» или сделать её «ленивой» / «по требованию».
• HTML валиден? Если нет, то проанализировать отчёт валидатора разметки. Как правило, валидатором можно «отловить» реальные ошибки — незакрытые теги, например.
• В HTML используется семантичная разметка? Должны быть как минимум теги заголовков <h1>, <h2>, их структура дожна быть древовидной. Ссылки должны быть реализованы через тег <a>, а не через обработку событий onClick на иных элементах. Если это не так, то исправить.
• HTML минимизирован? Это не критично, но всё же полезно.
• Подключенные стили CSS минимизированы? Если нет, то минимизировать.
• Вывод консоли веб‑разработчика в браузере чистый? Если нет, то убрать избыточное логирование и устранить выявленные ошибки.
• Ошибки при загрузке ресурсов есть? Обращение к несуществующим файлам (404 ошибки) надо убрать или исправить адреса загрузки на корректные.
• Подключенные JS‑скрипты минимизированы? Если нет — минимизировать, а лучше еще и оптимизировать (обфуцировать). После оптимизации обязательно проверить работоспособность.
• Изображения оптимизированы? Если нет — оптимизировать без потерь: качество не пострадает, а скорость загрузки увеличится.
• Изображения используются в адекватном размере? Если для отображения изображений в небольшом размере используются полноразмерные файлы, то это надо исправить. Исключение — очень высокая вероятность просмотра пользователем полного изображения.
• Иконки в шрифтах, в спрайтах или закодированы в base64? Если используется большое количество иконок, то их рациональнее всего грузить из одного файла: шрифты и спрайты — отличное решение, альтернатива — base64 кодирование изображений в CSS.
• Блоки с фоновым изображением имеют css‑заливку? Блоки с фоновым изображением должны иметь заданный цвет фона, соответствующий используемым изображениям. Иначе возникает неприятный эффект при загрузке инверсированных блоков — белый текст на стандартном белом фоне не читается.
• Размер изображений указан? Если нет, то указать или использовать css‑свойство aspect-ratio. Это позволяет избежать «скачков» при загрузке страницы.
• Подстройка под разрешение экрана есть? Если нет, то реализовать адаптивную разметку при помощи CSS Media Queries. Стоит, как минимум, адаптировать контролы и размер текста под использование в мобильных браузерах.
• Навигация «завязана» на наведение курсора? Исключить, так как на мобильных устройствах с touch‑интерфейсом это вызывает проблемы.
• Заголовки клиентского кеширования у статичных файлов есть? Если нет — проставьте, используйте технику asset-digest и кешируйте «статику» на длительный период.
• Что сообщает сервис PageSpeed Insights / Lighthouse? Учесть рекомендации.