Sprawdzone metody korzystania z elementów umieszczanych przez inne firmy

Omówienie technik wydajnego wczytywania popularnych elementów umieszczonych na stronie z innych witryn

Addy Osmani

Katie Hempenius

Leena Sohoni

Wiele witryn używa elementów umieszczonych na stronie z innych witryn, aby zapewnić użytkownikom atrakcyjne wrażenia, przekazując niektóre sekcje strony internetowej innemu dostawcy treści. Najczęstsze przykłady treści osób trzecich umieszczonych na stronie to odtwarzacze wideo, kanały w mediach społecznościowych, mapy i reklamy.

Treści osób trzecich mogą wpływać na wydajność strony na wiele sposobów. Mogą blokować renderowanie, konkurować z innymi krytycznymi zasobami o sieć i przepustowość lub wpływać na wskaźniki Core Web Vitals. Podczas wczytywania elementy umieszczone na stronie z innych witryn mogą też powodować przesunięcia układu. W tym artykule omawiamy sprawdzone metody zwiększania wydajności, które możesz stosować podczas wczytywania elementów umieszczonych na stronie z innych witryn, wydajne techniki wczytywania oraz narzędzie Layout Shift Terminator, które pomaga zmniejszyć przesunięcia układu w przypadku popularnych elementów umieszczonych na stronie z innych witryn.

Co to jest element umieszczony na stronie z innych witryn

Element umieszczony na stronie z innych witryn to dowolna treść wyświetlana w Twojej witrynie, która:

• nie została utworzona przez Ciebie,
• jest udostępniana z serwerów innych firm.

Elementy umieszczone na stronie z innych witryn są często używane w tych przypadkach:

• Witryny związane ze sportem, wiadomościami, rozrywką i modą używają filmów do wzbogacania treści tekstowych.
• Organizacje z aktywnymi kontami na Twitterze lub w mediach społecznościowych umieszczają na swoich stronach internetowych kanały z tych kont, aby angażować użytkowników i docierać do większej liczby osób.
• Strony restauracji, parków i obiektów, w których odbywają się wydarzenia, często zawierają mapy.

Elementy umieszczone na stronie z innych witryn są zwykle wczytywane w elementach <iframe> na stronie. Dostawcy zewnętrzni oferują fragmenty kodu HTML, które często składają się z elementu <iframe> pobierającego stronę zawierającą znaczniki, skrypty i arkusze stylów. Niektórzy dostawcy używają też fragmentu skryptu, który dynamicznie wstawia element <iframe>, aby pobrać inne treści. Może to sprawić, że elementy umieszczone na stronie z innych witryn będą duże i wpłyną na wydajność strony, opóźniając wczytywanie jej własnych treści.

Wpływ elementów umieszczonych na stronie z innych witryn na wydajność

Wiele popularnych elementów umieszczonych na stronie z innych witryn zawiera ponad 100 KB kodu JavaScript, a czasami nawet 2 MB. Wczytywanie ich trwa dłużej, a podczas wykonywania obciążają one wątek główny. Narzędzia do monitorowania wydajności, takie jak Lighthouse i Narzędzia deweloperskie w Chrome, pomagają mierzyć wpływ elementów umieszczonych na stronie z innych witryn na wydajność.

Kontrola Lighthouse „Ogranicz wpływ kodu spoza witryny” 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.

Warto okresowo sprawdzać wpływ elementów umieszczonych na stronie z innych witryn i kodu spoza witryny na wydajność, ponieważ kod źródłowy elementu umieszczonego na stronie z innych witryn może się zmienić. Możesz wtedy usunąć zbędny kod.

Sprawdzone metody wczytywania

Elementy umieszczone na stronie z innych witryn mogą negatywnie wpływać na wydajność, ale oferują też ważne funkcje. Aby wydajnie korzystać z elementów umieszczonych na stronie z innych witryn i zmniejszyć ich wpływ na wydajność, postępuj zgodnie z tymi wskazówkami.

Kolejność skryptów

Na dobrze zaprojektowanej stronie główna treść własna będzie najważniejszym elementem, a elementy umieszczone na stronie z innych witryn będą znajdować się na paskach bocznych lub pojawiać się po treści własnej.

Aby zapewnić jak najlepsze wrażenia użytkownikom, 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 elementami umieszczonymi na stronie z innych witryn, takimi jak kanał na Twitterze czy reklamy.

Żądania elementów umieszczonych na stronie z innych witryn mogą utrudniać wczytywanie treści własnych, dlatego ważne jest położenie tagu skryptu spoza witryny. Skrypty mogą wpływać na kolejność wczytywania, ponieważ podczas ich wykonywania wstrzymywane jest tworzenie DOM. Umieść tagi skryptów spoza witryny po głównych tagach własnych i użyj async lub defer atrybutów, 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

Ponieważ treści osób trzecich zwykle znajdują się po treści głównej, podczas wczytywania strony mogą nie być widoczne w widocznym obszarze. W takim przypadku pobieranie zasobów spoza witryny można odłożyć do momentu, aż użytkownik przewinie stronę do tej części. Nie tylko pomaga to zoptymalizować początkowe wczytywanie strony, ale też zmniejsza koszty pobierania dla użytkowników korzystających z pakietów danych o stałej cenie i wolnych połączeń sieciowych.

Opóźnianie wczytywania treści do momentu, aż będą one rzeczywiście potrzebne, nazywamy leniwym ładowaniem. W zależności od wymagań i typu elementu umieszczonego na stronie z innych witryn możesz użyć różnych technik leniwego ładowania.

Leniwe ładowanie w przeglądarce w przypadku elementu <iframe>

W przypadku elementów umieszczonych na stronie z innych witryn wczytywanych za pomocą elementów <iframe> możesz użyć leniwego ładowania na poziomie przeglądarki, aby odłożyć wczytywanie elementów iframe poza ekranem do momentu, aż użytkownicy przewiną stronę w ich pobliże. Atrybut loading elementu <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: wskazuje, że przeglądarka powinna odłożyć wczytywanie elementu iframe. Przeglądarka wczyta element iframe, gdy będzie on zbliżać się do widocznego obszaru. Użyj tej wartości, jeśli element iframe nadaje się do leniwego ładowania.
• eager: natychmiast wczytuje element iframe. Użyj tej wartości, jeśli element iframe nie nadaje się do leniwego ładowania. Jeśli atrybut loading nie został określony, jest to domyślne działanie – z wyjątkiem trybu Lite.
• auto: przeglądarka określa, czy ten element iframe ma być leniwie ładowany.

Przeglądarki, które nie obsługują atrybutu loading, ignorują go, więc możesz zastosować leniwe ładowanie na poziomie przeglądarki jako progresywne ulepszenie. Przeglądarki obsługujące ten atrybut mogą mieć różne implementacje progu odległości od widocznego obszaru (odległości, w której element iframe zaczyna się wczytywać).

Oto kilka sposobów na leniwe ładowanie elementów iframe w przypadku różnych typów elementów umieszczonych na stronie z innych witryn.

• Filmy na YouTube: aby leniwie ładować element iframe odtwarzacza YouTube, dodaj atrybut loading do kodu umieszczonego przez YouTube. Leniwe ładowanie elementu umieszczonego na stronie z innych witryn 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 leniwie wczytywać element iframe Map Google, dodaj atrybut loading do kodu elementu iframe umieszczonego na stronie z innych witryn wygenerowanego przez interfejs Google Maps Embed API. Poniżej znajdziesz przykład kodu z symbolem zastępczym 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 elementu umieszczonego na stronie z innych witryn od widocznego obszaru oraz sygnałów takich jak efektywny typ połączenia i tryb Lite, aby określić, kiedy element iframe ma być wczytany, dlatego leniwe ładowanie w przeglądarce może być niespójne. Jeśli potrzebujesz większej kontroli nad progami odległości lub chcesz zapewnić spójne leniwe ładowanie w różnych przeglądarkach, możesz użyć biblioteki lazysizes.

lazysizes to szybki, przyjazny dla SEO moduł leniwego ładowania obrazów i elementów iframe. Po pobraniu komponentu można go używać z elementem iframe w przypadku elementu umieszczonego na stronie z innych witryn 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 biblioteki lazysizes można używać z elementami iframe w przypadku innych elementów umieszczonych na stronie z innych witryn.

Pamiętaj, że biblioteka lazysizes używa interfejsu Intersection Observer API do wykrywania, kiedy element staje się widoczny.

Używanie atrybutu data-lazy na Facebooku

Facebook udostępnia różne typy wtyczek społecznościowych, które można umieszczać na stronie. Obejmuje to posty, komentarze, filmy i najpopularniejszy przycisk Lubię to. Wszystkie wtyczki zawierają ustawienie data-lazy. Ustawienie go na true sprawia, że wtyczka używa mechanizmu leniwego ładowania przeglądarki, ustawiając atrybut loading="lazy" elementu iframe.

Leniwe ładowanie kanałów na Instagramie

Instagram udostępnia blok znaczników i skrypt jako część elementu umieszczonego na stronie z innych witryn. Skrypt wstawia element <iframe> na stronę. Leniwe ładowanie tego elementu <iframe> może poprawić wydajność, ponieważ element umieszczony na stronie z innych witryn może mieć rozmiar ponad 100 KB po skompresowaniu. Wiele wtyczek Instagrama do witryn WordPress, takich jak WPZoom i Elfsight, udostępnia opcję leniwego ładowania.

Zastępowanie elementów umieszczonych na stronie z innych witryn fasadami

Chociaż interaktywne elementy umieszczone na stronie z innych witryn zwiększają wartość strony, 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 kliknie, rozwinie, przewinie i przejdzie do elementu mapy umieszczonego na stronie z innych witryn. Podobnie nie każdy użytkownik strony dostawcy usług telekomunikacyjnych będzie wchodzić w interakcję z chatbotem. W takich przypadkach możesz całkowicie uniknąć wczytywania lub leniwego ładowania elementu umieszczonego na stronie z innych witryn, wyświetlając w jego miejscu fasadę.

Fasada to element statyczny, który wygląda podobnie do rzeczywistego elementu umieszczonego na stronie z innych witryn, ale nie jest funkcjonalny, a zatem znacznie mniej obciąża wczytywanie strony. Oto kilka strategii optymalnego wczytywania takich elementów umieszczonych na stronie z innych witryn, które nadal zapewniają użytkownikom pewną wartość.

Używanie obrazów statycznych jako fasad

Obrazy statyczne można stosować zamiast elementów mapy umieszczonych na stronie z innych witryn, gdy nie trzeba, aby mapa była interaktywna. Możesz powiększyć obszar zainteresowania na mapie, zrobić zdjęcie i użyć go zamiast interaktywnego elementu mapy umieszczonego na stronie z innych witryn. Możesz też użyć funkcji Narzędzi deweloperskich Zrób zrzut ekranu węzła , aby zrobić zrzut ekranu elementu iframe umieszczonego na stronie z innych witryn.

Narzędzia deweloperskie zapisują obraz jako plik png, ale dla lepszej wydajności możesz też przekonwertować go na format WebP.

Używanie obrazów dynamicznych jako fasad

Ta technika umożliwia generowanie obrazów odpowiadających interaktywnemu elementowi umieszczonemu na stronie z innych witryn w czasie działania. Oto niektóre narzędzia, które umożliwiają generowanie statycznych wersji elementów umieszczonych na stronie z innych witryn na Twoich stronach.

• Map Static API: usługa Google Maps Static API generuje mapę na podstawie parametrów adresu URL zawartych 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 musi być umieszczony w tagu <img> na stronie jako atrybut src.

  Narzędzie Static map maker pomaga skonfigurować parametry wymagane do utworzenia adresu URL i w czasie rzeczywistym udostępnia kod elementu obrazu.

  Poniższy fragment kodu pokazuje kod obrazu, którego źródło jest ustawione na adres URL interfejsu Maps Static API. Został on umieszczony w tagu linku, który zapewnia dostęp do rzeczywistej mapy po kliknięciu obrazu. (Uwaga: atrybut klucza interfejsu API nie jest uwzględniony 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 map, ta koncepcja umożliwia dynamiczne umieszczanie zrzutu ekranu z Twittera zamiast aktywnego kanału. Tweetpik to jedno z narzędzi, których można używać do robienia zrzutów ekranu tweetów. Interfejs Tweetpik API akceptuje adres URL tweeta i zwraca obraz z jego treścią. Interfejs API akceptuje też parametry umożliwiające dostosowanie tła, kolorów, obramowań i wymiarów obrazu.

Używanie funkcji „kliknij, aby wczytać” do ulepszania fasad

Koncepcja „kliknij, aby wczytać” łączy leniwe ładowanie i fasady. Strona początkowo wczytuje się z fasadą. Gdy użytkownik wejdzie w interakcję ze statycznym symbolem zastępczym, klikając go, wczytuje się element umieszczony na stronie z innych witryn. Jest to też znane jako wzorzec importowania podczas interakcji. Można go wdrożyć, wykonując te czynności.

1. Podczas wczytywania strony: na stronie znajduje się fasada lub element statyczny.
2. Po najechaniu kursorem: fasada łączy się z dostawcą elementu umieszczonego na stronie z innych witryn.
3. Po kliknięciu: fasada zostaje zastąpiona produktem innej firmy.

Fasady można stosować w przypadku elementów umieszczonych na stronie z innych witryn, takich jak odtwarzacze wideo, widżety czatu, usługi uwierzytelniania i widżety mediów społecznościowych. Często spotykamy się z fasadami filmów na YouTube umieszczonymi na stronie, które są po prostu obrazami z przyciskiem odtwarzania. Rzeczywisty film wczytuje się dopiero po kliknięciu obrazu.

Możesz utworzyć niestandardową fasadę „kliknij, aby wczytać” za pomocą wzorca importowania podczas interakcji lub użyć jednej z tych fasad open source dostępnych dla różnych typów elementów umieszczonych na stronie z innych witryn.

• Fasada YouTube

  Lite-youtube-embed to zalecana fasada odtwarzacza YouTube, która wygląda jak prawdziwy odtwarzacz, ale jest 224 razy szybsza. Możesz jej używać, pobierając skrypt i arkusz stylów, a następnie używając tagu <lite-youtube> w kodzie HTML lub JavaScript. Niestandardowe parametry odtwarzacza obsługiwane przez YouTube można uwzględnić za pomocą atrybutu params.

  <lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
  

  Poniżej znajdziesz porównanie elementu lite-youtube-embed i rzeczywistego elementu umieszczonego na stronie z innych witryn.

  

  

  Inne podobne fasady dostępne dla odtwarzaczy YouTube i Vimeo to lite-youtube, lite-vimeo-embed i lite-vimeo.

• Fasada widżetu czatu

  Moduł React live chat loader wczytuje przycisk, który wygląda jak element czatu umieszczony na stronie z innych witryn, zamiast samego elementu. Można go używać z różnymi platformami dostawców czatu, takimi jak Intercom, Help Scout i Messenger. Widżet podobny do czatu jest znacznie lżejszy niż widżet czatu i wczytuje się szybciej. Można go zastąpić rzeczywistym widżetem czatu, gdy użytkownik najedzie kursorem na przycisk lub kliknie go albo gdy strona będzie nieaktywna przez dłuższy czas. Studium przypadku Postmark wyjaśnia, jak wdrożono react-live-chat-loader i jakie ulepszenia wydajności udało się osiągnąć.

  

Usuwanie lub zastępowanie elementów umieszczonych na stronie z innych witryn linkami

Jeśli okaże się, że niektóre elementy umieszczone na stronie z innych witryn powodują niską wydajność wczytywania, a użycie którejkolwiek z opisanych wcześniej technik nie jest możliwe, najprostszym rozwiązaniem jest całkowite usunięcie elementu umieszczonego na stronie z innych witryn. Jeśli nadal chcesz, aby użytkownicy mieli dostęp do treści w elemencie umieszczonym na stronie z innych witryn, możesz podać do niego link z atrybutem target="_blank", aby użytkownik mógł kliknąć i wyświetlić go w innej karcie.

Stabilność układu

Dynamiczne wczytywanie treści umieszczonych na stronie z innych witryn może poprawić wydajność wczytywania strony, ale czasami może powodować nieoczekiwane przesuwanie się treści na stronie. Jest to tzw. przesunięcie układu.

Ponieważ stabilność wizualna jest ważna dla płynnego działania, skumulowane przesunięcie układu (CLS) mierzy, jak często występują te przesunięcia i jak bardzo są one uciążliwe.

Przesunięć układu można uniknąć, rezerwując miejsce podczas wczytywania strony na elementy, które będą wczytywane dynamicznie później. Przeglądarka może określić miejsce do zarezerwowania, jeśli zna szerokość i wysokość elementów. Możesz to zapewnić, określając atrybuty width i height elementów iframe lub ustawiając stały rozmiar elementów statycznych, w których będzie wczytywany element umieszczony na stronie z innych witryn. Na przykład element iframe elementu YouTube umieszczonego na stronie z innych witryn powinien mieć określone szerokość i wysokość w ten sposób.

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

Popularne elementy umieszczone na stronie z innych witryn, takie jak YouTube, Mapy Google i Facebook, udostępniają kod umieszczony na stronie z innymi witrynami z określonymi atrybutami rozmiaru. Może się jednak zdarzyć, że niektórzy dostawcy nie uwzględniają tych atrybutów. Na przykład ten fragment kodu nie wskazuje wymiarów wynikowego elementu umieszczonego na stronie z innych witryn.

<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 tej strony możesz użyć Narzędzi deweloperskich, aby sprawdzić wstawiony element iframe. Jak widać w poniższym fragmencie kodu, wysokość wstawionego elementu 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 mieć pewność, że kontener nie rozszerzy się podczas wczytywania kanału i nie nastąpi przesunięcie układu. Poniższy fragment kodu może służyć do ustalenia rozmiaru elementu umieszczonego na stronie z innych witryn, który został wcześniej uwzględniony.

<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>

Layout Shift Terminator

Ponieważ elementy umieszczone na stronie z innych witryn często pomijają wymiary (szerokość, wysokość) renderowanej treści, mogą powodować znaczne przesunięcia układu na stronie. Rozwiązanie tego problemu może być trudne bez ręcznego sprawdzania rozmiarów końcowych za pomocą Narzędzi deweloperskich w różnych rozmiarach widocznego obszaru.

Teraz dostępne jest zautomatyzowane narzędzie Layout Shift Terminator, które może pomóc Ci zmniejszyć przesunięcia układu w przypadku popularnych elementów umieszczonych na stronie z innych witryn, takich jak Twitter, Facebook i inni dostawcy.

Layout Shift Terminator:

• Wczytuje element umieszczony na stronie z innych witryn 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 elementu umieszczonego na stronie z innych witryn, aby później wygenerować zapytania multimedialne i zapytania kontenera.
• Ustawia rozmiar otoki min-height wokół znaczników elementu umieszczonego na stronie z innych witryn za pomocą zapytań multimedialnych (i zapytań kontenera), dopóki element umieszczony na stronie z innych witryn nie zostanie zainicjowany (po czym style min-height zostaną usunięte).

• Generuje zoptymalizowany fragment kodu elementu umieszczonego na stronie z innych witryn, który można skopiować i wkleić w miejscu, w którym w przeciwnym razie umieścisz element umieszczony na stronie z innych witryn.

  

Wypróbuj narzędzie Layout Shift Terminator i podziel się opinią w projekcie Layout Shift Terminator w GitHub. Narzędzie jest w wersji beta i z czasem będzie ulepszane.

Podsumowanie

Elementy umieszczone na stronie z innych witryn mogą być bardzo przydatne dla użytkowników, ale wraz ze wzrostem ich liczby i rozmiaru na stronie może pogorszyć się wydajność. Dlatego konieczne jest mierzenie, ocenianie i stosowanie odpowiednich strategii wczytywania elementów umieszczonych na stronie z innych witryn na podstawie ich pozycji, trafności i potencjalnych potrzeb użytkowników.