Используйте динамический импорт
Posted: Wed Dec 04, 2024 10:36 am
При работе со сложными веб-приложениями, которые содержат много интерактивных компонентов, таких как формы регистрации, модальные окна или всплывающие окна, вы можете повысить производительность, используя динамический импорт . Такой подход гарантирует, что только необходимый код загружается тогда, когда он действительно нужен, а не при начальной загрузке страницы.
Например, представьте, что у вас есть регистрационная форма, скрытая за модальным окном. По умолчанию, когда пользователь посещает страницу, код формы (включая все ее поля) загружается, даже если пользователь не нажимает кнопку, чтобы открыть модальное окно. Это означает, что время загрузки страницы увеличивается, поскольку она извлекает код, с которым пользователь может не взаимодействовать сразу.
При динамическом импорте код для этой формы будет загружен только тогда, когда пользователь нажмет кнопку, чтобы открыть модальное окно. Это может значительно сократить начальное время загрузки вашего веб-приложения, поскольку вам не придется заранее загружать ненужный код.
Совет №6: Остерегайтесь смещения макета
Я попытался оптимизировать наш сайт Непал B2B ведет с помощью динамического импорта, что сократило время загрузки JavaScript на несколько секунд, но наш новый Lighthouse Score оказался ниже, чем раньше, из-за значительных сдвигов макета. Сдвиг макета происходит, когда элементы на веб-странице внезапно перемещаются или «прыгают» во время загрузки страницы, создавая неприятный опыт для пользователя. Это считается плохим пользовательским опытом и , как я уже описал, может значительно снизить ваш Lighthouse Score .
Одной из распространенных причин смещения макета является загрузка больших изображений или других тяжелых ресурсов. Если изображение не имеет выделенного места, зарезервированного во время загрузки, это может заставить другие элементы сместиться, когда оно наконец появится.
Чтобы предотвратить сдвиги макета, важно резервировать место для изображений и контента по мере их загрузки. Одним из эффективных решений является использование скелетного пользовательского интерфейса — элементов-заполнителей, которые имитируют структуру конечного контента. Скелеты могут сохранять макет стабильным во время загрузки контента, обеспечивая более плавный опыт с момента начала загрузки страницы. Такие инструменты, как Next.js, предлагают встроенную оптимизацию изображений с прозрачными заполнителями для резервирования места, поддерживая последовательный макет страницы и избегая неожиданных скачков.
Пример скелетного пользовательского интерфейса в приложении Kontent.ai
Совет №7: Подумайте об этих вещах целостно
При выполнении этих оптимизаций важно целостно рассматривать производительность вашего сайта, особенно когда речь идет о вашем рейтинге Lighthouse. Для маркетинговых сайтов высокий рейтинг Lighthouse имеет решающее значение, поскольку он напрямую влияет на SEO, влияя на то, как ваш сайт ранжируется в результатах поиска, и в конечном итоге на органический трафик. Но если вы работаете над приложениями, куда пользователи в основном приходят для выполнения задач или работы, акцент на SEO менее важен. В этих случаях сосредоточение на показателях Lighthouse может не дать тех же преимуществ. Вместо этого отдайте приоритет бесперебойному пользовательскому опыту, который поддерживает цели ваших пользователей.
Например, представьте, что у вас есть регистрационная форма, скрытая за модальным окном. По умолчанию, когда пользователь посещает страницу, код формы (включая все ее поля) загружается, даже если пользователь не нажимает кнопку, чтобы открыть модальное окно. Это означает, что время загрузки страницы увеличивается, поскольку она извлекает код, с которым пользователь может не взаимодействовать сразу.
При динамическом импорте код для этой формы будет загружен только тогда, когда пользователь нажмет кнопку, чтобы открыть модальное окно. Это может значительно сократить начальное время загрузки вашего веб-приложения, поскольку вам не придется заранее загружать ненужный код.
Совет №6: Остерегайтесь смещения макета
Я попытался оптимизировать наш сайт Непал B2B ведет с помощью динамического импорта, что сократило время загрузки JavaScript на несколько секунд, но наш новый Lighthouse Score оказался ниже, чем раньше, из-за значительных сдвигов макета. Сдвиг макета происходит, когда элементы на веб-странице внезапно перемещаются или «прыгают» во время загрузки страницы, создавая неприятный опыт для пользователя. Это считается плохим пользовательским опытом и , как я уже описал, может значительно снизить ваш Lighthouse Score .
Одной из распространенных причин смещения макета является загрузка больших изображений или других тяжелых ресурсов. Если изображение не имеет выделенного места, зарезервированного во время загрузки, это может заставить другие элементы сместиться, когда оно наконец появится.
Чтобы предотвратить сдвиги макета, важно резервировать место для изображений и контента по мере их загрузки. Одним из эффективных решений является использование скелетного пользовательского интерфейса — элементов-заполнителей, которые имитируют структуру конечного контента. Скелеты могут сохранять макет стабильным во время загрузки контента, обеспечивая более плавный опыт с момента начала загрузки страницы. Такие инструменты, как Next.js, предлагают встроенную оптимизацию изображений с прозрачными заполнителями для резервирования места, поддерживая последовательный макет страницы и избегая неожиданных скачков.
Пример скелетного пользовательского интерфейса в приложении Kontent.ai
Совет №7: Подумайте об этих вещах целостно
При выполнении этих оптимизаций важно целостно рассматривать производительность вашего сайта, особенно когда речь идет о вашем рейтинге Lighthouse. Для маркетинговых сайтов высокий рейтинг Lighthouse имеет решающее значение, поскольку он напрямую влияет на SEO, влияя на то, как ваш сайт ранжируется в результатах поиска, и в конечном итоге на органический трафик. Но если вы работаете над приложениями, куда пользователи в основном приходят для выполнения задач или работы, акцент на SEO менее важен. В этих случаях сосредоточение на показателях Lighthouse может не дать тех же преимуществ. Вместо этого отдайте приоритет бесперебойному пользовательскому опыту, который поддерживает цели ваших пользователей.