Прежде чем собирать показатели эффективности для аудита сайта, вы можете выполнить несколько проверок, чтобы определить простые исправления и области, на которых следует сосредоточиться.
Проверка действительности: архитектура и код
По возможности исправьте простые ошибки и удалите ненужные объекты и код до измерения производительности. Обязательно ведите учет проблем и исправлений до и после. Эти улучшения все ещё могут быть частью вашей аудиторской работы.
Архитектура и объекты сайта
Можно ли легко удалить что-либо из хранилища кода и с сайта, например неиспользуемые устаревшие страницы, контент или другие объекты? Проверьте, нет ли у вас страниц-сирот, лишних шаблонов, неиспользуемых изображений, кода и библиотек.
Ошибки выполнения.
Проверьте, есть ли ошибки в консоли браузера. Их не должно быть.
Линтинг.
Есть ли ошибки в коде HTML, CSS или JavaScript? Включение линтинга в рабочий процесс помогает поддерживать качество кода и избегать регрессий. Рекомендуем использовать HTMLHint, StyleLint и ESLint. Их можно применять как плагины для редактора кода или запускать из командной строки в рамках рабочих процессов и инструментов непрерывной интеграции, таких как Travis.
Неработающие ссылки и изображения.
Существует множество инструментов для проверки ссылок во время сборки и выполнения, включая расширения Chrome (например, это) и инструменты Node, такие как Broken Link Checker.
Плагины.
Плагины, такие как Flash и Silverlight, могут представлять угрозу безопасности, поэтому их поддержка была прекращена. Кроме того, они не работают на мобильных устройствах. Проверьте наличие плагинов с помощью Lighthouse.
Тестируйте приложение на разных устройствах и в разных условиях
Лучше всего, если ваш сайт протестируют реальные пользователи на разных устройствах, в разных браузерах и при разных условиях подключения к интернету.
Некоторые из этих проверок относительно субъективны, но они могут выявить проблемы, влияющие на воспринимаемую производительность. Например, неработающие ссылки отнимают время и создают ощущение, что сайт не отвечает. Неразборчивый текст трудно читать.
Тестирование на разных устройствах
Попробуйте разные размеры области просмотра и окна. Используйте хотя бы одно мобильное устройство и один компьютер. По возможности проверьте, как ваш сайт работает на мобильном устройстве с низкими техническими характеристиками и небольшим экраном. Легко ли читается текст? Есть ли неработающие изображения? Можно ли приблизить изображение? Достаточно ли велики области прикосновения? Медленно работает?
Есть ли функции, которые не работают? Сделайте скриншот или запишите видео с результатами.
Кросс-платформенное тестирование.
Какие платформы вы используете? Вам нужно провести тестирование в браузерах и операционных системах, которые ваши пользователи используют сейчас и будут использовать в будущем.
Подключение
Проверьте работу приложения при разных типах подключения: Wi-Fi, мобильная сеть и отсутствие подключения. Вы можете использовать инструменты браузера, чтобы эмулировать различные условия сети.
Устройства.
Протестируйте сайт на тех же устройствах, которые используют ваши посетители. На фотографии ниже показана одна и та же страница на двух разных телефонах.
На большом экране текст мелкий, но читаемый. На маленьком экране браузер отображает макет правильно, но текст нечитаем даже при увеличении. Изображение на экране размыто, а цвета искажены (белый не выглядит белым), поэтому контент плохо читается.
Простые выводы, подобные этому, могут быть гораздо важнее, чем непонятные данные об эффективности.
Попробуйте UI и UX
Доступность, удобство использования и читаемость
Чтобы контент и функции вашего сайта были доступны всем, нужно понимать, насколько разнообразны ваши пользователи.
Lighthouse и другие инструменты проверяют наличие определенных проблем со специальными возможностями, но ничто не сравнится с тестированием в реальных условиях. Попробуйте читать, перемещаться по экрану и вводить данные в разных условиях, например на улице в солнечный день или в поезде. Попросите друзей, родственников и коллег протестировать ваш сайт. Попробуйте использовать программу чтения с экрана, например VoiceOver на Mac или NVDA на Windows.
Дополнительную информацию о реализации и проверке специальных возможностей можно найти в курсе Udacity по специальным возможностям и в статье Как проверить специальные возможности.
Сохраните результаты аудита специальных возможностей. Скорее всего, вы сможете внести простые улучшения, которые будут полезны для всех пользователей.
Основные проблемы с интерфейсом и UX.
Элементы, которые работают неправильно, выходят за пределы небольших окон и областей просмотра, области нажатия слишком малы, контент нечитаем, прокрутка работает с задержками. Откройте несколько страниц сайта, попробуйте воспользоваться навигацией и всеми основными функциями. Записывайте.
Изображения, аудио и видео.
Проверьте, не выходит ли контент за границы экрана, правильно ли соотношение сторон, нет ли проблем с кадрированием и качеством.
Субъективные тесты интерфейса
Не все из них могут быть актуальны, но простые изменения могут упростить рефакторинг:
- Понятно ли пользователю, что он может сделать на сайте, сразу после перехода на него?
- Хочется ли вам читать контент и переходить по ссылкам?
- Есть ли визуальные иерархии или пути, или все имеет одинаковый оптический вес?
- Не перегружен ли макет?
- Слишком много шрифтов?
- Можно ли удалить изображения или другой контент?
- Дизайн контента так же важен, как и дизайн интерфейса. Подходят ли текстовые и графические материалы на вашем сайте для мобильных устройств и компьютеров? Можно ли что-то убрать? Пишите для мобильных устройств.