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

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

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

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

Содержание

  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"

МЕРОПРИЯТИЯ

Хакатон Т1 2024
26 ноября Москва Онлайн Бесплатно

Хакатон Норникеля:Интеллектуальные горизонты
02 декабря Онлайн Бесплатно

Angular meetup #23
28 ноября Москва Онлайн Бесплатно

ЕВРАЗ 3.0
27 ноября Москва Онлайн Бесплатно

ВАКАНСИИ

Добавить вакансию
Senior Java Developer
Москва, по итогам собеседования
Java Team Lead
Москва, по итогам собеседования

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