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ęstsze przykłady umieszczania treści innych firm to odtwarzacze wideo, kanały w mediach społecznościowych, mapy i reklamy.
Treści innych firm mogą wpływać na skuteczność 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. Elementy osadzone innych firm mogą też 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, a także skuteczne techniki wczytywania i narzędzie do eliminowania zmian układu, które pomaga ograniczyć zmiany układu w przypadku popularnych elementów zewnętrznych.
Co to jest osadzenie
Treści umieszczone przez osoby trzecie to wszelkie treści wyświetlane w Twojej witrynie, które:
- nie jest jego autorem,
- wyświetlane z serwerów zewnętrznych,
Elementy do wklejania są często używane w tych sytuacjach:
- Witryny związane ze sportem, wiadomościami, rozrywką i modą używają filmów do uzupełnienia 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ć do interakcji i docierać do większej liczby osób.
- Strony restauracji, parków i miejsc organizacji wydarzeń często zawierają mapy.
Elementy osadzenia innych firm są zwykle ładowane w elementach <iframe> na stronie. Dostawcy zewnętrzni oferują fragmenty kodu HTML, które często zawierają tag <iframe>, który pobiera stronę składającą się z oznaczeń, skryptów i arkuszy stylów. Niektórzy dostawcy używają też fragmentu kodu, który dynamicznie wstrzykuje element <iframe>, aby wstawić inne treści. Może to spowodować, że elementy osadzone pochodzące od innych firm będą ciężkie i wpływać na wydajność strony, opóźniając wyświetlanie treści własnych.
Wpływ wstawiania treści innych firm na skuteczność
Wiele popularnych treści do wklejenia zawiera ponad 100 KB kodu JavaScript, a czasem nawet do 2 MB. Ich wczytywanie zajmuje więcej czasu, a podczas wykonywania zajmują główny wątek. 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ść.
Ogranicz wpływ kodu spoza witryny. Audyt Lighthouse zawiera listę dostawców zewnętrznych, których używa dana strona, wraz z ich rozmiarem i czasem blokowania głównego wątku. Kontrola jest dostępna w narzędziach Chrome DevTools na karcie Lighthouse.
Zalecamy okresowe sprawdzanie wpływu na wydajność umieszczanych elementów i kodu zewnętrznego, ponieważ kod źródłowy może się zmieniać. Możesz wykorzystać tę okazję, aby usunąć niepotrzebny kod.
Sprawdzone metody ładowania
Elementy osadzone pochodzące od innych firm mogą negatywnie wpływać na wydajność, ale oferują też ważne funkcje. Aby efektywnie wykorzystywać elementy zewnętrzne i ograniczyć ich wpływ na wydajność, postępuj zgodnie z tymi wskazówkami.
kolejność skryptów,
Na dobrze zaprojektowanej stronie główne treści własne będą stanowić główny element, a wstawione treści innych firm będą zajmować miejsce na pasku bocznym lub pojawiać się po treściach własnych.
Aby zapewnić użytkownikom jak najlepsze wrażenia, główna treść powinna wczytywać 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 dotyczące umieszczania treści innych firm mogą utrudniać wczytywanie własnych treści, dlatego ważne jest, aby tag skryptu zewnętrznego znajdował się w odpowiednim miejscu. Skrypty mogą wpływać na sekwencję ładowania, ponieważ tworzenie interfejsu DOM jest wstrzymywane podczas ich wykonywania. 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 firm zewnętrznych pojawiają się zwykle po treści głównej, dlatego mogą nie być widoczne w widocznym obszarze podczas wczytywania strony. W takim przypadku pobieranie zasobów innych firm może zostać opóźnione do momentu, gdy użytkownik przewinie stronę w dół. Pozwala to nie tylko zoptymalizować początkowe wczytywanie strony, ale też zmniejsza koszty pobierania dla użytkowników korzystających z planów z ograniczonym limitem danych i wolnych połączeń z internetem.
Opóźnianie wczytywania treści do momentu, aż będą one rzeczywiście potrzebne, nazywa się lazy-loadingiem. W zależności od wymagań i typu osadzenia możesz używać różnych technik ładowania opóźnionego.
Leniwe ładowanie w przeglądarce w przypadku <iframe>
W przypadku elementów embedowanych innych firm wczytywanych za pomocą elementów <iframe> możesz użyć opóźnionego wczytywania na poziomie przeglądarki, aby opóźnić wczytywanie elementów iframe poza ekranem, dopóki użytkownicy nie przewiną do nich kursorem. Atrybut loading dla <iframe> jest dostępny we wszystkich nowoczesnych przeglądarkach.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400">
</iframe>
Atrybut loading obsługuje te wartości:
lazy: oznacza, że przeglądarka powinna odłożyć wczytywanie elementu iframe. Przeglądarka wczyta element iframe, gdy zbliży się do widocznego obszaru. Użyj, jeśli element iframe jest dobrym kandydatem do leniwego ładowania.eager: element iframe jest wczytywany natychmiast. Użyj, jeśli element iframe nie nadaje się do leniwego ładowania. Jeśli atrybutloadingnie został określony, jest to działanie domyślne, z wyjątkiem trybu Lite.auto: przeglądarka decyduje, czy ładować ten element z opóźnieniem.
Przeglądarki, które nie obsługują atrybutu loading, ignorują go, więc możesz zastosować wczytywanie opóźnione 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ć).
Poniżej znajdziesz kilka sposobów leniwego ładowania elementów iframe w przypadku różnych typów umieszczania.
- Filmy w YouTube: aby załadować odtwarzacz YouTube w tle, dodaj atrybut
loadingdo kodu embedowanego dostarczonego przez YouTube. Lazy loading w przypadku osadzenia filmu w YouTube może pozwolić 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. Oto przykład kodu z miejscem docelowym dla klucza interfejsu Google Cloud API.
<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
Przeglądarki używają odległości od widoku, a także sygnałów takich jak użyty rodzaj połączenia i tryb Lite, aby zdecydować, kiedy wczytać iframe, więc lazy-loading może być niespójny. Jeśli potrzebujesz większej kontroli nad wartościami progowymi odległości lub chcesz zapewnić spójne wczytywanie opóźnione we wszystkich przeglądarkach, możesz użyć biblioteki lazysizes.
lazysizes to szybki, przyjazny dla SEO leniwym ładowarką obrazów i elementów iframe. Po pobraniu komponentu możesz go użyć w ramach elementu iframe do umieszczenia filmu w YouTube w ten 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>
Podobnie, lazysize może być używany z iframe do umieszczania elementów innych firm.
Pamiętaj, że lazysizes używa interfejsu Intersection Observer API do wykrywania, kiedy element staje się widoczny.
Korzystanie z tagu data-lazy 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 umieszcza na stronie element <iframe>. Łatwo wczytywanie tego <iframe> może poprawić wydajność, ponieważ rozmiar zasobu może przekraczać 100 KB w formacie skompresowanym. Wiele wtyczek Instagrama do witryn WordPress, takich jak WPZoom i Elfsight, udostępnia opcję ładowania opóźnionego.
Zastępowanie wstawionych elementów fasadami
Chociaż elementy wstawiane interaktywnie zwiększają wartość strony, wielu użytkowników może z nimi nie wchodzić w interakcje. Na przykład nie każdy użytkownik przeglądający stronę restauracji klika, rozwija, przewija i przechodzi do mapy. Podobnie nie każdy użytkownik, który odwiedza stronę dostawcy usług telekomunikacyjnych, będzie korzystać z czatbota. W takich przypadkach możesz uniknąć wczytywania lub opóźnionego wczytywania kodu embed, 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
Statyczne obrazy można wykorzystać zamiast mapy umieszczanej na stronie, jeśli nie chcesz, aby była ona interaktywna. Możesz powiększyć obszar na mapie, który Cię interesuje, zrobić z niego zdjęcie i użyć go zamiast wstawienia interaktywnej mapy. Możesz też użyć funkcji Zrób zrzut ekranu węzła w Narzędziach programisty, aby zrobić zrzut ekranu z elementem iframe.
Narzędzia deweloperskie rejestrują obraz w formacie png, ale możesz też przekonwertować go do formatu WebP, aby zwiększyć wydajność.
Używanie dynamicznych obrazów jako elewacji
Ta technika umożliwia generowanie obrazów odpowiadających interaktywnemu umieszczeniu w czasie działania. Poniżej znajdziesz kilka narzędzi, które umożliwiają generowanie statycznych wersji treści osadzionych na stronach.
Map Static API: usługa Map Static API Google generuje mapę na podstawie parametrów adresu URL zawartych w standardowym żądaniu HTTP i zwraca ją jako obraz, który możesz wyświetlić na swojej stronie internetowej. Adres URL musi zawierać klucz interfejsu API Map Google i musi być umieszczony w tagu
<img>na stronie jako atrybutsrc.Narzędzie Static map maker pomaga skonfigurować parametry wymagane do utworzenia adresu URL i w czasie rzeczywistym udostępnia kod elementu obrazu.
Ten fragment kodu pokazuje kod obrazu, w którego źródle podany jest adres URL interfejsu Maps Static API. 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 jest uwzględniany 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 funkcja umożliwia dynamiczne umieszczanie zrzutów ekranu z Twittera zamiast transmisji na żywo. Tweetpik to jedno z narzędzi, które umożliwia robienie zrzutów ekranu tweetów. Interfejs API Tweetpik akceptuje adres URL tweeta i zwraca obraz z jego zawartością. Interfejs API akceptuje też parametry, które umożliwiają dostosowanie tła, kolorów, obramowania i wymiarów obrazu.
Używanie funkcji kliknij, aby załadować, w celu ulepszania elewacji
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. Jest to też znany jako wzór importu po interakcji. Można go zaimplementować, wykonując te czynności.
- Podczas wczytywania strony: fasada lub element statyczny jest uwzględniony na stronie.
- Po najechaniu kursorem: fasada łączy się wstępnie z zewnętrznym dostawcą treści.
- Po kliknięciu: fasada zostaje zastąpiona przez produkt innej firmy.
Fasady można stosować w przypadku elementów zewnętrznych, takich jak odtwarzacze wideo, widżety czatu, usługi uwierzytelniania i widżety mediów społecznościowych. Często spotykamy w witrynach kody embedowane filmów w YouTube, które są tylko obrazami z przyciskiem odtwarzania. Film wczytuje się dopiero po kliknięciu obrazu.
Możesz utworzyć niestandardową fasadę typu „kliknij, aby załadować” za pomocą wzorca importuj po interakcji lub użyć jednej z tych fasad typu open source dostępnych dla różnych typów umieszczania.
Fasada YouTube
Lite-youtube-embed to zalecana fasada odtwarzacza YouTube, która wygląda jak prawdziwy odtwarzacz, ale jest 224 razy szybsza. Aby z niego skorzystać, pobierz skrypt i arkusz stylów, a potem użyj tagu
<lite-youtube>w 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 znajdziesz porównanie lite-youtube-embed i rzeczywistego osadzenia.
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
Ładowarka czatu na żywo w React wczytuje przycisk, który wygląda jak wbudowany czat, zamiast samego wbudowanego czatu. Można go używać z różnymi platformami do obsługi czatu, takimi jak Intercom, Help Scout czy Messenger. Widżet podobny do czatu jest znacznie lżejszy niż widżet czatu i szybciej się wczytuje. Gdy użytkownik najedzie kursorem na przycisk lub kliknie go albo gdy strona jest nieaktywna przez długi czas, może zostać zastąpiony przez właściwy widget czatu. Studium przypadku dotyczące firmy Postmark zawiera opis sposobu wdrożenia
react-live-chat-loaderi osiągniętego wzrostu skuteczności.
Usuwanie lub zastępowanie elementów osadzonego przez linki
Jeśli okaże się, ż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 technik, najprostszym rozwiązaniem będzie całkowite usunięcie elementów. Jeśli chcesz, aby użytkownicy nadal 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ł go kliknąć 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. Jest to tzw. zmiana układu.
Stabilność wizualna jest ważna dla płynnego działania aplikacji, dlatego skumulowane przesunięcie układu (CLS) mierzy, jak często występują te przesunięcia i jak bardzo zakłócają one działanie aplikacji.
Aby uniknąć przesunięć układu, podczas wczytywania strony należy zarezerwować miejsce na elementy, które mają być wczytane dynamicznie. Jeśli zna szerokość i wysokość elementów, może określić przestrzeń do zarezerwowania. Możesz to zapewnić, określając atrybuty width i height w przypadku ramek iframe lub ustawiając stały rozmiar elementów statycznych, w których będzie ładowany kod embedowany pochodzący od osoby trzeciej. 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>
Popularne elementy do wklejania, takie jak YouTube, Mapy Google i Facebook, udostępniają kod do wklejania z określonymi atrybutami rozmiaru. Niektórzy dostawcy mogą jednak nie uwzględniać tego typu opłat. Ten fragment kodu nie wskazuje na przykład wymiarów wynikowego elementu osadzenia.
<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>
Po wyrenderowaniu strony możesz użyć Narzędzi deweloperskich, aby sprawdzić wstrzykniętą funkcję iframe. Jak widać w tym fragmencie kodu, wysokość wstrzykniętego iframe jest stała, a szerokość jest określona 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>
Te informacje można wykorzystać do ustawienia rozmiaru elementu zawierającego, aby zapewnić, że kontener nie będzie się rozszerzał podczas wczytywania pliku danych i nie będzie powodować przesunięcia układu. Aby naprawić rozmiar załączonego wcześniej kodu embed, możesz użyć tego fragmentu kodu.
<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
Ponieważ elementy embedowane pochodzące od innych firm często pomijają wymiary (szerokość i wysokość) renderowanych treści, mogą powodować znaczne przesunięcia układu na stronie. Ten problem może być trudny do rozwiązania bez ręcznego sprawdzania ostatecznych 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:
- Ładuje element iframe po stronie klienta.
- Zmienia rozmiar elementu iframe na różne popularne rozmiary widocznego obszaru.
- W przypadku każdego popularnego widocznego obszaru rejestruje wymiary wbudowanego elementu, 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 umieszczania, który możesz skopiować i wkleić w miejscu, w którym chcesz umieścić kod na stronie.
Wypróbuj narzędzie Layout Shift Terminator i prześlij opinię na GitHub. Narzędzie jest w wersji beta i zmierzamy się na to, aby z upływem czasu ulepszać je i doskonalić.
Podsumowanie
Treści zewnętrzne mogą być bardzo przydatne dla użytkowników, ale wraz ze wzrostem liczby i wielkości elementów na stronie może się zmniejszyć wydajność. Dlatego konieczne jest mierzenie, ocenianie i stosowanie odpowiednich strategii ładowania dla treści osadzionych na podstawie ich pozycji, trafności i potrzeb potencjalnych użytkowników.