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