Как я сделал SPA в два раза быстрее

[ris58h]

Радует, что хоть кто-то заботится о производительности сайтов.

Подскажите, как можно улучшить показатели производительности одного сайта ниже?

Показатели производительности одного сайта

[Alexufo]

Ну лайтхаус же даёт аудит, что сделать

[Metotron0]

Это же ирония, что Хабр не оптимизирован. Или я просто не распознал вашу постиронию?

[nin-jin]

Вот так:

[webhead]

Спасибо за отличный разбор ускорения рендеринга страниц. Занимались ли вы проблемой уменьшения блокировок из-за стороннего кода (Метрика, Google Tag Manager, VK-пиксель)?
Из личного опыта - переход на изображения в формате .webp дает неплохой прирост скорости.

[sadiolem]

Спасибо!

Такой проблемой не занимались. А про картинки да, возможно стоило добавить в статье, что у нас используется CDN сервис (imagekit), который автоматически конвертирует изображения в webp и еще позволяет загружать изображения только нужного размера

[gmtd]

Немного контекста: я работаю frontend-разработчиком в компании, которая в основном занимается разработкой MVP (Minimum Viable Product),

Скажите, а куда деваются те MVP, которые вы делаете после того, как вы их сделали?

[sadiolem]

Обычно заказчик смотрит, взлетает ли идея, а уже в зависимости от этого принимается решение, хоронить проект или развивать дальше.

[nin-jin]

А какие фичи из Firebase вы используете? Может ну его?

[sadiolem]

Звучало такое предложение, как раз из-за влияния Firebase на перформанс) но пока решили, что трудозатраты перехода того не стоят...

У нас вся инфраструктура находится в облаке, в котором есть свои сервисы, и в том числе авторизация с Firebase. У Firebase много готовых решений как на беке, так и на фронте, работает очень стабильно и не требует разворачивания сторонних сервисов (которые нужно либо хостать у себя, либо разворачивать инстанс за оплату в месяц)

[nin-jin]

Так а что за готовые решения для него вы используете помимо авторизации? И каких возможно не хватает? Мне это нужно для понимания векторов развития своего убийцы фаербейза.

[Yaroz]

Спасибо большое, хоть я и не являюсь frontend разработчиком, читать было очень интересно.

[Daseron]

У меня много места занимает MUI, надо переходить на другой UI KIT

[sadiolem]

Даже с tree-shaking? У нас из-за Vuetify тоже много чего лишнего есть, но мы выбрали стратегию использовать его по минимуму - только для функциональных компонентов (селекты, модалки и тд), а визуальные пишем сами.

Это, в том числе, облегчило миграцию проекта с Vue 2 на 3, тк пришлось проходить через меньшее количество breaking changes у Vuetify 3, а также закладывает почву для того, чтобы однажды вообще отказаться от Vuetify

[Daseron]

С ним он весит почти 280KB. Учитывая что я еще использую Apollo, graphql и React? то мой node_modules занимает почти 75%. Надо посмотреть может есть какие-то способы уменьшить их размер. Но это все без next.js, с ним страница не превышает 200kb.

[rastop123]

Я бы еще добавил упоминание того что например chrome браузер может делать одновременно до 6 соединений на вкладку и даже если делать promise.All то запросы будут выполняться пачками по 6 штук

[sadiolem]

Спасибо за дополнение, в каких-то случаях это действительно можно учитывать

[ray_qwer]

Неактуально для HTTP2. Надеюсь у автора он настроен

[atmden]

Если проект на vue, как вы справляетесь с оптимизацией страниц для индексирования их поисковиками? Почему не используете nuxt?

[sadiolem]

Справляемся за счет того, что у нас есть собственный SSR, но это отдельная большая тема)

С Nuxt был не очень веселый опыт раньше, когда мы решили SPA на него переписать (какие-то либы отваливались, интеграция с firebase вроде еще в бете была), но сейчас думаю мы к этому больше готовы и в принципе присматриваемся к Nuxt 3

[lilkan]

Поисковик индексирует обычные страницы на vue, просто он делает это дольше чем серверные)

[Klimonov]

Отличная статья! Было интересно читать.

[amakhrov]

Еще стили шрифта с гугл можно заинлайнить в html, вмесо того, чтобы загружать отдельно через <link>. Angular так из коробки делает, например (https://angular.io/guide/workspace-config#fonts-optimization-options).

[gmtd]

Шрифты гугла надо сдублировать на сайт
И использовать Service worker с его кэшированием

Вообще, читать статью про оптимизацию web app без упоминания кэширования SW это какой-то нонсенс

[lilkan]

Странный оверкил ибо шрифты гугла и так кешируются без воркеров.

[john_samilin]

как наклеивать пластырь, если вы выстрелили себе в ногу с помощью фреймворка