Создание подключения к сети 3G в 34 провинциях Индонезии

Dana Cita - финтех-стартап из Индонезии, специализирующийся на студенческих ссудах. Мы финансируем студентов для получения высшего образования и сотрудничаем со школами программирования, такими как Hacktiv8, Purwadhika Startup and Coding School и Algoritma. Мы начали свою деятельность в 2017 году, и сейчас мы работаем в 164 школах по всей Индонезии.

Зачем нам нужен более быстрый веб-сайт?

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

По мере роста Dana Cita мы начали понимать, что, несмотря на то, что в столице мы пользуемся быстрым и относительно стабильным интернет-соединением, многие из наших пользователей не имеют такой привилегии. Большая часть нашего 264-миллионного населения не имеет доступа к высокоскоростному Интернету - ни Wi-Fi, ни 4G. Поскольку мы выросли до 164 кампусов по всей Индонезии, нам необходимо сделать наш веб-сайт работоспособным в реальном мире.

Мы начали аудит нашего сайта с Lighthouse и сосредоточились на том, как наш сайт работает в реальном мире. Первые результаты были совсем не хорошими!

Разделение кода в React

Dana Cita - одностраничное приложение, созданное с использованием React. Хотя React невероятен для создания интерактивных веб-приложений, у него есть некоторые недостатки. В нашем случае ему необходимо загрузить весь набор приложений в браузер пользователя. По мере того, как наше приложение росло и включало больше функций, размер пакета приложения рос, как и время загрузки.

К счастью, в React есть замечательная функция разделения кода, которая позволяет нам разбить пакет на несколько частей, которые можно динамически загружать во время выполнения. Мы нашли loadable-components, библиотеку, которая помогла с разделением кода.

Реализовать это так же просто, как добавить несколько строк кода:

import loadable from '@loadable/component';
const HomeComponent = loadable(
  () => import('./components/Home'),
  {
    fallback: <Loading />
  }
);

Сжатие изображений и отложенная загрузка

Другой метод оптимизации, который мы используем, - это сжатие изображений и ленивая загрузка изображений с помощью response-lazyload. Я рекомендую вам использовать ImageOptim или tinypng для сжатия изображения, так как они дают действительно хорошие результаты.

Это значительно снижает наши Time to Interactive показатели, поскольку размеры файлов изображений уменьшаются более чем на 60% (иногда даже до 80%), и мы не загружаем изображения, которые на самом деле не нужны во время первой загрузки.

Полученные результаты

По оценке Lighthouse, производительность сайта увеличилась в 2,5 раза 🎉

55 баллов - это еще далеко не то, что нужно, чтобы Dana Cita могла быстро загружаться на телефон каждого студента в Индонезии. Мы очень много работаем, чтобы этого добиться.

Это только начало нашей работы по повышению производительности нашего веб-сайта. Мы продолжим писать о методах, которые мы используем для повышения производительности нашего веб-сайта. Будьте на связи!

Заключительные замечания

Вы заинтересованы в том, чтобы сделать образование более доступным для всех? Отправьте свое резюме на [email protected] или напишите мне в LinkedIn.