blognetology 1 фев 2018 в 17:14

Чеклист фронтенд-разработчика

12 мин

70K

Блог компании Нетология Веб-разработка *CSS *HTML *

Перевод

Глеб Летушов, редактор-фрилансер, адаптировал для блога Нетологии чеклист с Github от David Dias. Этот чеклист уже переводили, но так как на Хабре его нет, мы решили, что он пригодится. В чеклисте собран полный список элементов, которые необходимо проверить перед запуском и публикацией сайта.

Список основан на многолетнем опыте фронтенд-разработчиков, а дополнения собраны из общедоступных источников.

Содержание

Head
HTML
Шрифты
CSS
Изображения
JavaScript
Безопасность
Производительность
Доступность
SEO

Как пользоваться

Все пункты из чеклиста обязательны для большинства проектов, но иногда некоторые из них можно опустить. Например, в случае приложения администрирования (administration web app), RSS не пригодится.

Head

Список элементов из раздела Head HTML-документа можно найти на GitHub.

Мета-теги

Doctype: указывает на версию HTML-файла и находится в самом начале страницы. В Doctype должна быть указана пятая версия HTML.

<!-- Doctype HTML5 -->
<!doctype html>

Определение кодировки страницы HTML5 W3C.

Следующие три мета-тега (Charset, X-UA Compatible и Viewport) необходимо поместить в начало страницы сразу после doctype:

Charset: кодировка документа — UTF-8.

<!-- Задаем кодировку для страницы -->
<meta charset="utf-8">

X-UA-Compatible: управляет отображением страницы в Internet Explorer, поэтому его необходимо задать.

<!-- Сообщает Internet Explorer использовать самый новый движок для рендера -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
<a href="https://msdn.microsoft.com/en-us/library/jj676915%28v=vs.85%29.aspx">

Определение отображения страниц для Internet Explorer.

Viewport: мета-тег Viewport задан правильно.

<!-- Задание тега Viewport для адаптивного отображения страницы -->
<meta name="viewport" content="width=device-width, initial-s
cale=1">

Title: тег Title используется на всех страницах. Google вычисляет длину заголовка, и обрезает в выдаче те, которые больше 472 пикселей. Оптимальная длина для заголовка — около 55 символов.

<!-- Задание тега Title -->
<title>Заголовок страницы короче 65 символов</title>

Тег Title в HTML-документе — MDN.
SERP Snippet Generator – создание описания сайта, которое Google покажет на странице выдачи результатов поиска (для англ. текста).

Description: описание сайта внутри тега является уникальным и не превышает 150-и символов.

<!-- Тег Description -->
<meta name="description" content="Описание сайта содержит не более 150 символов">

Тег Description в HTML -документе — MDN.

Favicon: каждый фавикон корректно отображается. Если файл только один, favicon.ico, его нужно поместить в корневой каталог сайта. В таком случае ссылаться на него в HTML-документе необязательно. Однако ссылку на фавикон лучше указывать так, как на примере ниже. Оптимальный формат изображения — .png, а не .ico. Разрешение — 32×32 px.

<!-- Стандартный фавикон -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Рекомендованный формат фавикона -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">

Favicon Generator — создание фавикона.
RealFaviconGenerator.
Гайд по фавиконам на GitHub.
Favicons, Touch Icons, Tile Icons, etc. Which Do You Need? — CSS Tricks.
PNG favicons — caniuse.

Apple Touch Icon: установлена иконка Apple touch icon для отображения на iOS-устройствах. (Разрешение файла должно быть 200x200 px, чтобы иконка хорошо отображалась на всех устройствах).

<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">

Configuring Web Applications.

Windows Tiles указан следующим образом:

<!-- Microsoft Tiles -->Browser configuration schema reference
	
<meta name="msapplication-config" content="browserconfig.xml" />

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>

Browser configuration schema reference.

Атрибут canonical: используйте rel=«canonical», чтобы избежать повторения контента.

<!-- Предотвращает дублирование контента на странице  -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

Use canonical URLs — Search Console Help — Google Support.
5 common mistakes with rel=canonical — Google Webmaster Blog.

HTML-теги

Атрибут lang: должен указывать язык текущей HTML-страницы.

<html lang="ru">

Direction: направление текста задано в специальном HTML-теге.

<html dir="rtl">

dir — HTML — MDN.

Переадресация на страницу с другим языком: значение атрибута rel установлено как alternate.

<link rel="alternate" href="https://es.example.com/" hreflang="es">

Условные комментарии для Internet Explorer: задаются, если необходимы.

<!–[if IE]> Код для браузера Internet Explorer <![endif]–>

About conditional comments (Internet Explorer) — MSDN — Microsoft.

RSS: если вы готовите к запуску блог или сайт со статьями, то не забудьте задать ссылку на RSS.
Инлайновый критический CSS: задан критический CSS — это стили, которые мгновенно загружаются во время открытия страницы. Обычно подключается до основного CSS-файлы с помощью тега Style.

Critical by Addy Osmani on Github — автоматизирует создание критического CSS.

Правильный вызов CSS: все CSS-файлы должны быть подключены до JavaScript в разделе Head. Исключение составляют JS-файлы, которые загружаются асинхронно и расположены в самом верху страницы.

Мета-теги для социальных сетей

На любой сайт желательно добавить основные мета-теги Facebook и Twitter. Остальные теги можно добавить при необходимости.

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

<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">

A Guide to Sharing for Webmasters.
Проверить страницу с помощью валидатора Facebook OG.

Twitter Card: должен быть настроен как на примере ниже.

<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="Описание контента короче 200 символов">
<meta name="twitter:image" content="https://example.com/image.jpg">

Getting started with cards — Twitter Developers.
Проверить сайт с помощью валидатора Twitter card.

HTML

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

HTML Reference — удобная инструкция по HTML.

Страницы ошибок: созданы страницы для 404 и 500-х ошибок. Страницы пятисотых ошибок должны включать в себя стили CSS (без внешних вызовов на сервере).
Noopener: если внешнюю ссылку необходимо открывать в новой вкладке с помощью target="_blank", то добавьте к ним атрибут rel=«noopener». Это предотвратит кражу данных пользователей, если страница другого сайта используется для фишинга. Для старых версий браузера Firefox задайте атрибут rel=«noopener noreferrer».

About rel=noopener.

Комментарии: перед публикацией страницы убедитесь, что удалили все комментарии и ненужный код.

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

W3C-валидатор: все страницы сайта необходимо протестировать валидатором на сайте W3C. Он поможет найти незамеченные ошибки в HTML-коде.

W3C validator.

Оформление HTML-кода: чтобы поправить недочеты в коде и сократить его размер, воспользуйтесь специальным сервисом.

Dirty markup.

Проверка ссылок на странице: все ссылки рабочие и не выдают 404 ошибку при переходе.

W3C Link Checker.

Шрифты

Формат подключенного шрифта: форматы WOFF, WOFF2 and TTF поддерживаются всеми современными браузерами.

WOFF — Web Open Font Format — Caniuse.
WOFF 2.0 — Web Open Font Format — Caniuse.
TTF/OTF — TrueType and OpenType font support.
Using @font-face — CSS-Tricks.

Вес шрифта: не превышает 2-х Мб.

CSS

Ознакомьтесь с руководством по CSS и гайдом по Sass, многие ведущие фронтенд-разработчики придерживаются правил, описанных в этих руководствах. Если возникнут дополнительные вопросы по CSS, ответы можно найти на CSS Reference.

Адаптивный дизайн: верстка на сайте адаптивная.
Печать с помощью CSS: таблицы печати настроены корректно для каждой страницы.
Препроцессоры: страница использует CSS-препроцессор (Sass предпочтительней).
Уникальные ID: идентификаторы на странице не повторяются.
Reset CSS: на странице подключены актуальные CSS-файлы для сброса стандартных стилей браузера (reset, normalize или reboot). Во многие CSS-фреймворки, например, в Bootstrap или Foundation, включен файл Normalize.css.

Reset.css.
Normalize.css.
Reboot.

JS-префиксы: все классы или id, используемые в JS, начинаются с js- и не используются для задания стилей через CSS.

<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">

Тег Style в HTML-документе: избегайте использования тега Style для задания стилей внутри HTML-страницы. В некоторых случая использование оправдано, например, для задания фона для слайдера.
Вендорные префиксы: вендорные префиксы CSS решают проблемы с совместимостью со старыми версиями браузеров.

-webkit — Chrome и Safari,
-o — Opera;
-ms — Internet Explorer;
-moz — Mozilla.

Autoprefixer CSS online.

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

Объединение CSS-файлов: все файлы CSS объединены в один файл. (Не подходит для HTTP/2).
Оптимизация: все CSS-файлы сжаты.
CSS, блокирующие отображение сайта: убедитесь, что CSS-файлы не блокируют отображение контента, увеличивая время загрузки страницы.

loadCSS by filament group.
Example of preload CSS using loadCSS.

Неиспользуемый CSS-код: весь лишний код удален.

UnCSS Online.
PurifyCSS.
Chrome DevTools Coverage.

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

Stylelint: все CSS и SCSS файлы без ошибок.

stylelint, a CSS linter.
Sass guidelines.

Адаптивный дизайн: страницы сайта протестированы для разрешений: 320 px, 768 px, 1024 px (можно проверить и на других разрешениях в зависимости от цели сайта).
CSS Validator: найдены и исправлены все ошибки в CSS-файлах.

CSS Validator.

Браузеры: страницы сайта протестированы в популярных браузерах (Safari, Firefox, Chrome, Internet Explorer).
Мобильные браузеры: сайт проверен в мобильных браузерах (Chrome, Safari…).
OS: сайт протестирован в популярных операционных системах (Windows, Android, iOS, MacOS)
Pixel perfect: страница сверстана максимально точно. Конечно, не на 100%, но все же стоит придерживаться шаблона.

Pixel Perfect — Chrome Extension.

Направление чтения: если в проекте нужно поддержка не только языков, которые читаются слева направо (left-to-right — LTR), но и тех, которые читаются справа налево (right-to-left — RTL), то нужно проверить, поддерживает ли их сайт.

Building RTL-Aware Web Apps & Websites: Part 1 — Mozilla Hacks.
Building RTL-Aware Web Apps & Websites: Part 2 — Mozilla Hacks.

Изображения

Чтобы разобраться в оптимизации изображений, посмотрите книгу Essential Image Optimization (на англ.) от Эдди Озмани (Addy Osmani).

Оптимизация: Все изображения оптимизированы для отображения в браузере. Формат WebP можно использовать на важных страницах, например, на главной.

Imagemin.
Бесплатно оптимизировать изображение можно с помощью ImageOptim.

Picture/Srcset: использованы атрибуты picture/srcset для того, чтобы отображать наиболее подходящую картинку в данном разрешении (размере) экрана.

How to Build Responsive Images with srcset.

Retina: все изображения должны иметь 2x или 3x разрешения, чтобы хорошо отображаться на retina-дисплеях.
Спрайт-файл: маленькие картинки на сайте объединены в один спрайт-файл. Это большое изображение, состоящие из мелких картинок. Если это иконки, то их можно объединить в спрайт-картинку SVG формата.
Ширина и высота: если заранее известны нужные размеры изображения, то ширина и высота должна быть задана в атрибуте img.
Описание изображения: все картинки img должны быть описаны словами в атрибуте alt.

<img alt=’Описание изображения’>

Alt-texts: The Ultimate Guide.

Отложенная загрузка изображений: сайт настроен так, чтобы изображения загружались не сразу, а по мере пролистывания сайта.

JavaScript

JavaScript-код отдельными файлами: в HTML-документе не должно быть встроенного JS-кода. Лучше просто указать ссылку на файл с кодом.
Объединение: JavaScript-файлы объединены в один.
Оптимизация: все JavaScript-файлы минимизированы (можно добавить суффикс .min к названию).

Minify Resources (HTML, CSS, and JavaScript).

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

Guidelines for Developing Secure Applications Utilizing JavaScript.

Async или defer: JavaScript-файлы загружаются асинхронно при помощи атрибута async, или используют атрибут defer, который запускает скрипт только после полной загрузки страницы.

Remove Render-Blocking JavaScript.

Modernizr: если нужно добавить на сайт специфическую функцию, то можно использовать JS-библиотеку Modernizr. Она определяет, какие возможности HTML, CSS, JS поддерживает браузер пользователя.

Modernizr.

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

ESLint: JavaSript-код проверен в ESLint, исправлены ошибки.

ESLint — The pluggable linting utility for JavaScript and JSX.

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

Проверьте сайт

securityheaders.io — проверяет HTTP-заголовки безопасности.
Observatory by Mozilla — указывает на слабые места в безопасности.
ASafaWeb — Automated Security Analyser for ASP.NET Websites.

HTTPS: HTTPS используется не только на всех страницах, но и для внешних элементов — плагины, изображения.

Let’s Encrypt — Free SSL/TLS Certificates.
Free SSL Server Test.
Strict Transport Security.

HTTP Strict Transport Security (HSTS): настроен HSTS, принудительно активирующий соединение через HTTPS.

Check HSTS preload status and eligibility.
HTTP Strict Transport Security Cheat Sheet — OWASP.
Transport Layer Protection Cheat Sheet — OWASP.

Межсайтовая подделка запроса (CSRF): чтобы предотвратить CSRF, вы должны быть уверены, что запросы на сервер происходят именно с вашего сайта или приложения.

Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet — OWASP.

Межсайтовый скриптинг (XSS): На странице или сайте не должно быть XSS-запросов.

XSS (Cross Site Scripting) Prevention Cheat Sheet — OWASP.
DOM based XSS Prevention Cheat Sheet — OWASP.

Content Type Options: в Google Chrome и Internet Explorer предотвращает попытки mime-сниффинговых атак и подмены типов mime на отличные от тех, что были заявлены на сервере.

X-Content-Type-Options — Scott Helme.

X-Frame-Options (XFO): посетители сайта защищены от кликджекинга.

X-Frame-Options — Scott Helme.
RFC7034 — HTTP Header Field X-Frame-Options.

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

Вес страницы: каждая страница весит до 500 Кб.

Website Page Analysis.
Size Limit: Make the Web lighter.

Оптимизация: HTML-код минимизирован.

W3C Validator.

Отложенная загрузка элементов (Lazy loading): изображения, скрипты и CSS-стили загружаются по мере пролистывания страницы, чтобы уменьшить время отзыва сайта.
Размер Cookies: если вы используете cookies, то проверьте, чтобы размер каждого файла был бы не более 4096 байтов, а общее количество файлов не превышало 20.

Cookie specification: RFC 6265.
Cookies.
Browser Cookie Limits.

Компоненты сторонних разработчиков: сторонние фреймы iframe и внешние скрипты JS (например, кнопки «поделиться») заменены на статические элементы, где это возможно. Это ограничивает количество вызовов внешних API и сохраняет в тайне от сторонних сервисов действия пользователей на вашем сайте.

Simple sharing buttons generator.

Запросы

Explanation of the following techniques.

DNS-prefetch: время загрузки DNS других сайтов сокращается благодаря использованию предсказывающих страниц с dns-prefetch.

<link rel="dns-prefetch" href="https://example.com">

Preconnection: поиск DNS, установка TCP и TLS-связи с сервисами, которые скоро понадобятся, выполняется заранее во время простоя с помощью preconnect.

<link rel="preconnect" href="https://example.com">

Prefetching: ресурсы, которые скоро понадобятся (например, изображения при ленивой загрузке) загружаются браузером заранее и помещаются в кэш с помощью prefetch.

<link rel="prefetch" href="image.png">

Preloading: ресурсы, которые будут нужны на текущей странице (например, скрипты, находящиеся в конце тега Body), можно загрузить с помощью
preload.

<link rel="preload" href="app.js">

Difference between prefetch and preload.

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

Google PageSpeed: все страницы сайта (не только домашняя) были протестированы в Google PageSpeed и набрали по крайней мере 90 очков из 100.

Google PageSpeed.
Test your mobile speed with Google.
WebPagetest — Website Performance and Optimization Test.

Доступность

Посмотрите плейлист A11ycasts с Rob Dodson (англ.).

Progressive enhancement: Большинство функций сайта, например, навигация или поиск, должны работать с выключенным JavaScript.

Enable / Disable JavaScript in Chrome Developer Tools.

Цветовой контраст: цветовой контраст сайта соответствует стандарту WCAG AA (для мобильных — AAA).

Contrast ratio.

Заголовки

H1: на всех страницах присутствует заголовок H1, который отличается от названия сайта, заданного в title.
Заголовки: заголовки использованы в правильном порядке — от H1 до H6.

Why headings and landmarks are so important — A11ycasts #18.

Landmarks

Role banner: для тега Header указан атрибут role=«banner».
Role navigation: для Nav — атрибут role=«navigation».
Role main: для Main указан атрибут role=«main».

Using ARIA landmarks to identify regions of a page.

Семантика

Использованы разные типы input-ов на HTML5: это важно для мобильных устройств, потому что для разных типов вводимых данных они показывают по-разному выглядящие клавиатуры.

Mobile Input Types.

Формы

Label: связан с каждым отдельным input-ом в элементах формы. Если label не может быть отображен, нужно использовать aria-label.

Using the aria-label attribute — MDN.

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

Стандарты тестирования доступности: чтобы протестировать страницу, используйте WAVE.

Wave testing.

Навигация с помощью клавиатуры: проверьте свой сайт, пользуясь только клавиатурой. Все элементы на сайте должны быть доступны для использования.
Скрин-ридер: все страницы сайта должны работать в программах для чтения информации (VoiceOver, ChromeVox, NVDA или Lynx).
Фокус: если фокус для элементов отключен, он заменяется видимым в CSS состоянием.

Managing Focus — A11ycasts #22.

SEO

Google Analytics: Google Analytics установлен и корректно работает.
Заголовки: текст в заголовках помогает понимать информацию на текущей странице.
sitemap.xml: создана карта сайта sitemap.xml и отправлена в Google Search Console (Google Webmaster Tools).
robots.txt: файл robots.txt не блокирует страницы сайта.

Проверить robots.txt с помощью Google Robots Testing Tool.

Структурированные данные: помогают поисковым роботам понимать информацию на страницах. Поэтому страницы должны быть протестированы и не содержать ошибок.

Introduction to Structured Data — Search — Google Developers.
Проверьте сайт с помощью Structured Data Testing Tool.
Полный список классов для структурирования данных можно найти на Schema.org.

HTML-карта сайта: работает и доступна в футере сайта.

Sitemap guidelines — Google Support.
Sitemap generator.

От редакции

Онлайн-курсы Нетологии по теме:

курс «HTML-верстка: с нуля до первого макета»;
курс «Адаптивная и мобильная верстка»;
профессия «Frontend-разработчик»;
профессия «Веб-разработчик»;
бесплатный курс для начинающих «HTML и CSS с нуля».

Теги:

Хабы:

Чеклист фронтенд-разработчика

Содержание

Как пользоваться

Head

Мета-теги

HTML-теги

Мета-теги для социальных сетей

HTML

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

Шрифты

CSS

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

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

Изображения

JavaScript

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

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

Проверьте сайт

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

Запросы

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

Доступность

Заголовки

Landmarks

Семантика

Формы

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

SEO

От редакции

Публикации

Информация