После завершения работы над приложением настало время получить отзывы пользователей, провести тестирование и повысить производительность.

Отзывы пользователей

  • Получение сообщения об ошибке "Что-то пошло не так на каждой странице":Это была первая ошибка, с которой я столкнулся, как только попросил коллег-стажеров оставить отзыв. Но приложение работало правильно в моей системе. Итак, проведя небольшое исследование моей кодовой базы, я обнаружил, что URL-адрес HTTP-запроса, который приложение отправляло в Hasura Data API, был неверным. URL-адрес должен быть http://data.khana-plaza.hasura.me/вместо http://data.c100.hasura.me/ .
  • Изменения в форме «Разместить заказ». В форме «Разместить заказ» приложение просило пользователей ввести название блюда, которое они хотели заказать. Сначала он работал отлично, но позже один из моих друзей, не являющихся разработчиками, указал на проблему. Он сказал, что при заказе «Laccha Paratha» он сделал опечатку «Laccha paratha», что в конечном итоге привело к неправильному запросу. И ему снова пришлось делать новый заказ! Поэтому я решил не брать текстовый ввод от пользователя, скорее я бы отображал все блюда в виде опций и пользователю нужно будет просто их выбрать. Названия блюд отсортированы в алфавитном порядке, что помогает пользователю быстро найти блюдо, которое он ищет.

Оптимизация производительности

Я использовал инструмент под названием PageSpeed для оптимизации производительности моего веб-приложения. Это инструмент от Google, который помогает разработчикам создавать высокопроизводительные веб-приложения. С помощью PageSpeed ​​Insights вы можете найти способы сделать свой сайт быстрее и удобнее для мобильных устройств. Вот некоторые из рекомендаций по оптимизации, которым я следовал:

  • Минимизируйте HTML, CSS и JavaScript. Сокращение критически важных ресурсов, т. е. HTML, CSS и JavaScript, значительно уменьшает размер документа! Например, индексная страница моего приложения после минификации уменьшилась до 26,83%. Точно так же мой файл JavaScript сократился до 52,70% и CSS 26,13%! Для получения дополнительной информации выберите Google Developer -> Web Fundamentals или Нажмите здесь.
  • Сжатие критически важных ресурсов с помощью Gzip.Включение gzip compression может уменьшить размер передаваемого ответа до 90 %, что может значительно сократить время загрузки ресурса, сократить использование данных для клиента и улучшить время до первого рендеринга ваших страниц. Чтобы включить сжатие Gzip на сервере [email protected], нам нужно установить пакет под названием сжатие. После этого мы можем использовать его в качестве промежуточного программного обеспечения непосредственно в нашем файле server.js.
var express = require('express');
var compression = require('compression');
var app = express();
app.use(compression());
app.use(express.static(__dirname + '/public'));
app.listen(8080);

Это включит сжатие Gzip для всех статических файлов нашего веб-приложения.

  • Кэширование критически важных ресурсов.Извлечение ресурсов по сети является медленным и дорогостоящим процессом: для загрузки может потребоваться несколько циклов обмена данными между клиентом и сервером, что задерживает обработку и может блокировать отрисовку содержимого страницы, а также требует данных. затраты на посетителя. Следовательно, кэширование очень важно для повышения производительности веб-приложения. Для кеширования статических ресурсов я использовал пакет Cache-Control, подробности смотрите в документации.

Вот скриншот анализа производительности моего веб-приложения…

Вы можете подумать, почему в качестве возможных оптимизаций я получаю Использовать кэширование браузера и Включить сжатие. Это потому, что я включил кеширование и сжатие только для статических файлов, т.е. я по-прежнему не сжимаю и не кэширую изображения, потому что они не являются частью моей базы данных. Я просто использую ссылку для получения изображений, поэтому я не могу сжимать или кэшировать их через свой сервер Express!

Пожалуйста, прокомментируйте ниже любые предложения или отзывы…