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