[Перевод] Чеклист фронтенд-разработчика01.02.2018 19:03

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

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

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

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

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

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

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

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-устройствах. (Разрешение файла должно быть 200×200 px, чтобы иконка хорошо отображалась на всех устройствах).
  

Configuring Web Applications.

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

Browser configuration schema reference
	

• Xml-разметка для файла browserconfig.xml выглядит так, как на примере:
  

Browser configuration schema reference.

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

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

HTML-теги

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

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

dir — HTML — MDN.

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

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

 Код для браузера Internet Explorer 

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×315 px, а лучше 1200×630 px.
  

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

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

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.
  

• Тег 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.
  

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.
  

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

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

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

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 с нуля».