Прежде чем собирать показатели производительности для аудита сайта, вы можете выполнить несколько проверок, чтобы определить простые исправления и области, на которые следует обратить внимание.
Проверка валидности: архитектура и код
По возможности исправляйте простые ошибки и удаляйте ненужные ресурсы и код перед измерением производительности, но обязательно ведите учет проблем и исправлений «до» и «после». Эти улучшения по-прежнему могут быть частью вашей аудиторской работы.
Архитектура сайта и активы
Можно ли легко удалить что-либо из репозитория кода и с сайта, например неиспользуемые устаревшие страницы, контент или другие ресурсы? Проверьте наличие потерянных страниц, избыточных шаблонов, неиспользуемых изображений, а также неиспользуемого кода и библиотек .
Ошибки выполнения
Проверьте наличие ошибок, отображаемых в консоли браузера. Их не должно быть :).
Линтинг
Есть ли ошибки в вашем коде 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
Взаимодействия, которые не работают должным образом, переполнение элементов в маленьких окнах и окнах просмотра, слишком маленькие цели касания, нечитаемый контент, неуклюжая прокрутка… Откройте несколько страниц сайта, опробуйте навигацию и все основные функции. Вести протокол.
Изображения, аудио и видео
Проверьте содержимое на наличие переполнения, неправильного соотношения сторон , плохой обрезки и проблем с качеством.
Субъективные тесты пользовательского интерфейса
Возможно, не все они актуальны, но простые изменения могут облегчить рефакторинг:
- «Что я могу здесь сделать?» сразу понятно при открытии сайта?
- Вас тянет потреблять контент и переходить по ссылкам?
- Существуют ли визуальные иерархии или пути — или все имеет одинаковый визуальный вес?
- Планировка загромождена?
- Шрифтов слишком много?
- Есть ли изображения или другой контент, который можно удалить?
- Дизайн контента так же важен, как и дизайн интерфейса. Подходит ли текстовое и графическое содержимое вашего сайта для мобильных и настольных компьютеров? Можно ли что-нибудь устранить? Пишите для мобильных .