Взято з сайту senior.ua
Не можна просто так взяти і викласти сайт в світ! Навіть модні CMS не врятують. Ми зібрали ключові особливості запуску нового ресурсу.
Зовнішній вигляд і користувачі
- Пам'ятай, що браузери працюють по-різному, і відповідно, показувати інфу вони теж будуть по-своєму. Перевір, як себе веде сайт в існуючих браузерах/движках: Firefox / Gecko, Safari / WebKit, Chrome, IE, Opera і (якщо це можливо) в деяких мобільних браузерах. Можна перевірити, як сайт відображається на різних ОС.
- Враховуй той факт, що люди можуть юзати сайт на кноппкових телефонах, читалках і інших дивних девайсах. Існують стандарти доступності інтернет-додатків для людей з обмеженими можливостями, які теж треба б застосовувати. Почитай мануал по WAI і прийми до відома.
- Розгортання оновлень непомітне для користувачів. Буде здорово, якщо у тебе з'явиться можливість тестувати продукт на проміжному хостингу з виходом в мережу (не на локальній машині з трьома віртуалками) і т.д. Це дозволить перевірити «підгрузку» модулів, реалізацію змін в архітектурі і коді, і інші важливі штуки, здатні налякати юзера на старті. Найбільш ефективне поєднання системи контролю версій (git, Subversion і ін.) І механізму автозборки (Ant, NAnt і ін.).
- Повідключати всі костилі, створені для дебага. Ці інструменти виводять службовіповідомлення, про існування яких користувачеві знати необов'язково.
- Якщо є які-небудь форми, захисти їх капчами.
- Вивчи теорію прогресивного вдосконалення.
- Всі дані користувача/для користувача (пошта, телефон) потрібно приховувати — спамери і краулери не дрімають.
- Використовуй з розумом атрибут " nofollow ". Почитай про нього окремо.
- На сайті не повинно бути таких сторінок, які б при старті оновлювалися кілька разів або довго довантажували вміст.
- Перенаправляє всіх після POST-a, якщо він був успішним, щоб не допустити дублюючої відправки чого-небудь на сервер (це може бути як дублюючий запис в базу, так і крута ін'єкція, від якої потім будуть проблеми).
Безпека
- Вивчи гайд по OWASP , що охоплює всі тонкощі безпеки сайту.
- Дізнайся все про ін'єкції (особливо SQL) і про те, як їх не пропустити.
- Всі поля введення повинні бути захищені горою перевірок, валідацій і інших механізмів. Не вір нікому!
- Використовуй "міцні" алгоритми хешування паролів для їх надійного зберігання.
- Не винаходь велосипед, намагаючись придумати свою систему аутентифікації. Все вже готово! А якщо ти випустиш щось незначне або НЕ врахуєш — тобі на це вкаже хакер з вимогою певної суми.
- Якщо на сайті використовується платіжна система — гарненько вивчи це питання.
- На будь-яких сайтах, де вводиться конфіденційна інфа (облікові дані, особиста інформація, дані кредитної картки), юзай SSL/TLS/HTTPS. Let"s Encrypt - ось безкоштовний центр сертифікації, який може допомогти.
- Запобігай можливим викраданням сесії.
- Уникай міжсайтового скриптингу (XSS).
- Стережися підробок міжсайтових запитів (CSRF).
- Захисти ресурс від Clickjacking.
- Підтримуй систему завжди в оновленому стані.
- Не зберігай файл з даними для підключення до БД "на видному місці".
- Прочитай хендбук з безпеки від Google .
- Допиши rel= "noopener noreferrer"до всіх посилань з target="_blank", щоб запобігти JavaScript-перенаправленню з головної сторінки на підроблену.
- Розглянь можливість використання Content Security Policy.
Продуктивність
- Обов'язково реалізуй кешування. Тільки реалізуй правильно, бо можна налаштувати так, що користувач не побачить оновлення протягом трьох діб.
- Якщо контент довго завантажується (більше 2-3 секунд), прироби прелоадер.
- Оптимізуй всі картинки. Google радить використовувати якісні та релевантні зображення без тексту.
- Для перевірки загального стану ресурсу юзай крутий інструмент (знову від Google). Існує ще кілька варіантів — від Yahoo і набір тулз YSlow.
- Використовуй стиснення вмісту brotli , gzip / deflate .
- Прагни до об'єднання кількох CSS-таблиць або декількох JS-файлів, щоб зменшити кількість з'єднань і поліпшити продуктивність gzip.
- Застосовуй svg, де це можливо. Почитай рекомендації для веб-девелоперів, щоб краще розбиратися в темі.
- Якщо ресурс високонавантажених, використовуй принцип паралельного завантаження — розділи статичний і динамічний вміст між доменами.
- Статичний контент (зображення, CSS, JavaScript і контент, який не потребує доступів до куків) повинен відправлятися в окремий домен, який не використовує файли cookie. Це все для того, щоб при кожному зверненні до домену та піддомену гора куків не навантажувала з'єднання. Юзай CDN.
- Максимально скороти загальну кількість HTTP-запитів, які потрібні для відображення сторінки.
- Почитай, що таке таск-раннери і для чого вони потрібні. Вибери будь-який: Gulp , Grunt , Brocolli або Brunch і прикрути обов'язково до сайту.
- Уважно поставтеся до такого "маловажливого" моменту, як фавікон. Він повинен бути в корені сайту, /favicon.ico. Браузери автоматично запросять його, навіть якщо значок взагалі не згадується в коді. Якщо у тебе його немає — настав час його додати.
- Найголовніше правило для цього пункту — роби сайти для людей, а не для пошукових систем. З кожним роком сеошні алгоритми змінюються, але концепція залишається незмінною.
- Використовуй "зрозумілі" URL. Посилань виду: https://proglib.io/rr6r7f734Xf3w444 бути не повинно.
- Подбай про те, щоб основні теги ( title, descriptionі т.д.) були заповнені коректної інфою.
- Можна погратися з Open Graph мітками.
- Можна юзати crawl для динамічного контенту. Це дозволить пошуковим роботам краще, а головне, швидше індексувати сторінки.
- Візьми за правило — посилання типу: "тиць", "сюди", "Click here" не принесуть користь твоєму SEO. Посилання має нести сенс. Людина і бот повинні розуміти, куди веде анкор.
- Відшукай всі неіснуючі сторінки і видали все сміття. Посилання, що ведуть на неіснуючу сторінку, повинні повертати красиву заглушку 404, а не "Сторінку не знайдено".
- Дивний файлик sitemap.xml повинен бути в корені, і не вір тому, хто говорить інакше!
- Вивчи, що таке www.example.com на example.com(або навпаки).
Функціонал
- Такі речі, як HTTP, GET, POST, сесії, куки повинні "відлітати від зубів".
- Пиши XHTML / HTML і CSS у відповідності зі специфікаціями W3C і переконайся, що вони проходять валідацію. Це необхідно, щоб зробити роботу з нетрадиційними браузерами, читалками і т.д. простіше і ефективніше.
- Розберися, як підгружается JavaScript, таблиці стилів і інші ресурси, що використовуються на сторінці під час її завантаження, і як вони впливають на продуктивність. Перемісти всі скрипти в нижню частину сторінки.
- Якщо збираєшся використовувати iframes, розберися, як працює JavaScript sandbox.
- Пам'ятай, що NoScript стає все більш популярним, а з ним мобільні девайси можуть працювати не так, як очікувалося. Коли-небудь Google проіндексує сайт, і частина JS перестане запускатися.
- Розберися в різниці між редіректом 301 і 302.
- Розглянь можливість використання нормалізації CSS.
- Існують фреймворки такі, як jQuery, MooTools, Prototype, Dojo і YUI 3, які згладжують більшість відмінностей між браузерами при маніпуляції DOM.
- Перевір адмінку на предмет залиття файлів і працездатності навігації.
- Поміняй дефолтні логін / пароль на щось своє!
- Для оптимізації продуктивності різних фреймворків використовуй Google Libraries API, щоб запобігти марній дублюючій підгрузці.
Пошук і виправлення помилок
- Ти будеш витрачати 20% свого часу на кодинг і 80% на його підтримку, тому створюй код відповідно.
- Якщо сайт крутиться на WP, то для вмикання / вимикання дебага константа WP_DEBUG повинна бути true/false відповідно. Якщо движок інший, то напиши в .htaccess для директив php_flag display_errors, php_flag display_startup_errors, php_flag html_errors значення on або off.
- Прикрути до сайту систему, завдяки якій користувачі зможуть повідомляти про можливі проблеми.
- Добре документуй код і функціонал продукту, щоб в майбутньому тобі (і, можливо, іншим колегам) було простіше виконувати технічне обслуговування.
- Регулярно роби резервні копії і переконайся, що резервування працює, щоб потім не було нестерпно боляче.
- Обов'язково юзай систему контролю версій: Subversion , Mercurial або Git.
- Перед запуском не забудь провести тестування. Selenium тобі в допомогу. Якщо ж ти хочеш автоматизувати цей процес, то дивись в сторону CI інструментів, наприклад, Jenkins .
- Логування ніхто не відміняв. У цьому тобі можуть допомогти log4j , log4net або log4r .
- Записуй в журнал всі події і всі оброблені / необроблені виключення. Аналіз таких даних допоможе виявити ключові проблеми.
