Mastrigus.com – Cara membuat blog AMP sebenarnya cukuplah rumit (bagi yang belum mengerti) dan cukup mudah (bagi yang sudah mengerti). “ya iyalaaaah“. Oleh karenanya kita diharuskan mengerti dahulu apa yang ingin kita buat supaya mudah untuk dibuat. Dan bagi kamu yang belum mengerti cara membuat blog AMP, maka tidak ada jalan lain kecuali BELAJAR dengan giat supaya kamu bisa membuat blog AMP. “Hahahaha, nggacor mulu… kapan mulainya”.
2. AMP JS
Pustaka AMP JS mengimplementasikan semua praktik kinerja terbaik AMP, mengelola pemuatan sumber daya dan memberi Anda tag khusus seperti yang disebut di atas, yang semuanya memastikan perenderan halaman Anda dengan cepat.
Di antara optimalisasi terbesar adalah fakta bahwa hal tersebut memastikan semua yang berasal dari sumber daya eksternal menjadi asinkron, sehingga tidak ada satu pun yang bisa menghalangi perenderan di halaman.
Teknik kinerja lainnya meliputi dilakukannya sandbox semua iframe, perhitungan awal layout setiap elemen pada halaman sebelum sumber daya dimuat dan menonaktifkan pemilih CSS yang lambat.
Untuk mengetahui selengkapnya tentang tidak hanya optimalisasi namun juga pembatasannya, baca spesifikasi AMP HTML.
3. Google AMP Cache
Google AMP Cache adalah jaringan penyajian materi berbasis proxy untuk menyajikan semua dokumen AMP yang valid. Jaringan ini mengambil halaman AMP HTML, menempatkannya dalam cache, dan memperbaiki halaman kinerja secara otomatis. Ketika menggunakan Google AMP Cache, semua file JS dan semua gambar yang dimuat dari asal yang sama yang menggunakan HTTP 2.0 untuk efisiensi maksimum.
Cache ini juga disertai dengan sistem validasi bawaan yang memastikan bahwa halaman dijamin bekerja, dan halaman tidak bergantung pada sumber daya eksternal. Sistem validasi ini menjalankan serangkaian pernyataan yang mengonfirmasi terpenuhinya markup halaman sesuai dengan spesifikasi AMP HTML.
Versi validator lainnya hadir dalam bentuk dibundel dengan setiap halaman AMP. Versi ini bisa mencatat kesalahan validasi secara langsung ke konsol browser ketika halaman dirender, sehingga Anda bisa melihat bagaimana perubahan kompleks dalam kode Anda mungkin berdampak pada kinerja dan pengalaman pengguna.
Sampai disini sudah pada tahu belum apa maksud dari blog AMP? jika belum saya akan tambahi lagi artikelnya, karena sebenarnya saya juga belum terlalu paham. Eh ngomong-ngomong, mastrigus.com sudah memakai template AMP loh (BACA: Blog AMP mastrigus.com).
Lanjut ya geng, saya teruskan lagi. Sekarang
BAGAIMANA CARA KERJA AMP?
Kombinasi semua pengoptimalan berikut adalah alasan mengapa halaman AMP sangat cepat sehingga dapat dimuat seketika. Dan inilah alasan kenapa blog AMP jauh lebih cepat jika dibandingkan dengan blog biasa:
1. Hanya memperbolehkan skrip asinkron
JavaScript sangat hebat, karena mampu memodifikasi hampir semua aspek halaman, tetapi di sisi lain, juga bisa memblokir konstruksi DOM dan menunda perenderan halaman (lihat juga Menambahkan interaktivitas dengan JavaScript). Agar JavaScript tidak terus-menerus menunda perenderan halaman, AMP hanya memperbolehkan JavaScript asinkron.
Halaman AMP tidak boleh berisi JavaScript apa pun yang disusun oleh penulis program. Sebagai ganti menggunakan JavaScript, fitur halaman interaktif ditangani di elemen AMP khusus. Elemen AMP khusus bisa berisi JavaScript di dalamnya, tetapi didesain dengan cermat agar tidak menyebabkan penurunan kinerja.
Meskipun diperbolehkan di iframe, JS pihak ketiga tidak diperbolehkan memblokir perenderan. Misalnya, jika JS pihak ketiga menggunakan API document.write yang buruk untuk kinerja, JS ini tidak memblokir perenderan halaman utama.
2. Menyatakan ukuran semua sumber daya secara statis
Sumber daya eksternal seperti gambar, iklan, atau iframe harus dinyatakan ukurannya di HTML sehingga AMP bisa menentukan ukuran dan posisi setiap elemen sebelum sumber daya diunduh. AMP memuat layout halaman tanpa menunggu sumber daya apa pun untuk diunduh.
AMP melepaskan layout dokumen dari layout sumber daya. Hanya satu permintaan HTTP yang diperlukan untuk melayout keseluruhan dokumen (+font). Karena AMP dioptimalkan untuk menghindari rekalkulasi gaya dan layout yang bebannya besar di browser, tidak akan ada layout ulang saat sumber daya dimuat.
3. Tidak memperbolehkan mekanisme ekstensi memblokir perenderan
AMP tidak memperbolehkan mekanisme ekstensi memblokir perenderan halaman. AMP mendukung ekstensi untuk elemen-elemen seperti lightbox, sematan instagram, tweet, dsb. Meskipun elemen ini memerlukan permintaan HTTP tambahan, permintaan tersebut tidak memblokir layout dan perenderan halaman.
Halaman apa pun yang menggunakan skrip khusus harus memberi tahu sistem AMP bahwa nantinya akan memiliki tag khusus. Misalnya, skrip amp-iframe memberi tahu sistem bahwa akan ada tag amp-iframe. AMP membuat kotak iframe sebelum mengetahui apa yang akan disertakan:
4. Mempertahankan semua JavaScript pihak ketiga di luar jalur penting
JS pihak ketiga cenderung menggunakan pemuatan JS sinkron. Skrip ini juga cenderung menerapkan document.write pada skrip sinkronisasi lainnya. Misalnya, jika Anda memiliki lima iklan dan setiap iklan ini melakukan tiga pemuatan sinkronisasi dengan koneksi latensi 1 detik, Anda membutuhkan waktu pemuatan 15 detik hanya untuk memuat JS.
Halaman AMP memperbolehkan JavaScript pihak ketiga tetapi hanya dalam iframe yang di-sandbox. Dengan mencegahnya masuk ke dalam iframe, JavaScript pihak ketiga tidak bisa memblokir eksekusi halaman utama. Bahkan apabila memicu rekalkukasi gaya berkali-kali, iframe-nya yang sangat kecil hanya memiliki sedikit DOM.
Rekalkulasi gaya dan layout umumnya sebanding dengan ukuran DOM, sehingga rekalkulasi iframe sangat cepat dibandingkan dengan rekalkulasi gaya dan layout untuk halaman.
5. Semua CSS harus sebaris dan dibatasi ukurannya
CSS memblokir semua perenderan, memblokir pemuatan halaman, dan cenderung besar ukurannya. Di halaman AMP HTML, hanya gaya sebaris yang diperbolehkan. Ini menghilangkan 1 permintaan HTTP atau sering kali lebih dari jalur perenderan yang penting dibanding dengan sebagian besar laman web.
Selain itu, ukuran maksimum style sheet sebaris adalah 50 kilobyte. Meskipun ukurannya cukup besar untuk halaman yang sangat kompleks, style sheet sebaris mengharuskan penulis halaman untuk menerapkan gaya penulisan CSS yang bersih.
6. Pemicuan font harus efisien
Font web ukurannya sangat besar, sehingga pengoptimalan font web sangat penting bagi kinerja. Pada halaman umumnya yang memiliki beberapa skrip sinkronisasi dan beberapa style sheet eksternal, browser menunggu dan terus menunggu untuk mulai mengunduh font yang ukurannya besar hingga semuanya berakhir.
Sistem AMP menyatakan nol permintaan HTTP hingga font mulai diunduh. Ini hanya bisa dilakukan karena semua JS di AMP memiliki atribut asinkron dan hanya style sheet sebaris yang diperbolehkan; tidak ada permintaan HTTP yang memblokir browser mengunduh font.
7. Meminimalkan rekalkulasi gaya
Setiap kali Anda mengukur sesuatu, tindakan ini memicu rekalkulasi gaya yang bebannya berat karena browser harus melayout keseluruhan halaman. Di halaman AMP, semua pembacaan DOM terjadi di awal sebelum terjadi semua penulisan. Ini memastikan terjadi maksimal satu rekalkulasi gaya per bingkai.
Ketahui selengkapnya tentang dampak gaya dan rekalkulasi layout terhadap kinerja perenderan.
8. Hanya menjalankan animasi yang diakselerasi GPU
Satu-satunya cara untuk mendapatkan pengoptimalan maksimal adalah dengan menjalankan animasi di GPU. GPU memahami layer serta cara menjalankan beberapa hal di layer ini, GPU bisa menggerakkannya, memudarkannya, tetapi tidak bisa memperbarui layout halaman; GPU akan menyerahkan tugas ini kepada browser, yang dampaknya tidak bagus.
Aturan untuk CSS yang berkaitan dengan animasi memastikan animasi bisa diakselerasi oleh GPU. Khususnya, AMP hanya memperbolehkan animasi dan transisi pada transform dan opacity sehingga layout halaman tidak diperlukan. Ketahui selengkapnya tentang menggunakan transform dan opacity untuk perubahan animasi
9. Memprioritaskan pemuatan sumber daya
AMP mengontrol semua unduhan sumber daya: dengan memprioritaskan pemuatan sumber daya, memuat hanya apa yang diperlukan, dan mengambil di awal sumber daya yang lambat dimuat.
Saat mengunduh sumber daya, AMP mengoptimalkan unduhan sehingga sumber daya yang paling penting saat ini diunduh terlebih dulu. Gambar dan iklan hanya diunduh jika berpotensi besar dilihat oleh pengguna, di paro atas, atau jika pengguna berpotensi menggulir ke arahnya dengan cepat.
AMP juga mengambil sumber daya yang lambat dimuat di awal. Sumber daya dimuat selambat mungkin, tetapi diambil terlebih dahulu sedini mungkin. Dengan demikian, semuanya dimuat sangat cepat tetapi CPU hanya dipakai saat sumber daya benar-benar diperlihatkan ke pengguna.
10. Memuat halaman seketika
API preconnect yang baru sangat sering dipakai untuk memastikan permintaan HTTP secepat mungkin saat dibuat. Dengan demikian, halaman bisa dirender sebelum pengguna secara eksplisit menyatakan ingin menuju ke sana; halaman mungkin sudah tersedia saat pengguna benar-benar memilihnya, sehingga terjadi pemuatan seketika.
Meskipun pra-perenderan bisa diterapkan pada semua materi web, tindakan ini juga bisa menggunakan banyak sekali bandwidth dan CPU. AMP dioptimalkan untuk mengurangi kedua faktor ini. Pra-perenderan hanya mengunduh sumber daya di paro atas dan pra-perenderan tidak merender hal-hal yang memberatkan CPU.
Saat dokumen AMP dipra-render untuk pemuatan seketika, hanya sumber daya di paro atas yang benar-benar diunduh. Saat dokumen AMP dipra-render untuk pemuatan seketika, sumber daya yang berpotensi memakai banyak CPU (seperti iframe pihak ketiga) tidak diunduh.
Ok guys, sudah lebih paham lagi kan? atau kalian sedang muntah-muntah? sama guys, saya juga tidak terlalu paham. tapi meskipun tidak paham, kita harus tetap mempelajarinya.
Nah, sekarang bagaimana cara membuat blog AMP?
Caranya mudah guys, saya tidak menemui kendala apapun dalam membuat blog AMP, karena pada dasarnya saya pintar dan gampang paham, untuk itulah saya mengubah blog mastrigus.com yang semula belum AMP, menjadi support AMP.
Saya tidak mau ambil pusing mengenai pemindahan dari blog dahulu ke blog yang valid AMP. Karena melihat banyaknya kemudahan dan keistimewaan pada AMP.
Sehari setelah Bang Adhy Suryadi, memposting template AMP (yang saya pakai ini), saya langsung beli saja. Kamu tahu kan kenapa saya tidak terlalu banyak menemui kendala dan terkesan mudah membuat blog AMP? Ya karena saya beli.
Hahai, sebenarnya saya beli template AMP doang guys. Saya beli dan berniat untuk membagikan secara gratis (tapi jangan bilang-bilang Bang Adhy, nanti saya dimarahin). Dan untuk kamu yang menginginkan templat yang saya pakai ini. silakan tinggalakn email di kolom komentar. Nanti saya bagi. Oke.
Sumber: https://www.ampproject.org
