Маркетинг часами исследует лучшие шаблоны дизайна и проводит фокус-группы для оптимального взаимодействия с пользователем. Архитекторы и руководители групп тратят огромное количество времени на продвижение новых и новейших технологий. Месяцы превращаются в годы, и, наконец, вы запускаете свой новый веб-сайт с большой помпой и на ура.
За бесчисленные часы исследований и разработок вашего бизнеса вы получаете неудовлетворенность, жалобы и разочарование. Клиенты не готовы к изменениям, и когда изменение сопровождается низкой производительностью, вы получаете массовое недовольство со стороны вашей клиентской базы. Вы спустились в эту кроличью нору, и теперь мы посмотрим, как вы сможете восстановиться.
Решение довольно простое. Это распознавание контекста и содержимого веб-приложения. Взгляните на любую веб-страницу. Теперь, когда вы просматриваете веб-сайт, спросите себя, что изменилось. Меню всегда остается неизменным, нижний колонтитул и верхний колонтитул всегда одинаковы. На самом деле меняется только небольшая часть экрана; однако веб-сайт будет выполнять полную загрузку страниц при каждом щелчке. Дело в том, что содержание и контекст являются симбиотическими сущностями; они полагаются друг на друга; но это отдельные элементы. Однако в мире Интернета мы не видим разницы и относимся ко всем как к одному и тому же.
Сейчас созданы такие фреймворки, как AngularJS, React, Ember и др. Все они обеспечивают структуру, которая может обеспечить этот одностраничный дизайн; однако накладные расходы при использовании этих платформ создают неотзывчивую среду, которая скорее разочарует, чем поможет вашим клиентам.
Давайте рассмотрим 4 простых шага, которые вы можете выполнить для создания высококачественного веб-приложения.
Шаг первый.
Выберите хорошую систему управления контентом. Мы хотим, чтобы UX-дизайнеры отвечали за наш сайт. Если они довольны генерацией контента и любыми требованиями к локализации, то можно продолжать. Разработчики не должны сопротивляться, поскольку их роль будет заключаться в доставке контента. Контекст — это то, в чем дизайнеры имеют опыт, и это должно быть их сферой, чтобы выбрать то, что им подходит. Единственным предостережением будет выбор продукта, который загружается слишком долго. Пункты, которые я сделаю в следующих шагах, позволят оптимизировать просмотр страницы при последующих посещениях, но первоначальный просмотр, если он будет длиться слишком долго, будет препятствовать удовлетворению клиентов. Как правило, все, что превышает 1 секунду, отпугнет ваших клиентов от использования вашего сайта. Если у вас уже есть веб-сайт; отличный. Переходим ко второму шагу.
Шаг второй.
Теперь у дизайнеров есть несколько настроек страниц. В зависимости от того, как работает система управления контентом, вы захотите оптимизировать загрузку страниц, когда пользователь выбирает разные ссылки. Если ссылки перезагружают всю страницу; давайте спросим у дизайнеров, что меняется и не меняется на сайте. Здесь мы сейчас извлекаем контент и контекст. Как вы узнаете, большинство сценариев, меню, заголовки вкладок и нижние колонтитулы не меняются. Это контекст. Поскольку людям нравится последовательность, а не хаос при создании точки отсчета, мы все можем согласиться, что это хорошо. Сейчас есть много способов сделать это, но допустим, вы используете старую систему, и ее сложно изменить прямо сейчас. Я бы обновил каждую ссылку на веб-странице, чтобы вместо вызова URL-адреса передать URL-адрес страницы функции JavaScript. Эта функция сделает обратный вызов ajax на сервер; собирать только релевантные данные (контент) и отображать их на экране без полной перезагрузки страницы. Настройте это по своему усмотрению. Для некоторых вызовов может потребоваться обновление информации в обычно статических областях, таких как заголовок. Это нормально, сделайте еще один вызов ajax, чтобы обновить определенную область, например, баланс в правом верхнем углу может потребоваться обновить в определенных сценариях. Как разработчик, вы должны быть дирижером оркестра, единственное условие — вы никогда не сможете выбирать, кто какие инструменты принесет, но это нормально.
Шаг третий.
Используйте локальное хранилище. Малоиспользуемый, но очень полезный компонент всех современных веб-браузеров — локальное хранилище. Как и файл cookie, он будет хранить постоянные данные в вашем браузере; в отличие от файлов cookie, для ваших данных нет реальных ограничений по размеру. Мы можем создать уникальную переменную в локальном хранилище для хранения html вашего сайта. При первой загрузке сохраните контекстную информацию в переменной локального хранилища. При последующих загрузках не загружайте веб-страницу снова, а просто возьмите ее из этой переменной. Если вам нужно обновить эту страницу новым содержанием, просто включите версию в URL-адрес или сохраните в файле cookie.
Шаг четвертый.
Только данные сейчас. Итак, теперь ваша веб-страница работает молниеносно. Нет, вы просто используете вызовы ajax для получения данных. В идеале вы хотели бы минимизировать пропускную способность, поэтому лучше всего просто передавать данные в формате json/XML (предпочтительно json). Форматирование будет выполнено с помощью JavaScript.
Вскоре вы увидите, как можно перейти от тяжелого громоздкого веб-сайта к гладкому и удобному пользовательскому интерфейсу.
Предупреждение: у некоторых фреймворков могут возникнуть проблемы с реализацией этого прироста производительности. Я успешно использовал Selenium для извлечения конечного содержимого веб-страницы. Оттуда вы можете использовать это как веб-страницу, на которой вы можете выполнять оптимизацию.
