Omówienie technik efektywnego wczytywania popularnych elementów innych firm.
Wiele witryn korzysta z elementów umieszczanych przez inne firmy, aby zwiększać wygodę użytkowników. W tym celu przekazuje niektóre sekcje strony innemu dostawcy treści. Najczęstsze przykłady umieszczania treści przez firmy zewnętrzne to 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 ono blokować renderowanie, rywalizować z innymi zasobami krytycznymi dla sieci i przepustowości lub wpływać na podstawowe wskaźniki internetowe. Układy innych firm umieszczone na stronie też mogą powodować zmiany układu podczas wczytywania. W tym artykule omawiamy sprawdzone metody dotyczące wydajności, których możesz użyć podczas ładowania elementów zewnętrznych innych firm, skuteczne techniki ładowania oraz narzędzie Terminator przesunięcia układu, które pomaga ograniczyć przesunięcia układu w przypadku popularnych elementów umieszczanych na stronie.
Co to jest umieszczanie
Umieszczony element przez firmę zewnętrzną to wszelkie treści wyświetlane w Twojej witrynie, które: * nie są Twojego autorstwa, * są udostępniane z serwerów firm zewnętrznych.
Umieszczanie jest często stosowane w tych celach: * Witryny o tematyce sportowej, informacyjnej, rozrywkowej i modowej wykorzystują filmy do wzbogacania treści tekstowych. * Organizacje z aktywnymi kontami na Twitterze lub mediach społecznościowych umieszczają kanały z tych kont na swoich stronach, aby nawiązywać kontakt z większą liczbą osób. * Mapy często umieszczane są na stronach restauracji, parków i obiektów imprez.
Elementy umieszczone przez inne firmy 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ę składającą się ze znaczników, skryptów i arkuszy stylów. Niektórzy dostawcy używają też fragmentu kodu, który dynamicznie wstawia <iframe> w celu pobrania innych treści. Może to spowodować, że umieszczone przez inne firmy elementy umieszczone na innych stronach będą się obciążać, co wpłynie na wydajność strony, opóźniając publikację własnych treści.
Wpływ na wydajność elementów innych firm
Wiele popularnych elementów, które można umieszczać na stronie, zawiera ponad 100 KB kodu JavaScript, a czasem może mieć rozmiar do 2 MB. Wczytują się one dłużej i utrzymują ruch w wątku głównym podczas wykonywania. Narzędzia do monitorowania wydajności, takie jak Lighthouse i Chrome DevTools, pomagają mierzyć wpływ elementów innych firm na wydajność.
Ograniczanie wpływu kodu zewnętrznego: audyt Lighthouse pokazuje listę dostawców zewnętrznych używanych przez stronę wraz z ich rozmiarem i czasem blokowania w wątku głównym. Kontrola jest dostępna w Narzędziach deweloperskich w Chrome na karcie Lighthouse.
Zaleca się okresowe sprawdzanie wpływu elementów umieszczonych na stronie i kodu innych firm na wydajność, ponieważ kod źródłowy umieszczony na stronie może ulec zmianie. Dzięki temu możesz usunąć zbędny kod.
Wczytuję sprawdzone metody
Elementy innych firm umieszczone na stronach mogą obniżać wydajność, ale zapewniają też ważne funkcje. Aby skutecznie korzystać z elementów umieszczonych przez inne firmy i zmniejszyć ich wpływ na wydajność, postępuj zgodnie z poniższymi wskazówkami.
Kolejność skryptów
Dobrze zaprojektowana strona powinna być najważniejszym elementem własnej zawartości, natomiast elementy umieszczone przez inne firmy pojawiają się na paskach bocznych lub pojawiają się po treściach własnych.
Ze względu na wygodę użytkowników główna treść powinna się szybko ładować przed innymi treściami. Na przykład tekst wiadomości na stronie z wiadomościami powinien być wczytywany przed umieszczeniem go w przypadku kanału na Twitterze lub reklamy.
Żądania umieszczone na stronach zewnętrznych mogą zakłócać wczytywanie własnych treści, 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 skryptu innej firmy po własnych tagach i użyj atrybutów async lub defer, aby ładować 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ą zwykle wyświetlane za główną treścią, dlatego mogą być niewidoczne w widocznym obszarze po wczytaniu strony. W takim przypadku pobieranie zasobów innych firm może zostać odroczone, dopóki użytkownik nie przewinie strony w dół do tej części strony. Pozwala to nie tylko zoptymalizować początkowe wczytywanie strony, ale także obniżyć koszty pobierania w przypadku użytkowników korzystających ze stałych abonamentów i powolnych połączeń sieciowych.
Opóźnienie pobierania treści do momentu, gdy będą faktycznie potrzebne, nazywamy leniwym ładowaniem. W zależności od wymagań i typu umieszczania możesz zastosować różne techniki leniwego ładowania opisane poniżej.
Natywne leniwe ładowanie dla elementu <iframe>
W przypadku elementów zewnętrznych wczytywanych za pomocą elementów <iframe> możesz użyć leniwego ładowania na poziomie przeglądarki, aby opóźnić wczytywanie elementów iframe poza ekranem do momentu, gdy użytkownicy przewiną stronę w jej pobliżu. Atrybut ładowania dla <iframe> jest dostępny w Chrome 77 i nowszych wersjach, a został też wprowadzony w innych przeglądarkach opartych na Chromium.
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400">
</iframe>
Atrybut wczytywania obsługuje te wartości:
lazy: oznacza, że przeglądarka powinna opóźnić wczytywanie elementu iframe. Przeglądarka wczyta element iframe, gdy zbliży się do widocznego obszaru. Użyj, jeśli element iframe jest dobrym rozwiązaniem do leniwego ładowania.eager: natychmiast wczytuje element iframe. 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 wersji uproszczonej.auto: przeglądarka określa, czy leniwie ładować tę ramkę.
Przeglądarki, które nie obsługują atrybutu loading, ignorują go, więc możesz zastosować natywne leniwe ładowanie jako progresywne ulepszenie. Przeglądarki, które obsługują ten atrybut, mogą mieć różne implementacje progu odległości od widocznego obszaru (odległości, w której zaczyna się ładowanie elementu iframe).
Poniżej opisujemy kilka sposobów leniwego ładowania elementów iframe w przypadku różnych rodzajów umieszczania.
- Filmy z YouTube: aby leniwe ładowanie elementu iframe odtwarzacza wideo YouTube, umieść atrybut
loadingw kodzie do umieszczenia na stronie, który dostarcza YouTube. Leniwe ładowanie umieszczonej strony YouTube może zaoszczędzić około 500 KB przy wstępnym 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 leniwe ładować element iframe Map Google, umieść atrybut
loadingw kodzie elementu iframe, który go zawiera, wygenerowany przez interfejs Google Maps Embed API. Poniżej znajdziesz przykład kodu ze zmienną dla 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 leniwego rozmiaru
Przeglądarki korzystają z odległości od widocznego obszaru, a także na podstawie sygnałów takich jak efektywny typ połączenia i wersja uproszczona, aby określić, kiedy element iframe ma zostać wczytany, natywne leniwe ładowanie może być niespójne. Jeśli potrzebujesz większej kontroli nad progami odległości lub chcesz zapewnić spójne wrażenia podczas leniwego ładowania w różnych przeglądarkach, możesz użyć biblioteki leniwego rozmiaru.
lenisizes to szybki, przyjazny SEO leniwy program do ładowania zarówno obrazów, jak i elementów iframe. Po pobraniu komponentu można go użyć z elementem iframe w przypadku umieszczania filmu z YouTube w witrynie 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>
Podobnie leniwych rozmiarów można używać z elementami iframe w przypadku elementów osadzonych przez firmy zewnętrzne.
Pamiętaj, że leniwe rozmiary używają interfejsu Intersection Observer API do wykrywania, kiedy element staje się widoczny.
Korzystanie z leniwego przetwarzania danych na Facebooku
Facebook udostępnia różne typy wtyczek społecznościowych, które można umieszczać w aplikacjach. Dotyczy to postów, komentarzy, filmów i najpopularniejszego przycisku Podoba mi się. Wszystkie wtyczki mają ustawienie data-lazy. Jeśli zasada ma wartość true, wtyczka korzysta z mechanizmu leniwego ładowania w przeglądarce, ustawiając atrybut elementu iframe loading="lazy".
Leniwe ładowanie kanałów na Instagramie
Instagram udostępnia blok znaczników i skrypt w ramach umieszczania. Skrypt wstawia na stronie element <iframe>. Leniwe ładowanie elementu <iframe> może zwiększyć wydajność, ponieważ umieszczony w nim element może mieć rozmiar większy niż 100 KB. Wiele wtyczek Instagrama do witryn WordPress, takich jak WPZoom i Elfsight, udostępnia opcję leniwego ładowania.
Zastępowanie umieszczonych elementów fasadami
Interaktywne umieszczanie elementów zwiększa wartość strony, ale wielu użytkowników może nie wchodzić z nimi w interakcje. Na przykład nie każdy użytkownik, który przegląda stronę restauracji, kliknie, rozwinie, przewija i porusza się po umieszczeniu mapy. Analogicznie nie każdy użytkownik strony operatorów telekomunikacyjnych będzie wchodzić w interakcję z czatbotem. W takich przypadkach można uniknąć wczytywania lub leniwego ładowania umieszczonego elementu, wyświetlając w jego miejscu fasadę.
Fasada to element statyczny, który wygląda podobnie do elementu innej firmy, który jest umieszczony poza witryną, ale nie działa, dzięki czemu podczas ładowania strony jest znacznie mniej obciążany. Poniżej znajdziesz kilka strategii, które pozwolą Ci optymalnie wczytywać takie umieszczanie i jednocześnie zapewnić użytkownikowi pewną wartość.
Stosowanie obrazów statycznych jako fasad
Zamiast elementów umieszczanych mapy możesz użyć obrazów statycznych, aby zapewnić interaktywność mapy. Możesz powiększyć interesujący obszar na mapie, zrobić zdjęcie i użyć go zamiast umieszczania interaktywnej mapy. Możesz też skorzystać z funkcji Zrób zrzut ekranu węzła w Narzędziach deweloperskich, aby zrobić zrzut ekranu z umieszczonym elementem iframe (jak pokazano poniżej).
Narzędzia deweloperskie przechwytują obraz jako png, ale możesz też przekonwertować go do formatu WebP format for better performance.
Używanie obrazów dynamicznych jako fasad
Ta technika umożliwia generowanie w czasie działania obrazów odpowiadających interaktywnemu umieszczonemu na stronie. Poniżej przedstawiamy niektóre narzędzia umożliwiające generowanie statycznych wersji elementów umieszczanych na stronach.
Map Static API: usługa Map 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 zostać umieszczony w tagu
<img>na stronie jako atrybutsrc.Narzędzie Statyczny Kreator map pomaga skonfigurować parametry wymagane dla adresu URL i udostępnia w czasie rzeczywistym kod elementu graficznego.
Poniższy fragment kodu przedstawia kod obrazu, którego źródłem jest adres URL statycznego interfejsu API Map Google. Umieściliśmy go w tagu linku, który zapewnia, że po kliknięciu obrazu można otworzyć rzeczywistą mapę. (Uwaga: atrybut klucza interfejsu API nie jest zawarty 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, ta opcja pozwala dynamicznie umieścić zrzut ekranu z Twittera zamiast obrazu z transmisji na żywo. Tweetpik to jedno z narzędzi do robienia zrzutów ekranu z tweetami. Interfejs tweetpik API akceptuje adres URL tweeta i zwraca obraz z jego zawartością. API akceptuje też parametry służące do dostosowania tła, kolorów, obramowania i wymiarów obrazu.
Ulepszaj fasady dzięki reklamom „kliknij, aby załadować”
Funkcja „kliknij, aby załadować” łączy w sobie leniwe ładowanie i fasady. Początkowo strona wczytuje się razem z fasadą. Gdy użytkownik wejdzie w interakcję ze statycznym obiektem zastępczym, klikając go, zostanie wczytany element umieszczony przez firmę zewnętrzną. Nazywa się to też wzorcem importu w ramach interakcji i można go zaimplementować, wykonując poniższe czynności.
- Przy wczytaniu strony: na stronie pojawia się element Fasada lub element statyczny.
- Po najechaniu kursorem myszy: interfejs Fasada wstępnie łączy się z zewnętrznym dostawcą umieszczania.
- Kliknięcie: fasada zostaje zastąpiona produktem innej firmy.
Można z nich korzystać w odtwarzaczach wideo, widżetach czatu, usługach uwierzytelniania i widżetach mediów społecznościowych wraz z elementami osadzonymi innych firm. Umieszczone filmy z YouTube, które są tylko obrazami z przyciskiem odtwarzania, to często spotykane elementy fasadowe. Film wczytuje się tylko wtedy, gdy klikniesz obraz.
Możesz utworzyć własną elewację typu „kliknij, aby załadować”, korzystając ze wzorca importowania po interakcji lub skorzystać z jednej z poniższych fasad open source dostępnych dla różnych rodzajów umieszczania.
Fasada 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 podać w atrybucieparams.<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>Poniżej znajduje się porównanie elementu lite-youtube-embed z treścią umieszczonego filmu.
Umieszczenie na platformie lite-YouTube 
Umieszczenie w YouTube Inne podobne fasady dostępne w odtwarzaczach YouTube i Vimeo to lite-youtube, lite-vimeo-embed i lite-vimeo.
Fasada widżetu Google Chat
React-live-chat-loader wczytuje przycisk, który wygląda jak umieszczony czat, a nie sam umieszczony film. Można go używać z różnymi platformami czatu, takimi jak Intercom, Help Scout czy Messenger. Podobny widżet jest znacznie lżejszy od widżetu czatu i wczytuje się szybciej. Można go zastąpić rzeczywistym widżetem czatu, gdy użytkownik najedzie kursorem na przycisk lub go kliknie albo jeśli strona jest nieaktywna przez dłuższy czas. Studium przypadku firmy Postmark wyjaśnia, w jaki sposób firma wdrożyła moduł reagowania na czacie na żywo i poprawiła wydajność.
Usuwanie i zastępowanie umieszczonych linków linkami
Jeśli zauważysz, że niektóre umieszczone przez inne firmy elementy umieszczone na stronach zewnętrznych wczytują się powoli, a korzystanie z powyższej metody nie jest możliwe, najprostsze rozwiązanie to całkowite usunięcie umieszczonego elementu. Jeśli chcesz, aby użytkownicy nadal mieli dostęp do treści umieszczonej w witrynie, możesz podać link do niej za pomocą target="_blank", aby mogli ją kliknąć i wyświetlić na innej karcie.
Stabilność układu
Wczytywane dynamicznie treści umieszczone na stronie mogą przyspieszyć wczytywanie strony, ale czasem mogą spowodować nieoczekiwane przesunięcie treści strony. Jest to tzw. przesunięcie układu.
Stabilność wizualna ma duże znaczenie dla zapewnienia płynności użytkowania, dlatego funkcja skumulowane przesunięcie układu (CLS) mierzy, jak często zachodzą te zmiany i na ile uciążliwe.
Można uniknąć przesunięć układu, rezerwując miejsce podczas wczytywania strony na elementy, które będą ładowane później. Przeglądarka może określić przestrzeń do zarezerwowania, jeśli zna szerokość i wysokość elementów. Możesz to zrobić, określając atrybuty width i height w elementach iframe lub ustawiając stały rozmiar elementów statycznych, do których będą ładowane elementy zewnętrzne. Na przykład element iframe umieszczony na stronie YouTube powinien mieć szerokość i wysokość określone w następujący sposób.
<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>
W popularnych witrynach, takich jak YouTube, Mapy Google czy Facebook, jest dostępny kod z określonymi atrybutami rozmiaru. Niektórzy usługodawcy mogą jednak tego nie robić. Na przykład ten fragment kodu nie wskazuje wymiarów umieszczonego 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>
Za pomocą Narzędzi deweloperskich możesz sprawdzić wstrzyknięty iframepo wyrenderowaniu tej strony. Jak widać w tym fragmencie, wysokość wstawionego elementu iframe jest stała, a szerokość jest wyrażana 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, aby mieć pewność, że kontener się nie rozwija po wczytaniu pliku danych i nie występuje przesunięcie układu. Poniższy fragment kodu może służyć do poprawienia rozmiaru wcześniej umieszczonego umieszczonego elementu.
<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
Zewnętrzne umieszczone na stronie elementy często pomijają wymiary (szerokość, wysokość) przy renderowanej ostatecznej zawartości, co może powodować znaczne zmiany układu strony. Rozwiązanie tego problemu może być trudne bez ręcznego sprawdzenia końcowych rozmiarów za pomocą Narzędzi deweloperskich w różnych rozmiarach widocznego obszaru.
Teraz jest dostępne automatyczne narzędzie Terminator przesunięcia układu, które pomoże Ci ograniczyć przesunięcia układu w przypadku popularnych umieszczanych treści, np. z Twittera, Facebooka i innych usług.
Zakończenie przesunięcia układu:
- Ładuje umieszczone po stronie klienta w elemencie iframe.
- Zmienia rozmiar elementu iframe do różnych popularnych rozmiarów widocznego obszaru.
- Dla każdego popularnego widocznego obszaru rejestrowane są wymiary umieszczonego elementu, co pozwala później generować zapytania o media i kontenery.
- Określa rozmiar otoki o minimalnej wysokości wokół znacznika umieszczonego na stronie za pomocą zapytań o media (i zapytań dotyczących kontenera) do czasu zainicjowania umieszczania (po której zostaną usunięte style minimalnej wysokości).
Generuje zoptymalizowany fragment kodu osadzania, który można skopiować i wkleić w miejscu, w którym normalnie umieszcza się kod na stronie.
Wypróbuj Terminator przesunięcia układu i prześlij opinię na GitHub. Narzędzie jest w wersji beta i z czasem zostanie coraz lepiej udoskonalone.
Podsumowanie
Elementy umieszczone przez inne firmy mogą być bardzo przydatne dla użytkowników, ale im większa liczba i rozmiar elementów umieszczanych na stronie, zmniejsza się wydajność. Dlatego konieczne jest mierzenie, ocenianie i stosowanie odpowiednich strategii wczytywania umieszczonych na stronie treści na podstawie ich pozycji, trafności i potrzeb potencjalnych użytkowników.