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

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

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

Тематические статьи

Язык разметки HTML, таблицы стилей CSS и язык программирования JavaScript

Графические интерфейсы современных сайтов и веб‑приложений разрабатываются с использованием всего трёх языков — HTML, CSS, JavaScript.

Содержание каждой страницы сайта определяется HTML‑разметкой, внешний вид — содержанием таблицы стилей CSS, а интерактивность интерфейса — скриптами JavaScript. Кроме HTML, CSS и JS в современной фронтэнд‑разработке никаких других языков не используется.

фронтенд
JavaScript
CSS
HTML
веб-разработка
Статья опубликована в 2014 году

БЭМ и независимые блоки

Вёрстка независимыми блоками — это методология, которая была сформулирована Виталием Харисовым из компании Яндекс. Впоследствии эта методология была расширена и получила название БЭМ (Блок-Элемент-Модификатор). Собственно БЭМ нужен для упрощения командной разработки, для унификации интерфейсов и для более активного повторного использования программного кода.

веб-разработка
фронтенд
HTML
CSS
методологии разработки
Статья опубликована в 2014 году

Адаптивный и отзывчивый дизайн

Для обеспечения хорошего отображения сайтов на мобильных устройствах (планшетах и смартфонах) обычно создаётся отзывчивый или адаптивный дизайн.

Суть подхода заключается в изменении размера и расположения блоков, коррекции размера шрифтов, а также в отключении не самых важных блоков в случае, если пользователь заходит на сайт с устройства с небольшим экраном.

фронтенд
веб-разработка
мобильные устройства
HTML
CSS
адаптивный веб-дизайн
дизайн
Статья опубликована в 2019 году

Алгоритмы поисковых систем: семантическая микроразметка

Семантическая микроразметка — это использование в HTML‑верстке дополнительных тегов, классов и иных атрибутов, которые либо дают поисковым системам дополнительную информацию о содержании страницы, либо упрощают классификацию содержания и формируют мета‑данные для содержания. Наиболее популярными на сегодняшний день являются форматы Schema.org, Open Graph и микроформаты.

интернет-маркетинг
SEO
HTML
фронтенд
веб-разработка
Статья опубликована в 2014 году

Адаптивные изображения

Изображения на сайтах могут адаптироваться как под разрешение экрана устройства для корректного отображения на мобильных устройствах, так и под экраны с высоким DPI для более детализированного отображения.

Есть несколько вариантов реализации адаптивных изображений, отличаются они по сложности реализации, кроссбраузерностью и по создаваемой нагрузке на интернет‑соединение. Рассмотрим самые распространённые.

дизайн
UX / UI
фронтенд
CSS
веб-разработка
адаптивный веб-дизайн
Статья опубликована в 2019 году

Ajax-навигация Turboliks & Wiselinks

Увеличить отзывчивость интерфейса и снизить нагрузку на сервер можно при помощи Ajax‑навигации: если не перезагружать страницу целиком, а обновлять только содержание или отдельные фрагменты, то скорость работы сайта или приложения существенно возрастёт.

быстродействие
фронтенд
JavaScript
веб-разработка
Статья опубликована в 2014 году

History API и HASH‑навигация на Ajax‑сайтах

Загрузка контента при помощи Ajax и навигация, построенная на этой схеме, позволяют значительно повысить отзывчивость интерфейса разрабатываемого сайта или веб‑приложения. Однако такой подход заставляет решать проблемы, связанные с отображением адреса в браузере.

фронтенд
JavaScript
веб-разработка
Статья опубликована в 2014 году

Ленивая загрузка или загрузка по требованию на клиентской части

Бывает так, что некоторое содержание страницы нужно не всем или не всегда, но на генерацию этого материала или для его передачи тратится много ресурсов. В этом случае имеет смысл сделать загрузку «ленивой», то есть не генерировать и не загружать в браузер информацию до тех пор, пока она не понадобится.

веб-разработка
фронтенд
быстродействие
JavaScript
Статья опубликована в 2014 году

Валидность и семантичность HTML

Валидность и семантичность HTML кода определяет качество сайта с точки зрения поисковых систем.

фронтенд
HTML
веб-разработка
Статья опубликована в 2014 году