Unlimited AE and Premiere Pro templates, videos & more! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Photo & Video
  2. AMP

Cara menggunakan amp-img dan amp-video untuk mempercepat Situs Web Anda

by
Length:MediumLanguages:
This post is part of a series called Video SEO for Mortals.
How to Get More Views: 5 Video SEO Strategies

Indonesian (Bahasa Indonesia) translation by Baba Baddolo (you can also view the original English article)

AMP, singkatnya, adalah metode untuk mengoptimalkan situs web menjadi lebih cepat dan lebih berkinerja

AMP singkatan dari "Accelerated Mobile Pages", dan sementara ini berfokus pada kinerja perangkat mobile, keuntungan kecepatan yang bisa dibawa sama membantu pada perangkat non-mobile. AMP berisi serangkaian metode pengoptimalan yang menawarkan berbagai jenis fasilitas, namun kekuatan

untuk membuat situs lebih cepat bisa dibilang paling penting di situs gambar dan video-berat.Memberikan situs yang lebih cepat membuat lebih banyak pengunjung yang terlibat, peringkat mesin pencari yang berpotensi lebih tinggi (dan karenanya lebih banyak keterpaparan), pasti layak untuk memikirkan AMP saat Anda membuat karya karya berbasis web berikutnya dari pekerjaan Anda.

AMP adalah proyek  open source dengan  Google di belakangnya, dan saat ini telah berkembang sejak sekitar bulan September 2015, dengan versi AMP dari situs yang muncul di hasil pencarian Google sejak 24 Februari tahun ini. Kami telah meliput AMP sejak diluncurkan pada awal tahun ini, jadi ide bagus untuk membaca "Proyek AMP: Akankah Membuat Situs Anda Lebih Cepat " jika Anda menginginkan beberapa latar belakang sebelum melanjutkan.

Dalam artikel itu Anda akan menemukan banyak informasi tentang nilai keseluruhan bekerja dengan AMP, tapi kita akan melihat sedikit lebih langsung pada dua aspek yang paling relevan untuk bekerja dengan gambar dan video: elemen buatan <amp-img> dan <amp-video>

Lighthouse at sunset
Mercusuar oleh ssuaphoto/PhotoDune Mercusuar oleh ssuaphoto/PhotoDune. AMP dapat membantu situs Anda bekerja lebih baik dalam pencarian.

Apa itu <amp-img> dan <amp-video> ?

Ketika Anda membuat halaman berdasarkan persyaratan AMP, Anda akan menggunakan serangkaian elemen khusus dan bukan beberapa elemen HTML default yang mungkin Anda gunakan.

  • Sebagai ganti penggunaan elemen regular  <img> Anda akan menggunakan <amp-img>
  • Sebagai ganti penggunaan <video> elemen <amp-video>  Anda akan menggunakan 

Bila Anda menggunakan elemen khusus ini, Secara otomtis  Anda akan masuki beberapa manfaat yang melekat pada AMP. Mari kita lihat apa adanya dan mengapa mereka layak dipertimbangkan.

Mengapa menggunakan <amp-img> dan <amp-video>?

Anda mengetahui bahwa AMP seharusnya membantu membuat situs Anda lebih cepat, tapi yang secara khusus mengerjakan elemen  <amp-img> dan  <amp-video> ? Manfaat yang paling penting adalah sebagai berikut.

Lazy Loading

Secara default, jika Anda memiliki halaman dengan beberapa gambar di dalamnya, setiap gambar harus dimuat dalam satu klik. Ini dapat dengan mudah menarik waktu muat keseluruhan situs Anda ke durasi yang cukup. Semakin tinggi waktu muat awal Anda semakin besar kemungkinan Anda memiliki pengunjung yang meninggalkan situs Anda, dan semakin buruk yang mungkin Anda lakukan di mesin pencari

Namun dengan teknik yang disebut "Lazy Loading", Anda bisa saja hanya memiliki beberapa gambar pertama yang sarat dengan sisanya yang akan datang nanti. Konten cukup dimuat agar pengunjung mulai melihat halaman, dan gambar yang tersisa "lazy loaded" saat pengunjung menggeser ke bawah. Hal ini dapat membuat perbaikan yang cukup besar pada kecepatan beban Anda.

Misalnya, dalam tes yang saya jalankan sebagai bagian dari artikel saya "Proyek AMP: Akankah Membuat Situs Anda Lebih Cepat ", Saya menemukan bahwa pada simulasi menggunakan koneksi seluler membutuh waktu 26 detik untuk memuat halaman dengan lima gambar 500Kb. Dengan versi AMP dari situs yang sama, waktu muat dikupas hingga 16 detik.

Tidak ada Layout Reflow

Salah satu kegunaan utama penggunaan AMP adalah menghindari masalah layout halaman "reflow" beberapa kali.

Saat halaman sedang dilayani, elemen media yang diturunkan pada awalnya tidak memiliki tinggi atau lebar. Oleh karena itu situs web meletakkan segala sesuatu seolah-olah media tersebut bukan bagian dari halaman. Kemudian ketika sebuah gambar selesai memuat layout harus dihitung ulang, dengan elemen lain dipindahkan dan diubah ukuran agar sesuai dengan gambar - sesuatu yang disebut reflowing. Jika media lain juga belum memuat halaman harus reflow berulang kali untuk setiap item.

Pada perangkat mobile pada khususnya, pengunjung dapat menghadapi frustrasi jika mereka sudah terlibat dan apa yang mereka fokus pada tiba-tiba melompat keluar dari pandangan karena reflow. Hal ini dapat dengan mudah menyebabkan berkurangnya perhatian pengunjung atau pengabaian lokasi, terutama jika terjadi berkali-kali.

Dengan AMP, reflow tidak pernah terjadi. Hal ini karena setiap bagian media memiliki placeholder berukuran benar yang ditambahkan ke dalam layout dari kata pergi. Begitu media dimuat, ia menggantikan placeholder, tidak perlu reflow.

Akses Gratis CDN

Penyimpanan dan bandwidth untuk sejumlah besar media dapat menjadi mahal dengan cukup cepat, dan memilih host yang bisa mengantarkan dengan cepat ke pemirsa di seluruh dunia tidak selalu mudah.

Apabila Anda menggunakan AMP, Anda bisa mengakses CDN yang disediakan oleh Google secara gratis. Selama Anda membuat halaman yang melewati validasi AMP, secara otomatis, Google akan men-cache dokumen HTML Anda, fail, dan gambar JS di AMP CDN

Secara Umum Hands Free

Sebenarnya, sebagian besar hal yang dilakukan AMP, Anda juga dapat dilakukan dengan cara lain melalui berbagai skrip dan metodologi. Namun salah satu upsides besar untuk menggunakan AMP adalah Anda tidak perlu akrab dengan teknis yang masuk ke pengaturan optimasi yang setara.

Dengan menggunakan AMP Anda dapat menghindari pemilihan, konfigurasi dan pemeliharaan beberapa skrip dan proses secara manual. Sebagai gantinya Anda hanya menggunakan AMP sesuai yang ditentukan dan semuanya terjadi di latar belakang tanpa memerlukan keterlibatan langsung Anda.

Memulai Penggunaan AMP

Sebelum kita membahas secara spesifik penggunaan <amp-img>  dan  <amp-video> Anda harus tahu cara membuat halaman AMP dengan kode boilerplate yang dibutuhkan. Kita membahas cara melakukan ini di tutorial lain sehingga untuk mendapatkan ball rolling Anda bisa menuju ke "Cara Membuat Halaman Dasar AMP Dari Coretan”

Tidak perlu tutorial lengkap, jadi jika Anda hanya menyelesaikan sampai akhir bagian berjudul "Penanganan Inline CSS", Anda akan siap untuk kembali dan memulai lagi di sini.

Cara menggunakan <amp-img>

Di halaman AMP, Anda akan menggunakan <amp-img> untuk memuat setiap gambar tunggal. Mari kita lihat cara menggunakan kodenya dengan benar dan apa yang masing-masing atribut terkait lakukan

(Anda dapat menemukan dokumentasi lengkap untuk  <amp-img> di situs referensi proyek AMP)

Masukan Penting

Saat menambahkan <amp-img> elemen  ada beberapa atribut penting yang harus disertakan. Seperti biasa <img> elemen  ,Anda harus menggunakan atribut src untuk menentukan lokasi gambar Anda, dan atribut alt untuk menetapkan fallback teks.

Ini juga merupakan requirement di AMP yang Anda tentukan height  dan width setiap saat. Hal Ini karena AMP menggunakan attributes tinggi dan lebar untuk mengatur ukuran placeholder sebelum gambar dimuat.

Jika Anda khawatir tentang cara membuat perilaku gambar yang responsif mengingat Anda menetapkan dimensi tetap, jangan khawatir karena AMP memiliki fungsi yang disertakan untuk menangani penyesuaian responsif, yang akan kami bahas nanti.

Contoh dasar <amp-img> elemen  dengan masukan penting ini adalah:

Penggunaan srcset

Elemen <amp-img> menyediakan atribut srcset yang dapat digunakan untuk menentukan gambar alternatif yang akan ditampilkan dengan lebar atau kerapatan pixel yang berbeda.

Penggunaan hal ini dengan cara yang sama seperti pada <img> elemen  biasa, jadi Anda bisa menjalankan atribut turunannya secara penuh di https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-srcset

Misalnya, untuk memberikan gambar yang berbeda pada kepadatan pixel yang berbeda,  mungkin Anda dapat menggunakan:

Atau untuk memuat gambar yang berbeda tergantung pada viewport yang lebar mungkin Anda dapat menggunakan:

Perhatikan, jika Anda menggunakan nilai yang mengandung w , atribut src akan diabaikan di situs web yang mendukung srcset.

Penambahan Atribusi

Jika Anda perlu memberi kredit pada gambar, Anda dapat menggunakan attribution, misalnya:

Masukan penting

Jika Anda ingin mengontrol tampilan placeholder yang muncul di halaman Anda saat gambar dimuat, Anda dapat melakukannya dengan CSS yang direncanakan pada elemen amp-img , misalnya:

Cara Menggunakan <amp-video>

Di halaman AMP Anda akan menggunakan <amp-video> kapan pun Anda ingin menyematkan video dari sumber Anda sendiri. Jika Anda ingin melekatkan video pihak ketiga, seperti dari YouTube atau melalui iFrame, Anda dapat menggunakan elemen lain seperti  <amp-youtube> atau <amp-iframe>.

(Sekali lagi, Anda dapat menemukan dokumentasi lengkap untuk <amp-video> di situs referensi proyek AMP).

Masukan penting

Sama halnya dengan <amp-img>, ada beberapa inklusi penting saat menggunakan <amp-video>. Sekali lagi src diperlukan untuk menentukan lokasi video, dan kedua height dan width diperlukan sehingga AMP dapat dengan benar meletakkan halaman saat loading.

Contoh dasar dengan atribut yang diperlukan mungkin:

Menambahkan Fallback

Jika video tidak dimuat atau ditampilkan karena satu dan lain hal, mungkin saja pengaturan fallback dengan <div> berkumpul dalam elemen  <amp-video>.  <div> harus menyertakan atribut fallback.  harus menyertakan atribut fallback.

Untuk contoh:

Menambahkan Multiple Sources

Elemen  <source> dapat disesuaikan di dalam elemen  <amp-video> untuk menyediakan beberapa format fail dan memaksimalkan kemungkinan kesesuaian dalam berbagai situs web.

Ini bekerja dengan cara yang sama seperti pada elemen HTML5 <video> elemen  biasa jadi untuk detail lengkap, periksa: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source

Sebagai contoh:

Mengatur "Poster"

Sebelum pemutaran video dimulai, bingkai pertama video akan ditampilkan secara default. Namun jika Anda ingin menyesuaikan apa yang ditampilkan, Anda dapat menetapkan gambar menggunakan atribut poster.

Untuk contoh:

Atribut tambahan

Seperti yang telah kita bahas di atas, ada beberapa atribut tambahan yang dapat Anda gunakan dengan elemen <amp-video>. Mereka adalah sebagai berikut.

Autoplay

Secara default, video tidak akan diputar secara otomatis. Untuk menimpa ini termasuk atribut autoplay:

Kontrol

Kontrol pada video tidak akan muncul kecuali jika Anda menambahkan atribut controls:

Loop

Untuk membuat pengulangan video tak terbatas mencakup atribut loop:

Muted

Untuk mematikan suara pada video, tambahkan atributnya muted:

Atribut "layout"

Elemen AMP, <amp-img> dan <amp-video> dapat memiliki sifat perangkat layout yang diatur ke salah satu dari enam nilai, yang masing-masing membuat elemen berperilaku berbeda:

  • responsive
  • fill
  • fixed
  • fixed-height
  • flex-item
  • nodisplay

Mari kita lihat sekilas masing-masing perilaku elemen

(Temukan dokumentasi layout lengkap di: https://github.com/ampproject/amphtml/blob/master/spec/amp-html-layout.md)

responsive

engaturan tampilan "go to" Anda harus responsive dalam kebanyakan kasus - gunakan ini jika Anda tidak yakin apa yang harus dipilih. Hal ini akan menyebabkan elemen untuk memperluas lebar maksimum elemen induknya sambil mempertahankan rasio aspeknya.

Kemampuan untuk menambahkan atribut ini adalah mengapa Anda tidak perlu khawatir untuk memastikan responsif meskipun menetapkan nilai height dan values eksplisit pada elemen.

fill

Pengaturan fill hampir sama dengan responsive, namun elemen tersebut akan diperluas dalam induk lebar dan tinggi maksimum, terlepas dari rasio aspeknya.

fixed

Penggunaan fixed  layout akan menjaga elemen pada tinggi dan lebar yang ditentukan tanpa mengubah kemampuan mengganti ukuran.

fixed-height

Dengan pengaturan fixed-height , elemen akan meregangkan lebarnya agar sesuai dengan elemen induk namun tetap tegak tinggi.

flex-item

Jika Anda telah menerapkan display: flex; CSS ke elemen induk, Anda bisa menggunakan nilai layout flex-item untuk membuatnya memenuhi semua ruang yang tersedia di dalam elemen induk. Jika banyak anak dari orang tua yang sama menggunakan tata letak flex-item mereka akan berbagi ruang secara merata.

nodisplay

Setelan nodisplay digunakan untuk menyembunyikan elemen. Tujuannya adalah untuk memungkinkan konten ditampilkan pada tindakan pengguna, seperti bersamaan dengan elemen <amp-lightbox>.

Penutup

Itu mencakup semua hal penting untuk bekerja dengan elemen buatan AMP <amp-img> dan <amp-video>, dari why harus menggunakannya melalui how tersebut.

AMP memberikan konsolidasi, cara lepas tangan untuk mengoptimalkan media situs berat yang membuat pengalaman mobile menjadi jauh lebih baik. sambil memperbaiki pengalaman desktop pada saat bersamaan.

Untuk informasi lebih lanjut, lihat hipertautan di bawah ini.

Related Links:

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.