Вернуться на предыдущую страницу
Главная
Видео: Общие рекомендации по созданию и оптимизации web-сайтов. Оптимизация веб-производительности/Адаптив/SEO/Accessibility (доступность) / UI/UX
2023-12-12 17:41:37

Видео: Общие рекомендации по созданию и оптимизации web-сайтов. Оптимизация веб-производительности/Адаптив/SEO/Accessibility (доступность) / UI/UX

Подробности

Друзья, перед Вами большой мой труд, который позволит Вам создать сайт своей мечты и/или улучшить уже имеющийся проект до уровня «Enterprise». За счёт этого пятичасового видео Вы усовершенствуете свои навыки в области создания, продвижения, оптимизации сайтов.

Вся информация абсолютно без оплаты. За информацию из данного видео нормальные люди берут большие деньги. Но считайте меня ненормальным!

Оптимизация, адаптивность, метаданные, семантика, SEO, анимации, доступность

Больше информации в репозитории:

https://github.com/inverser-pro/check-image-webp-avif-js

Временные метки видео:

0:00 Вступление
1:09 Где можно найти документ AWWWARDS?
3:13 Начнём сначала)
4:44 +1. Оптимизация web-производительности
12:55 Включение сжатия данных Gzip/Brotli на сервере
17:16 Ограничение скорости загрузки сайта в браузере (Fast 3G, Slow 3G, Offline)
24:34 Правильная загрузка файлов
22:26 Приоритет загрузки файлов в браузере
25:10 Критический путь рендеринга содержимого web-страницы
27:02 Как ускорить рендринг web-страницы?
30:00 JS, блокирующий рендеринг, отложенный синтаксический анализ, асинхронные скрипты, отложенная загрузка скриптов
32:06 Минимизация CSS и JavaScript файлов
34:35 Оптимизирование, сжатие и отложенные медиафайлы
37:19 Команда для форматирования изображений в WEBP, AVIF, разные разрешения (imageMagic)
39:42 Экраны с Retina
39:59 Примеры HTML элемента picture
42:26 Пояснение на счёт Retina, Viewport и разрешения экрана
43:29 Примеры размещения изображений
44:09 Пример асинхронного запроса и динамической генерации HTML на Native JS
55:46 Использование CDN и особенности его использования
58:06 Проверка возможности кеширования файлов для разных сайтов
1:01:34 Пояснение для чего необходим CDN сегодня
1:02:42 Уровни кэширования
1:04:20 Заголовки для кеширования в браузере
1:04:46 Просмотр заголовков в браузере для каждого файла (Expires или Cache-Control)
1:05:52 Снижение количества запросов DNS для Вашего сайта
1:09:34 Пример JS кода, который загрузит скрипты и стили асинхронно
1:11:17 Используйте меньше JS
1:15:33 Используйте ленивую загрузку iframes
1:16:20 Как не грузить весь YouTube плеер через iframe
1:19:11 Адаптивные изображения
1:19:31 Разные способы добавления SVG на сайт
1:22:58 data URI вместо файла изображения
1:26:55 Проверяйте сайт на наличие JS ошибок в консоли
1:31:56 Браузер — лишь программа, которая слушает Ваши команды
1:34:48 Использование HTTPS и HTTP/2 (HTTP/3) на Вашем ресурсе
1:37:16 Проверка HTTP2, HTTP3 в консоли разработчика
1:38:22 Разница между загрузкой сайта по HTTP1, HTTP2, HTTP3
1:40:52 Разница между одним и тем же браузером в разных операционных системах
1:43:13 LightHouse и его показатели
1:45:47 Проверка рендеринга сайта с помощью инструмента Perfomance
1:48:10 Проверяйте актуальность размеров файлов изображений (скриптов, стилей, видео и т.п.)
1:50:52 +2. RWD/Mobile — адаптивность сайта (адаптивный дизайн)
1:53:09 Проверка адаптивного дизайна сайта в Вашем браузере
1:55:41 Соблюдайте размер шрифтов, следите за отсутствием гориз. полос прокрутки
1:56:49 светлая/тёмная темы сайта
2:00:41 Эмулирование светлой/тёмной темы браузера
2:01:35 Пояснения значений показателей LightHouse
2:14:34 Пример CSS слайдера (без JS) и зачем он нужен?
2:21:27 Гибкая компоновка на основе сетки / гибкий пользовательский интерфейс
2:27:32 Пример вставки HTML5 элемента picture и разных форматов изображений
2:30:25 lozad js — библиотека для мягкой загрузки изображений
2:32:08 Удобочитаемость и отзывчивая типографика
2:37:10 Метатег окна просмотра и другая информация, связанная с «head». (viewport)
2:38:21 Retina и плотность пикселей
2:41:09 Правильный пользовательский ввод
2:41:26 Соответствующий размер тап-целей
2:44:25 Проверка работы сайта на разных устройствах/платформах
2:46:05 +3. Разметка/метаданные
2:50:19 Проверка правильности написания HTML сайта на validator.w3.org
2:55:23 Неидеальность удобства Google переводчика
2:57:54 Навигация по сайту с помощью ссылок и hash данных из них
2:59:11 Использование ссылок там, где они действительно необходимы
3:00:25 Сохранение данных из формы — идея
3:04:27 Разметка структурированных метаданных и микроданные
3:06:07 Немного aria-микроразметки и ввода в доступность
3:08:22 Изображения с подписями, alt, width, height и src
3:09:22 Семантическая связанность элементов на странице
3:13:33 Favicon.ico разных размеров
3:16:57 +4. Семантика (Semantics) / SEO
3:20:40 Правильная структура URL адресов
3:25:45 Подходящий «якорный» текст
3:26:48 rel="canonical" борьба с дубликатами ссылок
3:31:11 Семантическая разметка HTML5
3:34:34 HTML-страница Sitemap на сайте
3:35:35 XML Sitemap для поисковых роботов
3:37:30 Robots.txt
3:37:44 Примеры Robots.txt, XML Sitemap
3:39:40 Навигационные подсказки rel="next"...
3:46:23 +5. Анимация/переходы
3:55:41 CSS transition, easing
4:02:56 Анимационные библиотеки/фреймворки
4:09:17 Показываю ошибку в браузере [while(true)] — утечки памяти
4:11:22 CSS/JS анимации
4:17:17 Пример, где можно использовать анимации переходов между страницами
4:19:05 Выводы по разделу анимации
4:21:27 +6. Доступность
4:24:32 Доступность управления сайтом с клавиатуры
4:27:51 Тег A для большой области — лучше так НЕ делать
4:33:54 aria-hidden="true"
4:34:38 WAI-WCAG Принципы проектирования
4:50:10 Режим высокой контрастности
4:54:04 Подвожу итоги
4:54:08 послесловие...
4:54:11 Оптимизация сайта со стороны сервера (backend)
4:54:31 Полезно почитать
5:03:33 До новых встреч

Development

award guidelines.

 

 

Вы заметите, что система судейства разделена на 6 категорий, каждая из которых имеет разный относительный вес:
 

  1. WPO 0.20
  2. RWD / Mobile 0.20
  3. Markup / Metadata 0.15
  4. Semantics / SEO 0.20
  5. Animations / Transitions 0.15
  6. Accessibility 0.10

 

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

 

Поскольку это открытый и постоянный документ, предложения и дополнения всегда приветствуются! Не стесняйтесь отправить электронное письмо на oscar@awwwards.com 

 

 

 

 

 

1. Оптимизация веб-производительности


 “Прежде всего, скорость — это больше, чем функция. Скорость — самая важная характеристика. Если ваше приложение работает медленно, люди не будут его использовать.” Fred Wilson

 

"WPO похож на SEO в том смысле, что оптимизация веб-производительности увеличивает трафик на ваш веб-сайт. Но WPO не останавливается на достигнутом. WPO также улучшает взаимодействие с пользователем, увеличивает доход и снижает эксплуатационные расходы." Steve Souders

ЦЕЛИ

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

 

КОНТРОЛЬНЫЙ СПИСОК

  • Включить сжатие/Gzip/Brotli.
  • Критический путь рендеринга, загрузка, анализ и порядок загрузки ресурсов.
  • JS, блокирующий рендеринг, отложенный синтаксический анализ, асинхронные скрипты, отложенная загрузка скриптов.
  • Отдайте предпочтение видимому контенту/контенту в верхней части страницы.
  • Минимизируйте CSS и JavaScript.
  • Оптимизированные, сжатые и отложенные медиафайлы (форматы изображений, спрайты, видео).
  • Использование CDN.
  • Уровни кэширования (используйте кэширование браузера, CDN, веб-сервер и сервер приложений).
  • Заголовок Expires или Cache-Control.
  • Уменьшить количество запросов DNS.
  • Меньше перенаправлений.
  • Меньше сторонних плагинов.
  • Нет iframes (либо отложенный их запуск).
  • Избегайте фильтров.
  • Адаптивные изображения. Масштаб, форматы, сжатие, ленивая/отложенная загрузка.
  • Встроенные сценарии, стили и изображения (SVG, Data URI).
  • Прогрессивное улучшение/мягкое ухудшение.
  • Таблицы стилей вверху / сценарии внизу.
  • Условная загрузка, Ленивая загрузка.
  • Нет журналов консоли или сообщений об ошибках.
  • Производительность рендеринга.
  • HTTPS и HTTP/2 (HTTP/3).
  • Работает кроссбраузерно/кроссплатформенно.

 

СООТВЕТСТВУЮЩИЕ ПОКАЗАТЕЛИ

  • Время загрузки страницы и время выше сгиба (Page Load Time and Above The Fold Time).
  • Всего HTTP-запросов.
  • Общее количество и вес файлов.
  • Количество и вес мультимедиа (изображения, видео, вставки, iFrames, объекты).
  • Всего доменов  (DNS запросы).
  • Всего сторонних зависимостей (аналитика, ретаргетинг, реклама, социальные виджеты, фреймворки, библиотеки, плагины, веб-сервисы).

 

 


 2. RWD / Mobile (адаптивный дизайн)

 

ЦЕЛИ

  • Согласованное взаимодействие с пользователем в различных модулях приложений и виджетах, независимо от размера экрана пользователя или функций, поддерживаемых на его устройстве.
  • Четкие и унифицированные принципы дизайна веб-сайтов, реализация и привлекательность для разных устройств.
  • Важный контент и функции, доступные для различных типов пользовательских методов ввода (например, нажатие /click/, пролистывание /swipe/, касание /tap/).

 

КОНТРОЛЬНЫЙ СПИСОК

  • Гибкая компоновка на основе сетки / гибкий пользовательский интерфейс.
  • “Резиновые” носители (изображения, видео, вставки, iFrames, объекты).
  • Адаптивные изображения и оптимизация медиа.
  • Согласованность через медиа-запросы/точки останова на разных устройствах.
  • Производительность (скорость, время загрузки и т.д.).
  • Удобочитаемость и отзывчивая типографика.
  • Условная загрузка / Ленивая загрузка.
  • Прогрессивное улучшение/мягкая деградация.
  • Метатег окна просмотра и другая информация, связанная с <head>. (viewport)
    <meta name="viewport" content="width=device-width, initial-scale=1">
  • // Обнаружение ie=edge по UserAgent. (уже не актуально для большинства случаев)
  • Retina и плотность пикселей.
  • Правильный пользовательский ввод.
  • Соответствующий размер тап-целей (при вводе данных, при нажатии кнопок, на моб./планшетах).
  • Схемы навигации RWD (отзывчивый/”резиновый” дизайн).
  • Работает кроссбраузерно/кроссплатформенно.

 

 

3. Разметка/метаданные 

 

ЦЕЛИ

  • Модель секционирования HTML, соответствующее использование его элементов и их структурных и семантических значений.
  • Использование наиболее значимой, но минимальной разметки, необходимой для представления стилей и необходимого взаимодействия.
  • Правильная информационная иерархия контента, чтобы пользователи, браузеры и поисковые системы могли более точно понимать и взаимодействовать с ним.

 

КОНТРОЛЬНЫЙ СПИСОК

  • Действительная (совместимая со стандартами) HTML-разметка.
  • Тип документа, язык и кодировка символов.
  • Элементы документа и глобальные атрибуты (заголовок, язык, основа, ссылка, мета, стиль, перевод) [семантика].
  • Стандартные метаданные (описание, ключевые слова/понятия, срок действия, генерация, язык, область просмотра, автор, тип контента, мобильное веб-приложение и т. д.).
  • Разметка структурированных метаданных и микроданные.
  • OpenGraph, Schema.org, Twitter Cards, Pinterest и социальная интеграция.
  • Изображения с подписями, alt, width, height и src.
  • Структура документа/организация/связность.
  • Удобочитаемость, отступы, использование пробелов и комментариев.
  • Описательные имена переменных и соглашения о семантических именах.
  • Интерактивные элементы должны соответствовать их назначению: ссылка — a, кнопка — button и т.п.
  • Favicon.ico разных размеров (и форматов, напр. Svg, avif) и с возможностью кэширования.

 

СОВЕТ

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

 

 

 

4. Семантика (Semantics) / SEO 

 

“Помимо SEO, еще одним преимуществом семантической разметки является то, что она обеспечивает основу для доступного сайта.” Sarah Lewis


 

ЦЕЛИ

 

  • Надлежащая информационная иерархия контента, чтобы пользователи, браузеры и поисковые системы могли более точно понимать и взаимодействовать с ним.
  • Модель секционирования HTML, соответствующее использование его элементов и их структурных и семантических значений.
  • Внедрение лучших практик и методов, помогающих Google и другим поисковым роботам находить, индексировать, ранжировать и отображать веб-сайт и его содержимое.

 

КОНТРОЛЬНЫЙ СПИСОК

 

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

(название, описание, ключевые слова, срок действия, язык, автор, издатель и т. д.).

  • Улучшенная структура URL (дефисы, нижний регистр, удобочитаемый, краткий, использование ключевых слов, отсутствие динамических параметров и т. д.).
  • Производительность и время загрузки (style.css > style.min.css).
  • Изображения: атрибут «alt», описывающий информацию, относящуюся к изображению (краткие, но описательные имена файлов и замещающий текст).
  • Подходящий якорный текст. <a href="#check-image-webp-avif-js">
  • Канонизация (rel="canonical").
  • Разметка структурированных метаданных и микроданные.
  • Социальные метатеги / Schema.org (itemscope, itemprop-name, description, image)
  • Социальные метатеги / протокол Open Graph (og:title, og:type, og:image, og:url, og:description, fb:admins; twitter:card, ).
  • Наборы данных RDFa, микроданных и микроформатов
  • Объявление языка в элементе HTML.
  • Количество длинных слов.
  • Семантическая разметка HTML5 (навигация, страница, раздел, нижний колонтитул и т. д.).
  • Семантические заголовки HTML5 (h1, h2 ... p и т. д.), чтобы подчеркнуть релевантность.
  • HTML-страница Sitemap на сайте.
  • XML Sitemap для поисковых роботов.
  • Robots.txt/Ограничение сканирования: стандарты исключения (nofollow, noindex и т. д.)

и наиболее подходящие пользовательские агенты.

  • Rel="next" и rel="prev" для нумерации страниц.
  • Rel="alternate" href="/x" (для ссылки на версию страницы или сайта на другом языке).
  • Качественный опыт (скорость, репутация, орфографические ошибки, битые ссылки).
  • Качественный контент (удобный для мобильных устройств, уникальный, оригинальный, актуальный, текстовый контент).
  • Использование текста для навигационных ссылок и содержимого.
  • Избегайте дублирования контента (канонизация или переадресация 301).
  • Избегайте переадресаций или используйте их правильно (301, 307 и т. д.)
  • Минимизируйте 404 (используйте переадресацию 301).
  • Надлежащие гиперссылки (HTML-ссылки через JS, «nofollow» для ненадежного или платного контента и т. д.). <a href=”123” rel=”nofollow, noopener”>text</a>

Use caniinclude site > div в span?

 

 

 

5. Анимация/переходы

 

“Анимации наиболее полезны, когда они отражают и усиливают семантические отношения между элементами: например, «этот комментарий относится к этой статье» или «эти пункты меню являются частью этого меню». Вы не можете рассматривать отдельные экраны как отдельные объекты: для пользователя весь опыт представляет собой одно непрерывное пространство..” Amin Al Hazwani

 

ЦЕЛИ

 

  • Последовательная стратегия анимации и плавное исполнение на всех страницах веб-сайта и взаимодействия с пользователем, такие как кнопки при нажатии/наведении курсора, ползунки, переходы между разделами и т. д.
  • Анимационный подход, который улучшает взаимодействие с пользователем, рассказывая историю, предоставление визуальной обратной связи и информации пользователям о том, что только что произошло (например, при нажатии, наведении, успешной или неудачной отправке формы и т. д.) или о том, что делать дальше (например, предварительные загрузчики).

* Пожалуйста, рассмотрите только анимацию сценариев в реальном времени, а не видео или последовательности изображений..

 

КОНТРОЛЬНЫЙ СПИСОК

  • Плавная, быстрая и стабильная частота кадров.
  • Смягчения, тайминги, ритм, привлекательность.
  • Баланс и последовательность: избегайте слишком медленной, слишком быстрой, слишком частой или слишком разной анимации.
  • 2D/3D анимации и макеты.
  • Математика, физика и методы динамической/случайной генерации.
  • Анимационные библиотеки/фреймворки.
  • Сборщик мусора; оптимизация WEBGL (ThreeJS), GLSL, (WEBGPU); тестирование графического процессора; утечки памяти.
  • Реализация параллаксной прокрутки.
  • CSS/JS анимации.
  • Работает кроссбраузерно.

 

LINEAR, INTERACTIVE AND TRANSITIONAL

  • Линейная анимация: анимация ключевых кадров, которая запускается без взаимодействия с пользователем или запускается простым действием пользователя — при прокрутке, щелчке и т. д..
  • Интерактивная анимация: динамическая анимация, основанная на взаимодействии с пользователем (мышь, клавиатура, путь навигации, обнаружение движения и т. д.) или других переменных, основанных на сложных сценариях, включая математику, физику, характеристики устройства, контекст и т. д.
  • Анимация перехода: анимация между разделами или основными страницами сайта.

Обычно включает в себя широкое использование функций, связанных с сайтом: AJAX, Fetch, история URL-адресов, удобная реализация «Загрузка пользовательского интерфейса» и т. д.

 

ТИПЫ АНИМАЦИИ

  • Процедурная анимация: классическое движение во времени.
  • Репрезентативная анимация: объекты меняют форму во время анимации,

как анимация персонажей.

  • Стохастическая анимация: процессы для управления группами объектов, такими как системы частиц, например анимация фейерверка, вторичное действие.
  • Поведенческая анимация/ИИ: объекты или «актеры» получают правила и переменные, определяющие их реакцию на окружающую среду.

 

МЕТОДЫ НИЗКОГО И ВЫСОКОГО УРОВНЯ

  • Техники низкого уровня: техники, которые помогают аниматору точно определить движение, такие как алгоритмы интерполяции формы (промежуточные), включающие довольно конкретное представление о точном движении, которое он или она хочет.
  • Высокий уровень: обычно алгоритмы или модели, используемые для создания движения с использованием набора правил или ограничений. Аниматор устанавливает правила модели или выбирает соответствующий алгоритм и выбирает начальные значения или граничные значения. Затем система приводится в движение, и движение объектов контролируется алгоритмом или моделью.

 

 

6. Доступность
 

ЦЕЛИ

  • Подтвердить, что веб-сайт/приложение доступны для всех типов пользователей, включая пользователей с техническими, физическими или другими ограничениями, а также пользователей альтернативных платформ.
  • Семантическая информация о виджетах, структурах и поведении, позволяющая вспомогательным технологиям (программное обеспечение для чтения с экрана, голосовое интерактивное программное обеспечение, устройства вывода Брайля, скрытые субтитры и т. д.) передавать соответствующую информацию лицам с ограниченными возможностями.
  • Пользовательские интерактивные элементы управления/виджеты должны работать с клавиатуры и соответствоватьWCAG 2.0 [WCAG20] критерий: «Всеми функциями контента можно управлять через интерфейс клавиатуры».

 

КОНТРОЛЬНЫЙ СПИСОК

  • Поддерживаемые методы пользовательского ввода (поддержка клавиатуры/мыши/сенсорной навигации).
  • Маркированные интерактивные элементы.
  • Конфигурация области просмотра.
  • Соответствующий размер цели касания.
  • Фокус/активное управление.
  • Порядок табуляции (табиндекс на фокусируемых элементах).
  • [так желательно НЕ делать] Оберните кнопки и <a> в одну большую область для одного щелчка.

(нет нескольких <a> для одной и той же ссылки или взаимодействия)

  • Разборчивый размер шрифта.
  • Цветовой контраст текста/фона.
  • Нет соответствующей информации только при наведении.
  • Текстовые альтернативы и метки для любых нетекстовых элементов.
  • Видео со звуком: добавьте субтитры, полнотекстовую транскрипцию и управление с клавиатуры.
  • aria-hidden="true" для неинтерактивных или декоративных элементов (https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label).
  • История браузера (следующий/предыдущий/обновить).
  • WAI-WCAGПринципы проектирования: ощутимый, работоспособный, понятный, надежный. ( https://bitsofco.de/the-accessibility-cheatsheet/ ).
  • WAI-ARIAРоли (banner, navigation, search, main, etc).
  • WAI-ARIA правильные теги для каждого случая (progressbar, slider, button, tree, textfield, etc, input, section, widget, select, etc).
  • WAI-ARIA правильные события и подсказки(alert, log, timer, etc).
  • WAI-ARIA правильные семантические теги для изображений, статей, картинок, списков(article, figure, list, img, text, etc).
  • WAI-ARIA Метки (label, placeholder) на пользовательских элементах (https://www.w3.org/TR/wai-aria-1.1/#dfn-accessible-name | https://www.w3.org/TR/html-aam-1.0/)
  • WAI-ARIAСостояния и свойства ( https://w3c.github.io/aria/ ).
  • Языковая декларация.
  • Элементы управления паузой для любой анимации, которая запускается автоматически и воспроизводится более 5 секунд. Автоматическое обновление контента и анимированные карусели, скорее всего, подпадают под эту категорию.
  • Контент доступен без использования CSS.
  • Работает кроссбраузерно/кроссплатформенно.
  • Светлая/тёмная темы сайта с автоопределением через CSS:

@media (prefers-color-scheme:dark) {

/*Ваш CSS здесь*/

}

 

КОНТРОЛЬНЫЙ СПИСОК ДОСТУПНОЙ РАЗРАБОТКИ ИНДИВИДУАЛЬНОГО КОНТРОЛЯ:

  • Клавиатура работает. Можно ли использовать управление с клавиатуры?Keyboard Navigation    
  • Сенсорное управление. Можно ли использовать управление с помощью сенсорных жестов? С включенными вспомогательными технологиями?
  • Ожидаемое функционирование. Можете ли вы управлять элементом управления с помощью стандартных клавиш и/или сенсорных жестов для данного типа управления?ARIA Widget Design Patterns
  • Focusable — можно ли получить доступ к элементу управления с помощью клавиатуры?Providing Keyboard Focus  
  • Четкая индикация фокуса. Легко ли ее увидеть, когда элемент управления находится в фокусе?WCAG2 Visible Focus
  • Метка (Label) — элемент управления имеет текстовую метку, которая отображается в видеaccessible name в accessibility APIs    
  • Role - Элементу управления отведена соответствующая роль, указанная вaccessibility APIs  
  • Состояния и свойства. Элемент управления имеет все состояния и свойства пользовательского интерфейса, которые он предоставляет вaccessibility APIs 
  • Цветовой контраст — метка/описание/значок элемента управления различима/пригодна для использования пользователями со слабым зрением. (Use acolor contrast checker.)  
  • Режим высокой контрастности — элемент управления можно воспринимать/использовать, когда включен режим высокой контрастности. (e.g. Windows HC mode) 

 

СОВЕТЫ

  • Высокая доступность во многом перекрывается с эффективным «белым» SEO.
  • Помните о некоторых ограничениях, которые могут помешать кому-либо полноценно пользоваться вашим клиентским опытом, например дальтонизм, слепота и слабое зрение, глухота и потеря слуха, неспособность к обучению, когнитивные ограничения, вестибулярные расстройства, ограниченная физическая ловкость, например неспособность использовать клавиатуру или мышь и многое другое.

Приложение. Инструменты мониторинга / Метрики

“Если вы не можете это измерить, вы не сможете это улучшить” H. James Harrington

ОСНОВНЫЕ ИНСТРУМЕНТЫ

 

ВТОРИЧНЫЕ ИНСТРУМЕНТЫ И РЕСУРСЫ

 

РАСШИРЕНИЯ ДЛЯ ХРОМА

 

Дата пересмотра:

  • v0.7 - 14/12/2016

Дата перевода и адаптации (go@inverser.pro):

  • 2023-11-12

Авторы:

Видео: Общие рекомендации по созданию и оптимизации web-сайтов. Оптимизация веб-производительности/Адаптив/SEO/Accessibility (доступность) / UI/UX