Оптимизация производительности страницы (изображение) с помощью наблюдателя пересечений

Одностраничные приложения (SPA) становятся все более популярными. Спасибо этим замечательным фреймворкам Javascript, которые сделали веб-приложение лучше и продвинутее 👏🏼.

Однако сейчас оптимизация производительности веб-страниц имеет решающее значение. Это связано с тем, что отзывчивость страницы значительно влияет на то, останется ли клиент на конкретном сайте или нет.

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

Интернет действительно предоставляет множество решений для ленивой загрузки изображений. Но они не поддерживают адаптивные изображения, заполнители с анимацией из коробки и не позволяют соблюсти пороговое значение расстояния до изображения перед запуском загрузки. Поэтому мы решили решить эту проблему и внести свой вклад в сообщество React. ✍️ Я хотел бы поблагодарить Юсинто Нгадимана и Уилла По за их замечательные усилия по содействию 🎩.

Представляем Реагировать на простое изображение: библиотека компонентов React позволяет загружать изображения по запросу и очень просто настраивается с помощью заполнителей и анимации. Вот краткий пример кода того, как это работает 😘.

import { SimpleImg } from 'react-lazyLoad-images'; 
export const App = () => <SimpleImg src="your image path" />;

Вам нужно только использовать компонент SimpleImg, и изображение будет лениво загружаться с анимацией. 💥

Вот чего достигает часть-заполнитель react-simple-img:

Супер просто правильно!! Я также создал демонстрационную страницу, не стесняйтесь проверить ее. здесь.

Теперь мы получаем гораздо более быстрое значимое время рисования, которое происходит до того, как изображение полностью загрузится, даже при медленном сетевом соединении. Все изображения лениво загружаются с заполнителями и анимацией. Страница выглядит еще красивее 👏👏👏

Итак, если вы ищете способ оптимизировать свою веб-страницу, почему бы не попробовать React Simple Img! Если вы найдете это полезным, оставьте мне звезду на GitHub. Это определенно сделало бы мой день. ❤️❤️❤️ Также, пожалуйста, не стесняйтесь оставлять вопросы в разделе комментариев ниже.

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