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

‏Source proglib.io