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

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

• Сайт нормально отображается в браузерах? Для быстрого теста — новый Chrome, новый Firefox,  EDGE (IE11 и более старые, если есть такие требования в ТЗ), браузеры в iOS / Android. Полный тест — согласно ТЗ.
• Нужны ли все подключаемые скрипты и стили? Если нет — убрать лишнее, так как это увеличивает время загрузки сайта.
• Можно ли что-то загружать не блокируя отрисовку? Если да, то перенести загрузку «на потом».
• Timeline загрузки адекватен? Оптимизировать последовательность при необходимости.
• Размер страницы со всеми ресурсами соответствует количеству и качеству отображаемого содержания? Если нет, то выявить причины и устранить их (большие изображения, лишние ресурсы и прочее), как минимум, стоит отложить «тяжелую» загрузку на «после отрисовки» или сделать её «по требованию».
• HTML валиден? Если нет, то исправить. Как правило, валидатором можно «отловить» реальные ошибки — незакрытые теги, например.
• В HTML используется семантичная разметка? Должны быть как минимум теги заголовков h1, h2 и т.д. Если нет, то исправить.
• HTML минимизирован? Это не особо критично, но всё же полезно.
• Подключенные стили CSS минимизированы? Если нет, то минимизировать.
• Вывод консоли веб-разработчика чистый? Если нет, то убрать логи и устранить ошибки.
• Ошибки при загрузке ресурсов есть? Обращение к несуществующим файлам надо убрать.
• Подключенные JS минимизированы? Если нет — минимизировать, а лучше еще и оптимизировать (обфуцировать). После оптимизации обязательно проверить работоспособность.
• Изображения оптимизированы? Если нет — оптимизировать без потерь: качество не пострадает, а скорость загрузки увеличится.
• Изображения используются в адекватном размере? Если для отображения изображений в небольшом размере используются полноразмерные файлы, то это надо исправить. Исключение — очень высокая вероятность просмотра пользователем полного изображения.
• Иконки в шрифтах, в спрайтах или закодированы в base64? Если используется большое количество иконок, то их рациональнее всего грузить из одного файла: шрифты и спрайты — отличное решение, альтернатива — base64 кодирование изображений в CSS.
• Блоки с фоновым изображением имеют заливку? Блоки с фоновым изображением должны иметь заданный цвет фона, соответствующий изображению. Иначе возникает неприятный эффект при загрузке инверсированных блоков — белый текст на стандартном белом фоне не читается.
• Размер изображений указан? Если нет, то указать (по возможности). Это позволяет избежать «скачков» при загрузке страницы.
• Подстройка под разрешение экрана есть? Если нет, то желательно реализовать адаптивную верстку при помощи CSS Media Queries. Стоит, как минимум, адаптировать контролы и размер текста под использование в мобильных браузерах.
• Навигация «завязана» на наведение курсора? Исключить, так как на мобильных устройствах с touch-интерфейсом это вызывает проблемы.
• Используются ли плагины (Flash, например)? Лучше отказаться от них, при невозможности — предоставить «заменители» для браузеров без этих плагинов.
• Что сообщает сервис Google PageSpeed Insights? Учесть рекомендации.