Google menggunakan teknologi AI untuk menerjemahkan konten ke dalam bahasa pilihan Anda. Terjemahan AI mungkin mengandung kesalahan.

Praktik terbaik untuk menggunakan sematan pihak ketiga

Ringkasan teknik untuk memuat sematan pihak ketiga populer secara efisien.

Addy Osmani

Katie Hempenius

Leena Sohoni

Banyak situs menggunakan sematan pihak ketiga untuk membuat pengalaman pengguna yang menarik dengan mendelegasikan beberapa bagian halaman web ke penyedia konten lain. Contoh sematan konten pihak ketiga yang paling umum adalah pemutar video, feed media sosial, peta, dan iklan.

Konten pihak ketiga dapat memengaruhi performa halaman dalam banyak hal. Konten tersebut dapat memblokir rendering, bersaing dengan resource penting lainnya untuk jaringan dan bandwidth, atau memengaruhi metrik Core Web Vitals. Sematan pihak ketiga juga dapat menyebabkan perubahan tata letak saat dimuat. Artikel ini membahas praktik terbaik performa yang dapat Anda gunakan saat memuat sematan pihak ketiga, teknik pemuatan yang efisien, dan alat Layout Shift Terminator yang membantu mengurangi perubahan tata letak untuk sematan populer.

Apa yang dimaksud dengan sematan

Sematan pihak ketiga adalah konten apa pun yang ditampilkan di situs Anda yang:

Tidak dibuat oleh Anda
Ditayangkan dari server pihak ketiga

Beberapa sematan di luar layar ditampilkan, yang dapat dimuat secara lambat.

Sematan sering digunakan dalam hal berikut:

Situs yang terkait dengan olahraga, berita, hiburan, dan mode menggunakan video untuk menambah konten teks.
Organisasi dengan akun Twitter atau media sosial aktif menyematkan feed dari akun ini ke halaman web mereka untuk berinteraksi dan menjangkau lebih banyak orang.
Halaman restoran, taman, dan tempat acara sering menyematkan peta.

Sematan pihak ketiga biasanya dimuat dalam <iframe> elemen di halaman. Penyedia pihak ketiga menawarkan cuplikan HTML yang sering kali terdiri dari <iframe> yang mengambil halaman yang terdiri dari markup, skrip, dan stylesheet. Beberapa penyedia juga menggunakan cuplikan skrip yang menyisipkan <iframe> secara dinamis untuk mengambil konten lain. Hal ini dapat membuat sematan pihak ketiga menjadi berat dan memengaruhi performa halaman dengan menunda konten pihak pertamanya.

Dampak performa sematan pihak ketiga

Banyak sematan populer menyertakan lebih dari 100 KB JavaScript, bahkan terkadang hingga 2 MB. Sematan tersebut memerlukan lebih banyak waktu untuk dimuat dan membuat thread utama tetap sibuk saat dieksekusi. Alat pemantauan performa seperti Lighthouse dan Chrome DevTools membantu mengukur dampak sematan pihak ketiga terhadap performa.

Audit Lighthouse "Kurangi dampak kode pihak ketiga" menampilkan daftar penyedia pihak ketiga yang digunakan halaman, dengan ukuran dan waktu pemblokiran thread utama. Audit ini tersedia melalui Chrome DevTools di tab Lighthouse.

Sebaiknya audit dampak performa sematan dan kode pihak ketiga Anda secara berkala karena kode sumber sematan dapat berubah. Anda dapat menggunakan kesempatan ini untuk menghapus kode yang berlebihan.

Audit Lighthouse yang menunjukkan dampak setiap kode pihak ketiga pada halaman.

Praktik terbaik pemuatan

Sematan pihak ketiga dapat berdampak negatif pada performa, tetapi juga menawarkan fungsi penting. Untuk menggunakan sematan pihak ketiga secara efisien dan mengurangi dampak performanya, ikuti panduan ini.

Pengurutan skrip

Di halaman yang didesain dengan baik, konten pihak pertama utama akan menjadi fokus halaman, sedangkan sematan pihak ketiga akan menempati sidebar atau muncul setelah konten pihak pertama.

Untuk pengalaman pengguna terbaik, konten utama harus dimuat dengan cepat dan sebelum konten pendukung lainnya. Misalnya, teks berita di halaman berita harus dimuat sebelum sematan untuk feed Twitter atau iklan.

Permintaan untuk sematan pihak ketiga dapat menghalangi pemuatan konten pihak pertama, sehingga posisi tag skrip pihak ketiga menjadi penting. Skrip dapat memengaruhi urutan pemuatan karena pembuatan DOM dijeda saat skrip dieksekusi. Tempatkan tag skrip pihak ketiga setelah tag pihak pertama utama dan gunakan async atau defer atribut untuk memuatnya secara asinkron.

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

Pemuatan lambat

Karena konten pihak ketiga biasanya muncul setelah konten utama, konten tersebut mungkin tidak terlihat di area pandang saat halaman dimuat. Dalam hal ini, mendownload resource pihak ketiga dapat ditunda hingga pengguna men-scroll ke bagian halaman tersebut. Hal ini tidak hanya membantu mengoptimalkan pemuatan halaman awal, tetapi juga mengurangi biaya download bagi pengguna yang menggunakan paket data tetap dan koneksi jaringan yang lambat.

Menunda pemuatan konten hingga benar-benar diperlukan disebut pemuatan lambat. Bergantung pada persyaratan dan jenis sematan, Anda dapat menggunakan teknik pemuatan lambat yang berbeda.

Pemuatan lambat browser untuk `<iframe>`

Untuk sematan pihak ketiga yang dimuat melalui elemen <iframe>, Anda dapat menggunakan pemuatan lambat tingkat browser untuk menunda pemuatan iframe di luar layar hingga pengguna men-scroll di dekatnya. Atribut pemuatan untuk <iframe> tersedia di semua browser modern.

<iframe src="https://example.com"
       loading="lazy"
       width="600"
       height="400">
</iframe>

Atribut pemuatan mendukung nilai berikut:

lazy: Menunjukkan bahwa browser harus menunda pemuatan iframe. Browser akan memuat iframe saat mendekati area pandang. Gunakan jika iframe adalah kandidat yang baik untuk pemuatan lambat.
eager: Memuat iframe segera. Gunakan jika iframe bukan kandidat yang baik untuk pemuatan lambat. Jika atribut loading belum ditentukan, ini adalah perilaku default—kecuali dalam mode Lite.
auto: Browser menentukan apakah akan memuat frame ini secara lambat.

Browser yang tidak mendukung atribut loading akan mengabaikannya, sehingga Anda dapat menerapkan pemuatan lambat tingkat browser sebagai progressive enhancement. Browser yang mendukung atribut mungkin memiliki implementasi yang berbeda untuk nilai minimum jarak dari area pandang (jarak saat iframe mulai dimuat).

Berikut beberapa cara untuk memuat iframe secara lambat untuk berbagai jenis sematan.

Video YouTube: Untuk memuat iframe pemutar video YouTube secara lambat, sertakan atribut loading ke kode sematan yang disediakan oleh YouTube. Memuat sematan YouTube secara lambat dapat menghemat sekitar 500 KB pada pemuatan halaman awal.

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

Google Maps: Untuk memuat iframe Google Map secara lambat, sertakan atribut loading dalam kode untuk sematan iframe yang dihasilkan oleh Google Maps Embed API. Berikut adalah contoh kode dengan placeholder untuk kunci 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>

Library lazysizes

Karena browser menggunakan jarak sematan dari area pandang, selain sinyal seperti jenis koneksi efektif dan mode Lite, untuk memutuskan kapan iframe harus dimuat, pemuatan lambat browser dapat menjadi tidak konsisten. Jika Anda memerlukan kontrol yang lebih baik atas nilai minimum jarak atau ingin memberikan pengalaman pemuatan lambat yang konsisten di seluruh browser, Anda dapat menggunakan library lazysizes.

lazysizes adalah pemuat lambat yang cepat dan ramah SEO untuk gambar dan iframe. Setelah mendownload komponen, komponen tersebut dapat digunakan dengan iframe untuk sematan YouTube sebagai berikut.

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

Demikian pula, lazysizes dapat digunakan dengan iframe untuk sematan pihak ketiga lainnya.

Perhatikan bahwa lazysizes menggunakan Intersection Observer API untuk mendeteksi kapan elemen menjadi terlihat.

Menggunakan data-lazy di Facebook

Facebook menyediakan berbagai jenis plugin sosial yang dapat disematkan. Hal ini mencakup postingan, komentar, video, dan tombol Suka yang paling populer. Semua plugin menyertakan setelan untuk data-lazy. Menyetelnya ke true memastikan bahwa plugin akan menggunakan mekanisme pemuatan lambat browser dengan menetapkan atribut iframe loading="lazy".

Memuat feed Instagram secara lambat

Instagram menyediakan blok markup dan skrip sebagai bagian dari sematan. Skrip menyisipkan <iframe> ke halaman. Memuat <iframe> ini secara lambat dapat meningkatkan performa karena sematan dapat berukuran lebih dari 100 KB yang di-gzip. Banyak plugin Instagram untuk situs WordPress seperti WPZoom dan Elfsight menyediakan opsi pemuatan lambat.

Mengganti sematan dengan fasad

Meskipun sematan interaktif menambah nilai pada halaman, banyak pengguna mungkin tidak berinteraksi dengannya. Misalnya, tidak semua pengguna yang menjelajahi halaman restoran akan mengklik, memperluas, men-scroll, dan menavigasi sematan peta. Demikian pula, tidak semua pengguna yang membuka halaman penyedia layanan telekomunikasi akan berinteraksi dengan chatbot. Dalam kasus ini, Anda dapat menghindari pemuatan atau pemuatan lambat sematan sepenuhnya dengan menampilkan fasad di tempatnya.

Sematan peta dengan fitur zoom in dan out.

Fasad adalah elemen statis yang terlihat mirip dengan pihak ketiga tersemat yang sebenarnya, tetapi tidak berfungsi dan, oleh karena itu, jauh lebih ringan pada pemuatan halaman. Berikut beberapa strategi untuk memuat sematan tersebut secara optimal sekaligus memberikan nilai kepada pengguna.

Menggunakan gambar statis sebagai fasad

Gambar statis dapat digunakan sebagai pengganti sematan peta jika Anda mungkin tidak perlu membuat peta menjadi interaktif. Anda dapat memperbesar area yang diinginkan di peta, mengambil gambar, dan menggunakannya sebagai pengganti sematan peta interaktif. Anda juga dapat menggunakan fitur Ambil screenshot node DevTools untuk mengambil screenshot elemen iframe tersemat.

Opsi 'capture node screenshot' ditandai di menu kontekstual dalam editor HTML.

DevTools mengambil gambar sebagai png, tetapi Anda juga dapat mempertimbangkan untuk mengonversinya ke format WebP untuk performa yang lebih baik.

Menggunakan gambar dinamis sebagai fasad

Teknik ini memungkinkan Anda membuat gambar yang sesuai dengan sematan interaktif saat runtime. Berikut beberapa alat yang memungkinkan Anda membuat versi statis sematan di halaman.

Maps Static API: Layanan Google Maps Static API membuat peta berdasarkan parameter URL yang disertakan dalam permintaan HTTP standar dan menampilkan peta sebagai gambar yang dapat Anda tampilkan di halaman web. URL harus menyertakan kunci Google Maps API dan harus ditempatkan di tag <img> di halaman sebagai atribut src.

Alat Pembuat peta statis membantu mengonfigurasi parameter yang diperlukan untuk URL dan memberi Anda kode untuk elemen gambar secara real-time.

Cuplikan berikut menunjukkan kode untuk gambar dengan sumber yang ditetapkan ke URL Maps Static API. Kode tersebut telah disertakan dalam tag link yang memastikan bahwa peta sebenarnya dapat diakses dengan mengklik gambar. (Catatan: Atribut kunci API tidak disertakan dalam 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>
```
Screenshot Twitter: Mirip dengan screenshot peta, konsep ini memungkinkan Anda menyematkan screenshot Twitter secara dinamis, bukan feed live. Tweetpik adalah salah satu alat yang dapat digunakan untuk mengambil screenshot tweet. Tweetpik API menerima URL tweet dan menampilkan gambar dengan kontennya. API ini juga menerima parameter untuk menyesuaikan latar belakang, warna, batas, dan dimensi gambar.

Menggunakan klik untuk memuat guna meningkatkan kualitas fasad

Konsep klik untuk memuat menggabungkan pemuatan lambat dan fasad. Halaman awalnya dimuat dengan fasad. Saat pengguna berinteraksi dengan placeholder statis dengan mengkliknya, sematan pihak ketiga akan dimuat. Hal ini juga dikenal sebagai pola impor pada interaksi dan dapat diterapkan menggunakan langkah-langkah berikut.

Saat pemuatan halaman: Fasad atau elemen statis disertakan di halaman.
Saat kursor diarahkan: Fasad melakukan pra-koneksi ke penyedia sematan pihak ketiga.
Saat diklik: Fasad diganti dengan produk pihak ketiga.

Fasad dapat digunakan dengan sematan pihak ketiga untuk pemutar video, widget chat, layanan autentikasi, dan widget media sosial. Sematan video YouTube yang hanya berupa gambar dengan tombol putar adalah fasad yang sering kita temui. Video sebenarnya hanya dimuat saat Anda mengklik gambar.

Anda dapat membuat fasad klik untuk memuat kustom menggunakan pola impor pada interaksi atau menggunakan salah satu fasad open source berikut yang tersedia untuk berbagai jenis sematan.

Fasad YouTube

lite-youtube-embed adalah fasad yang direkomendasikan untuk pemutar YouTube, yang terlihat seperti pemutar sebenarnya, tetapi 224 kali lebih cepat. Fasad ini dapat digunakan dengan mendownload skrip dan stylesheet, lalu menggunakan tag <lite-youtube> di HTML atau JavaScript. Parameter pemutar kustom yang didukung oleh YouTube dapat disertakan melalui atribut params.
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
Berikut adalah perbandingan antara lite-youtube-embed dan sematan sebenarnya.

Sematan YouTube lite

Sematan YouTube

Fasad serupa lainnya yang tersedia untuk pemutar YouTube dan Vimeo adalah lite-youtube, lite-vimeo-embed, dan lite-vimeo.
Fasad widget chat

Pemuat live chat React memuat tombol yang terlihat seperti sematan chat, bukan sematan itu sendiri. Pemuat ini dapat digunakan dengan berbagai platform penyedia chat seperti Intercom, Help Scout, Messenger. Widget yang terlihat mirip jauh lebih ringan daripada widget chat dan dimuat lebih cepat. Widget ini dapat diganti dengan widget chat sebenarnya saat pengguna mengarahkan kursor atau mengklik tombol atau jika halaman tidak aktif dalam waktu yang lama. Studi kasus Postmark menjelaskan cara mereka menerapkan react-live-chat-loader dan peningkatan performa yang mereka capai.

Menghapus atau mengganti sematan dengan link

Jika Anda menemukan bahwa beberapa sematan pihak ketiga menghasilkan performa pemuatan yang buruk dan menggunakan salah satu teknik yang dijelaskan sebelumnya bukan merupakan opsi, hal paling sederhana yang dapat Anda lakukan adalah menghapus sematan sepenuhnya. Jika Anda masih ingin pengguna dapat mengakses konten dalam sematan, Anda dapat memberikan link ke konten tersebut dengan target="_blank" sehingga pengguna dapat mengklik dan melihatnya di tab lain.

Stabilitas tata letak

Meskipun memuat konten tersemat secara dinamis dapat meningkatkan performa pemuatan halaman, terkadang hal ini dapat menyebabkan pergerakan konten halaman yang tidak terduga. Hal ini dikenal sebagai perubahan tata letak.

Karena stabilitas visual penting untuk pengalaman pengguna yang lancar, Cumulative Layout Shift (CLS) mengukur seberapa sering perubahan tersebut terjadi dan seberapa mengganggu perubahan tersebut.

Perubahan tata letak dapat dihindari dengan memesan ruang selama pemuatan halaman untuk elemen yang akan dimuat secara dinamis nanti. Browser dapat menentukan ruang yang akan dipesan jika mengetahui lebar dan tinggi elemen. Anda dapat memastikannya dengan menentukan atribut width dan height iframe atau dengan menetapkan ukuran tetap untuk elemen statis tempat sematan pihak ketiga akan dimuat. Misalnya, iframe untuk sematan YouTube harus memiliki lebar dan tinggi yang ditentukan sebagai berikut.

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

Sematan populer seperti YouTube, Google Maps, dan Facebook menyediakan kode sematan dengan atribut ukuran yang ditentukan. Namun, mungkin ada penyedia yang tidak menyertakan hal ini. Misalnya, cuplikan kode ini tidak menunjukkan dimensi sematan yang dihasilkan.

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

Anda dapat menggunakan DevTools untuk memeriksa iframe yang disisipkan setelah halaman ini dirender. Seperti yang terlihat dalam cuplikan berikut, tinggi iframe yang disisipkan ditetapkan, sedangkan lebarnya ditentukan dalam persentase.

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

Informasi ini dapat digunakan untuk menetapkan ukuran elemen penampung guna memastikan bahwa penampung tidak diperluas saat memuat feed dan tidak ada perubahan tata letak. Cuplikan berikut dapat digunakan untuk memperbaiki ukuran sematan yang disertakan sebelumnya.

<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

Karena sematan pihak ketiga sering kali menghilangkan dimensi (lebar, tinggi) untuk konten akhir yang dirender, sematan tersebut dapat menyebabkan perubahan tata letak yang signifikan di halaman. Masalah ini dapat sulit diatasi tanpa memeriksa ukuran akhir secara manual menggunakan DevTools pada berbagai ukuran area pandang yang berbeda.

Kini ada alat otomatis, Layout Shift Terminator, yang dapat membantu Anda mengurangi perubahan tata letak dari sematan populer, seperti dari Twitter, Facebook, dan penyedia lainnya.

Layout Shift Terminator:

Memuat sisi klien sematan dalam iframe.
Mengubah ukuran iframe ke berbagai ukuran area pandang populer.
Untuk setiap area pandang populer, mengambil dimensi sematan untuk membuat kueri media dan kueri penampung nanti.
Mengukur wrapper tinggi minimum di sekitar markup sematan menggunakan kueri media (dan kueri penampung) hingga sematan diinisialisasi (setelah itu gaya tinggi minimum akan dihapus).
Membuat cuplikan sematan yang dioptimalkan yang dapat disalin dan ditempelkan jika Anda ingin menyertakan sematan di halaman.

Coba Layout Shift Terminator, dan jangan ragu untuk memberikan masukan tentang project GitHub Layout Shift Terminator. Alat ini dalam status beta dan bertujuan untuk meningkatkan kualitas dari waktu ke waktu dengan penyempurnaan lebih lanjut.

Kesimpulan

Sematan pihak ketiga dapat memberikan banyak nilai bagi pengguna, tetapi seiring bertambahnya jumlah dan ukuran sematan di halaman, performa dapat terpengaruh. Itulah sebabnya Anda perlu mengukur, menilai, dan menggunakan strategi pemuatan yang sesuai untuk sematan berdasarkan posisi, relevansi, dan potensi kebutuhan pengguna.