admin 26 октября 2017
Frontend
0
26922

Чек-лист идеального сайта

Идеальный чек-лист сайта для вас может стать шпаргалкой, которую вам стоит использовать перед запуском вашего сайта или внесения правок в него.

Чек-лист основан на многолетнем опыте фронтенд - разработчиков. Давайте взглянем на него:

Содержание

  1. Заголовок;
  2. HTML;
  3. Веб-шрифты;
  4. CSS;
  5. Изображения;
  6. JavaScript;
  7. Безопасность;
  8. Производительность;
  9. Доступность;
  10. SEO.

Все элементы в чек-листе сайта необходимы для большинства проектов, но некоторые элементы не являются существенными (например, вам не понадобится RSS-канал, если у вас сайт - визитка).

В нашей статье мы используем 3 уровня важности элементов:

Низкая важность элемента означает, что элемент рекомендуется, но может не использоваться в некоторых конкретных ситуациях.

Средняя важность элемента означает, что элемент настоятельно рекомендуется. Но все таки может не использоваться в конкретных случаях. Некоторые элементы, если их пропустить, могут иметь плохие последствия с точки зрения производительности или SEO.

Высокая важность элемента означает, что элемент не может быть пропущен. В первую очередь стоит начинать тестирование именно с этих элементов.

У некоторых ресурсов есть смайлик, который поможет вам понять, что мы имеем в виду:

  • ?: Документация или статья;
  • ?: Онлайн инструмент;
  • ?: Медиа контент.

Приступим к обзору чек-листа.

Заголовок

Здесь вы сможете найти список всего, что должно быть в теге head HTML - документа.

Метатеги

[ ] Doctype: предназначен для указания типа текущего документа. Этот мета тег всегда находится в самом начале странички и имеет вот такой вид:

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

Следующие 3 метатега (Charset, X-UA Compatible и Viewport) должны быть первыми в теге head.

[ ] Charset: метатег, предназначенный для объявления кодировки документа.

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

[ ] X-UA-Compatible: метатег, предназначенный для указания версии Internet Explorer. Указание версии необходимо для комфортного отображения сайта.

<!-- Использование браузера Microsoft Edge, вместо Internet Explorer -->
<meta http-equiv="x-ua-compatible" content="ie=edge">

[ ] Viewport: с помощью этого метатега мы указываем, как должен выглядеть наш сайт на разных платформах и устройствах.

<!-- Viewport для адаптивного веб-дизайна -->
<meta name="viewport" content="width=device-width, initial-scale=1">

[ ] Title: Название используется на всех страницах (SEO: не более 65 символов, включая название сайта).

<!-- Название страницы -->
<title>Page Title less than 65 characters</title>

[ ] Description: С помощью этого метатега мы указываем метаописание страницы. Оно уникально и не может иметь более 150 символов.

<!-- Метаописание -->
<meta name="description" content="Description of the page less than 150 characters">

[ ] Favicons: данный метатег предназначен для задания иконки сайта. Если у вас есть только favicon.ico, поместите его в корень вашего сайта.  По - прежнему хорошей практикой является ссылка на него, используя приведенный ниже пример. Иконка рекомендуется в формате PNG (размеры: 32x32px).

<!-- Стандартная иконка -->
<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">

[ ] Apple Touch Icon: создание значка для Apple устройств.

<!-- Иконка Apple -->
<link rel="apple-touch-icon" href="/custom-icon.png">

[ ] Canonical: Используйте rel = "canonical", чтобы избежать дублирования контента.

<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">

HTML теги

[ ] Language tag: указание языка вашего сайта.

<html lang="ru">

[ ] Alternate language: указание языка одной из ваших страниц вашего сайта.

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

[ ] RSS feed: Если ваш проект является блогом или имеет статьи,то обязательно должна быть ссылка на RSS ленту вашего сайта.

[ ] CSS Critical: данный тег собирает все CSS, используемые для визуализации в видимой части страницы. Он встроен перед вашим основным вызовом CSS и между <style></ style>.

Социальные метатеги

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

[ ] Facebook Open Graph: Facebook Open Graph (OG) необходим для тех, кто использует для своего сайта группу или страницу в Facebook.

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

[ ] 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="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

HTML

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

[ ] HTML5 Semantic Elements: Семантические элементы HTML5 используются соответствующим образом (заголовок, раздел, нижний колонтитул, основной ...).

[ ] Error pages: Ошибка 404 и 5xx. Помните, что страница ошибок 5xx должна иметь встроенный CSS (без внешнего вызова на текущем сервере).

[ ] Noopener: Если вы используете внешние ссылки с target = "_ blank", ваша ссылка должна иметь атрибут rel = "noopener", чтобы запретить табуляцию вкладок. Если вам нужно поддерживать более старые версии Firefox, используйте rel = "noopener noreferrer".

[ ] Clean up comments: Ненужный код необходимо удалить перед публикацией сайта или страницы.

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

[ ] W3C compliant: Все страницы должны быть протестированы с помощью валидатора W3C для определения возможных проблем в HTML-коде.

[ ] HTML Lint: Используйте инструменты, которые помогут проанализировать любые проблемы, возникающие в HTML-коде.

[ ] Desktop Browsers: Все страницы должны быть протестированы на всех современных настольных браузерах (Safari, Firefox, Chrome, Internet Explorer, EDGE ...).

[ ] Mobile Browsers: Все страницы должны быть протестированы на всех современных мобильных браузерах (Native browser, Chrome, Safari…).

[ ] Link checker: Убедитесь, что на вашем сайте отсутствуют битые ссылки.

[ ] Adblockers test: Веб-сайт должен правильно демонстрировать ваш контент, с включенными рекламными блоками.

Шрифты

[ ] Webfont format: шрифты WOFF, WOFF2 и TTF поддерживаются всеми современными браузерами.

[ ] Webfont size: Размеры шрифтов не должны превышать 2 МБ.

CSS

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

[ ] Responsive Web Design: Убедитесь, что ваш веб-сайт использует адаптивный веб-дизайн.

[ ] CSS Print: Каждой странице соответствует корректная таблица стилей.

[ ] Preprocessors: На вашей странице используется препроцессор CSS (предпочтение отдается Sass).

[ ]  Unique ID: Если используются идентификаторы, то они должны быть уникальны для каждой страницы.

[ ] Reset CSS: Сброс CSS (сброс, нормализация или перезагрузка) используется. (Если вы используете CSS-структуру, такую как Bootstrap или Foundation, в нее уже включен Normalize).

[ ] JS prefix: Все классы JavaScript tначинаются с js- и не используются в CSS-файлах.

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

[ ] CSS embed or line: Избегайте любой ценой использования встроенного CSS: используется только по уважительным причинам (например: background-image для слайдера, критический CSS).

[ ] Vendor prefixes: Префиксы поставщика CSS используются и генерируются соответственно совместимости с поддержкой браузера.

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

[ ] Concatenation: Файлы CSS объединены в один файл.

[ ] Minification: Все файлы CSS уменьшены.

[ ] Non-blocking: Файлы CSS должны быть неблокируемыми, чтобы не отнимать время загрузки сайта.

[ ] Unused CSS: Удалите неиспользуемый CSS код.

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

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

[ ] Responsive web design: Все страницы были протестированы на следующих разрешениях: 320 пикселей, 768 пикселей, 1024 пикселей (может быть больше).

[ ] CSS Validator: CSS файлы были протестированы, и исправлены соответствующие ошибки.

[ ] Reading direction: Все страницы должны быть протестированы для языков LTR и RTL, если они нуждаются в их поддержке.

Изображения

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

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

[ ] Optimization: Все изображения должны быть оптимизированы для отображения в браузере.

  • ? Imagemin
  • ? Используйте ImageOptim для оптимизации ваших изображений.

[ ] Sprite: Маленькие изображения находятся в файле CSS спрайтов (в случае значков они могут быть в виде спрайта SVG).

[ ] Width and Height: Убедитесь, что все <img> имеют ширину. И ширину не указывайте в px или %.

Многие разработчики предполагают, что ширина и высота несовместимы с адаптивным веб-дизайном. Это абсолютно не так.

[ ] Alternative text:  Убедитесь, что все<img> имеют альтернативный текст, который визуально описывает изображение.

JavaScript

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

[ ] JavaScript Inline:  Убедитесь, что у вас нет встроенного JavaScript-кода (смешанного с вашим кодом HTML).

[ ] Concatenation: Файлы JavaScript объединены в одном файле.

[ ] Minification: Файлы JavaScript уменьшены (вы можете добавить суффикс .min).

[ ] Non-blocking: Файлы JavaScript загружаются асинхронно, используя async или отложено с использованием атрибута defer.

[ ] Modernizr: Если вам нужно настроить таргетинг на некоторые специальные функции, вы можете использовать пользовательский Modernizr для добавления классов в свой тег <html>;

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

[ ] ESLint: нету ошибок ESLint (на основе правил конфигурации или стандартов).

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

Сканирование и проверка вашего веб-сайта

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

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

[ ] HTTP Strict Transport Security (HSTS): Заголовок HTTP настроен на «Strict-Transport-Security».

[ ] Cross Site Request Forgery (CSRF): Вы гарантируете, что все запросы, сделанные на вашей серверной стороне, являются законными и приходят с вашего сайта / приложения, чтобы предотвратить атаки CSRF.

[ ] Cross Site Scripting (XSS): На вашей странице или веб-сайте нет проблем с XSS.

[ ] Content Type Options: Предотвращает попытку Google Chrome и Internet Explorer анализа типа содержимого ответа сервера.

[ ] X-Frame-Options (XFO): Защищает ваших посетителей от атак с помощью кликов.

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

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

[ ] Weight page: Вес каждой страницы составляет от 0 до 500 КБ.

[ ] Minified: Ваш HTML минимизирован.

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

[ ] Cookie size: Если вы используете файлы cookie, убедитесь, что каждый файл cookie не превышает 4096 байт, а ваше доменное имя не содержит более 20 файлов cookie.

Оптимизация запросов

[ ] DNS resolution: DNS сторонних служб, которые могут потребоваться, предварительно разрешаются в режиме простоя с использованием dns-prefetch.

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

[

] Preconnection: Поиск DNS, согласование TCP и согласование TLS с службами, которые понадобятся в ближайшее время, выполняются заранее во время простоя с использованием preconnect.

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

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

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

[ ] Preloading: Ресурсы, необходимые на текущей странице (например, скрипты, размещенные в конце <body>) загружаются предварительно.

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

? Difference between prefetch and preload

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

[ ] Google PageSpeed: Все ваши страницы были протестированы (не только главная страница) и имеют оценку не менее 90/100.

Доступность

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

[ ] Progressive enhancement: Основные функции, такие как основная навигация и поиск, должны работать без включенного JavaScript.

[ ] Color contrast: Цветовая контрастность должна, по крайней мере, должна соответствовать WCAG AA (AAA для мобильных устройств).

Заголовки

[ ] H1: На всех страницах есть заголовок H1, который не является названием веб-сайта.

[ ] Headings: Заголовки должны использоваться нужным образом в правильном порядке (от H1 до H6).

Навигация

[ ] Role banner: <header> имеет role="banner".

[ ] Role navigation: <nav> имеет role="navigation"

[ ] Role main: <main> имеет role="main"

Семантика

[ ] Specific HTML5 input types are used: Это особенно важно для мобильных устройств, которые показывают индивидуальные клавиатуры и виджеты для разных типов.

Формы

[ ] Label: Метка связана с каждым элементом входной формы. В случае, если ярлык не может быть отображен, вместо этого используйте aria-label.

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

[ ] Accessibility standards testing: Используйте инструмент WAVE, чтобы проверить, соответствует ли ваша страница стандартам доступности.

[ ] Keyboard navigation: Проверяйте свой сайт, используя только свою клавиатуру. Все интерактивные элементы должны быть доступны для использования.

[ ] Screen-reader: Все страницы были протестированы в режиме чтения (VoiceOver, ChromeVox, NVDA или Lynx).

[ ] Focus style: Если фокус отключен, он заменяется видимым состоянием в CSS.

SEO

[ ] Google Analytics: Google Analytics установлен и правильно настроен;

[ ] Headings logic: Заголовок текста помогает понять содержание на текущей странице.

[

] sitemap.xml: Файл sitemap.xml существует и был отправлен в Google Search Console (инструмент Google для веб-мастеров).

[ ] robots.txt: Файл robots.txt не блокирует веб-страницы.

[ ] Structured Data: Страницы, с использованием структурированных данных, тестируются, и без ошибок. Структурированные данные помогают понимать содержимое на текущей странице.

[ ] Sitemap HTML: Карта сайта HTML доступна по ссылке в нижнем колонтитуле вашего сайта.

Перевод статьи "Front-end checklist"

ВАКАНСИИ

Добавить вакансию
Разработчик C++
Москва, по итогам собеседования

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ