Modul 4: Teknologi web tingkat lanjut

4.1.2 Cara Kerja AMP

Gabungan pengoptimalan berikut ini menjadi alasan mengapa halaman AMP dapat dimuat sebegitu cepatnya.

Untuk mempelajari lebih lanjut cara kerja AMP, Anda dapat menonton video yang menampilkan pimpinan engineering AMP, Malte Ubl, atau membaca informasi di bawah video tersebut.

AMP Anatomy with Malte Ubl

Hanya izinkan skrip asinkron

JavaScript adalah program bahasa yang ampuh. JavaScript dapat memodifikasi hampir setiap aspek halaman, tetapi juga dapat memblokir konstruksi DOM dan memperlambat perenderan halaman (baca juga Menambahkan interaktivitas dengan JavaScript). Agar JavaScript tidak memperlambat perenderan halaman, AMP hanya mengizinkan JavaScript asinkron.

Halaman AMP tidak dapat menyertakan JavaScript apa pun yang ditulis developer. Berbagai fitur halaman interaktif ditangani di elemen AMP khusus, dan bukan menggunakan JavaScript. Elemen AMP khusus dapat mengandung JavaScript, tetapi dirancang secara hati-hati agar tidak menurunkan performa.

Meskipun JS pihak ketiga diizinkan di iframe, JS ini tidak dapat memblokir perenderan. Misalnya, jika JS pihak ketiga menggunakan API document.write yang sangat buruk bagi performa, JS ini tidak akan memblokir perenderan halaman utama.

Ukur semua sumber daya secara statistik

Sumber daya eksternal seperti gambar, iklan, atau iframe harus menyatakan ukurannya dalam HTML, agar AMP dapat menentukan ukuran dan posisi setiap elemen sebelum sumber daya didownload. AMP memuat tata letak halaman tanpa menunggu proses download sumber daya apa pun.

AMP memisahkan tata letak dokuman dari tata letak sumber daya. Hanya satu permintaan HTTP yang diperlukan untuk menentukan tata letak keseluruhan doc (+font). Karena AMP dioptimalkan untuk menghindari penghitungan ulang gaya dan tata letak yang mahal di browser, tidak akan ada proses tata letak ulang saat sumber daya dimuat.

Jangan biarkan mekanisme ekstensi menghambat perenderan

AMP tidak akan membiarkan mekanisme ekstensi menghambat perenderan halaman. AMP mendukung ekstensi untuk hal-hal seperti lightbox, penyematan instagram, tweet, dll. Meskipun memerlukan permintaan HTTP tambahan, permintaan tersebut tidak akan menghambat tata letak dan perenderan halaman.

Setiap halaman yang menggunakan skrip khusus harus memberi tahu sistem AMP bahwa halaman akan memiiki tag khusus. Misalnya, skrip amp-iframe memberi tahu sistem bahwa akan ada amp-iframetag. AMP akan membuat kotak iframe bahkan sebelum mengetahui akan menyertakan apa:

<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>

Jauhkan semua JavaScript pihak ketiga dari jalur utama

JS pihak ketiga biasanya menggunakan pemuatan JS tersinkron. JS tersebut biasanya juga memuat lebih banyak skrip sinkron menggunakan document.write. Misalnya, jika Anda memiliki lima iklan di halaman, dan setiap iklan menyebabkan tiga pemuatan sinkron, masing-masing dengan koneksi latensi 1 detik, maka perlu 15 detik hanya untuk memuat JS.

Halaman AMP mengizinkan JavaScript pihak ketiga, tetapi hanya dalam iframe dengan sandbox. Dengan membatasinya pada iframe, JS pihak ketiga tidak dapat memblokir eksekusi halaman utama. Meskipun JS pihak ketiga memicu beberapa penghitungan ulang gaya, iframe-nya yang kecil hanya memiliki DOM yang sangat sedikit.

Waktu yang diperlukan untuk melakukan penghitungan ulang gaya dan tata letak dibatasi oleh ukuran DOM, sehingga penghitungan ulang iframe sangat cepat dibandingkan dengan penghitungan ulang gaya dan tata letak untuk halaman tersebut.

Semua CSS harus inline dan dibatasi ukurannya

CSS menghambat semua perenderan, menghambat pemuatan halaman, dan cenderung membengkak. Pada halaman HTML AMP, hanya gaya inline yang diizinkan. Langkah ini menghapus 1 atau bahkan lebih banyak permintaan HTTP dari jalur perenderan utama dibandingkan dengan halaman web umumnya.

Selain itu, lembar gaya inline hanya berukuran maksimal 50 kilobyte. Meskipun ukuran ini cukup besar untuk halaman yang sangat rumit, namun penulis halaman tetap harus mengupayakan kerapian CSS yang baik.

Pemicuan font harus efisien

Font web berukuran sangat besar, sehingga pengoptimalan font web sangat penting bagi performa. Pada halaman biasa yang memiliki sedikit skrip sinkron dan sedikit lembar gaya eksternal, browser akan menunggu dan menunggu untuk mulai memuat font super besar tersebut hingga prosesnya selesai.

Sistem AMP menyatakan nol permintaan HTTP hingga font mulai didownload. Hal ini hanya bisa terjadi karena semua JS dalam AMP memiliki atribut asinkon dan hanya lembar gaya inline yang diizinkan; tidak ada permintaan HTTP yang memblokir browser dalam mendownload font.

Kurangi penghitungan ulang gaya

Setiap kali Anda mengukur sesuatu, hal ini akan memicu penghitungan ulang gaya yang mahal, karena browser harus melakukan tata letak seluruh halaman. Di halaman AMP, semua pembacaan DOM dilakukan terlebih dahulu sebelum semua penulisan. Hal ini untuk memastikan hanya ada satu penghitungan ulang gaya per frame.

Pelajari lebih lanjut dampak penghitungan ulang gaya dan tata letak pada performa perenderan.

Hanya jalankan animasi yang dipercepat oleh GPU

Satu-satunya cara mendapatkan pengoptimalan yang cepat adalah menjalankannya pada GPU. GPU memahami berbagai lapisan, mengetahui cara memanfaatkan lapisan tersebut, memindahkannya, dan mengaburkannya, tetapi tidak dapat mengupdate tata letak halaman. GPU akan menyerahkan tugas tersebut kepada browser, dan hal ini bukan cara yang baik.

Aturan untuk CSS terkait animasi memastikan bahwa animasi tersebut dapat dipercepat oleh GPU. Secara khusus, AMP hanya mengizinkan animasi dan transisi pada transformasi dan opasitas, sehingga tata letak halaman tidak diperlukan. Pelajari lebih lanjut cara menggunakan transformasi dan opasitas untuk perubahan animasi.

Prioritaskan pemuatan sumber daya

AMP mengontrol semua proses download sumber daya: AMP memprioritaskan pemuatan sumber daya, dengan hanya memuat apa yang diperlukan dan melakukan prefetch pada sumber daya yang pemuatannya lambat.

Saat mendownload sumber daya, AMP akan mengoptimalkan prosesnya, sehingga sumber daya yang paling penting saat itu akan didownload terlebih dahulu. Gambar dan iklan hanya akan didownload jika kemungkinan akan dilihat oleh pengguna di paruh atas, atau jika pengguna cenderung men-scroll-nya dengan cepat.

AMP juga melakukan prefetch pada sumber daya yang pemuatannya lambat. Sumber daya akan dimuat seakhir mungkin, tetapi di-prefetch sedini mungkin. Dengan demikian, pemuatan akan terjadi sangat cepat. Namun, CPU hanya akan digunakan saat sumber daya sedang ditampilkan kepada pengguna.

Muat halaman secara instan

Preconnect API yang baru digunakan terutama untuk memastikan permintaan HTTP dapat dilakukan secepat mungkin saat dibuat. Dengan demikian, halaman dapat dirender sebelum pengguna menyatakan dengan jelas bahwa mereka ingin membuka halaman tersebut. Halaman kemungkinan sudah tersedia saat pengguna memilihnya, sehingga pemuatan dapat terjadi secara instan.

Meskipun dapat diterapkan pada semua konten web, pra-perenderan juga dapat menggunakan banyak bandwidth dan CPU. AMP dioptimalkan untuk mengurangi kedua faktor tersebut. Pra-perenderan hanya akan mendownload sumber daya di paruh atas, dan tidak akan merender hal yang dapat memberatkan CPU.

Saat dokumen AMP mengalami pra-perenderan untuk pemuatan instan, hanya sumber daya di paruh atas yang sebenarnya didownload. Saat dokumen AMP mengalami pra-perenderan untuk pemuatan instan, sumber daya yang menggunakan banyak CPU (seperti iframe pihak ketiga) tidak akan didownload.

Pelajari lebih lanjut alasan mengapa HTML AMP tidak terlalu memanfaatkan pemindai pra-pemuatan.

Bantu kami agar AMP dapat bekerja lebih cepat

AMP adalah upaya sumber terbuka. Kami perlu bantuan Anda untuk membuat AMP bekerja lebih cepat. Pelajari cara berkontribusi.

Apakah artikel ini membantu?
Bagaimana cara meningkatkannya?