Качество сайта - что нужно знать

Представим ситуацию:

Вы заказали сайт, студия присылает вам его на финальную проверку.
Соответствие сайта Техническому заданию - само собой, но вот проверить качество сайта не так просто, если вы не веб-специалист. Давайте разбираться, на что нужно смотреть заказчику и что делает сайт действительно качественным.

Что будем оценивать

Мы видим перед собой работающий сайт, но мы не можем заглянуть “под капот”, поэтому, будем оценивать то, что видим. 

• Скорость работы
  Быстрые сайты не раздражают людей, а поисковые системы их выше поднимают в выдаче.
• Дизайн
  Всё должно быть красиво на любом устройстве. Никаких наездов текста друг на друга, правильное выравнивание. Перфекционисты не должны падать в обморок.
• Удобство
  Правильное расположение, размер кнопок и ссылок такой, чтоб по ним можно было попасть что мышкой, что пальцем. Простота и понятность.

Как будем оценивать

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

Пусть будет 3 оценки сложности и времени:

• Просто
  Задачу сделать не сложно, и она не займёт много времени.

• Нормально
  Задача не очень сложная, но время занимает.

• Сложно
  Нужно уметь сделать, а также потратить на задачу достаточно времени.

Время и сложность = Стоимость

Важность оценим тоже 3-мя степенями:

• Не обязательно
  Можно не заморачиваться, на конечный продукт не сильно повлияет

• Желательно
  Наличие может быть довольно полезно

• Обязательно
  Сайт без этого - калека

Приступим!

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

Скорость загрузки сайта обычно считается в миллисекундах (ms). 

1 секунда = 1000 ms

Есть 3 основных показателя, которые определяют время загрузки сайта.

1. Расположение сервера (хостинга).
2. Скорость загрузки картинок, шрифтов и других графических элементов на сайте.
3. Скорость кода, написанного разработчиком.

Скорость загрузки сайта
= 
время запроса к серверу + время загрузки картинок + время выполнения кода

По данным Google, с сайта, который загружается дольше 1 секунды, уходит на 32% больше пользователей.
Да и гораздо приятнее не стареть в ожидании загрузки страницы.

Время запроса к серверу

Если сервер находится в Молдове, то время запроса в нашем уравнении будет равно 1-2 ms.
Если в Германии, например, то время равно примерно 30 ms.
Чем дальше от нас сервер - тем дольше будет грузиться наш сайт.
Но так ли это важно на самом деле?
30 ms - крайне мало, по сравнению с другими показателями, поэтому, при выборе сервера, лучше ориентироваться на его производительность, и чтобы вас устраивала цена. Этот показатель будет важен крайне редко, и только для особых типов сайтов.

Конечно, не стоит покупать сервер в на другом конце земного шара, потому как 200-300 ms - уже много. 

Вердикт: Сервер должен быть хорошим, а где он находится, не важно. А хороший сервер вам поможет подобрать разработчик.

Время загрузки картинок

Много картинок - дольше загружаются.
Большие картинки - дольше загружаются.
На самом деле, современные браузеры настолько хорошо работают, что мы можем даже не заметить как грузятся эти картинки.

Но разработчик должен уменьшить размер картинок, насколько это возможно. 

И для этого есть очень много способов, от простых, до тяжёлых. Рассмотрим самые распространённые:

Решение 1

Загрузить все картинки сайта в специальную программу, которая их сожмёт без потери качества. Результаты порой очень удивляют. В нашей практике было уменьшение размера изображений в 6 раз!

Как проверить:
Заходим в инструмент Google PageSpeed Insights, вводим свой сайт и смотрим результаты проверки. Нам укажут если такой трюк можно проделать с изображениями в пункте "Efficiently encode images".

Оценка: Просто / Желательно

А вот если у вас интернет-магазин, то всё немного сложнее. Оценка будет Нормально / Обязательно.
Запускать магазин без сжатия изображений чревато крайне низкой скоростью загрузки страниц.

Решение 2

Использовать современные форматы изображений.
Картинки тоже нужно загрузить в программу, но уже получить новый формат, специально для браузера. Сложность в том, что не все браузеры поддерживают такие форматы, поэтому разработчиками приходится изрядно попотеть, чтобы правильно настроить работу.
Зато мы ещё больше сокращаем вес изображений, а значит ускоряем сайт. К тому же, Google очень любит такие сайты и поднимает их выше в поиске.

По официальным данным, вес уменьшается примерно на 30-50%, зависит от ситуации.
В нашей же практике, мы сократили вес изображений товаров интернет магазина на целых 60%.

Как проверить:
Опять же, через PageSpeed Insights. 

Оценка: Сложно / Желательно

Время выполнения кода

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

Как узнать эту скорость работы:
Можно воспользоваться сервисами, например, SpeedVitals. Вводим в строку ссылку на ваш сайт, обязательно с https://, чтобы получить максимально точную статистику, и смотрим результаты для разных стран.
Или же придётся немного потрудиться и замерить конкретно скорость для вас и жителя Молдовы

1. Открываем сайт
2. Нажимаем кнопку F12 на клавиатуре. Откроется панель разработчика.
3. Переходим во вкладку Сеть (Network)
4. Обновляем страницу
5. Смотрим на самую первую строчку в таблице ниже. Где написано document.
Мы должны увидеть график загрузок частей сайта. Колонка в конце первой строки показывает как раз скорость нашего сайта, с учётом времени запроса к серверу в миллисекундах.

Какой должна быть эта скорость?

Такой, чтобы в уравнении выше, наш сайт не загружался дольше 1 секунды.

Средняя приемлемая скорость - 300-400 ms.
Для простых сайтов, например, лендингов, скорость должна быть около 200 ms.

Если больше этих значений, то разработчик, скорее всего, не провёл никакой работы над оптимизацией своего творения. 

Насколько трудно проводить эту оптимизацию сказать сложно, всё очень зависит от самого сайта. 

Можно ли ещё быстрее? Да!
Только это уже потребует больших усилий. В теории, эту цифру можно сократить до 10-50ms.

Почему так много медленных сайтов?

Как уже было сказано, нужно проводить работу над оптимизацией. Это занимает время и не всегда можно сделать, как например, в системе WordPress. Порой, там собирается так много модулей, которые плохо работают друг с другом, что оптимизировать стандартными методами просто невозможно. Приходится придумывать другие, более сложные решения, а значит более дорогие. И то, полученный результат вряд ли будет лучше, чем самая простая оптимизация сайта на своём движке. Поэтому, время выполнения кода большинства сайтов на WordPress часто больше 1 секунды, а иногда все 2-3.

У разработчиков должны быть инструменты, которые они будут использовать для удобной оптимизации. Эти инструменты в разной степени усложняют процесс разработки. 

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

Дизайн сайта
(вёрстка)

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

Знакомы ли вы с ситуацией, когда, например, книга неровно лежит на полке, или когда из шкафа с вещами выглядывает кусочек майки или носка. Раздражает, верно? 

Сайт может быть красивым, а вот детали могут испортить всю картину. 

На что же обращать внимание?

Отступы и выравнивание

Они должны быть равномерны, и подчиняться следующему закону:
Все отступы элемента на сайте должны быть кратны какому-то одному числу (например 4, 8, 16).

Верстальщик (тот, кто превращает картинку дизайна в сам сайт, каким мы его видим) должен руководствоваться этим правилом, чтобы все отступы выглядели гармонично. 

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

Пример плохих отсутпов  

Красной линией отмечены отступы, которые должны быть равны. Синей линией - центр иконок.

Пример хороших отступов

Другой пример:

Текст "Беру" с иконкой не помешало бы выровнять с ценой. Но подождите, эта кнопка выглядит слишком большой в высоту. На самом деле проблема не в выравнивании элементов, а в отступах у цены, они слишком большие. Исправим:

Кажется, что это мелочи, но именно они формируют впечатление. А дизайнеры так вообще начинают на себе волосы рвать, когда видят такое.

Удобство сайта

По сайту должно быть удобно перемещаться. Ничего не должно мешать. Давайте рассмотрим самые распространённые проблемы.

Всплывающие окна

Никогда не показывать их сразу же, лучше через минуту, и то, при определённых факторах.
А на телефоне вообще убрать. Количество людей, ненавидящих всплывающие окна растёт быстрее, чем население Китая.

Серьёзно, сообщить об акции можно куда аккуратнее.

Онлайн чат

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

Оценка: Просто / Желательно

Меню сайта

На мобильном телефоне, выезжающее сбоку меню должно открываться и закрываться свайпом, как это сделано в приложениях на телефоне. Люди уже привыкли к такому поведению, и отсутствие такой "фишки" только раздражает пользователя.

Оценка: Нормально / Желательно

Продолжение следует...