Статьи Доклады с конференций

Автор: Николай Мациевский aka sunnybear
Презентация в .ppt

Проверяем качество сайтов

Какую картину мы обычно наблюдаем при сдаче готовых интернет-проектов (будь то социальные сети, интернет-магазины или домашние страницы)? Исполнители сдают сайт, который хорошо выглядит в браузере заказчика, который обеспечивает заложенную функциональность, может быть, даже содержит внятную документацию и удовлетворяет нормам по серверной нагрузке. Вроде все замечательно, но этого мало.

Через несколько недель после работы такого веб-сайта становится понятно, что поддерживать его тяжело, работает он медленно и далеко не у всех пользователей корректно. ЧтО же делать?

Ключевые моменты оценки качества веб-проектов

На самом деле, можно достаточно быстро принять решение о качестве сдаваемого интернет-проекта с помощью бесплатных инструментов. Что же действительно влияет на качество:

  • Совместимость сайта с браузерами.
  • Соответствие стандартам.
  • Семантика HTML-кода.
  • Доступность сайта для пользователей.
  • Скорость работы на стороне сервера.
  • Скорость работы на стороне браузера.

Как все это проверить за 10 минут?

Кроссбраузерность сайта

Проверяем с помощью www.browsershots.org. Выбираем наиболее распространенные браузеры для целевой аудитории (Internet Explroer 6, 7 и 8, Firefox 2 и 3, Opera 9 и 10, Safari 3, Chrome 1). Получаем пару десятков изображений главной страницы сайта, и уже по ней оцениваем качество верстки: насколько она соответствует начальному дизайн-макету.

Соответствие стандартам

Обычно при разработке в соответствии со стандартами уменьшается время на поддержку и развития такого сайта и увеличивается его доступность для пользователей. Какие стандарты стоит проверять?

Проверяем с помощью HTML-валидатора: validator.w3.org, на самом деле нам достаточно, чтобы было не более 25 ошибок на странице. Рекомендуется проверять несколько типичных страниц для устранения наиболее очевидных недочетов.

Соответствие стандартам доступности: WCAG. Проверяем с помощью www.contentquality.com, достаточно соответствия первому уровню (A, WCAG Priority 1).

Доступность и семантика кода

Отключение стилей и JavaScript в браузере позволит «увидеть» сайт таким, как он «выглядит» для поисковых и других роботов. В Firefox это можно сделать с помощью Web Developer Toolbar. В других браузерах — в настройках отключения скриптов и с помощью:

javascript:document.getElementsByTagName('head')[0].innerHTML='';void(0);

Запуск этой адреса в браузере устранит большую (или же все) стили со страницы.

Дополнительно страница с отключенными стилями позволит проверить, насколько семантически верен HTML-код. Если содержание на странице остается понятным для пользователя, если ключевые элементы взаимодействия по-прежнему доступны — то можно считать, что страница сверстана семантически верно. Иначе нужно устранять найденные недочеты (например, отсутствующее меню или форму входа). Не стоит искать у страницы с отключенными стилями полного соответствия дизайн-макету — его и не должно быть. Но содержимое такой страницы должно быть приятно для глаза и доступно для использования. Это основное правило.

Скорость работы сайта

Очень часто скорость работы оказывает ключевое влияние на конвертация посетителей в доход сайта. Особенно это характерно для интернет-магазинов. Как мы можем проверить эту скорость? Для серверной стороны существует инструмент host-tracker.com, с помощью которого можно установить характерное время доступа к сайту из различных точек земного шара. Также он позволяет оценить характерное время создания страницы на сервере (если минимальное время доступа к сайту больше 1с, то уже стоит бить тревогу).

Для проверки отказоустойчивости сайта стоит воспользоваться сервисом Load Impact. Бесплатный анализ позволяет проверить до 50 одновременных посещений (каждое из которых может открывать несколько десятков страниц на сайте). Основным показателем устойчивости сайта к нагрузкам будет вид кривой, который получится после проведения теста. Если график ровный или время открытия страницы несколько падает при росте посещаемости — значит, с сайтом все нормально. Если нет, то нужно принимать решение об оптимальном потоке посетителей, которых сайт сможет обслужить.

Для проверки качества скорости загрузки клиентской составляющей можно воспользоваться либо YSlow под Firebug для Firefox (оценка должна быть не менее 80, лучше всего не менее 90). Или же бесплатным инструментом webo.in (простая оценка не ниже 70, лучше не ниже 80).

На что влияет качество сайта

Это, в первую очередь, стоимость его поддержки и развития. Сайт, сделанный грамотно и по всем стандартам, гораздо проще развивать, поскольку времени написание дополнительного кода при наличии хорошей, стандартной базы уходит значительно меньше. Это и масштабируемость проекта, когда разработчики предусматривают большой «запас прочности» для ежедневных посещений, и в пиковые часы сайт будет работать в штатном режиме, не требуя дополнительного масштабирования.

Скорость создания HTML-страниц и общее время загрузки очень сильно влияет на доступность сайта. Ключевым параметром здесь является «загрузка за 4 секунды» и более быстрая загрузка, чем у основных конкурентов. В отсутствии основных преимуществ на рынках с высокой конкуренцией скорость работы сайта может оказаться решающим фактором при принятии решения.

Сейчас на рынке существует несколько решений, позволяющий автоматизировать ускорение сайта на клиентском уровне. Для ASP.NET — это GetRPO.com, для систем на базе PHP — это Web Optimizer.

Спасибо за внимание. Вопросы?

Все комментарии (habrahabr.ru)