eFusion 21 ноября 2019

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

РУБРИКИ В СТАТЬЕ

Комментарии 0

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

BUG