Halaman ini diterjemahkan oleh Cloud Translation API.

Praktik terbaik untuk menggunakan sematan pihak ketiga

Ringkasan teknik untuk memuat sematan pihak ketiga yang populer secara efisien.

Addy Osmani

Katie Hempenius

Leena Sohoni

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

Konten pihak ketiga dapat memengaruhi performa halaman dengan berbagai cara. Hal ini dapat berupa pemblokiran render, bersaing dengan resource penting lainnya untuk jaringan dan bandwidth, atau memengaruhi metrik Data Web Inti. Sematan pihak ketiga juga dapat menyebabkan pergeseran 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 pergeseran tata letak untuk sematan populer.

Apa itu sematan

Penyematan pihak ketiga adalah konten yang ditampilkan di situs Anda yang: * Tidak ditulis oleh Anda * Disediakan dari server pihak ketiga

Beberapa sematan di luar layar ditampilkan, yang mungkin dimuat dengan lambat

Penyematan sering digunakan di konten berikut: * Situs yang terkait dengan olahraga, berita, hiburan, dan mode menggunakan video untuk memperkaya konten tekstual. * Organisasi dengan akun Twitter atau media sosial yang aktif menyematkan feed dari akun-akun ini ke halaman web mereka untuk berinteraksi dan menjangkau lebih banyak orang. * Halaman restoran, taman, dan tempat acara sering kali menyematkan peta.

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

Dampak performa dari sematan pihak ketiga

Banyak sematan populer menyertakan ukuran JavaScript lebih dari 100 KB, terkadang bahkan mencapai 2 MB. Proses ini 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.

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

Anda sebaiknya mengaudit secara berkala dampak performa sematan Anda dan kode pihak ketiga karena kode sumber sematan dapat berubah. Anda dapat menggunakan peluang ini untuk menghapus kode yang berlebihan.

Mengurangi dampak kode pihak ketiga

Memuat praktik terbaik

Sematan pihak ketiga dapat berdampak negatif pada performa, tetapi juga menawarkan fungsi yang penting. Untuk menggunakan sematan pihak ketiga secara efisien dan mengurangi dampaknya terhadap performanya, ikuti pedoman di bawah.

Pengurutan skrip

Dalam halaman yang dirancang dengan baik, konten utama pihak pertama akan menjadi fokus halaman, sementara 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 pada halaman berita harus dimuat sebelum sematan untuk iklan atau feed Twitter.

Permintaan sematan pihak ketiga dapat menghalangi pemuatan konten pihak pertama, sehingga posisi tag skrip pihak ketiga sangat penting. Skrip dapat memengaruhi urutan pemuatan karena konstruksi DOM dijeda saat skrip dieksekusi. Tempatkan tag skrip pihak ketiga setelah tag utama pihak pertama dan gunakan atribut async atau defer 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, download sumber daya pihak ketiga mungkin ditunda hingga pengguna men-scroll ke bawah ke bagian halaman tersebut. Hal ini tidak hanya membantu mengoptimalkan pemuatan halaman awal, tetapi juga mengurangi biaya download untuk pengguna yang menggunakan paket data tetap dan koneksi jaringan yang lambat.

Menunda download konten hingga benar-benar diperlukan disebut pemuatan lambat. Bergantung pada persyaratan dan jenis penyematan, Anda dapat menggunakan berbagai teknik pemuatan lambat yang dijelaskan di bawah.

Pemuatan lambat native 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 Chrome 77 dan yang lebih baru serta juga telah diperkenalkan ke browser berbasis Chromium lainnya.

<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 merupakan kandidat yang baik untuk pemuatan lambat.
eager: Segera memuat iframe. Gunakan jika iframe bukan kandidat yang baik untuk pemuatan lambat. Jika atribut loading belum ditentukan, ini adalah perilaku default—kecuali dalam mode Ringan.
auto: Browser menentukan apakah akan memuat frame ini secara lambat.

Browser yang tidak mendukung atribut loading akan mengabaikannya, sehingga Anda dapat menerapkan pemuatan lambat native sebagai progressive enhancement. Browser yang mendukung atribut ini mungkin memiliki penerapan yang berbeda untuk batas jarak dari-area pandang (jarak saat iframe mulai dimuat).

Berikut adalah beberapa cara yang dapat Anda gunakan 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. Pemuatan lambat untuk sematan YouTube 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 Maps secara lambat, sertakan atribut loading dalam kode untuk sematan iframe yang dibuat 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 dari area pandang sematan, selain sinyal seperti jenis koneksi efektif dan Mode ringan, untuk memutuskan kapan iframe harus dimuat, pemuatan lambat native dapat menjadi tidak konsisten. Jika memerlukan kontrol yang lebih baik terhadap batas jarak atau ingin memberikan pengalaman pemuatan lambat yang konsisten di seluruh browser, Anda dapat menggunakan library lazysizes.

lazysizes adalah loader lambat yang cepat dan cocok untuk SEO untuk gambar dan iframe. Setelah didownload, komponen dapat digunakan dengan iframe untuk sematan YouTube seperti 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 juga, ukuran lambat dapat digunakan dengan iframe untuk sematan pihak ketiga lainnya.

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

Menggunakan data-lazy di Facebook

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

Feed Instagram yang lambat dimuat

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

Ganti sematan dengan fasad

Meskipun sematan interaktif memberikan nilai tambah ke laman, banyak pengguna yang mungkin tidak berinteraksi dengan sematan tersebut. Misalnya, tidak semua pengguna yang menjelajahi halaman restoran akan mengklik, meluaskan, men-scroll, dan menavigasi sematan peta. Demikian pula, tidak semua pengguna halaman penyedia layanan telekomunikasi akan berinteraksi dengan chatbot. Dalam hal ini, Anda dapat menghindari pemuatan atau pemuatan lambat sematan sepenuhnya dengan menampilkan fasad sebagai penggantinya.

Penyematan peta dengan fitur zoom in dan zoom.

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

Gunakan gambar statis sebagai fasad

Gambar statis dapat digunakan sebagai ganti sematan peta yang mungkin tidak perlu membuat peta menjadi interaktif. Anda dapat memperbesar area minat pada peta, mengambil gambar, dan menggunakannya, bukan penyematan peta interaktif. Anda juga dapat menggunakan fungsi Capture node screenshot DevTools untuk mengambil screenshot elemen iframe tersemat, seperti yang ditunjukkan di bawah ini.

Ambil screenshot node

DevTools mengambil gambar sebagai png, tetapi Anda juga dapat mempertimbangkan untuk mengonversinya menjadi WebP format for better performance.

Gunakan gambar dinamis sebagai fasad

Teknik ini memungkinkan Anda menghasilkan gambar yang sesuai dengan sematan interaktif pada waktu proses. Berikut adalah beberapa alat yang memungkinkan Anda membuat versi statis sematan di halaman Anda.

Maps Static API: Layanan Maps Static API Google menghasilkan peta berdasarkan parameter URL yang disertakan dalam permintaan HTTP standar dan menampilkan peta sebagai gambar yang dapat Anda tampilkan di halaman web Anda. URL harus menyertakan kunci Google Maps API dan harus ditempatkan di tag <img> pada 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 menampilkan kode untuk gambar dengan sumber yang ditetapkan ke URL Maps Static API. Ini telah disertakan dalam tag tautan yang memastikan bahwa peta sebenarnya dapat diakses dengan mengeklik 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 beserta kontennya. API juga menerima parameter untuk menyesuaikan latar belakang, warna, batas, dan dimensi gambar.

Gunakan klik untuk memuat guna meningkatkan kualitas fasad

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

Saat pemuatan halaman: Elemen statis atau fasad disertakan di halaman.
Saat kursor diarahkan: Fasad melakukan prakoneksi 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. Penyematan video YouTube yang berupa gambar dengan tombol putar adalah penampilan yang sering kita temui. Video yang sebenarnya dimuat hanya ketika Anda mengeklik 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 bagian awal yang direkomendasikan untuk pemutar YouTube, yang terlihat seperti pemutar asli, tetapi 224 kali lebih cepat. 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.

Penyematan YouTube ringan

Penyematan YouTube

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

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

Hapus atau ganti sematan dengan link

Jika Anda mendapati bahwa sematan pihak ketiga tertentu menghasilkan performa pemuatan yang buruk dan penggunaan salah satu teknik di atas bukanlah opsi, hal paling sederhana yang dapat Anda lakukan adalah menghapus sematan sepenuhnya. Jika Anda tetap 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 pemuatan konten tersemat secara dinamis dapat meningkatkan performa pemuatan halaman, hal ini terkadang dapat menyebabkan pergerakan konten halaman yang tidak terduga. Hal ini dikenal sebagai pergeseran tata letak.

Karena stabilitas visual penting untuk menjamin pengalaman pengguna yang lancar, Pergeseran Tata Letak Kumulatif (CLS) mengukur seberapa sering pergeseran tersebut terjadi dan seberapa mengganggunya.

Pergeseran tata letak dapat dihindari dengan melakukan reservasi ruang selama pemuatan halaman untuk elemen yang akan dimuat secara dinamis nanti. Browser dapat menentukan ruang yang akan direservasi jika mengetahui lebar dan tinggi elemen. Anda dapat memastikan hal ini dengan menentukan atribut width dan height iframe atau dengan menyetel ukuran tetap untuk elemen statis tempat sematan pihak ketiga akan dimuat. Misalnya, iframe untuk sematan YouTube harus memiliki lebar dan tinggi seperti berikut.

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

Sematan populer seperti YouTube, Google Maps, dan Facebook memberikan kode penyematan dengan atribut ukuran yang ditentukan. Namun, mungkin ada penyedia yang tidak menyertakan opsi 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 dimasukkan setelah halaman ini dirender. Seperti yang terlihat dalam cuplikan berikut, tinggi iframe yang dimasukkan bersifat tetap, sedangkan lebar 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 meluas saat memuat feed dan tidak ada pergeseran 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>

{i>Layout Shift Terminator<i}

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

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

{i>Layout Shift Terminator<i}:

Memuat sisi klien sematan dalam iframe.
Mengubah ukuran iframe ke berbagai ukuran area pandang yang populer.
Untuk setiap area pandang populer, menangkap dimensi penyematan untuk menghasilkan kueri media dan kueri penampung nantinya.
Mengatur ukuran wrapper min-height di sekitar markup sematan menggunakan kueri media (dan kueri penampung) hingga sematan diinisialisasi (setelah itu gaya min-height akan dihapus).
Menghasilkan cuplikan penyematan yang dioptimalkan yang dapat disalin/ditempel di tempat yang biasanya Anda sertakan sematannya pada halaman.

Coba Layout Shift Terminator, dan jangan ragu untuk memberikan masukan di GitHub. Alat ini masih dalam status beta dan bertujuan untuk menjadi lebih baik dari waktu ke waktu dengan penyempurnaan lebih lanjut.

Kesimpulan

Sematan pihak ketiga dapat memberikan banyak nilai bagi pengguna, tetapi seiring dengan meningkatnya jumlah dan ukuran sematan pada halaman, performa dapat menurun. Itulah sebabnya Anda harus mengukur, menilai, dan menggunakan strategi pemuatan yang tepat untuk sematan berdasarkan posisi, relevansi, dan kebutuhan calon pengguna.