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

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

  • Сайт нормально отображается в браузерах? Для быстрого теста — новый 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? Учесть рекомендации.

Cтатьи по теме:

Все технологии фронтенд-разработки: язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript
Содержание и внешний вид каждой страницы сайта определяется HTML-кодом и содержанием таблицы стилей CSS, а поведение интерфейса — скриптами JavaScript.
Адаптивный и отзывчивый дизайн
​Для обеспечения хорошего отображения сайтов на мобильных устройствах (планшетах и смартфонах) обычно создаётся отзывчивый или адаптивный дизайн. Суть подхода заключается в изменении размера и расположения блоков, коррекции размера шрифтов, а также в отключении не самых важных блоков в случае, если пользователь заходит на сайт с устройства с небольшим экраном.
БЭМ и независимые блоки
Вёрстка независимыми блоками — это методология, которая была сформулирована Виталием Харисовым из компании Яндекс. Впоследствии эта методология была расширена и получила название БЭМ (Блок-Элемент-Модификатор). Собственно БЭМ нужен для упрощения командной разработки, для унификации интерфейсов и для более активного повторного использования программного кода.
Валидность и семантичность HTML
Валидность и семантичность HTML кода определяет качество сайта с точки зрения поисковых систем.
HTML5 — новая версия стандарта
HTML — это язык для структурирования и представления содержимого, HTML5 (HyperText Markup Language, version 5) — это пятая версия стандарта, которая ещё находится в разработке, но уже является вполне рабочей. Цель разработки HTML5 — улучшение уровня поддержки мультимедиа-технологий при сохранении удобочитаемости кода для человека и простоты анализа для парсеров (в частности, поисковых систем).
Увеличиваем скорость работы сайта при помощи оптимизации JavaScript
Сайт может работать быстрее, если выполнены следующие рекомендации по оптимизации JS-кода. Если же этого не сделать, то сайт будет недостаточно быстро отображаться на стороне клиента.
Ускоряем работу сайта: оптимизация HTML
Сайт может загружаться и отображаться быстрее, если выполнить следующие рекомендации по оптимизации HTML-разметки, а без этого скорость загрузки и отрисовки будет ниже.

Тематические технологии:

Система сборки WebPack
Язык разметки HTML
CSS — каскадные таблицы стилей
Язык программирования JavaScript
Библиотека React
Библиотека MobX
Библиотека MobX State Tree
Платформа NodeJS