Ringkasan teknik untuk memuat sematan pihak ketiga yang populer secara efisien.
Banyak situs menggunakan sematan pihak ketiga untuk membuat 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 dalam berbagai cara. Serangan ini dapat memblokir render, bersaing dengan resource penting lainnya untuk jaringan dan bandwidth, atau memengaruhi metrik Core Web Vitals. Penyematan 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 apa pun yang ditampilkan di situs Anda yang:
- Tidak ditulis oleh Anda
- Ditayangkan dari server pihak ketiga
Sematan sering digunakan di tempat berikut:
- Situs yang terkait dengan olahraga, berita, hiburan, dan mode menggunakan video untuk memperkaya konten tekstual.
- 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.
Penyematan 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 mengambil konten lain. Hal ini dapat membuat sematan pihak ketiga menjadi terlalu banyak dan memengaruhi performa halaman dengan menunda konten pihak pertama.
Dampak performa sematan pihak ketiga
Banyak sematan populer yang menyertakan lebih dari 100 KB JavaScript, bahkan terkadang hingga 2 MB. Fungsi ini membutuhkan 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, beserta ukuran dan waktu pemblokiran thread utama. Audit tersedia melalui Chrome DevTools di bagian tab Lighthouse.
Anda sebaiknya mengaudit secara berkala dampak performa sematan dan kode pihak ketiga karena kode sumber sematan dapat berubah. Anda dapat menggunakan peluang ini untuk menghapus kode yang berlebihan.
Memuat praktik terbaik
Penyematan pihak ketiga dapat berdampak negatif pada performa, tetapi sematan ini juga menawarkan fungsi penting. Untuk menggunakan sematan pihak ketiga secara efisien dan mengurangi dampak performanya, ikuti panduan ini.
Pengurutan skrip
Di halaman yang dirancang dengan baik, konten utama pihak pertama 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 penyematan untuk feed Twitter atau iklan.
Permintaan penyematan pihak ketiga dapat menghalangi pemuatan konten pihak pertama, sehingga posisi tag skrip pihak ketiga penting. Skrip dapat memengaruhi urutan pemuatan karena konstruksi DOM akan 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 resource pihak ketiga dapat 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 pemuatan konten hingga benar-benar diperlukan disebut pemuatan lambat. Bergantung pada persyaratan dan jenis penyematan, Anda dapat menggunakan berbagai teknik pemuatan lambat.
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 akan menunda pemuatan iframe. Browser akan memuat iframe saat mendekati area pandang. Gunakan jika iframe adalah kandidat yang baik untuk pemuatan lambat.eager: Segera memuat iframe. Gunakan jika iframe bukan kandidat yang baik untuk pemuatan lambat. Jika atributloadingbelum ditentukan, hal 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 tingkat browser sebagai progressive enhancement. Browser yang mendukung atribut tersebut mungkin memiliki implementasi yang berbeda untuk batas jarak dari area pandang (jarak tempat iframe mulai dimuat).
Berikut adalah beberapa cara untuk memuat iframe secara lambat untuk berbagai jenis sematan.
- Video YouTube: Untuk memuat iframe pemutar video YouTube secara lambat, sertakan atribut
loadingke kode sematan yang disediakan oleh YouTube. Pemuatan lambat penyematan 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
loadingdalam 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 tampilan, selain sinyal seperti jenis koneksi efektif dan Mode ringan, untuk menentukan kapan iframe harus dimuat, pemuatan lambat browser dapat menjadi tidak konsisten. Jika Anda memerlukan kontrol yang lebih baik pada 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 sesuai untuk SEO untuk gambar dan iframe. Setelah didownload, komponen 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 saat sebuah elemen terlihat.
Menggunakan data lambat di Facebook
Facebook menyediakan berbagai jenis plugin sosial yang dapat disematkan. Ini mencakup 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 menyetel atribut iframe loading="lazy".
Feed Instagram pemuatan lambat
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 setelah dikompresi. Banyak plugin Instagram untuk situs WordPress seperti WPZoom dan Elfsight menyediakan opsi pemuatan lambat.
Mengganti sematan dengan fasad
Meskipun sematan interaktif memberi nilai tambah pada halaman, 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 yang membuka 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.
Fasade adalah elemen statis yang terlihat mirip dengan pihak ketiga tersemat yang sebenarnya, tetapi tidak berfungsi dan, oleh karena itu, sangat 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 pengganti sematan peta yang memungkinkan Anda membuat peta menjadi interaktif. Anda dapat memperbesar area yang diminati pada peta, mengambil gambar, dan menggunakan ini alih-alih sematan peta interaktif. Anda juga dapat menggunakan fitur Ambil screenshot node DevTools untuk mengambil screenshot elemen iframe tersemat.
DevTools mengambil gambar sebagai png, tetapi Anda juga dapat mempertimbangkan untuk mengonversinya ke format WebP untuk performa yang lebih baik.
Gunakan gambar dinamis sebagai fasad
Teknik ini memungkinkan Anda membuat gambar yang sesuai dengan sematan interaktif pada waktu proses. Berikut ini adalah beberapa alat yang memungkinkan Anda membuat versi statis dari sematan pada laman.
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 ditampilkan di halaman web Anda. URL harus menyertakan kunci Google Maps API dan harus ditempatkan dalam tag
<img>pada halaman sebagai atributsrc.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. Link ini telah disertakan dalam tag link yang memastikan peta yang sebenarnya dapat diakses dengan mengklik gambar. (Catatan: Atribut kunci API tidak disertakan di 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 secara dinamis menyematkan screenshot Twitter, 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 muat untuk menyempurnakan 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. Hal ini juga dikenal sebagai pola impor saat interaksi dan dapat diterapkan menggunakan langkah-langkah berikut.
- Saat pemuatan halaman: Elemen statis atau fasad disertakan pada halaman.
- Saat pengarahan mouse: Facade 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. Sematan video YouTube yang hanya berupa gambar dengan tombol putar adalah fasad yang sering kami temui. Video yang sebenarnya hanya dimuat saat Anda mengklik gambarnya.
Anda dapat membuat fasad klik untuk memuat kustom menggunakan pola impor saat 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 asli, tetapi 224 kali lebih cepat. Fungsi 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 atributparams.<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>Berikut ini adalah perbandingan antara sematan lite-youtube-embed dan sematan sebenarnya.
Penyematan di YouTube ringan 
Penyematan YouTube Fasad serupa lain yang tersedia untuk pemain YouTube dan Vimeo adalah lite-youtube, lite-vimeo-embed, dan lite-vimeo.
Fasad widget chat
Pemuat live chat reaksi 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. Widget yang mirip ini jauh lebih ringan daripada widget chat dan dimuat lebih cepat. Widget ini dapat diganti dengan widget chat yang sebenarnya ketika pengguna mengarahkan kursor atau mengklik tombol atau jika halaman tidak ada aktivitas dalam waktu yang lama. Studi kasus Postmark menjelaskan cara mereka menerapkan
react-live-chat-loaderdan peningkatan performa yang mereka capai.
Menghapus atau mengganti sematan dengan link
Jika Anda mendapati bahwa beberapa sematan pihak ketiga menghasilkan performa pemuatan yang buruk dan menggunakan salah satu teknik yang dijelaskan sebelumnya bukanlah opsi, hal paling sederhana yang dapat Anda lakukan adalah menghapus sematan sepenuhnya. Jika Anda tetap ingin pengguna dapat mengakses konten yang disematkan, 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 yang disematkan secara dinamis dapat meningkatkan performa pemuatan halaman, hal ini terkadang dapat menyebabkan pergerakan konten halaman yang tidak terduga. Ini dikenal sebagai pergeseran tata letak.
Karena stabilitas visual penting untuk pengalaman pengguna yang lancar, Pergeseran Tata Letak Kumulatif (CLS) mengukur seberapa sering perubahan tersebut terjadi dan seberapa mengganggunya.
Pergeseran tata letak dapat dihindari dengan menyediakan ruang selama pemuatan laman untuk elemen yang nantinya akan dimuat secara dinamis. Browser dapat menentukan ruang yang akan dicadangkan jika lebar dan tinggi elemen diketahui. 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>
Penyematan populer seperti YouTube, Google Maps, dan Facebook menyediakan kode sematan 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 sementara 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 pemuatan 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>
Terminator Pergeseran Tata Letak
Karena sematan pihak ketiga sering kali menghilangkan dimensi (lebar, tinggi) untuk konten akhir yang dirender, sematan ini dapat menyebabkan pergeseran tata letak yang signifikan pada halaman. Masalah ini bisa sulit diatasi tanpa memeriksa ukuran akhir secara manual menggunakan DevTools pada berbagai ukuran area pandang yang berbeda.
Kini tersedia alat otomatis, Layout Shift Terminator, yang dapat membantu Anda mengurangi pergeseran tata letak dari sematan populer, seperti Twitter, Facebook, dan penyedia lainnya.
Terminator Pergeseran Tata Letak:
- Memuat sisi klien sematan dalam iframe.
- Mengubah ukuran iframe menjadi berbagai ukuran area pandang yang populer.
- Untuk setiap area pandang yang populer, menangkap dimensi sematan untuk menghasilkan kueri media dan kueri penampung nantinya.
- Mengatur ukuran wrapper tinggi minimum di sekitar markup sematan menggunakan kueri media (dan kueri penampung) hingga sematan diinisialisasi (setelah itu gaya ketinggian minimum dihapus).
Menghasilkan cuplikan penyematan yang dioptimalkan yang dapat disalin dan ditempel di tempat Anda akan menyertakan sematan tersebut di halaman.
Coba Layout Shift Terminator, dan jangan ragu untuk memberikan masukan di GitHub. Alat ini masih dalam status beta dan bertujuan untuk meningkatkan kualitasnya dari waktu ke waktu dengan penyempurnaan lebih lanjut.
Kesimpulan
Penyematan pihak ketiga dapat memberikan banyak manfaat bagi pengguna, tetapi seiring dengan meningkatnya jumlah dan ukuran sematan di halaman, performanya dapat menurun. Itulah mengapa Anda perlu mengukur, menilai, dan menggunakan strategi pemuatan yang tepat untuk sematan berdasarkan posisi, relevansi, dan penggunaan calon pengguna. mereka.