Home Original page

GitHub - ungear/Front-End-Checklist: 🗂 Превосходный чеклист fornt-end для дотошных разработчиков современных сайтов

The Front-End Checklist это исчерпывающий список элементов сайта или HTML страницы, которые должны быть проверены перед выпуском в production

  PRs Welcome           Contributors         Gitter             Front‑End_Checklist followed         CC0  

  Как пользоваться •   Contributing •   Сайт Product Hunt

Другие чек-дисты:
  🎮 Front-End Performance Checklist • 💎 Front-End Design Checklist

Он основан на многолетнем опыте front-end разработчиков и, кроме того, включает в себя части других открытых checklist-ов.

Содержание

  1. Head
  2. HTML
  3. Web-шрифты
  4. CSS
  5. Картинки
  6. JavaScript
  7. Безопасность
  8. Производительность
  9. Доступность
  10. SEO

Как этим пользоваться?

Все пункты Front-End Checklist обязательны для большинства сайтов, однако некоторые элементы могут быть менее важны или вовсе пропущены (например если вам не нужен RSS для админки приложения). Мы выбрали 3 уровня гибкости:

Некоторые комментарии снабжены иконками, чтобы вы лучше понимали, какой контент или помощь можно найти:

  • 📖: документация или статья
  • 🛠: он-лайн инструменты / утилиты для проверки
  • 📹: медиа или видео контент

Если хотите внести вклад в Front-End Checklist App, прочтите README_APP file.

Head

Примечание: Можно посмотреть список всего, что может быть в <head> HTML документа.

Мета-теги

  • Doctype: High Doctype относится к HTML5 и находится в самом верху HTML страниц.
<!doctype html> <!-- HTML5 -->

Следующие 2 мета-тега (Charset и Viewport) должны быть расположены в самом начале <head>.

  • Charset: High Кодировка (UTF-8) задана правильно.
<!-- Задать кодировку документа -->
<meta charset="utf-8">
  • Viewport: High Viewport задан правильно.
<!-- Задать viewport для responsive дизайна -->
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  • Title: High Задан на всех страницах (SEO: Google рассчитывает ширину символов в title и обрезает примерно от 472 до 482 пикселей. Так что предел длины title около 55 символов).
<!-- Document Title -->
<title>Название короче 55 символов</title>
  • Description: High Description задан, уникален и короче 150 символов.
<!-- Meta Description -->
<meta name="description" content="Описание страницы короче 150 символов">
  • Favicons: Medium Иконки отображаются корректно. Если у вас только один favicon.ico, положите его в корень сайта. Обычно вам не нужно ничего добавлять в разметку. Однако, хорошей практикой считается сделать ссылку как в примере ниже. На сегодняшний день рекомендован PNG формат вместо .ico(разрешение: 32x32px).
<!-- Стандартный favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Рекомендованный формат favicon -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
  • Apple Web App Meta: Low Заданы мета-теги для Apple
<!-- Apple Touch Icon (не меньше, чем 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- Развернуть веб-приложение на полный экран -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Задаёт стиль для Status Bar (возможные значения смотри по ссылке Supported Meta Tags ниже) -->
<!-- Не имеет эффекта, если не выставлен предыдущий тег -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
  • Windows Tiles: Low Windows tiles заданы.
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />

Минимальный требуемый browserconfig.xml:

<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
   <msapplication>
     <tile>
        <square70x70logo src="small.png"/>
        <square150x150logo src="medium.png"/>
        <wide310x150logo src="wide.png"/>
        <square310x310logo src="large.png"/>
     </tile>
   </msapplication>
</browserconfig>
  • Canonical: Medium Используйте rel="canonical" чтобы избежать дублированности контента.
<!-- Помогает избежать проблем с дублированным контентом -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

HTML теги

  • Атрибут lang: High Атрибут lang задан в соответствии с языком страницы.
  • Атрибут direction: Medium Направление текста задано в этом атрибуте тега html. Также этот атрибут может быть применён к другим тегам.
  • Альтернативный язык: Low Тег языка задан и соответствует языку страницы.
<link rel="alternate" href="https://es.example.com/" hreflang="es">
  • Условные комментарии: Low Условные комментарии заданы для IE, если требуется.

  • RSS feed: Low Если ваш проект является блогом или содержит страницы, убедитесь, что RSS настроен.

  • Критичные CSS стили заданы inline: Medium Критичный CSS (critical CSS) - CSS, задающий стили контента видимого сразу же пока идёт процесс загрузки страницы ("above the fold content"). Минифицируйте такой CSS и вставьте внутри <style></style> перед загрузкой остальных стилей.

  • Порядок CSS: High Все CSS файлы должны загружаться перед любыми JavaScript файлами в <head>. (За исключением случаев, когда JS файлы загружаются асинхронно в верху страницы).

Социальные сети

Facebook OG и Twitter Cards крайне рекомендованы для всех сайтов. Добавьте теги для других соц. сетей, если планируете отображаться в них корретно.

  • Facebook Open Graph: Low Все теги All Facebook Open Graph (OG) протестированы, ни один не пропущен и информация в них верна. Картинки должны быть хотя бы 600 x 315 пикселей. Рекомендуемое разрешение 1200 x 630 пикселей.

Примечание: Используйте og:image:width и og:image:height чтобы указать разрешение картинок для паука (the crawler) для того, чтобы картинки могли быть отрендерены сразу же. Иначе потребуется асинхронная подгрузка и обработка.

<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<!-- Следующие теги не обязательны, но рекомендованы -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
  • Twitter Card: Low
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

⬆ наверх

HTML

Лучшие практики

  • Семантические элементы HTML5: High Семантические элементы HTML5 используются должным образом (header, section, footer, main...).

  • Страницы ошибок: High Страницы ошибок 404 и 5xx существуют. Не забывайте, что в страницы ошибок 5xx должны быть включены их стили, чтобы обойтись без подгрузки с сервера.

  • Noopener: Medium Ссылки на внешние ресурсы с target="_blank" должны иметь атрибут rel="noopener", чтобы предотвратить фишинговые атаки типа tab nabbing. Если нужно поддерживать старые версии Firefox, используйте rel="noopener noreferrer".

  • Удаление комментариев: Low Ненужный код должен быть удалён перед отправкой в production.

Тестирование HTML

  • W3C совместимость: High Все страницы должны быть проверены W3C валидатором.
  • HTML Lint: High Инструменты, которые помогают анализировать проблемы в HTML.
  • Проверка ссылок: High Нет сломанных ссылок, нет ошибок 404.
  • Проверка на Adblock: Medium Сайт корректно отображается c включёнными вырезателями рекламы типа Adblock. Можете показать специальное сообщение с просьбой выключить подобные плагины.

⬆ наверх

Web-шрифты

Примечание: Использование web-шрифтов может вызвать мерцание или исчезновение текста (FOUT - Flash of Unstyled Text, FOIT - Flash of Invisible Text). Так что убедитесь, что задан резервный шрифт, либо используйте загрузчик шрифтов чтобы держать ситуацию под контролем.

  • Форматы web-шрифтов: High WOFF, WOFF2 и TTF поддерживаются всеми браузерами.

  • Размер web-шрифтов: High Размер шрифтов суммарно не превышает 2 MB.

  • Загрузчик web-шрифтов: Low Контролируйте закачку шрифтов с помощью загрузчика.

⬆ наверх

CSS

Примечание: Ознакомьтесь с CSS guidelines и Sass Guidelines, которых придерживаются большинство разработчиков. Если у вас есть сомнения насчёт CSS свойств, посетите CSS Reference. Кроме того взгляните на короткий гайд Code Guide.

  • JS префиксы: Low Все классы и id, используемые в JS файлах, начинаются с префикса js- и не участвуют в назначении стилей.
<div id="js-slider" class="my-slider">
<!-- Или -->
<div id="id-used-by-cms" class="js-slider my-slider">

Производительность CSS

  • Неиспользуемый CSS: Low Удалите неиспользуемые стили.

Тестирование CSS

  • Stylelint: High В CSS или SCSS файлах нет ошибок.

  • Отзывчивый web-дизайн: High Все страницы были протестированы на следующих контрольных точках: 320px, 768px, 1024px (может быть больше а зависимости от проекта).

  • CSS валидатор: Medium CSS был протестирован, ошибки исправлены.

  • Точное соответствие макету: Low В зависимости от проекта и качества макета, перед вами может стоять задача сделать разметку идеально соответствующей дизайну. Используйте специальные инструменты, чтобы проверить вашу реализацию на соответствие макету.

Pixel Perfect - Chrome Extension

  • Направление текста: High Все страницы должны быть протестированы в LTR и RTL языках, если они поддерживаются.

⬆ наверх

Картинки

Примечание: Для полного понимания оптимизации картинок прочтите бесплатную электронную книгу Essential Image Optimization от Addy Osmani.

Лучшие практики

  • Оптимизация: High Все картинки оптимизированы для рендеринга в браузере. Формат WebP может быть использован для критических страниц, например домашняя страница (Homepage).
  • 🛠 Imagemin
  • 🛠 Используйте ImageOptim для бесплатной оптимизации картинок.
  • 🛠 Используйте Kraken.io как крутую альтернативу для оптимизации png и jpg. До 1 Mb бесплатно.
  • 🛠 Используйте TinyPNG для оптимизации png, apng (анимированный png) and jpg без потери качества. Есть как платная, так и бесплатная версия.
  • 🛠 ZorroSVG jpg-подобное сжатие для прозрачных картинок использованием svg масок.
  • 🛠 SVGO инструмент под Nodejs для оптимизации SVG файлов.
  • 🛠 SVGOMG web версия SVGO для онлайн оплимизации SVG файлов.
  • Picture/Srcset: Medium Используйте picture/srcset чтобы задать наиболее подходящую картинку для текущего viewport.
  • Ленивая загрузка (lazy loading): Medium Применяется lazy loading для картинок (задан резервный noscript).

⬆ наверх

JavaScript

Лучшие практики

  • Безопасность JavaScript: High
  • noscript tag: Medium Используйте <noscript> внутри <body> чтобы задать контент для ситуаций, когда скрипты не поддерживаются или выключены в браузере. Полезно для Single Page Application (React, Angular и т.п.) Пример
<noscript>
  Для работы приложения необходимо включить JavaScript.
</noscript>
  • Неблокирующий JS: Medium JavaScript файлы загружаются асинхронно с использованием атрибута async или отложенно с defer.
  • Оптимизированние и актуальные версии JS библиотек: Medium Убедитесь, что все загружаемые JS библиотеки действительно необходимы, избавьтесь от неиспользуемых. Несложный функционал предпочтительно реализовывать на чистом (vanilla) JavaScript. Используйте последние версии библиотек. В них меньше ошибок и они более безопасны по сравнению с устаревшими версиями.
  • Modernizr: Low С помощью кастомного Modernizr можно добавлять классы к <html>.

Тестирование JavaScript

  • ESLint: High ESLint не выдал ошибок, проверяя ваш код. Можно использовать ваш собственный конфиг, или стандартные правила.

⬆ наверх

Безопасность

Просканируйте и проверьте ваш веб-сайт

Лучшие практики

  • HTTPS: High HTTPS используется на всех страницах, а также для всего стороннего контента (плагины, картинки...).
  • HTTP Strict Transport Security (HSTS): Medium Выставлен HTTP заголовок 'Strict-Transport-Security'.
  • Защита от фальсификации межсайтовых запросов(Cross Site Request Forgery - CSRF): High Вы гарантируете, что запросы на ваш сервер делаются именно вашим веб-сайтом, чтобы избежать атак CSRF.
  • Межсайтовый скриптинг (Cross Site Scripting - XSS): High Ваш веб-сайт защищён от уязвимостей XSS.
  • Заголовок Content-Type: Medium Предотвратить mime-sniff (анализ контента и подмена заголовка content-type) в Google Chrome и Internet Explorer.
  • X-Frame-Options (XFO): Medium Защитите своих пользователей от атак типа clickjacking.
  • Политика безопасности контента (Content Security Policy): Medium Задайте правила, определяющие, какой контент и откуда разрешено загружать на ваш сайт. Также это поможет защититься против атак clickjacking.

⬆ наверх

Производительность

Лучшие практики

  • Цели: Medium Необходимо достичь следующих параметров:
    • First Meaningful Paint (показать что-то осмысленное) не позже, чем через 1 секунду
    • Time To Interactive (время до первого взаимодействия с пользователем) в течение 5 секунд для "среднего" устройства (смартфон на Android за 200$ медленной 3G сети с 400ms RTT и скоростью передачи 400kbps) и до 2 секунд для следующих визитов
    • Размер критичных файлов до 170Kb gzipped
  • Минифицирование: Medium Ваш HTML минифицирован.

  • Ленивая загрузка (Lazy loading): Medium Используйте lazy loading для загрузки картинок, скриптов и CSS чтобы уменьшить время инициализации страницы. Смотрите подробнее в соответствующих секция чеклиста.

  • Размер cookie: Medium Если используете cookies, убедитесь, что их размер не превосходит 4096 байт. Также один домен не должен использовать более 20 cookies.

  • Сторонние компоненты (Third party components): Medium Iframe и сторонние компоненты, полагающиеся на JS с других доменов (типа кнопок "Поделиться"), должны быть, по возможности, заменены на ваши статические компоненты, дабы уменьшить число запросов и избежать возможной утечки данных ваших пользователей.

Подготовка предстоящих запросов (preparing upcoming requests)

  • DNS resolution: Low DNS сторонних компонентов обозначены в dns-prefetch, чтобы браузер мог разобраться с этими DNS заранее.
<link rel="dns-prefetch" href="https://example.com">
  • Preconnect: Low Используйте preconnect, чтобы браузер мог осуществить DNS lookup, TCP handshake и TLS negotiation заранее во время простоя браузера.
<link rel="preconnect" href="https://example.com">
  • Prefetch: Low С использованием prefetch ресурсы, которые скоро могут понадобиться, например картинки с lazy loading, будут подгружены заранее во время простоя браузера.
<link rel="prefetch" href="image.png">
  • Preload: Low preload заранее загружает ресурсы, требуемые для текущей страницы, например скрипты в конце <body>.
<link rel="preload" href="app.js">

Тестирование производительности

  • Google PageSpeed: High Все страницы протестированы и имеют рейтинг хотя бы 90/100.

⬆ наверх

Доступность

Примечание: Ознакомьтесь с плейлистом A11ycasts with Rob Dodson 📹

Лучшие практики

  • Прогрессивное улучшение: Medium Основной функционал, например навигация и поиск, должны работать даже если JavaScript выключен.
  • Контрастность цветов: Medium Контрастность должна соответствовать WCAG AA (AAA для мобильных устройств).

Заголовки

Семантика

  • Специальные типы input для HTML5: Medium Это особенно важно для мобильных устройств, т.к. там используется разные клавиатуры для разных типов вводимых данных.

Формы

  • Label: High <label> задан для каждого элемента формы. Если его применить нельзя, используйте aria-label.

Тестирование доступности

  • Проверка на соответствие стандартам: High Используйте инструмент WAVE для проверки.

⬆ наверх

SEO

  • Структурированные данные (Structured Data): High На страницах используются проверенные и правильные структурированные данные. Они помогают паукам (crawlers) понять контент страницы.
  • HTML карта сайта: Medium HTML карта сайта существует и доступна по ссылке в подвале страницы.
  • Pagination теги: Medium Задайте rel="prev" и rel="next" чтобы показать, что контент разбит на страницы.
<!-- Example: Pagination link tags for page 2 of a paginated list -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">

⬆ наверх

Перевод

Front-End Checklist также доступен на других языках. Спасибо всем переводчикам за потрясающую работу!

Front-End Checklist Badge

Вставьте этот бейдж в ваш файл README, если хотите показать, что следуете этому чеклисту!

➔ Front‑End_Checklist followed

[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ наверх

Содействие

Создайте issue или pull request чтобы предложить изменение или дополнение

Руководство

Репозиторий Front-End Checklist состоит из двух веток:

1. master

Эта ветка состоит из файла README.md, который автоматически отображается на сайте Front-End Checklist.

2. develop

Эта ветка будет использоваться для внесения значительных изменений в структуру или контент. Для устранения мелких ошибок и создания новых элементов предпочтительно использовать ветку master.

Поддержка

Если у вас есть вопросы или пожелания, без колебаний пишите в Gitter или Twitter:

Автор

David Dias

Помощники

Проект существует благодаря помощи сообщества. [Contribute].

Backers

Thank you to all our backers! 🙏 [Become a backer]

Sponsors

Support this project by becoming a sponsor. Your logo will show up here with a link to your website. [Become a sponsor]

Лицензия

CC0

⬆ наверх

Syncronized with commit 225705b3bb4c7b05a6f818203b408575fe240473