Как провести анализ сайта самостоятельно: инструкция веб-разработчика

DEV
09.02.2018
Подписаться

Вам пора переделывать сайт! Или нет? Вам разработали портал, который привлечет сотни клиентов! Или нет? Хотите проверить это, не нанимая сторонних разработчиков? Без проблем, сделайте аудит самостоятельно.

Что проверять и какими инструментами для этого пользоваться? Ведущий веб-разработчик Grizzly Digital Company рассказывает, как проверить сайт на наличие очевидных ошибок.

Подготовительная работа: на что обращать внимание при аудите сайта и какие инструменты использовать?

Основная проверка качества сайта – это проверка 8 критериев:

  • адаптивность,
  • скорость загрузки,
  • поведение сайта под нагрузкой,
  • безопасность,
  • удобство панели управления,
  • совместимость с php 7.0 и выше,  
  • юзабилити,
  • ошибки в консоле браузера.

Чтобы проверить эти критерии вам понадобятся:

  • инструменты разработчика в хроме;

Инструменты разработчика

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

Приступаем к проверке сайта

Пройдемся конкретно по каждому из 8 критериев: как их проверить, какой показатель годится и что вообще значит каждый из них.

Адаптивность

Адаптивность – это то, насколько удобно пользоваться сайтом на мобильных устройствах. Дизайн должен одинаково хорошо выглядеть на устройстве с экраном любого размера. Также посетителю должно быть комфортно пользоваться основными функциями сайта.

Все еще думаете, что адаптация для мобильных устройств не так важна? Глобальный статистический портал Statista.com с вами не согласен: в феврале 2017 половина глобального интернет-трафика пришло с мобильных устройств.

Интернет-трафик Statista

Изображение с сайта statista.com

Как проверить? Чтобы проверить адаптивность ресурса под мобильные девайсы любого размера, используйте инструменты разработчика.

 Инструменты разработчика, проверка адаптива

На что обратить внимание? Если видите, что появляется горизонтальный скролл, текст не читается, кнопки не видны и другие элементы дизайна не работают или неудобны – адаптив надо переделывать, иначе потеряете половину клиентов.

Сайт с плохим адаптивом

Пример сайта без адаптива (сайт просто уменьшается, текст становится нечитаемым, кнопки меню тяжело нажимать)

 Адаптив с горизонтальным скролом

Пример с боковым скроллом

Скорость загрузки страницы

Медленно грузится страница – пользователь закроет вкладку, даже не дождавшись, пока ваш интересный, полезный и информативный контент загрузится. Этот фактор скажется на поисковом продвижении сайта.

Как проверить? Используйте инструменты разработчика. Зайдите во вкладку «Инструменты» и выберете настройки, как на изображении. Затем загрузите страницу и ждите результата.

Проверка скорости загрузки страницы с помощью инструментов разработчика

Хорошая скорость

Также можно использовать сервисы проверки скорости загрузки (http://tools.pingdom.com/fpt, Google Page Speed), но учитывайте, что Google Page Speed скорее рекомендательный инструмент. Хотя очень низкие показатели говорят о некачественной разработке.

На что обращать внимание? Идеальная скорость загрузки – не более 3-х секунд, если более 10-15, то с сайтом у вас проблемы.

Приемлемая скорость загрузки

Приемлемая скорость, но есть над чем поработать 

Плохая скорость загрузки страницы

Плохая скорость загрузки страницы

При проверке с помощью http://tools.pingdom.com/fpt следите за следующими показателями

Скорость загрузки страницы

Поведение сайта под нагрузкой

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

Как проверить? Для этого используется сервис http://loaddy.com/ , если это не крупный портал или интернет магазин, то вполне хватит бесплатной проверки – 50 посетителей одновременно.

На что обращать внимание? Сервис http://loaddy.com/ показывает основные параметры сайта, при высокой нагрузке. Особенно надо обратить внимание на время ответа – сколько серверу нужно времени для ответа на запрос. Но учитывайте, что результат может зависеть от хостинга сайта, чем мощнее хостинг, тем результат лучше.

Нагрузочное тестирование хороший результат

Пример хороших результатов нагрузочного тестирования

Нагрузочное тестирование плохой результат

Пример не очень хороших результатов нагрузочного тестирования

Безопасность сайта

Когда взламывают сайт, ухудшается все: позиции, трафик, меняются данные. Последствия взлома не всегда легко исправить даже за неделю.

Как проверять? Проверить безопасность сложно, иногда уязвимости не может отследить даже специалист. Вы можете проверить простые вещи: версию CMS , наличие пароля к админке сайта. В нашей практике были случаи, когда по ссылке site.com/admin доступ был открыт.

На что обращать внимание? При использовании популярных CMS проверяйте, чтобы была установлена последняя стабильная версия как самой CMS, так и ее модулей.

Удобство панели управления

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

Как проверить? Руками: зайдите в панель управления и попробуйте создать новые страницы, вставить картинку, сменить баннер.

На что обращать внимание? Если работы в админке занимают слишком много времени – стоит задуматься о смене CMS.

Юзабилити

Удобство сайта для пользователя, или юзабилити, – важный критерий, который заставит посетителя ресурса вернуться к вам. Где и как расположены кнопки, фильтры, строка поиска, легко ли переключаться между разделами и т.д. Если сайт неудобный – человек не сделает покупку, а если у него хватит терпения оставить заявку – обратно он точно не вернется.

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

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

Сайт с плохой юзабилити

Непривлекательный дизайн из 90-ых, маленькие кнопки, мелкие фото плохого качества, а от такого количества текста на главной даже глаза болят.

Ошибки в консоле браузера

Это не самый важный пункт, но им не стоит пренебрегать, поскольку наличие таких ошибок заметно снижает скорость загрузки.

Как проверить? Заходите в инструменты разработчика в браузере, вкладка Console.

На что обращать внимание? В инструментах разработчика вы увидите ошибки, если они есть. Но помните, что некоторые из них возникают из-за сторонних сервисов (онлайн консультанты, видео с YouTube).

Нет ошибок в консоле браузера

Все хорошо, нет ошибок

Ошибки в консоле браузера

Есть ошибки

Если вы нашли серьезные недочеты по любому из этих восьми критериев – бейте тревогу, потому что каждый из них напрямую влияет на конверсию и увеличение заказов с веб-ресурса. Проверив эти факторы, вы сможете понять, хорошо ли разработчик справился с вашим заказом, не прибегая к помощи еще одного специалиста.

SVG Top SVG Top
Хотите получать статьи каждую пятницу?
Рейтинг:
Ещё никто не проголосовал :(((
0,0 / 5 (0 оценок)
Rate 5 (0) - 0%
Rate 4 (0) - 0%
Rate 3 (0) - 0%
Rate 2 (0) - 0%
Rate 1 (0) - 0%
Нам важно мнение каждого читателя о наших статьях и мы хотим получать обратную связь! Какие эмоции у вас вызвала эта статья?
Пожалуйста, заполните данные:
Нравятся мессенджеры?

Подпишись на наш телеграм-канал!