75 моментов, которые ты обязан учесть перед запуском сайта

Нельзя просто так взять и выложить сайт в мир! Даже модные 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). Существует еще несколько вариантов – от 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 должен быть в корне, и не верь тому, кто говорит иначе!
  
• Изучи, что это такое <link rel="canonical" ... />, и применяй.
  
• Для успешного мониторинга SEO, получения всякой аналитики и не только используй Google Webmaster Tools и Bing Webmaster Tools.
  
• Еще один полезный инструментарий – Google Analytics. И нет, он не только для рекламы, как все думают! Есть сторонний софт для этих же целей.
  
• Почитай, как robots.txt помогает поисковым паукам работать лучше.
  
• Всегда используй 301 Moved Permanently, например, после изменения www.example.com на example.com (или наоборот).
  

Как это сделано?

• Такие вещи, как HTTP, GET, POST, сессии, куки должны "отлетать от зубов".

• Пиши XHTML/HTML и CSS в соответствии со спецификациями W3C и убедись, что они проходят валидацию. Это необходимо, чтобы сделать работу с нетрадиционными браузерами, читалками и т. д. проще и эффективнее.
• JavaScript, и как он обрабатывается браузером.

• Разберись, как подгружается 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.
  
• Записывай в журнал все события и все обработанные/необработанные исключения. Анализ таких данных поможет выявить ключевые проблемы.