Чекліст для публікації сайту

1. Функціональність

Завдання: перевірити, наскільки правильно та швидко працює сайт на всіх пристроях і в усіх браузерах, які може використовувати цільова аудиторія. Переконатися, що сценарії використання виконуються без помилок. Сценарієм використання для інтернет-магазину може бути покупка: вибір товару → перегляд товару → додавання у кошик → оформлення замовлення → успішна оплата. Помилок не повинно бути як у плановому режимі роботи, так і при пікових навантаженнях.

Сайт має працювати ефективно: витрачати мінімум ресурсів, що дозволить обрати більш вигідний тариф і не переплачувати за хостинг.

1.1. Працездатність

Сайт завантажується та коректно працює на всіх актуальних пристроях і в усіх браузерах. Всі сценарії використання виконуються без помилок.

1.2. Швидкість завантаження сторінок

Сервер повертає HTML-документ будь-якої сторінки сайту за 0,2 секунди чи швидше. Весь контент сторінки завантажується за декілька секунд.

Це скорочує ризик того, що користувач не дочекається завантаження та покине сайт. Завдяки швидкому завантаженню HTML-документа на сторінці одразу з’явиться частина контенту, а весь контент довантажиться протягом двох-трьох секунд.

1.3. Розмір сторінок

Розмір HTML-документа будь-якої сторінки — в межах декількох сотень кілобайт, а загальний розмір усіх елементів сторінки — декілька мегабайт.

Так сторінка завантажується швидше, рендеринг браузером займає менше ресурсів, сайт працює плавно навіть на слабких пристроях. Скажімо, курсор миші рухається по екрану без ривків, анімації «не зависають».

1.4. Працездатність при пікових навантаженнях

При кількості користувачів, що перевищує в десять разів максимальне значення, сайт залишається повністю працездатним. Час повернення HTML-документа сервером збільшується максимум до декількох секунд.

Якщо в середньому інтернет-магазин одночасно відвідують до 1000 користувачів, то в «Чорну п’ятницю» на сайті може перебувати до 10 000 відвідувачів. Усі вони мають без проблем переглядати товари та здійснювати покупки.

1.5.Повідомлення про помилки

Сайт показує зрозумілі для користувача повідомлення про помилки. Наприклад, 401, 403 — доступ заборонений, 404 — сторінка не знайдена, 500 — внутрішня помилка сервера.

1.6. Помилки в консолі браузера

У консолі браузера немає помилок JavaScript і помилок, пов’язаних із мережею.

1.7. CDN і стандартні бібліотеки

Зовнішні скрипти та стилі — стандартні бібліотеки, такі як Angular або jQuery, підключаються через CDN (Content Distribution Network, мережа доставляння контенту).

Це дозволяє збільшувати швидкість завантаження сторінки та економити трафік, оскільки з високою ймовірністю популярні бібліотеки уже збережені на пристрої користувача.

1.8. Скрипти та стилі

Власні внутрішні скрипти та стилі, що не розміщуються на CDN, об’єднуються в мініфіковані файли — один файл скриптів і один файл стилів. Це дозволяє зменшувати кількість запитів на сервер, економити трафік і збільшувати швидкість завантаження.

1.9. Посилання на скрипти і стилі в HTML-документі

Посилання на скрипти (окрім скриптів лічильників, приміром, Google Analytics) розміщені внизу сторінки, а посилання на стилі — угорі.

Це дозволяє мати оптимальну черговість завантаження сторінки: основний текстовий контент → стилі (візуальне оформлення сайту) → зображення → скрипти.

Скрипти лічильників мають розміщуватися угорі сторінки, щоб вони встигали завантажитися та фіксувати відвідування, навіть якщо користувач закриває сторінку протягом однієї-двох секунд.

1.10. Кешування статичних файлів

Для статичних файлів задані правила кешування для браузерів.

Файли зберігаються на комп’ютері користувача, і при повторному відвідуванні сайту не відбувається зайвих звернень на сервер, що зменшує навантаження на нього та збільшує швидкість завантаження сторінок.

1.11. Кешування сторінок

Вміст сторінок, які змінюються раз на декілька годин або рідше, кешується сервером. Для сайтів із середньою кількістю одночасних відвідувачів у декілька сотень та більше сторінки кешуються ще й на стороні таких сервісів, як Cloudflare.

Це збільшує швидкість роботи сайту, знижує навантаження на сервер і збільшує кількість відвідувачів, які одночасно можуть перебувати на сайті.

1.12. Друк сторінок

У разі друку вмісту сторінок допоміжні елементи, наприклад, навігація та форми, не друкуються.

1.13. Імена файлів

Назви файлів містять лише латинські літери, цифри та символи підкреслення. Якщо на сайті є механізм завантаження файлів, то після завантаження їх імена за необхідності автоматично корегуються.

Ім’я файлу «Комерційна пропозиція компанії.pdf» конвертується у «komercijna_propozycija_kompanii.pdf».

2. Зручність користування та зовнішній вигляд

Завдання: перевірити, наскільки інтерфейс сайту є доброзичливим до користувача, і чи одержує він позитивний досвід від взаємодії з ним.

2.1. Дизайн

Зовнішній вигляд сайту повністю відповідає дизайну на всіх актуальних пристроях і в браузерах.

2.2. Засоби взаємодії

Всі функціональні можливості сайту доступні для всіх засобів взаємодії: мишка, тачпад, клавіатура, тачскрін та інші.

Це дозволяє використовувати сайт, наприклад, лише за допомогою клавіатури, якщо немає миші або не працює тачпад ноутбуку: прокручувати сторінку, заповнювати форми, натискати на кнопки.

Якщо на сайті є слайдери, має бути можливість переходити від зображення до зображення за допомогою кнопок-стрілок на клавіатурі.

2.3. Взаємодія з елементами інтерфейсу

Курсор миші змінює форму при наведенні на текстові поля, кнопки, посилання та інші інтерактивні елементи. Інтерактивні елементи реагують на наведення, фокус і натискання.

Скажімо, поле для введення тексту виділяється, коли користувач ставить у нього курсор.

2.4. Скасування дій

Критичні дії, приміром, видалення, потребують або додаткового підтвердження, або можливості їх скасувати. Можливість скасування є більш бажаною.

2.5. Фокус введення

При кліку по заголовку поле одержує фокус введення: виділяється як активне, і в ньому з’являється курсор. Користувач може одразу ж набирати текст, без додаткового кліку по полю.

2.5. Обов’язкові поля

Всі обов’язкові (або навпаки — необов’язкові) поля форм відмічені, наприклад, зірочками або текстовими підказками.

2.6. Валідація

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

Перевірка відбувається на клієнтській та серверній сторонах. Якщо на клієнтській стороні з якоїсь причини валідація не відбудеться і дані потраплять одразу на сервер, вони все одно будуть перевірені та, за необхідності, відхилені.

2.7. Повідомлення про помилки введення

Всі форми сигналізують про помилки заповнення полів детально, щоб користувач однозначно розумів причину їх виникнення.

Наприклад, «поле має бути заповнено», «у полі має бути не більше 64 символів у довжину», «поле має містити лише символи латинського алфавіту та цифри».

2.8. Надсилання даних на сервер

Під час надсилання даних на сервер кнопка надсилання блокується і стає візуально неактивною, щоб запобігти повторному натисканню. Якщо операція може тривати довше декількох секунд — додатково з’являється анімований індикатор завантаження чи відповідний напис.

2.9. Надсилання форм

Форми надсилаються натисканням клавіші «Enter» на клавіатурі.

2.10. Закриття спливних форм

Спливні форми та інші спливні елементи (pop-up повідомлення, вікна), закриваються натисканням клавіші «Esc» на клавіатурі.

2.11. Логотип-посилання

У верхній та нижній частинах сайту логотип є посиланням, яке веде на головну сторінку. Водночас на головній сторінці логотип посиланням не є.

2.12. Перехід на іншу мовну версію сайту

Змінивши мову, користувач залишається на поточній сторінці.

Перехід на головну чи іншу сторінку сайту у разі зміни мови не відбувається.

2.13. Масштаб

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

2.14. Стандарти WCAG

Сайт відповідає стандарту доступності для осіб з обмеженими можливостями WCAG рівня АА чи AAA.

Скажімо, контраст між текстом і фоном — на рівні не менш ніж 4.5:1 (за винятком деяких випадків), використовуються атрибути «aria-…» і т. д.

3. Контент і SEO

Завдання: перевірити, чи відповідає сайт базовим вимогам до SEO. Сайти, які відповідають правилам оптимізації, мають більш привабливий вигляд у пошуку, займають більш високі позиції в пошукових системах і генерують органічний (безкоштовний) трафік.

3.1. Валідний HTML

Розмітка будь-якої сторінки проходить валідацію HTML.

3.2. Атрибут «lang»

Для всіх сторінок задано мову. Це повідомить пошуковим та іншим системам, якою мовою написана сторінка.

3.3. Тег «meta description» на всіх сторінках

Тег «meta description» присутній на всіх сторінках.

Meta description — це той опис сторінки сайту, який користувач бачить у пошуковій видачі під заголовком. Якщо опис відсутній або занадто короткий, буде показано частину тексту зі сторінки, яка може неправильно передавати суть вмісту.

3.4. Тег «title» на всіх сторінках

Тег «title» присутній на всіх сторінках.

Вміст тегу «title» показується у вкладці сайту в браузері, у вигляді заголовку в пошуковій видачі, та зберігається як назва при додаванні сайту у закладки.

3.5. Тег «h1» на всіх сторінках

Тег «h1» присутній на всіх сторінках (і тільки один раз).

H1 — це головний заголовок на сторінці. Наприклад, для головної сторінки сайту розробників додатків H1 може бути: «Розробка мобільних додатків для Android та iOS». Пишеться, як правило, найбільшим шрифтом і виділяється жирним.

3.6. Значок сайту в усіх актуальних форматах

Різні браузери мають різні вимоги до «favicon» — іконки сайту, яка зазвичай відображається на відкритій вкладці, а також в «Обраному». Щоб значок сайту був чітким і правильного розміру, необхідно підготувати кілька файлів відповідно до вимог конкретних браузерів і додати спеціальну розмітку в HTML-код сторінок.

3.7. Семантика тегів

Для заголовків використовуються теги «h1»–«h6», для абзаців — «p», для списків — «ol» та «ul», для зображень, які є частиною контенту, — «img», а зображення, які є частиною графічного оформлення, задаються за допомогою CSS-правила «background-image». Те ж саме стосується й тегів для опису структури документа: «header», «footer», «navigation» та ін.

3.8. Атрибут «alt»

Для зображень, аудіо- та відеофайлів вказаний атрибут «alt».

Завдяки атрибуту «alt» медіафайли відображаються, приміром, у пошуку за картинками. А якщо з якоїсь причини файл не завантажився, на його місці з’явиться вміст тегу «alt» — короткий текст, який пояснює, що мало бути зображено або показано на фото чи відео.

3.9. Формат, розмір та вага зображень

Фотографії мають формат JPEG, фрагменти інтерфейсу (наприклад, кнопки, іконки) — PNG чи SVG.

Розмір зображення розраховується пропорційно ширині тієї ділянки на екрані, яку воно займає, з урахуванням, що 100% ширини екрану = 1920 точок, крім тих випадків, коли якість зображення має ключове значення, як, наприклад, на сайті фотографа. У такому випадку за 100% ширини екрана приймається 3840 точок.

3.10. Посилання на неіснуючі сторінки

На сайті немає посилань, які ведуть на видалені чи приховані сторінки.

3.11. Зовнішні посилання

У більшості випадків усі зовнішні посилання мають відкриватися в новій вкладці чи вікні, щоб користувач не покинув сайт, клікаючи на них.

3.12. Грамотність

Тексти написані грамотно, без помилок. У тому числі використовується коректна та відповідна мові типографіка: тире, лапки, апострофи і т. д.

3.13. Структура URL та багатомовність

Якщо при зміні мови контент сайту змінюється на локальний, мова вказується в URL у вигляді першого сегмента, наприклад, «/en/», щоб можна було посилатися на конкретну мовну версію, і вона коректно індексувалась пошуковими системами.

Якщо ж змінюється тільки інтерфейс, скажімо, написи на кнопках «Підписатися» на «Subscribe», а зміст сторінки залишається без змін, — такий сегмент в URL відсутній, щоб не створювати дублі сторінок з однаковим контентом. Такі сторінки будуть конкурувати у пошуку, що погіршить позиції у видачі.

3.14. Код мови на головній сторінці

Код мови для мови за замовчуванням в URL головної сторінки відсутній. Приміром, якщо для сайту задана англійська мова як мова за замовчуванням, то при переході на головну сторінку її код не відображається в адресі.

Правильно: site.com

Неправильно: site.com/en/

3.15. Локальний формат даних

Формат чисел, дат, грошових сум і т. д. відповідає обраній мові.

3.16. Автоматична переадресація з «www»

При введенні адреси сайту у форматі «www.site.com» відбувається автоматична переадресація на версію без «www» в URL:

www.site.com → site.com

Або навпаки, якщо вирішено використовувати адресу з «www»:

site.com → www.site.com

Без переадресації пошукові системи будуть сприймати сторінку з «www» і без як дві різні сторінки з однаковим контентом. Сторінки будуть конкурувати в пошуку, що погано впливає на результати в пошуковій видачі.

3.17. Автоматична переадресація з протоколу HTTP на HTTPS

Відсутня можливість використовувати сайт через протокол HTTP.

Сайти, які працюють через HTTP, відмічаються браузерами як небезпечні, і пошукові системи понижують їх у видачі.

3.18. Формат URL

Всі URL мають єдиний формат. Або англійські слова і фрази, або транслітерація з локальної мови (допустимо, якщо сайт працює і буде працювати тільки на локальний ринок). В якості розділення між словами використовується дефіс. Все, включаючи параметри, з маленької літери. Спеціальні символи і букви алфавітів, відмінних від латинського, кодуються.

Правильно: site.com/sample-page

Неправильно: site.com/Sample_Page

3.19. Структура URL

Структура URL логічна та однакова, відповідає структурі сайту. Наприклад, для сторінки «Туфлі», підкатегорії категорії «Жіноче взуття», це «/women-shoes/shoes».

3.20. Адреси електронної пошти

Адреси електронної пошти є посиланнями з префіксом «mailto:».

У такому випадку при кліку на адресу відкривається поштовий клієнт, а адреса підставляється в поле «Кому».

3.21. Номери телефонів

Номери телефонів є посиланнями з префіксом «tel:».

У такому разі при кліку на номер, якщо користувач переглядає сайт із мобільного телефону, можна одразу здійснити дзвінок.

3.22. Посилання зі слешем («/») та без у кінці

Для посилань з «/» та без «/» у кінці контент не дублюється.

Посилання вигляду «/women-shoes/shoes» та «/women-shoes/shoes/» не відображає одну й ту саму сторінку. В одному випадку з’являється помилка 404.

Прийнято завершувати слешем посилання на каталоги (списки) елементів або розділи, а без слешу — на конкретні сторінки.

Інакше пошукова система, так само як у пункті 3.16, сприйматиме посилання як дублі однієї й тієї ж сторінки.

3.23. Автоматичне перенаправлення для посилань з «//» на «/»

Помилкові посилання, як, наприклад, «/women-shoes//shoes», автоматично перенаправляються на «/women-shoes/shoes».

Інакше пошукова система, так само як у пунктах 3.16 та 3.22, сприйматиме посилання як дублі однієї й тієї ж сторінки.

3.24. Sitemap.xml

У корені сайту має бути розміщений файл «sitemap.xml», що автоматично генерується, і в ньому мають негайно з’являтися нові сторінки чи товари.

Це важливо для швидкої індексації нових сторінок пошуковими системами. Якщо сторінка не проіндексована, вона буде відсутня у результатах пошуку.

3.25. Robots.txt

У корені сайту має бути розміщений файл «robots.txt». Цей файл допомагає пошуковій системі визначати, які сторінки можна індексувати, а які ні.

Наприклад, у інтернет-магазина є адмін-панель. В такому випадку адреса «site.com/admin» повинна бути доступна лише для внутрішнього використання і не з’являтися у пошуковій видачі.

3.26. Google Analytics

На сайті має бути встановлений код відстеження Google Analytics.

3.27. Cтруктуровані дані

Cтруктуровані дані покращують вигляд сніпету — того, як інформація на сайті виглядає в результатах пошуку. Дають можливість відображати фотографію та ім’я автора статті, дату публікації, рейтинг товару та іншу необхідну інформацію. Також при публікації посилання на сайт у соціальних мережах автоматично підвантажується коректне зображення для обгортки.

4. Безпека

Завдання: перевірити, наскільки сайт захищений від злому чи втрати даних.

4.1. Протокол HTTPS

Сайт працює за протоколом HTTPS. Також немає посилань на ресурси, що підключаються (скрипти, стилі, зображення) за протоколом HTTP.

HTTPS забезпечує безпечне передання даних за допомогою шифрування і на сьогодні є стандартом.

4.2. IP-адреси серверів

Реальні IP-адреси серверів мають бути приховані. Для проксування запитів можна використовувати такі сервіси, як «Cloudflare».

Якщо просування запитів не здійснюється, є можливість за доменом дізнатися IP-адресу сервера, що збільшує шанси на його злом.

4.3. Захист від DDOS-атак

Використання таких сервісів, як «Cloudflare» для обмеження запитів, що повторюються.

DDOS-атаки здатні довести систему до відмови – сайт буде недоступним через перевищення максимального навантаження, або збільшаться рахунки на оплату технічних ресурсів через суттєве збільшення навантаження на сервер, що атаковано.

4.4. Деталізація помилок

При виникненні помилок детальна інформація про них не відображається. Це дані налаштування для розробників, і вони не мають бути в загальному доступі. Повідомлення про помилки мають бути зрозумілі користувачам, як зазначено в пункті 1.5.

4.5. Захист від XSS

Сайт захищений від спроб упровадження шкідливих скриптів із метою отримання даних користувачів або доступу до закритих розділів.

Часто таким атакам піддаються форми для коментарів, примітки до замовлень і т. ін., тобто коли введений користувачем (або зловмисником) текст потім виводиться десь на сторінці або, тим більше, в адмінпанелі, і скрипт, що міститься в ньому, може бути автоматично виконаний браузером.

4.6. Захист від SQL-ін’єкцій

Сайт захищений від спроб упровадження шкідливих SQL-запитів із метою змінення або знищення даних.

Часто таким атакам піддаються поля пошуку, місця, де введений користувачем текст підставляється в заздалегідь підготовлений SQL-запит і може містити шкідливі інструкції.

4.7. Захист від спаму

Всі форми на сайті, наприклад, форми зворотного зв’язку та онлайн-заяв, які відправляють повідомлення власникам, мають захист від спаму за допомогою таких сервісів, як «Google ReCAPTCHA V3».

Без захисту на пошту власників сайту буде приходити велика кількість листів зі спамом, котрі автоматично розсилаються роботами.

4.8. Захист від автоматизованого підбирання паролів

Після декількох спроб ввести неправильний пароль час відповіді від сервера збільшується. Додатково сервер може показати капчу, попросити ввести відповідь на контрольне запитання або код із SMS.

Це уповільнює процес підбирання та запобігає спробам злому. Час підбирання збільшується настільки, що це практично унеможливлює його.

4.9. Автоматичне резервне копіювання даних

Налагоджено автоматичне резервне копіювання сайту (бази даних та вмісту). Копії створюються на сервері, розташованому в іншому дата-центрі. Наприклад, на випадок пожежі.

Частота копіювання залежить від специфіки сайту. Якщо це сайт, що, приміром, постійно приймає замовлення, створювати бекап необхідно раз на декілька годин. Для сайту, де зміни відбуваються рідко, може бути достатньо одного бекапу на тиждень.

4.10. Автоматичний моніторинг доступності

Налаштовано автоматичний моніторинг доступності та автоматичне розсилання повідомлень розробникам і власникам сайту в разі його непрацездатності.

4.11. Балансування навантаження

Якщо доступність сайту критично важлива, необхідно забезпечити його паралельну роботу на щонайменше двох окремих технічних майданчиках і в різних геолокаціях.

У разі аварії на одному технічному майданчику другий зможе забезпечити повну працездатність.

4.12. Реплікація бази даних

Якщо дані сайту критично важливі і їх втрата неприпустима (навіть з моменту останнього резервного копіювання), необхідно забезпечити реплікацію бази даних в іншій геолокації.

У разі аварії на одному технічному майданчику інший збереже важливу інформацію, скажімо, про клієнтів, фінансові операції, замовлення, або навіть дозволить продовжити повноцінну роботу.