Omówienie technik, które pozwalają sprawnie wczytywać popularne elementy osadzone innych firm.
W wielu witrynach są stosowane elementy, które należą do innych firm, dzięki czemu zapewniają użytkownikom lepsze wrażenia, przekazując niektóre sekcje strony innemu 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 zasobami o znaczeniu krytycznym dla sieci i przepustowości lub mieć wpływ na dane dotyczące podstawowych wskaźników internetowych. Osadzone obiekty innych firm również mogą powodować przesunięcia układu podczas wczytywania. W tym artykule opisujemy sprawdzone metody w zakresie wydajności, z których możesz skorzystać podczas wczytywania elementów zewnętrznych, oraz efektywne techniki wczytywania, a także narzędzie „terminator przesunięcia układu”, które pomaga ograniczyć przesunięcia układu w przypadku popularnych osadzonych elementów.
Co to jest umieszczenie
Umieszczony na stronie element zewnętrzny to każda treść wyświetlana w Twojej witrynie, która:
- Nieutworzone przez Ciebie
- Wyświetlane z serwerów firm zewnętrznych
Umieszczone elementy są często używane w tych przypadkach:
- Witryny związane ze sportem, wiadomościami, rozrywką i modą wykorzystują filmy do wzbogacania treści tekstowych.
- Organizacje z aktywnym kontem na Twitterze lub w mediach społecznościowych umieszczają kanały z tych kont na swoich stronach internetowych, aby angażować użytkowników i docierać do nich.
- Strony restauracyjne, parki i miejsca 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 na wydajność elementów zewnętrznych
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 deweloperskie w Chrome, pomagają mierzyć wpływ zewnętrznych źródeł treści 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ć. Dzięki tej okazji możesz usunąć zbędny kod.
Sprawdzone metody wczytywania
Umieszczone treści 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 umieszczeniem go na kanale na Twitterze lub w przypadku reklam.
Żą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. Tagi skryptów innych firm umieść po kluczowych tagach własnych i użyj atrybutów async lub defer, aby wczytywać 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ć odroczone, dopóki użytkownik nie przewinie strony w dół. Pomaga to nie tylko zoptymalizować początkowe wczytywanie strony, ale też zmniejsza koszty pobierania w przypadku użytkowników, którzy korzystają ze stałych pakietów danych i wolnie łączą się z siecią.
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 przeglądarki <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 nadaje się 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ć leniwe ładowanie na poziomie przeglądarki jako ulepszenie progresywne. Przeglądarki, które obsługują ten atrybut, mogą mieć różne implementacje progu odległości od widocznego obszaru (odległości, od której zaczyna się ładowanie elementu iframe).
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. Leniwe ładowanie umieszczonego filmu z YouTube pozwala zaoszczędzić około 500 KB przy pierwszym wczytaniu 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 leniwie ładować element iframe Map Google, umieść atrybut
loadingw kodzie elementu iframe wygenerowanego przez interfejs API Google Maps Embed. 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 leniwych rozmiarów
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 szybkie i łatwe do SEO leniwe ładowanie 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 na potrzeby innych elementów umieszczanych na stronach.
Pamiętaj, że tagi leniwce wykrywają, kiedy element staje się widoczny, za pomocą interfejsu Intersection Observer API.
Korzystanie z leniwego wykorzystania danych na Facebooku
Facebook udostępnia różne typy wtyczek społecznościowych, które można umieścić. Dotyczy to postów, komentarzy, filmów i najpopularniejszego przycisku Podoba mi się. Wszystkie wtyczki zawierają ustawienie dla: data-lazy. Jeśli ustawisz wartość true, wtyczka będzie używać mechanizmu leniwego ładowania przeglądarki przez ustawienie atrybutu iframe loading="lazy".
Leniwe ładowanie kanałów na Instagramie
Instagram udostępnia blok znaczników i skrypt w ramach elementu umieszczonego na stronie. Skrypt wstawia na stronie element <iframe>. Leniwe ładowanie elementu <iframe> może zwiększyć wydajność, ponieważ rozmiar umieszczonego elementu może przekraczać 100 KB w pliku gzip. Leniwe ładowanie umożliwia wiele wtyczek Instagrama do witryn WordPress, takich jak WPZoom i Elfsight.
Zastępowanie elementów osadzonych elementami fasadowymi
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żna uniknąć wczytywania elementu lub leniwego ładowania, wyświetlając w jego miejscu fasadę.
Fakada to element statyczny, który wygląda podobnie do umieszczonej strony zewnętrznej, ale nie działa, jest więc znacznie mniej obciążany po wczytaniu strony. Poniżej przedstawiamy kilka strategii optymalnego wczytywania takich elementów, a zarazem zapewniania użytkownikowi pewnej wartości.
Używanie obrazów statycznych jako fasad
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. Aby zrobić zrzut ekranu umieszczonego elementu iframe, możesz też użyć funkcji Zrób zrzut ekranu węzła w Narzędziach deweloperskich.
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 umieszczonej stronie. Poniżej przedstawiamy niektóre narzędzia, które umożliwiają generowanie statycznych wersji elementów umieszczanych na stronach.
Mapy statyczne interfejsu API Map Google: usługa Maps Static API generuje mapę na podstawie parametrów adresu URL uwzględnionych 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 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 zdjęcia, którego źródło jest ustawione na adres URL statycznego interfejsu API Map Google. Została ona zawarta w tagu linku, który umożliwia dostęp do rzeczywistej mapy po kliknięciu zdjęcia. (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 z mapami, ten sposób pozwala dynamicznie umieścić zrzut ekranu z Twittera zamiast transmisji na żywo. Tweetpik to jedno z narzędzi służących do robienia zrzutów ekranu tweetów. Interfejs Tweetpik API akceptuje adres URL tweeta i zwraca obraz wraz z 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ć”
„Kliknij, aby wczytać” łączy leniwe ładowanie i fasady. Strona początkowo wczytuje się z fasadą. Gdy użytkownik wejdzie w interakcję ze statycznym obiektem zastępczym, klikając go, wczytuje się umieszczony przez firmę zewnętrzną element osadzony. Jest to tzw. wzorzec importu podczas interakcji, który można zaimplementować, wykonując poniższe czynności.
- Przy wczytywaniu strony: na stronie znajduje się Fasada lub element statyczny.
- Po najechaniu kursorem myszy: Fasada wstępnie łączy się z zewnętrznym dostawcą umieszczania.
- Po kliknięciu: fasada zostaje zastąpiona przez produkt innej firmy.
Fasady mogą być używane z elementami innych firm w odtwarzaczach wideo, widżetach czatu, usługach uwierzytelniania i widżetach mediów społecznościowych. Filmy z YouTube umieszczone na stronach, które są tylko obrazami z przyciskiem odtwarzania, to fasady, z którymi często się spotykamy. Własny film wczytuje się dopiero wtedy, gdy go klikniesz.
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.
Strona główna YouTube
Lite-youtube-embed to zalecana fasada odtwarzacza YouTube, który wygląda jak prawdziwy odtwarzacz, ale jest 224 razy szybszy. Aby go użyć, pobierz skrypt i arkusz stylów, a potem użyj tagu
<lite-youtube>w kodzie HTML lub JavaScript. Parametry odtwarzacza niestandardowego obsługiwane przez YouTube można dodać 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.
Umieszczona treść w uproszczonym formacie YouTube 
Umieszczona treść 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. Ze studium przypadku Postmark dowiesz się, 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 stwierdzisz, że niektóre elementy umieszczone na stronach zewnętrznych powodują niską wydajność wczytywania, a użycie żadnej z opisanych wcześniej technik nie jest możliwe, najprostszym sposobem jest całkowite usunięcie umieszczonego elementu. Jeśli chcesz, aby użytkownicy mieli dostęp do umieszczonej treści, możesz podać link do niej za pomocą funkcji target="_blank", aby mogli ją kliknąć i wyświetlić na innej karcie.
Stabilność układu
Dynamiczne ładowanie treści umieszczonej na stronie może przyspieszyć wczytywanie strony, ale czasami może powodować nieoczekiwane ruchy zawartości strony. 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. Przeglądarka może określić miejsce do zarezerwowania, jeśli zna szerokość i wysokość elementów. Aby to zapewnić, 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 umieszczany w filmie z 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>
Zakończenie przesunięcia 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. Rozwiązanie tego problemu może być trudne bez ręcznego sprawdzania ostatecznych rozmiarów przy użyciu Narzędzi deweloperskich przy różnych rozmiarach widocznego obszaru.
Teraz dostępne jest automatyczne narzędzie Terminator przesunięcia układu, które pomaga ograniczyć przesunięcia układu w popularnych osadzonych komponentach, takich jak Twitter, Facebook i inne.
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 widocznego obszaru rejestruje wymiary umieszczonego elementu, aby później generować zapytania o media i kontenery.
- Mierzy rozmiar otoki min-height wokół znacznika umieszczania na stronie za pomocą zapytań o media (i zapytań kontenera), do momentu zainicjowania elementu (po którym wartości atrybutów min-height 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 w miarę upływu czasu będzie doskonalone.
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 potencjalnych użytkowników. do Twoich potrzeb.