Unlimited After Effects and Premiere Pro templates, stock video, royalty free music tracks & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Photo & Video
  2. JavaScript
Photography

Siapa yang Butuh AMP? Bagaimana Cara Memuat Malas Gambar Responsif dengan Cepat dan Mudah dengan Layzr.js

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Ilham Saputra (you can also view the original English article)

Proyek 'Accelerated Mobile Pages' (AMP) Google hadir, akhir-akhir ini, membantu mempengaruhi situs web menjadi lebih cepat. Dengan teknik yang bagus dan jaringan distribusi konten yang kuat, Google telah langsung membuat situs AMP yang disempurnakan dengan lebih cepat. AMP juga bekerja secara tidak langsung, dengan mendorong kami untuk melihat pengoptimalan dan praktik terbaik yang isi AMP. Meskipun Anda tidak akan membuat situs web Anda AMP compliant, sangat berguna untuk memahami AMP sebagai daftar agenda untuk mengoptimalkan situs web non-AMP.

Salah satu pengoptimalan pada daftar ini adalah teknik yang disebut 'lazy loading', yang kami lihat beraksi di artikel terbaru kami tentang penggunaan <amp-img> elemen khusus AMP. Dengan teknik ini, ketika pengunjung pertama kali tiba di halaman, hanya gambar di dalam atau di dekat viewport yang dimuat. Sisanya dipicu untuk memuat saat pengunjung menggulir ke bawah.

Lazy loading memungkinkan pengunjung untuk mulai terlibat dengan konten lebih cepat, dan peningkatan kecepatan beban dapat meningkatkan peringkat mesin pencari Anda. Semakin banyak gambar yang Anda miliki di suatu halaman, peningkatan kecepatan yang lebih besar Anda akan dapatkan.

Dalam tutorial ini kita akan melihat bagaimana Anda dapat menyebarkan lazy load di situs web non-AMP menggunakan skrip bernama Layzr.js. Kami akan mereplikasi fungsi elemen <amp-img> AMP sedekat mungkin, tetapi kami juga akan bekerja dengan beberapa fitur khusus untuk Layzr.

Mari kita mulai!

1. Dasar Setup

Sebagai bagian dari artikel 'Proyek AMP: Akankah Ini Membuat Situs Anda Lebih Cepat?' Saya membuat tata letak dasar yang berisi lima gambar. Agar Anda dapat membuat perbandingan antara menggunakan AMP dan menerapkan lazy loading, kami akan membuat ulang tata letak lima gambar yang sama. Saya akan menunjukkan kepada Anda cara menjalankan berbagai tes kecepatan load nanti di tutor ini.

Dalam file sumber yang terlampir pada tutorial ini Anda akan menemukan tata letak versi AMP, dan versi lengkap dari apa yang akan Anda buat di sini. Keduanya disertakan untuk membantu Anda memutuskan pendekatan mana yang paling cocok untuk Anda.

Saat kami melangkah melalui semua yang saya sarankan untuk menguji pekerjaan Anda menggunakan Alat Pengembang Chrome (F12) dengan tab Network terbuka, Disable Cache diperiksa, dan set pelempar ke Regular 3G. Ini mensimulasikan koneksi seluler rata-rata, menunjukkan bagan setiap pemuatan gambar dalam waktu nyata, dan akan membantu Anda mendapatkan pandangan yang jelas tentang bagaimana lazy loading Anda beroperasi.

Ketika Anda me-refresh halaman untuk pengujian tahan tombol reload, yang akan membuat dropdown muncul dengan opsi yang berbeda. Pilih Empty Cache dan Hard Reload untuk sepenuhnya mensimulasikan pengunjung yang tiba di situs Anda untuk pertama kalinya.

Emty cache and hard reload in Chrome Developer Tools

Membuat HTML Shell

Mari kita mulai dengan menurunkan dasar-dasarnya. Pertama, buat folder untuk memondokkan proyek Anda dan di dalamnya buat file bernama index.html.

Buka untuk mengedit dan tambahkan kode berikut:

Dengan kode di atas kita hanya mendapatkan shell HTML di tempat, dan termasuk sedikit CSS untuk memastikan body dan gambar halaman tidak memiliki celah yang tidak terduga di sekitar mereka.

Kami juga termasuk margin: 0 auto; jadi gambar yang kita tambahkan nanti akan dipusatkan.

Memuat Layzr

Skrip layzr.js memiliki dua sumber CDN yang mudah untuk dimuat - kami akan menggunakan salah satu yang berasal dari Cloudfare.

Tambahkan kode ini ke html Anda, sebelum tag penutup </body>.

Jika Anda memilih untuk tidak memuat skrip dari CDN, Anda dapat mengunduh sebagai gantinya dan ikuti petunjuk singkatnya di: https://github.com/callmecavs/layzr.jsdownload

Instantiate Layzr

Sekarang setelah kita meletakkan Layzr, kita harus membuatnya mengeksekusi ketika halaman dimuat. Untuk melakukannya, tambahkan kode ini setelah tag script baru saja dimasukkan di bagian sebelumnya:

Kode ini pertama kali membuat instance yang digunakan untuk menampung Layzr, kemudian setelah konten DOM halaman dimuat, ia menggunakan instance itu untuk mengaktifkan fungsionalitas Layzr.

Keseluruhan kode Anda sejauh ini seharusnya sekarang terlihat seperti ini:

2. Tambahkan Gambar (Normal Resolusi)

Dengan Layzr dimuat dan siap untuk pergi, kita dapat mulai menambahkan beberapa gambar untuk itu untuk bekerja sihirnya. Anda dapat menggunakan gambar apa pun yang Anda inginkan, namun jika Anda ingin menggunakan sampel kode persis seperti yang Anda lihat pada langkah-langkah berikut, Anda dapat mengunduh file sumber yang dilampirkan pada tutorial ini. Di sana Anda akan menemukan folder images yang Anda dapat menyalin dan paste ke dalam proyek Anda sendiri.

Untuk menambahkan gambar saat menggunakan Layzr Anda akan menggunakan elemen img biasa, tetapi alih-alih menggunakan atribut src Anda akan menggunakan data-normal seperti:

Memastikan Gambar Memiliki Ketinggian

Agar setiap skrip lazy loading untuk bekerja perlu mengetahui ketinggian semua gambar di situs sehingga dapat memutuskan mana yang perlu dimuat, (karena mereka berada di viewport atau dekat dengannya), dan mana yang harus menunggu .

Namun bagian yang rumit adalah bahwa sebuah gambar tidak benar-benar memiliki ketinggian sampai sepenuhnya dimuat ke halaman. Ini berarti jika kita ingin lazy loading untuk bekerja, kita perlu cara untuk memberikan informasi halaman tentang tinggi gambar sebelum gambar dimuat.

Kami akan membahas dua metode untuk mencapai ini, satu untuk gambar ukuran tetap dan satu lagi untuk responsif. Memberikan tinggi gambar dengan membuatnya tetap dalam ukuran adalah metode yang paling sederhana, karena Anda hanya perlu menambahkan atribut height dan width.

Lanjutkan sekarang dan tambahkan elemen img di atas tag skrip Anda, menggunakan atribut data-normal, dan termasuk height dan width, untuk setiap gambar yang ingin Anda muat.

Metode ukuran tetap ini akan memungkinkan lazy loading untuk bekerja, namun ini mencegah gambar menjadi responsif, dan ini tidak ideal. Kami akan membahas cara memberikan gambar tinggi dan responsif sedikit nanti.

3. Menetapkan Loading Threshold

Secara default, Layzr hanya akan membawa gambar yang terlihat pada saat memuat. Namun, pengunjung memiliki pengalaman yang lebih mulus jika gambar berikutnya sesuai (di luar viewport) juga dimuat.

Lakukan ini dengan menetapkan opsi bernama threshold saat membuat instance skrip. Cara kerjanya adalah Anda akan memberikan nilai yang mewakili persentase ketinggian viewport. Jika Anda menetapkan nilai 100, ini akan mewakili 100% dari tinggi viewport, misalnya 1200px. Dalam hal ini, semua layar di luar dalam 1200px dari viewport juga akan dimuat.

Misalnya, jika Anda memiliki dua gambar besar, salah satunya didorong tepat di luar area pandang, dan threshold Anda ditetapkan menjadi 100, kedua gambar akan memuat:

Untuk menetapkan nilai threshold ganti baris ini di kode Anda:

... dengan ini:

Anda dapat mengubah nilai ini menjadi yang paling sesuai dengan situs yang Anda buat. Sebagai poin yang menarik, tampaknya threshold lazy loading AMP kira-kira setara dengan 200.

4. Tambahkan Retina/HiDPI Gambar

Salah satu hal hebat tentang Layzr adalah membuatnya sangat lurus ke depan untuk menambahkan gambar untuk perangkat resolusi tinggi. Yang perlu Anda lakukan adalah memasukkan atribut data-retina. Sebagai contohnya:

Perbarui semua elemen img di HTML Anda untuk menyertakan gambar retina, seperti:

5. Penampung Gambar Responsif dan Pencegahan Reflow

Membuat gambar yang dimuat lambat dengan responsif bisa menjadi proposisi yang rumit. Seperti yang telah disebutkan sebelumnya, dalam rangka untuk menentukan kapan harus memuat gambar Layzr pertama perlu tahu ketinggian mereka. Karena gambar responsif mengubah dimensi mereka sepanjang waktu, tingginya tak terduga.

Di atas ini kami juga ingin memiliki sesuatu di tata letak halaman kami untuk mencegah reflow. Reflow adalah apa yang terjadi ketika sebuah gambar selesai memuat dan pergi dari tidak memiliki ukuran tiba-tiba mengambil ruang di tata letak, menyebabkan segala sesuatu di sekitarnya untuk bergerak. Ini bisa sangat membuat frustasi bagi pengunjung yang mencoba untuk fokus pada konten Anda hanya untuk melompati halaman di atasnya.

Kami dapat menyelesaikan kedua masalah ini dengan menempatkan placeholder responsif di halaman pada ukuran yang benar untuk setiap gambar. Placeholder akan memastikan tata letak halaman tidak perlu diulang, dan juga akan memberikan ketinggian Layzr untuk bekerja. Kami akan mendasarkan pendekatan kami pada teknik cerdik dari artikel 'A List Apart' oleh Thierry Koblentz tentang 'Membuat Intrinsic Ratios untuk Video'.

Satu-satunya syarat adalah Anda harus mengetahui rasio aspek setiap gambar yang Anda posting sebelumnya, karena CSS akan mengubah ukuran gambar sesuai dengan rasio aspek yang ditentukan.

Tambahkan Wrapper Aspek Rasio

Hal pertama yang akan kita lakukan adalah menambahkan pembungkus div di sekitar gambar pertama kita — div ini akan menjadi placeholder kita. Kami akan mengubah ukuran div itu sendiri dengan CSS, lalu mengatur gambar di dalamnya untuk mengisinya secara horizontal dan vertikal.

Kita akan memberikan div sebuah nama kelas yang merepresentasikan rasio aspek dari gambar yang akan dikandungnya. Dalam contoh kita, gambar pertama memiliki lebar 960 piksel dengan tinggi 640 piksel, jadi mari kita cari tahu aspek rasio apa yang membuatnya.

640 (tinggi kami) adalah dua pertiga dari 960 (lebar kami), yang berarti bahwa untuk setiap 2 unit tinggi, gambar memiliki 3 unit lebar. Rasio aspek biasanya dinyatakan sebagai width:height, seperti dalam kasus 16:9 yang terkenal. Rasio gambar contoh pertama kami adalah 3:2.

Untuk mewakili aspek rasio ini kami akan memberikan div wrapper kami, nama kelas ratio_3_2.

Tambahkan Styling Aspek Rasio Standar

Sekarang kita akan menambahkan CSS untuk membuat ini semua berfungsi.

Di antara yang ada <style></style> tags di head Anda file index.html, tambahkan kode ini:

Selektor ini akan mengambil kelas ratio_3_2 kami, tetapi ia juga akan mengambil kelas lain yang diawali dengan ratio_. Ini berarti kita dapat membuat kelas lebih kemudian untuk mengakomodasi rasio aspek yang berbeda.

Dalam gaya ini kita membuat yakin wrapper kita selalu membentang ke 100% lebar parent. Kami juga mengaturnya ke position:relative; karena ini akan benar-benar memposisikan gambar di dalamnya — Anda akan melihat mengapa sedikit nanti.

Memberikan rasio aspek Wrapper Height

Sekarang kami akan menambahkan kode ini spesifik untuk kelas ratio_3_2 kami hanya:

Nilai padding-top ada yang memungkinkan kita untuk menjaga div wrapper kita pada aspek rasio yang kita inginkan. Berapapun lebar dari div, padding ini akan menjaga ketinggian pada 66.666667% dari jumlah itu, (dua pertiga), sehingga mempertahankan rasio aspek kami 3:2.

Untuk menentukan berapa persentase yang harus dimasukkan di sini, cari tahu berapa tinggi rasio aspek Anda saat dinyatakan sebagai persentase width. Anda dapat melakukan ini dengan perhitungan:

100% * (height / width)

Untuk kami 3:2 rasio yang membuatnya: 100% * (2 / 3) = 66.666667%

Anda dapat menghitung persentase yang tepat untuk rasio aspek yang Anda inginkan sebelumnya, atau jika Anda lebih suka Anda dapat menggunakan fungsi CSS calc() seperti yang terlihat dikomentari dalam contoh di atas:

padding-top: calc(100% * (2 / 3));

Isi Pembungkus Aspek Rasio dengan Gambar

Pembungkus rasio aspek kami sekarang akan mempertahankan dimensi yang diinginkan terlepas dari lebar viewport. Jadi sekarang yang harus kita lakukan adalah membuat gambar yang ada di dalamnya mengisi pembungkus, dengan demikian mewarisi dimensinya.

Kami akan melakukan ini dengan benar-benar memposisikan gambar apa pun bersarang di dalam class ratio_ pembungkus div, menempatkannya di sudut kiri atas pembungkus, lalu merentangkannya ke tinggi dan lebar 100%, seperti:

Periksa gambar pertama Anda dan Anda sekarang harus melihatnya membentang ke lebar viewport, tetapi akan menyusut agar sesuai saat Anda mengubah ukuran, menjaga aspek rasio sepanjang waktu.

Menambahkan Tambahan Rasio Aspek

Anda mungkin memiliki gambar dengan semua jenis rasio aspek yang berbeda dan Anda ingin dapat mengakomodasi mereka. Dalam contoh gambar yang kami kerjakan dalam tutorial ini, tiga yang pertama memiliki rasio aspek 3:2, tetapi yang keempat dan kelima adalah 16:9.

Untuk memperhitungkan ini menambahkan class baru dinamai sesuai dengan aspek rasio, yaitu ratio_16_9, dengan nilai padding-top yang sesuai:

Pergi ke depan dan tambahkan div aspek rasio di sekitar semua sisa gambar, menggunakan kelas yang sesuai untuk masing-masing tergantung pada ukurannya. Anda juga dapat menghapus atribut height dan width dari gambar Anda karena sekarang semuanya akan diganti oleh CSS kami.

Muat ulang pratinjau browser Anda dan ubah ukuran viewport: Anda sekarang harus menemukan semua gambar Anda responsif sambil menjaga fungsionalitas lazy-loading mereka, tanpa reflow.

6. Tambahkan srcset

Layzr juga mendukung atribut srcset. Di browser yang mendukung srcset itu akan digunakan dalam preferensi atas data-normal dan data-retina.

Alih-alih menggunakan atribut srcset lurus, bagaimanapun, itu harus ditambahkan dengan data- persis seperti atribut lain yang telah kami gunakan selama ini.

Perbarui kode gambar pertama Anda ke:

Untuk melihat ini bekerja pergi ke pratinjau browser Anda, mengecilkan viewport ke bawah lebar 320px, kembali dan menonton panel jaringan. Anda harus melihat versi terkecil dari pemuatan gambar Anda terlebih dahulu. Lalu, naikkan ukuran viewport dan Anda akan melihat versi medium dan large dimuat saat Anda pergi.

Folder gambar yang disediakan dalam file sumber termasuk versi small, medium dan large dari setiap gambar. Perbarui kode Anda untuk menggunakan semuanya dalam atribut data-srcset Anda seperti:

Menambahkan Animasi Loading

Kami hampir selesai, tetapi untuk membuat lapisan akhir cat kita akan menambahkan animasi loading. Ini akan membantu mengkomunikasikan kepada pengunjung bagian mana dari tata letak yang bertindak sebagai tempat penampung gambar, dan bahwa gambar-gambar tersebut sedang dalam proses dimuat.

Kami akan menggunakan pemuat CSS murni, versi yang sedikit dimodifikasi dari pena hebat ini oleh Alan Shortis: https://codepen.io/alanshortis/pen/eJLVXr

Untuk menghindari kebutuhan markup tambahan, kita akan memuat animasi kami dalam psuedo-elemen :after yang melekat pada setiap pembungkus aspek rasio. Tambahkan baris berikut ke CSS Anda:

Kode di atas membuat ikon pemuat berbentuk lingkaran kecil, memusatkannya, dan membuatnya berputar 360 derajat dalam lingkaran setiap 0,75 detik.

Kami juga akan menambahkan warna latar belakang abu-abu gelap ke pembungkus rasio aspek kami sehingga mudah dibedakan dari tata letak lainnya. Menambahkan warna background-color: #333; ini baris sebagai berikut:

Akhirnya kita hanya perlu memastikan bahwa loader kita tidak memposisikan diri di atas gambar kita. Untuk melakukan ini, kita akan menambahkan baris z-index: 1; ke gambar kami, memindahkannya ke lapisan di atas loader:

Segarkan halaman Anda sekarang dan Anda akan melihat animasi loading Anda beraksi.

Kode Akhir Anda

Dengan semua hal di atas selesai, kode Anda seharusnya sekarang terlihat seperti ini:

Membungkus

Anda sekarang telah benar-benar menerapkan lazy loading dengan tangan, sedekat mungkin untuk menampilkan fitur paritas dengan AMP.

Ada beberapa hal yang AMP lakukan secara otomatis, seperti menangani pelestarian rasio aspek pada gambar yang responsif, tetapi di sisi lain, melakukan berbagai hal sendiri memungkinkan kontrol tambahan, seperti menentukan threshold pemuatan Anda sendiri.

Semoga melalui proses ini telah membantu Anda memutuskan pendekatan mana yang Anda sukai.

Tiny technicians with network cables
Teknisi kecil dengan kabel jaringan, Kirill_M/Photodune.

Terima kasih kepada Michael Cavalea untuk naskah yang luar biasa! Untuk mempelajari lebih lanjut tentang kunjungan Layzr.js: https://github.com/callmecavs/layzr.js

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.