75 моментів, які ви маєте врахувати перед запуском сайту

Взято з сайту senior.ua

Не можна просто так взяти і викласти сайт в світ! Навіть модні CMS не врятують. Ми зібрали ключові особливості запуску нового ресурсу.

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

1. Пам'ятай, що браузери працюють по-різному, і відповідно, показувати інфу вони теж будуть по-своєму. Перевір, як себе веде сайт в існуючих браузерах/движках: Firefox / Gecko, Safari / WebKit, Chrome, IE, Opera і (якщо це можливо) в деяких мобільних браузерах. Можна перевірити, як сайт відображається на різних ОС.
2. Враховуй той факт, що люди можуть юзати сайт на кноппкових телефонах, читалках і інших дивних девайсах. Існують стандарти доступності інтернет-додатків для людей з обмеженими можливостями, які теж треба б застосовувати. Почитай мануал по WAI і прийми до відома.
3. Розгортання оновлень непомітне для користувачів. Буде здорово, якщо у тебе з'явиться можливість тестувати продукт на проміжному хостингу з виходом в мережу (не на локальній машині з трьома віртуалками) і т.д. Це дозволить перевірити "підгрузку" модулів, реалізацію змін в архітектурі і коді, і інші важливі штуки, здатні налякати юзера на старті. Найбільш ефективне поєднання системи контролю версій (git, Subversion і ін.) І механізму автозборки (Ant, NAnt і ін.).
4. Повідключати всі костилі, створені для дебага. Ці інструменти виводять службовіповідомлення, про існування яких користувачеві знати необов'язково.
5. Якщо є які-небудь форми, захисти їх капчами.
6. Вивчи теорію прогресивного вдосконалення.
7. Всі дані користувача/для користувача (пошта, телефон) потрібно приховувати - спамери і краулери не дрімають.
8. Використовуй з розумом атрибут " nofollow ". Почитай про нього окремо.
9. На сайті не повинно бути таких сторінок, які б при старті оновлювалися кілька разів або довго довантажували вміст.
10. Перенаправляє всіх після POST-a, якщо він був успішним, щоб не допустити дублюючої відправки чого-небудь на сервер (це може бути як дублюючий запис в базу, так і крута ін'єкція, від якої потім будуть проблеми).

Безпека

1. Вивчи гайд по OWASP , що охоплює всі тонкощі безпеки сайту.
2. Дізнайся все про ін'єкції (особливо SQL) і про те, як їх не пропустити.
3. Всі поля введення повинні бути захищені горою перевірок, валідацій і інших механізмів. Не вір нікому!
4. Використовуй "міцні" алгоритми хешування паролів для їх надійного зберігання.
5. Не винаходь велосипед, намагаючись придумати свою систему аутентифікації. Все вже готово! А якщо ти випустиш щось незначне або НЕ врахуєш - тобі на це вкаже хакер з вимогою певної суми.
6. Якщо на сайті використовується платіжна система - гарненько вивчи це питання.
7. На будь-яких сайтах, де вводиться конфіденційна інфа (облікові дані, особиста інформація, дані кредитної картки), юзай SSL/TLS/HTTPS. Let's Encrypt - ось безкоштовний центр сертифікації, який може допомогти.
8. Запобігай можливим викраданням сесії.
9. Уникай міжсайтового скриптингу (XSS).
10. Стережися підробок міжсайтових запитів (CSRF).
11. Захисти ресурс від Clickjacking.
12. Підтримуй систему завжди в оновленому стані.
13. Не зберігай файл з даними для підключення до БД "на видному місці".
14. Прочитай хендбук з безпеки від Google .
15. Допиши rel= "noopener noreferrer"до всіх посилань з target="_blank", щоб запобігти JavaScript-перенаправленню з головної сторінки на підроблену.
16. Розглянь можливість використання Content Security Policy.

Продуктивність

1. Обов'язково реалізуй кешування. Тільки реалізуй правильно, бо можна налаштувати так, що користувач не побачить оновлення протягом трьох діб.
2. Якщо контент довго завантажується (більше 2-3 секунд), прироби прелоадер.
3. Оптимізуй всі картинки. Google радить використовувати якісні та релевантні зображення без тексту.
4. Для перевірки загального стану ресурсу юзай крутий інструмент (знову від Google). Існує ще кілька варіантів - від Yahoo і набір тулз YSlow.
5. Використовуй стиснення вмісту brotli , gzip / deflate .
6. Прагни до об'єднання кількох CSS-таблиць або декількох JS-файлів, щоб зменшити кількість з'єднань і поліпшити продуктивність gzip.
7. Застосовуй svg, де це можливо. Почитай рекомендації для веб-девелоперів, щоб краще розбиратися в темі.
8. Якщо ресурс високонавантажених, використовуй принцип паралельного завантаження - розділи статичний і динамічний вміст між доменами.
9. Статичний контент (зображення, CSS, JavaScript і контент, який не потребує доступів до куків) повинен відправлятися в окремий домен, який не використовує файли cookie. Це все для того, щоб при кожному зверненні до домену та піддомену гора куків не навантажувала з'єднання. Юзай CDN.
10. Максимально скороти загальну кількість HTTP-запитів, які потрібні для відображення сторінки.
11. Почитай, що таке таск-раннери і для чого вони потрібні. Вибери будь-який: Gulp , Grunt , Brocolli або Brunch і прикрути обов'язково до сайту.
12. Уважно поставтеся до такого "маловажливого" моменту, як фавікон. Він повинен бути в корені сайту, /favicon.ico. Браузери автоматично запросять його, навіть якщо значок взагалі не згадується в коді. Якщо у тебе його немає - настав час його додати.
13. Найголовніше правило для цього пункту - роби сайти для людей, а не для пошукових систем. З кожним роком сеошні алгоритми змінюються, але концепція залишається незмінною.
14. Використовуй "зрозумілі" URL. Посилань виду: https://proglib.io/rr6r7f734Xf3w444 бути не повинно.
15. Подбай про те, щоб основні теги ( title, descriptionі т.д.) були заповнені коректної інфою.
16. Можна погратися з Open Graph мітками.
17. Можна юзати crawl для динамічного контенту. Це дозволить пошуковим роботам краще, а головне, швидше індексувати сторінки.
18. Візьми за правило - посилання типу: "тиць", "сюди", "Click here" не принесуть користь твоєму SEO. Посилання має нести сенс. Людина і бот повинні розуміти, куди веде анкор.
19. Відшукай всі неіснуючі сторінки і видали все сміття. Посилання, що ведуть на неіснуючу сторінку, повинні повертати красиву заглушку 404, а не "Сторінку не знайдено".
20. Дивний файлик sitemap.xml повинен бути в корені, і не вір тому, хто говорить інакше!
21. Вивчи, що таке <link rel="canonical" ... />, і застосовуй.
22. Для успішного моніторингу SEO, отримання будь-якої аналітики і не тільки використовуй Google Webmaster Tools і Bing Webmaster Tools.
23. Почитай, як robots.txt допомагає пошуковим павукам працювати краще.
24. Завжди використовуй 301 Moved Permanently, наприклад, після зміни www.example.com на example.com(або навпаки).

Функціонал

1. Такі речі, як HTTP, GET, POST, сесії, куки повинні "відлітати від зубів".
2. Пиши XHTML / HTML і CSS у відповідності зі специфікаціями W3C і переконайся, що вони проходять валідацію. Це необхідно, щоб зробити роботу з нетрадиційними браузерами, читалками і т.д. простіше і ефективніше.
3. Розберися, як підгружается JavaScript, таблиці стилів і інші ресурси, що використовуються на сторінці під час її завантаження, і як вони впливають на продуктивність. Перемісти всі скрипти в нижню частину сторінки.
4. Якщо збираєшся використовувати iframes, розберися, як працює JavaScript sandbox.
5. Пам'ятай, що NoScript стає все більш популярним, а з ним мобільні девайси можуть працювати не так, як очікувалося. Коли-небудь Google проіндексує сайт, і частина JS перестане запускатися.
6. Розберися в різниці між редіректом 301 і 302.
7. Розглянь можливість використання нормалізації CSS.
8. Існують фреймворки такі, як jQuery, MooTools, Prototype, Dojo і YUI 3, які згладжують більшість відмінностей між браузерами при маніпуляції DOM.
9. Перевір адмінку на предмет залиття файлів і працездатності навігації.
10. Поміняй дефолтні логін / пароль на щось своє!
11. Для оптимізації продуктивності різних фреймворків використовуй Google Libraries API, щоб запобігти марній дублюючій підгрузці.

Пошук і виправлення помилок

1. Ти будеш витрачати 20% свого часу на кодинг і 80% на його підтримку, тому створюй код відповідно.
2. Якщо сайт крутиться на WP, то для вмикання / вимикання дебага константа WP_DEBUG повинна бути true/false відповідно. Якщо движок інший, то напиши в .htaccess для директив php_flag display_errors, php_flag display_startup_errors, php_flag html_errors значення on або off.
3. Прикрути до сайту систему, завдяки якій користувачі зможуть повідомляти про можливі проблеми.
4. Добре документуй код і функціонал продукту, щоб в майбутньому тобі (і, можливо, іншим колегам) було простіше виконувати технічне обслуговування.
5. Регулярно роби резервні копії і переконайся, що резервування працює, щоб потім не було нестерпно боляче.
6. Обов'язково юзай систему контролю версій: Subversion , Mercurial або Git.
7. Перед запуском не забудь провести тестування. Selenium тобі в допомогу. Якщо ж ти хочеш автоматизувати цей процес, то дивись в сторону CI інструментів, наприклад, Jenkins .
8. Логування ніхто не відміняв. У цьому тобі можуть допомогти log4j , log4net або log4r .
9. Записуй в журнал всі події і всі оброблені / необроблені виключення. Аналіз таких даних допоможе виявити ключові проблеми.