Omówienie metod efektywnego wczytywania popularnych elementów zewnętrznych.
Wiele witryn korzysta z wstawionych treści innych firm, aby uatrakcyjniej prezentować treści dla użytkowników. Polega to na delegowaniu niektórych sekcji strony internetowej do innego dostawcy treści. Najczęściej umieszczanymi treściami są odtwarzacze wideo, kanały mediów społecznościowych, mapy i reklamy.
Treści osób trzecich mogą wpływać na wydajność strony na wiele sposobów. Może blokować renderowanie, konkurować z innymi ważnymi zasobami w zakresie sieci i przepustowości lub wpływać na podstawowe wskaźniki internetowe. Osadzone obiekty innych firm również mogą powodować przesunięcia układu podczas wczytywania. W tym artykule omawiamy sprawdzone metody dotyczące wydajności, których możesz używać podczas wczytywania elementów zewnętrznych, skuteczne techniki wczytywania oraz narzędzie do eliminowania zmian układu, które pomaga ograniczać zmiany układu w przypadku popularnych elementów zewnętrznych.
Co to jest osadzenie
Umieszczony na stronie element zewnętrzny to każda treść wyświetlana w Twojej witrynie, która:
- Nieutworzone przez Ciebie
- wyświetlane przez serwery zewnętrzne,
Elementy do wklejania są często używane w tych sytuacjach:
- Witryny związane ze sportem, wiadomościami, rozrywką i modą wykorzystują filmy do wzbogacania treści tekstowych.
- Organizacje z aktywnymi kontami na Twitterze lub w mediach społecznościowych mogą umieszczać na swoich stronach internetowych kanały z tych kont, aby zachęcać więcej osób do interakcji i docierać do większej liczby odbiorców.
- Strony restauracji, parków i miejsc organizacji wydarzeń często zawierają mapy.
Elementy umieszczone na stronie zewnętrznej są zwykle wczytywane w elementach <iframe> na stronie. Dostawcy zewnętrzni oferują fragmenty kodu HTML często składające się z elementu <iframe>, który pobiera stronę ze znacznikami, skryptami i arkuszami stylów. Niektórzy dostawcy używają też fragmentu kodu, który dynamicznie wstawia właściwość <iframe>, by pobierać do niej inne treści. Może to spowodować znaczne zagęszczenie elementów zewnętrznych i wpłynąć na wydajność strony przez opóźnienie wyświetlania własnych treści.
Wpływ wstawiania treści innych firm na skuteczność
Wiele popularnych elementów umieszczanych na stronach zawiera ponad 100 KB kodu JavaScript, niekiedy nawet do 2 MB. Wczytają się dłużej i utrzymują zajętość wątku głównego. Narzędzia do monitorowania wydajności, takie jak Lighthouse i Narzędzia dla programistów Chrome, pomagają mierzyć wpływ wbudowanych elementów innych firm na wydajność.
Zmniejszanie wpływu kodu zewnętrznego – audyt Lighthouse pokazuje listę dostawców zewnętrznych, z których korzysta strona, wraz z rozmiarem i czasem blokowania wątku głównego. Kontrola jest dostępna w Narzędziach deweloperskich w Chrome na karcie Lighthouse.
Dobrą praktyką jest okresowe sprawdzanie wpływu umieszczenia kodu umieszczonego na stronie i kodu innej firmy na wydajność, ponieważ może się to zmienić. Możesz wykorzystać tę okazję, aby usunąć niepotrzebny kod.
Sprawdzone metody wczytywania
Elementy osadzone pochodzące od innych firm mogą negatywnie wpływać na wydajność, ale oferują też ważne funkcje. Aby efektywnie korzystać z umieszczonych treści innych firm i ograniczać ich wpływ na wydajność, postępuj zgodnie z tymi wskazówkami.
Kolejność skryptów
W dobrze zaprojektowanej stronie najważniejsze treści własne będą w centrum uwagi, a umieszczone treści innych firm zajmują pasek boczny lub pojawiają się po treściach własnych.
Aby zapewnić użytkownikom najlepsze wrażenia, główna treść powinna ładować się szybko i przed innymi treściami pomocniczymi. Na przykład tekst wiadomości na stronie z wiadomościami powinien wczytywać się przed osadzonymi kanałami Twittera lub reklamami.
Żądania innych firm zewnętrznych mogą przeszkodzić w załadowaniu treści własnych, dlatego pozycja tagu skryptu innej firmy jest ważna. Skrypty mogą wpływać na sekwencję wczytywania, ponieważ konstrukcja DOM jest wstrzymywana podczas wykonywania skryptów. Umieść tagi skryptów innych firm po kluczowych tagach własnych i użyj atrybutów async lub defer, aby wczytać je asynchronicznie.
<head>
<title>Order of Things</title>
<link rel="stylesheet" media="screen" href="/assets/application.css">
<script src="index.js"></script>
<script src="https://example.com/3p-library.js" async></script>
</head>
Leniwe ładowanie
Treści osób trzecich są zazwyczaj umieszczane po głównej zawartości strony, więc po załadowaniu strony mogą nie być widoczne w widocznym obszarze. W takim przypadku pobieranie zasobów innych firm może zostać opóźnione do momentu, gdy użytkownik przewinie stronę w dół. Pomaga to nie tylko zoptymalizować początkowe wczytywanie strony, ale też zmniejsza koszty pobierania w przypadku użytkowników ze stałym pakietem danych i wolniejszych połączeń sieciowych.
Opóźnianie wczytywania treści do momentu, gdy faktycznie będzie to potrzebne, nazywamy leniwym ładowaniem. W zależności od wymagań oraz typu umieszczania możesz użyć różnych technik leniwego ładowania.
Leniwe ładowanie w przeglądarce w przypadku <iframe>
W przypadku elementów zewnętrznych wczytywanych za pomocą elementów <iframe> możesz używać leniwego ładowania na poziomie przeglądarki, aby opóźnić wczytywanie pozaekranowych elementów iframe do momentu, gdy użytkownik przewinie stronę w pobliżu. Atrybut wczytywania przeglądarki <iframe> jest dostępny we wszystkich nowoczesnych przeglądarkach.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400">
</iframe>
Atrybut wczytywania obsługuje te wartości:
lazy: wskazuje, że przeglądarka powinna opóźnić wczytywanie elementu iframe. Przeglądarka wczyta element iframe, gdy znajdzie się w widocznym obszarze. Używaj, jeśli element iframe pozwala na leniwe ładowanie.eager: natychmiast wczytuje element iframe. Użyj go, jeśli element iframe nie jest dobrym rozwiązaniem do leniwego ładowania. Jeśli atrybutloadingnie został określony, jest to działanie domyślne – z wyjątkiem wersji uproszczonej.auto: przeglądarka określa, czy ramkę ma być leniwie ładowana.
Przeglądarki, które nie obsługują atrybutu loading, ignorują go, więc możesz zastosować opóźnione wczytywanie na poziomie przeglądarki jako ulepszenie progresywne. Przeglądarki obsługujące ten atrybut mogą stosować różne implementacje progu odległości od widoku (odległości, w której iframe zaczyna się wczytywać).
Oto kilka sposobów na leniwe ładowanie elementów iframe w przypadku różnych typów osadzania.
- Filmy w YouTube: aby leniwie ładować element iframe odtwarzacza YouTube, umieść atrybut
loadingw kodzie do umieszczenia na stronie pochodzącym z YouTube. Lazy loading w przypadku osadzenia filmu w YouTube może zaoszczędzić około 500 KB podczas początkowego wczytywania strony.
<iframe src="https://www.youtube.com/embed/aKydtOXW8mI"
width="560" height="315"
loading="lazy"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
- Mapy Google: aby załadować iframe Map Google z opóźnieniem, dodaj w kodzie iframe parametru embed generowanego przez interfejs API Map Google atrybut
loading. Poniżej znajdziesz przykład kodu z obiektem zastępczym klucza interfejsu API Google Cloud.
<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
width="600" height="450"
style="border:0;"
allowfullscreen=""
loading="lazy">
</iframe>
biblioteka lazysizes
Leniwe ładowanie w przeglądarce może być niespójne, ponieważ przeglądarki, oprócz sygnałów takich jak efektywny typ połączenia i wersja uproszczona, decydują o tym, kiedy element iframe ma zostać załadowany, uwzględniana jest odległość od widocznego obszaru. Jeśli potrzebujesz większej kontroli nad prógami odległości lub chcesz zapewnić spójne leniwe ładowanie w różnych przeglądarkach, możesz użyć biblioteki leniwych rozmiarów.
lazysizes to szybki, przyjazny dla SEO leniwym ładowarką obrazów i elementów iframe. Po pobraniu komponentu można go używać razem z elementem iframe do umieszczenia filmu z YouTube w następujący sposób.
<script src="lazysizes.min.js" async></script>
<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
width="560" height="315"
class="lazyload"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
Leniwe rozmiary mogą być też używane w elementach iframe innych firm.
Pamiętaj, że lazysizes używa interfejsu Intersection Observer API do wykrywania, kiedy element staje się widoczny.
Korzystanie z leniwego wykorzystania danych na Facebooku
Facebook udostępnia różne typy wtyczek społecznościowych, które można umieszczać w witrynie. Dotyczy to postów, komentarzy, filmów i najpopularniejszego przycisku Lubię. Wszystkie wtyczki zawierają ustawienie data-lazy. Ustawienie tej wartości na true gwarantuje, że wtyczka będzie używać mechanizmu ładowania opóźnionego w przeglądarce, ustawiając atrybut iframe loading="lazy".
Leniwe ładowanie kanałów na Instagramie
Instagram udostępnia blok znaczników i skrypt jako część kodu embed. Skrypt wstawia na stronie element <iframe>. Łatwo wczytywanie tego <iframe> może poprawić wydajność, ponieważ rozmiar zasobu może przekraczać 100 KB w formacie skompresowanym. Leniwe ładowanie umożliwia wiele wtyczek Instagrama do witryn WordPress, takich jak WPZoom i Elfsight.
Zastępowanie wstawionych elementów fasadami
Chociaż interaktywne elementy umieszczone na stronie są wartościowe, wielu użytkowników może nie wchodzić z nimi w interakcję. Na przykład nie każdy użytkownik przeglądający stronę restauracji musi kliknąć, rozwinąć, przewinąć i poruszać się po umieszczonej mapie. Podobnie nie każdy użytkownik strony dostawcy usług telekomunikacyjnych wchodzi w interakcję z czatbotem. W takich przypadkach możesz uniknąć wczytywania lub opóźnionego wczytywania kodu embedowanego, wyświetlając zamiast niego fasadę.
Fasada to element statyczny, który wygląda podobnie do rzeczywistego wbudowanego elementu innych firm, ale nie jest funkcjonalny, a więc znacznie mniej obciąża wczytywanie strony. Poniżej znajdziesz kilka strategii optymalnego wczytywania takich treści, które pozwolą Ci zachować ich wartość dla użytkownika.
Używanie statycznych obrazów jako elewacji
Zamiast mapowanych elementów mapy, które mogą nie być interaktywne, można używać obrazów statycznych. Możesz powiększyć interesujący obszar na mapie, zrobić zdjęcie i użyć tej opcji zamiast interaktywnej mapy. Możesz też użyć funkcji Zrób zrzut ekranu węzła w Narzędziach programisty, aby zrobić zrzut ekranu z wbudowanym elementem iframe.
Narzędzia deweloperskie przechwytują obraz w formacie png, ale możesz też przekonwertować go na format WebP, aby zwiększyć skuteczność.
Używanie dynamicznych obrazów jako fasad
Ta metoda umożliwia generowanie w czasie wykonywania obrazów odpowiadających interaktywnej stronie umieszczonej na stronie. Poniżej znajdziesz kilka narzędzi, które umożliwiają generowanie statycznych wersji treści osadzionych na stronach.
Maps Static API: usługa Maps Static API generuje mapę na podstawie parametrów URL uwzględnionych w standardowym żądaniu HTTP i zwraca mapę jako obraz, który możesz wyświetlić na swojej stronie internetowej; Adres URL musi zawierać klucz interfejsu API Map Google i umieścić go w tagu
<img>na stronie jako atrybutsrc.Narzędzie Kreator map statycznych pomaga skonfigurować parametry wymagane dla adresu URL i przekazuje w czasie rzeczywistym kod elementu graficznego.
Ten fragment kodu zawiera kod obrazu, którego źródło jest ustawione na adres URL statycznego interfejsu API Map Google. Został on uwzględniony w tagu linku, który zapewnia, że po kliknięciu obrazu można uzyskać dostęp do rzeczywistej mapy. (Uwaga: atrybut klucza interfejsu API nie znajduje się w adresie URL)
<a href="https://www.google.com/maps/place/Albany,+NY/"> <img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY"> </a>Zrzuty ekranu z Twittera: podobnie jak w przypadku zrzutów ekranu mapy, ta koncepcja umożliwia dynamiczne umieszczanie zrzutów ekranu z Twittera zamiast transmisji na żywo. Tweetpik to jedno z narzędzi, które można wykorzystać do robienia zrzutów ekranu tweetów. Interfejs API Tweetpik przyjmuje adres URL tweeta i zwraca obraz z jego zawartością. Interfejs API akceptuje też parametry służące do dostosowywania tła, kolorów, obramowania i wymiarów obrazu.
Ulepszaj fasady za pomocą reklam typu „kliknij, aby wczytać”
Koncepcja ładowania po kliknięciu łączy w sobie leniwe ładowanie i fasadę. Strona wczytuje się z fasadą. Gdy użytkownik wejdzie w interakcję ze statyczną zmienną, klikając ją, wczytuje się kod zewnętrzny. Nazywa się to wzorcem importu podczas interakcji i można go wdrożyć, wykonując poniższe czynności.
- Podczas wczytywania strony: fasada lub element statyczny jest uwzględniony na stronie.
- Po najechaniu kursorem myszy: Fasada wstępnie łączy się z zewnętrznym dostawcą umieszczania.
- Po kliknięciu: fasada zostaje zastąpiona przez produkt zewnętrzny.
Fasady można stosować w przypadku elementów zewnętrznych, takich jak odtwarzacze, widżety czatu, usługi uwierzytelniania i widżety mediów społecznościowych. Często spotykamy w internecie obrazy z wbudowanym przyciskiem odtwarzania, które są tylko fasadą. Film wczytuje się dopiero po kliknięciu obrazu.
Możesz utworzyć niestandardową fasadę typu „kliknij, aby wczytać”, korzystając ze wzorca importowania po interakcji, lub użyć jednej z poniższych fasad typu open source dostępnych dla różnych typów wbudowy.
Fasada YouTube
Lite-youtube-embed to zalecana fasada dla odtwarzacza YouTube, która wygląda jak prawdziwy odtwarzacz, ale jest 224 razy szybsza. Aby go użyć, pobierz skrypt i arkusz stylów, a potem użyj tagu
<lite-youtube>w kodzie HTML lub JavaScript. Parametry niestandardowe obsługiwane przez YouTube można uwzględnić za pomocą atrybutuparams.<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>Poniżej znajduje się porównanie elementu lite-youtube-embed oraz rzeczywistego umieszczenia filmu na stronie.
Wstawka z YouTube Lite 
Wstawka z YouTube Inne podobne fasady dostępne dla odtwarzaczy YouTube i Vimeo to lite-youtube, lite-vimeo-embed i lite-vimeo.
Fasada widżetu czatu
Moduł wczytywania czatu na żywo wczytuje przycisk, który wygląda jak umieszczony czat, a nie sam umieszczony element. Można go używać z różnymi platformami dostawców czatu, takimi jak Intercom, Help Scout czy Messenger. Podobny widżet jest znacznie lżejszy od widżetu czatu i wczytuje się szybciej. Widżet czatu może zostać zastąpiony rzeczywistym widżetem czatu, gdy użytkownik najedzie kursorem na przycisk lub kliknie przycisk, albo jeśli strona przez dłuższy czas była nieaktywna. Studium przypadku z Postmark wyjaśnia, jak firma wdrożyła
react-live-chat-loaderi poprawiła wydajność.
Usuwanie elementów umieszczonych na stronach i zastępowanie ich linkami
Jeśli zauważysz, że niektóre elementy osadzenia pochodzące od innych firm powodują problemy z wczytywaniem i nie możesz użyć żadnej z opisanych wcześniej metod, najprostszym rozwiązaniem jest całkowite usunięcie elementu. Jeśli nadal chcesz, aby użytkownicy mieli dostęp do treści w ramach wbudowanego elementu, możesz udostępnić link do niego za pomocą target="_blank", aby użytkownik mógł kliknąć go i otworzyć na innej karcie.
Stabilność układu
Dynamiczne wczytywanie treści umieszczonych w witrynie może poprawić wydajność wczytywania strony, ale czasami może też powodować nieoczekiwane przesuwanie się treści. Nazywamy to przesunięciem układu.
Stabilność wizualna jest ważna dla wygody użytkowników, dlatego skumulowane przesunięcie układu (CLS) mierzy, jak często występują te zmiany i jak uciążliwe.
Przesunięć układu można uniknąć, rezerwując na czas wczytywania strony miejsce na elementy, które będą ładowane dynamicznie w późniejszym czasie. Jeśli zna szerokość i wysokość elementów, może określić przestrzeń do zarezerwowania. Aby to zrobić, określ atrybuty width i height w elementach iframe lub ustaw stały rozmiar elementów statycznych, na których będzie ładowany element zewnętrzny. Na przykład element iframe dla wbudowanego filmu w YouTube powinien mieć szerokość i wysokość określone w ten sposób.
<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>
W popularnych miejscach, takich jak YouTube, Mapy Google i Facebook, kod do umieszczenia na stronie zawiera określone atrybuty rozmiaru. Niektórzy dostawcy mogą jednak nie uwzględnić tej informacji. Na przykład ten fragment kodu nie wskazuje wymiarów wynikowego umieszczenia filmu.
<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
Możesz użyć narzędzi deweloperskich, aby sprawdzić wstrzyknięty iframepo wyrenderowaniu tej strony. Jak widać w poniższym fragmencie, wysokość wstawionego elementu iframe jest stała, a szerokość jest określana w procentach.
<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>
Na podstawie tych informacji możesz ustawić rozmiar elementu, który zawiera, aby kontener nie rozwinął się po wczytaniu kanału i nie doszło do przesunięcia układu. Ten fragment kodu może posłużyć do poprawienia rozmiaru dołączonego wcześniej elementu umieszczonego na stronie.
<style>
.twitterfeed { display: table-cell; vertical-align: top; width: 100vw; }
.twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>
Terminator przesunięć układu
Elementy umieszczone na stronach innych firm często pomijają wymiary (szerokość, wysokość) podczas renderowania ostatecznej treści, co może spowodować istotne przesunięcia układu strony. Ten problem może być trudny do rozwiązania bez ręcznego sprawdzania rozmiarów za pomocą DevTools w różnych rozmiarach widocznego obszaru.
Teraz jest dostępne automatyczne narzędzie Layout Shift Terminator, które może pomóc w ograniczeniu zmian układu w popularnych treściach osadzionych, np. z Twittera, Facebooka i innych dostawców.
Terminator przesunięcia układu:
- Wczytuje umieszczony element po stronie klienta w elemencie iframe.
- Zmienia rozmiar elementu iframe na różne popularne rozmiary widocznego obszaru.
- W przypadku każdego popularnego widoku rejestruje wymiary treści do wklejenia, aby później generować zapytania dotyczące multimediów i kontenera.
- Ustawia rozmiar owijacza z minimalną wysokością wokół znacznika embed za pomocą zapytań dotyczących multimediów (i zapytań dotyczących kontenera) do momentu zainicjowania embeda (po czym style minimalnej wysokości są usuwane).
Generuje zoptymalizowany fragment kodu do umieszczenia na stronie, który można skopiować i wkleić w miejscu, w którym zwykle umieszczasz umieszczone na stronie treści.
Wypróbuj narzędzie Layout Shift Terminator i podziel się swoją opinią na temat GitHub. Narzędzie jest w wersji beta i zmierzamy się nad jego ulepszaniem.
Podsumowanie
Elementy umieszczone na innych stronach mogą być bardzo przydatne dla użytkowników, ale wraz ze wzrostem liczby i rozmiaru elementów umieszczanych na stronie zmniejsza się wydajność. Dlatego konieczne jest pomiary, ocena i stosowanie odpowiednich strategii wczytywania osadzonych elementów na podstawie ich pozycji, trafności i potrzeb potencjalnych użytkowników.