17 февраля 2018
10 февраля 2021
СОДЕРЖАНИЕ
Сколько раз Вы сталкивались с ситуацией, когда на сайте выявляется куча косяков, причем уже после того, как сайт сдан заказчику? Не уверены точно, но рискнем предположить, что за допущенные косяки, Вы были вынуждены узнать о себе много нового, интересного, а также Вас прямым текстом посылали на… эмм… Вам предлагали обзавестись той самой путёвкой в Таиланд на улицу с трансвеститами. Чтобы этого не произошло, мы для Вас составили чек-лист для проверки и тестирования сайта перед его сдачей заказчику. Сразу оговорим, что в чек-лист попали только самые наиболее часто допускаемы ошибки.
Проверка домена
Да-да, проверку необходимо начинать именно с домена, ибо проверить сам сайт всегда успеется. Более того, многие проверку домена не проводят вообще.
Проверка NS-записей домена
1) Все A-записи должны ссылаться на один и тот же IP;
2) IPv4 и IPv6 должны быть на одном и том же сервере.
Несколько статей назад мы рассматривали кейсы по выведению сайта из-под Баден-Бадена. В одном из кейсов осложнения были вызваны именно с этими двумя пунктами, ибо A-записи ссылались на разные IP, из-за чего по IPv4 отображалась одна версия сайта, а по IPv6 – другая. Это приводило к тому, что SEO-шники видели у себя один сайт, а поисковая система – другой.
Отсутствие «технических» поддоменов
Именно технических, а не тестовых. В чем между ними разница? Очень просто: тестовые поддомены создаются «по первому требованию» и только в тех случаях, когда они нужны и только теми людьми, кому они нужны. Технические же поддомены создаются хостинг-провайдерами. Таким образом, Вы можете и вовсе не знать, что Ваш сайт, оказывается, доступен по двум адресам.
Отметим, что технические поддомены, как правило, можно увидеть в ЛК хостинг-провайдера. Однако, лучше перестраховаться и запросить информацию о технических поддоменах непосредственно у хостинг-провайдера. Так-то оно понадёжнее будет.
Что отдается по IP сервера?
Для того чтобы получить ответ на этот вопрос, необходимо вбить в адресную строку IP, на котором размещен сайт. Иногда бывает так, что при указании IP-адреса грузится непосредственно сам сайт. Если у Вас именно такая ситуация – ее нужно исправить путем настройки 301 редиректа (переадресации).
Техническая часть
Напоминаем, что в чек-лист входят только самые «часто забываемые» пункты. Именно поэтому мы не будем перечислять 100500 пунктов из технического аудита.
Фавикон
И дело тут даже не в том, что про него забывают, а в том, что:
- сейчас изменились требования к фавиконам и максимальное разрешение составляет 128х128 (например, они применяется в тех случаях, когда пользователь выносит на рабочий стол своего смартфона ярлыки, которые являются ссылками на сайт);
- для продукции Apple необходим отдельный набор фавиконов, причем разных размеров;
- большинство напрочь забывает про подключение иконок через Web App Manifest, т.е. через manifest.json. О том, что это за файл и зачем он нужен, рассказывать пока не будем, т.к. это материал для отдельной статьи.
CSS-файлы
Многие с CSS-файлами вообще не заморачиваются, что неправильно. Что делаем мы:
- обязательно делаем резервные копии всех CSS-файлов, т.к. от ошибок никто не застрахован;
- бекапы CSS-файлов размещаем в тех же папках, что и оригиналы;
- оригиналы файлов максимально облегчаются, чтобы они занимали как можно меньше места, тут счет уже на байты;
- убеждаемся, что CSS-файлы должны вызываться в секции HEAD;
- убеждаемся, что изображения размером в 200-300 байт включены в CSS через {data:image base64}.
Иконки и логотипы
Если есть возможность сделать их в SVG – нужно это делать. Во-первых, в таком виде они занимают куда меньше места. Во-вторых, они могут прилично повлиять на время загрузки страницы. В-третьих, даже при отключенной графике они все равно будут грузиться.
Плюс к этому, иконки и изображения шаблона сайта крайне желательно объединять в спрайты, в т.ч. и векторные.
JavaScript’ы
Начнем с того, что JS файлы необходимо включать в самом конце HTML кода, т.е. непосредственно перед закрывающим тегом </body>. При этом:
- первым порядком должны идти JS библиотеки шаблона сайта;
- вторым порядком должны идти внешние библиотеки (те же счетчики посещаемости, например – Яндекс.Метрика, LiveInternet и т.д.).
JS также в обязательном порядке необходимо отбекапить, причем бекапы должны находиться в тех же папках, что и оригиналы, чтобы в случае «что-то пошло не так» можно было бы восстановить оригинал из бекапа в 1-2 клика. Оригиналы же необходимо максимально облегчить.
Если есть возможность – минимизировать количество JS-файлов. Например, путем объединения нескольких файлов в один. НО… При объединении файлов необходимо добавлять комментарии о том, что это вообще за библиотека, откуда она взята, а также ссылки на оригиналы и бекапы. Это связано с тем, что загрузить 1 файл размером в 1 мегабайт – это значительно проще и быстрее, чем передать 10 файлов по 100 килобайт каждый, ибо в первом случае сервер обрабатывает 1 запрос, а во втором – 10.
И последнее – все сторонние библиотеки в обязательном порядке должны подключаться асинхронно.
GZIP
Тут все просто – на сервере должно быть включено GZIP-сжатие. Это необходимо для того, чтобы сократить объем передаваемых данных и, как следствие, ускорить загрузку страниц. Многие возразят, мол, таким образом повышается нагрузка на сервера хостинг-провайдера, т.к. требуется время на упаковку файлов в gzip для дальнейшей их распаковки. Как ни странно, но НЕТ. Нагрузка на сервера не только не увеличивается, а даже уменьшается.
Кеширование
Кеширование – еще один эффективный способ ускорить загрузку страницы и снизить нагрузку на сервера. Если коротко и на пальцах, то при первом посещении огромная часть данных скачивается с сервера и сохраняется на компьютере пользователя, причем браузер помнит, где, когда и какой файл он сохранил и к какому сайту он относится. Далее при повторном посещении (либо при переходе на другую страницу) с сервера уже грузится только часть данных. Остальное – из ранее сохраненных файлов.
Кеширование обязательно должно быть включено. Плюс к этому, необходимо еще и настроить разное время для кеширования: одни файлы могут "жить" в кеше 2-3 часа, после чего утратят актуальность, а другие - неделю, 2 недели или даже месяц.
Шрифты
Здесь всего 2 правила:
- шрифты должны грузиться отдельно от основного «скелета» страницы;
- шрифты не должны «дёргаться» так, будто они сейчас вот-вот загрузятся.
Резервное копирование
Это один из самых важнейших пунктов, о которых забывают. Здесь всего 4 требования:
- резервное копирование должно выполняться автоматически;
- резервное копирование должно выполняться настолько часто, насколько можно (от 3-5 дней до 5-6 часов в зависимости от того, насколько часто обновляется сайт);
- бекапов сайта должно быть несколько (т.е. не 1 бекап, размноженный на несколько файлов, а сами бекапы, которые должны делаться в разное время);
- бекапы должны делаться в тот период времени, когда нагрузка на сайт минимальна (например, ночью).
SEO
Robots.txt, sitemap.xml, Title, Description, H1, страница 404 и т.д. – это настолько очевидные вещи, что в данном чек-листе им не место. Именно поэтому SEO-часть будет короткой.
Регистрация в вебмастерских
Неожиданно, правда? В обязательном порядке необходимо регистрировать сайт в:
- Яндекс.Вебмастере;
- Google Search Console.
По желанию:
- Mail.Ru Вебмастер;
- Yahoo Вебмастер;
- business.facebook.com.
Регион
В Яндекс.Вебмастере и Google Search Console в обязательном порядке необходимо указать регион, в котором физически присутствует офис организации (если сайт коммерческий). Иных регионов добавлять не стоит.
Регистрация в каталогах
Необходимо, чтобы организация была зарегистрирована в Google My Business и Яндекс.Справочнике, причем с указанием сайта.
Если же речь про сайт интернет-магазина, то сюда же можно добавить еще и Яндекс.Маркет и Google Покупки.
Страница 404
Нет, речь не о том, что она должна присутствовать и отдавать код 404.
Речь о том, что страница не должна выглядеть так, чтобы при виде сообщения «Извините, страница не найдена» возникало желание покинуть сайт. На странице 404 можно разместить наиболее востребованные товары/услуги, карусель с акциями, промо-код на скидку (типа материальные извинения за косяк) и т.д., ибо вариант с «Извините, страница не найдена, поэтому перейдите на главную или полистайте меню» больше не прокатывает.
Маркетинг
Как Вы уже догадались, эта часть чек-листа актуальна только для коммерческих сайтов.
Цели конверсии
Необходимо убедиться, что в Яндекс.Метрике и Google Analytics настроены цели конверсии. Желательно, чтобы целей было несколько. Например, для корзины – одна цель, для страницы «заказ оформлен» - другая, для страницы «заказ оплачен» - третья и т.д.
ОБЯЗАТЕЛЬНО НАСТРАИВАЙТЕ ЦЕЛЬ ДЛЯ СТРАНИЦЫ 404!!! (немного не в тему, но всё же).
Google Adwords
Для каждой рекламной кампании в Google Adwords необходимо регистрировать отдельный аккаунт. Если вести несколько рекламных кампаний в пределах одного аккаунта, то точность данных в Google Analytics может быть значительно нарушена.
Информация
О компании
Страница «О компании» должна присутствовать, т.к. эта мелочь является коммерческим фактором ранжирования.
На странице «О компании» в обязательном порядке должны размещаться реквизиты – ИНН, ОГРН, банковские реквизиты, и т.д. Ну и, конечно же, информация о том, чем Ваша организация вообще занимается (только без фанатизма во всякие «наша миссия», «мы лучшие», «мы единственные» и т.д.).
Контакты
Обязательно должна присутствовать страница с контактами – скайп, соцсети, эл. почта, физический адрес, номера телефонов, карта с точкой расположения, ближайшие автобусные остановки с указанием номеров останавливающихся там автобусов/троллейбусов/трамваев/электричек, фотографии входов в офис (особенно если в здании несколько офисов разных организаций).
Если у Вас в пределах города очень много офисов, то можно сделать под каждый офис отдельную страницу с контактами.
Условия использования сайта
Это формальность, т.е. оно просто должно быть. Можно воспользоваться уже готовыми вариантами, где нужно только заменить наименование организации, адрес сайта, и далее по мелочам.
Политика конфиденциальности
Здесь всё то же самое, что и в случае с условиями использования сайта.
Страница «Гарантии»
На этой странице должна быть размещена информация о том, какие гарантии даёт Ваша организация, на какой срок.
Допускается (но не приветствуется) выделение на отдельную страницу информации о том:
- какие случаи НЕ являются гарантийными;
- что делать при наступлении гарантийного случая;
- как вернуть товар или запросить гарантийное обслуживание.
Следующие пункты актуальны только для интернет-магазинов.
Договор-оферта
По сути, это публичный договор купли-продажи, который автоматически считается заключенным в момент приобретения пользователем товара. Т.е. совершая покупку, пользователь автоматически принимает условия публичного договора-оферты.
Инструкция по оформлению заказа
Задача этой страницы – помочь пользователю оформить заказ, если ему что-то не понятно. Идеальный вариант – видеоинструкция. Не идеальный, но допустимый – текстовая инструкция со скриншотами, а также пометками с точностью до «куда ткнуть и что ввести». На этой же странице должен быть приведен перечень документации, которая необходима для заказа.
Доставка и оплата
Информацию о способах и сроках оплаты и о способах и сроках доставки можно разместить как на одной странице, так и на двух (последнее предпочтительней). Главное – чтобы и то, и то присутствовало на сайте, и информация была актуальной.
Итоги
Не такой уж и большой чек-лист получился. Однако, напомним, что мы перечислили только те пункты, про которые забывают наиболее часто. Т.е. если включим в чек-лист проверку битых ссылок, повторяющихся мета-тегов, наличие цен, компрессия картинок, расположение элементов в шапке, в меню, в подвале и т.д., то статья получится больше раз в 50.
Приведенный выше чек-лист спасал нас уже не один десяток раз, причем часть пунктов тянется «с давних времен», а часть добавлена совсем недавно. Более того, часть пунктов была добавлена на основе опыта наших «коллег по цеху» из других агентств, а часть – на личном опыте. Например, к последним пунктам можно отнести содержание страницы 404, настройку целей для этой страницы, а также 1 рекламная кампания = 1 аккаунт Google Adwords и еще ряд других пунктов.
Надеемся, данный чек-лист спасёт и Вас.
