Оптимизация веб-приложений имеет решающее значение для любого веб-приложения. Вы можете повысить производительность с помощью современных форматов изображений, отложенной загрузки изображений, создания статических сайтов, Next.JS и Preact.
Современные методики повышения производительности.
Улучшение производительности веб-приложений может быть сложной задачей, и в этой статье я поделюсь некоторыми советами, которые облегчат вам эту задачу. Некоторые из этих советов применимы ко всем веб-приложениям, а некоторые относятся только к Next.js.
Next.js — это фреймворк, построенный на основе React и NodeJs, с поддержкой рендеринга на стороне сервера (SSR), создания статических сайтов (SSG), поддержки машинописного текста и отличной поддержки SEO.
Но зачем вообще использовать Next.JS вместо React или Angular?
Обычно, когда вы разрабатываете свое приложение с помощью React, Angular или ViewJ, вы создаете одностраничное приложение, которое также называется рендерингом на стороне клиента. В этом случае браузер получает почти пустую страницу, а затем заполняется данными, возвращаемыми API.
Но этот подход немного устарел для широкого круга приложений, поскольку имеет следующие недостатки:
- Приложение должно выполнять HTTP-запросы к серверу перед отображением всех данных на странице, и для загрузки данных и их отображения на странице требуется время.
- SPA не оптимизирован для SEO, так как сканер поисковой системы получает с сервера почти пустую страницу без данных.
Next.JS поддерживает генерацию статического сайта, рендеринг на стороне сервера, а также рендеринг на стороне клиента, и вы можете использовать все эти подходы в сочетании для повышения производительности веб-приложений и SEO без ущерба для вашего опыта разработки. Если вы не знакомы с этими понятиями, не беспокойтесь, потому что я опишу их в двух словах.
1. Оптимизация веб-приложений с помощью создания статических сайтов (SSG)
Ничто не может сравниться с простой статической страницей с точки зрения низкой задержки и производительности рендеринга. Вы можете пререндерить его с данными и мгновенно возвращать с сервера.
Предварительный рендеринг означает, что вы заранее собираете все данные и создаете статическую страницу с этими данными. Затем вы даже можете обслуживать эту страницу из CDN, ближайшего к пользователю, чтобы уменьшить задержку и заставить вашу страницу загружаться с сумасшедшей скоростью.
Если вы возвращаете статическую предварительно обработанную страницу с сервера, больше не нужно делать вызовы базы данных и нет необходимости в динамическом рендеринге на клиенте (если он вам не нужен). Этот метод называется созданием статических сайтов (SSG).
Самое интересное, что от вас даже не требуется писать бэкенд традиционным способом. Вместо создания внутреннего API вы можете написать код, который может извлекать данные непосредственно из базы данных во время создания статического сайта.
2. Используйте современные форматы изображений, такие как WebP и Avif, для оптимизации веб-приложений.
Изображения обычно занимают большую часть размера вашей страницы и имеют наибольшее влияние на время загрузки страницы.
В настоящее время JPEG и PNG являются мертвой древесиной, и есть гораздо лучшие альтернативы. Рассмотрим следующие современные форматы:
- WebP — это современный формат изображений, разработанный Google. Изображения на 25 % меньше по размеру, чем PNG, и на 25–24 % меньше, чем JPEG, без потери качества.
- Avif предлагает размер файла на 50% меньше, чем JPEG. Самый большой недостаток AVIF в настоящее время заключается в том, что ему не хватает единообразной поддержки во всех браузерах.
Оптимизация веб-приложений с использованием современных форматов изображений
Я не рекомендую использовать компонент Next.js Image, так как на практике он замедляет время загрузки изображения и на данном этапе бесполезен.
3. Настройка производительности веб-приложений с отложенной загрузкой изображений
HTTPArchive утверждает, что изображения занимают наибольшую пропускную способность по сравнению с другими веб-ресурсами, и они являются наиболее запрашиваемым типом данных для большинства веб-сайтов.
Можно оптимизировать загрузку изображений с помощью отложенной загрузки. Это метод загрузки изображений только тогда, когда они необходимы, вместо того, чтобы загружать их заранее. Допустим, у вас есть 100 изображений на странице. Вероятно, только некоторые из них отображаются, пока пользователь не прокрутит страницу вниз, и вы можете отложить загрузку изображений, которые в данный момент не видны в области просмотра, и загружать их по мере того, как пользователь прокручивает страницу.
- Лучшая производительность и время загрузки страницы обеспечивают лучший пользовательский интерфейс и рейтинг страницы в результатах поиска, поскольку производительность является одним из факторов, которые поисковые системы используют для ранжирования.
- Меньше затрат на передачу данных. Вы можете тратить меньше денег на передачу данных, так как ненужные изображения не будут загружены.
При таком подходе мы имеем следующие преимущества:
Атрибут загрузки позволяет отложить загрузку изображения:
Важное примечание: рекомендуется, чтобы изображения имели атрибуты высоты и ширины, чтобы избежать сдвигов макета, так как браузер заранее не знает, какое место резервировать для изображений.
Подробнее читайте в следующих статьях:
Оптимизация веб-приложений с помощью Preact
4. Замените React на Preact, чтобы уменьшить размер пакета и сократить время загрузки вашего веб-приложения (применимо к NextJs)
Позвольте мне подробно остановиться на теме React и Preact, чтобы убедить вас, что вам следует попробовать Pract, если вы хотите сократить свое веб-приложение до минимального размера.
React + react-dom имеет размер 109 КБ (34,8 КБ в сжатом виде). Если вы хотите максимально уменьшить размер пакета и сократить время загрузки, подумайте о замене React на Preact.
Preact — это быстрая альтернатива React размером 3 КБ с тем же API. Почему такая большая разница в размерах? Потому что Preact не реализует синтетическую систему событий по причинам размера и производительности.
Кроме того, Preact прекрасно работает с NextJs. Взгляните на официальный пример NextJs с Preact здесь.
5. Правильно используйте Bootstrap, чтобы сократить время загрузки веб-приложения
Я не рекомендую использовать React Bootstrap вместо обычного Bootstrap 5, если вы стремитесь к минимальному размеру пакета и времени загрузки, потому что React Bootstrap имеет значительные накладные расходы по сравнению с Bootstrap.
Важное примечание: если вы используете Bootstrap 5, импортируйте только те плагины, которые вам нужны индивидуально:
import 'bootstrap/js/dist/util'; import 'bootstrap/js/dist/dropdown';
6. Не используйте Moment.JS
О Moment.JS я решил написать отдельный абзац, так как это все еще достаточно популярная библиотека для работы с датами в JavaScript.
Moment.JS — это старая библиотека, которая может быть даже самой большой частью вашего пакета приложений. Даже в официальной документации говорится, что есть лучшие альтернативы. Он плохо работает с алгоритмами древовидной структуры и увеличивает размер пакетов веб-приложений.
Для дальнейшего чтения взгляните на следующие статьи:
7. Предварительно загрузите веб-шрифты, чтобы ускорить отображение вашего сайта.
По умолчанию запросы шрифтов откладываются до тех пор, пока не будет построено дерево рендеринга, что может привести к задержке рендеринга текста.
Можно переопределить поведение по умолчанию и предварительно загрузить ресурсы веб-шрифтов, используя <link rel="preload">.
Next.Js имеет встроенную оптимизацию шрифтов.
8. Используйте сервис-воркер для кэширования ресурсов, чтобы повысить производительность веб-приложений.
Service Worker — это прокси, который находится между веб-приложением, браузером и сетью (если доступно). Это позволяет перехватывать сетевые запросы и предпринимать соответствующие действия в зависимости от того, доступна ли сеть, например кэширование или чтение из кэша. С помощью сервисного работника вы можете кэшировать статические ресурсы и ответы API и создавать прогрессивное веб-приложение (PWA), которое можно установить на мобильные телефоны и использовать в автономном режиме.
Как только ваши ресурсы кэшируются, приложение может мгновенно отображать изображения, данные, шрифты и т. д. без необходимости загружать их с сервера.
Смотрите официальный пример NextJs здесь.
9. Проанализируйте свой пакет, чтобы сократить время загрузки веб-приложения
Наконец, мой последний совет — используйте инструменты, которые позволяют анализировать ваши пакеты и избавляться от всего, что вам не нужно.
Плагин VS Code Стоимость импорта показывает размер каждого импорта:
Bundle Analyzer анализирует вывод вашего веб-пакета, чтобы вы могли отследить каждую зависимость в вашем проекте:
10. Измеряйте производительность вашего веб-приложения с помощью Lighthouse
Lighthouse — это инструмент для улучшения качества веб-страниц. Вы можете запустить его на любой веб-странице. У него есть аудиты производительности, доступности, прогрессивных веб-приложений, SEO и многого другого.
Самый простой способ запустить его — через инструменты Chrome Dev или web.dev.
После запуска вы получите следующий экран с результатами:
В этом отчете вы также найдете советы по улучшению вашей страницы.
Заключение
Если вам нужна максимальная производительность и минимальное время загрузки, сократите свой сайт до минимума и удалите лишние пакеты, такие как Bootstrap и Material, MomentJs и т. д. Сжимайте изображения и используйте современные форматы изображений, такие как WebP и Avif. Предварительно сгенерируйте свои страницы с помощью SSG.
Спасибо за чтение, и я надеюсь, что вы нашли эту статью полезной. Если у вас есть какие-либо вопросы, дайте мне знать в комментариях ниже.
Первоначально опубликовано на https://alexpavlov.dev 21 марта 2022 г.
