Чек-лист проверки фронтенда
По данному списку можно проверить фронтенд сайта или веб-приложения для выявления и последующего исправления ошибок или недочётов.
- Сайт нормально отображается в браузерах? Для быстрого теста — новый 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? Учесть рекомендации.
Источник: web-creator.ru