Local blog for Indonesian speaking developers
Google AMP Cache, AMP Lite, dan kebutuhan akan kecepatan
17 February 2017
Ditulis oleh Huibao Lin dan Eyal Peled, Software Engineers, Google
Di Google kami percaya bahwa kecepatan merancang produk adalah prinsip utama. Format Accelerated Mobile Pages (AMP) membantu memastikan bahwa konten dimuat dengan cepat, tapi kami bisa melakukannya lebih baik.
Smart caching adalah salah satu unsur utama dalam pengalaman AMP nyaris instan yang didapatkan pengguna pada produk seperti Google Search dan Google News & Weather. Dengan caching, secara umum kita bisa membuat konten, secara fisik menjadi lebih dekat kepada pengguna yang memintanya sehingga byte melakukan perjalanan yang lebih singkat untuk mencapai pengguna. Selain itu, menggunakan infrastruktur umum tunggal seperti cache memberikan konsistensi yang lebih besar dalam waktu loading halaman meskipun konten berasal dari banyak host, yang mungkin memiliki latensi sangat berbeda—dan jauh lebih besar—dalam menyajikan konten dibandingkan dengan cache.
Pengiriman yang lebih cepat dan lebih konsisten adalah alasan utama mengapa halaman yang disajikan dalam AMP Google Search berasal dari
Google AMP Cache
. Infrastruktur materi terpadu cache ini membuka kemungkinan menarik untuk membangun optimalisasi yang mendorong peningkatan pengalaman di ratusan juta dokumen yang disajikan. Melakukan hal itu agar dokumen bisa memanfaatkan keuntungan ini adalah salah satu alasan utama Google AMP Cache tersedia gratis untuk digunakan oleh siapa saja.
Dalam tulisan ini, kami akan menyoroti dua perbaikan yang baru saja kami perkenalkan: (1) optimalisasi pengiriman gambar dan (2) memungkinkan konten disajikan lebih berhasil dalam kondisi bandwidth terbatas melalui proyek yang disebut "AMP Lite."
Optimalisasi gambar dengan Google AMP Cache
Rata-rata di seluruh web, gambar menghabiskan
64% bytes
dari suatu halaman. Ini berarti gambar merupakan target yang sangat menjanjikan untuk optimalisasi berdampak besar.
Menerapkan optimalisasi gambar menjadi cara efektif untuk mengurangi byte pada proses pengiriman. Google AMP Cache melakukan tumpukan optimalisasi gambar yang digunakan oleh
PageSpeed Modules
dan
Chrome Data Compression
. (Perhatikan bahwa untuk melakukan transformasi di atas, Google AMP Cache mengabaikan header "Cache-Control: no-transform".) Situs bisa mendapatkan optimalisasi gambar yang sama di tempat asal mereka dengan memasang
PageSpeed
di server mereka.
Berikut adalah ringkasan dari beberapa optimalisasi yang kami lakukan:
1) Menghapus data yang tidak bisa dilihat atau sulit dilihat
Kami membuang data gambar yang tidak bisa dilihat oleh pengguna, seperti gambar kecil dan metadata geolokasi. Untuk gambar JPEG, kami juga mengurangi kualitas dan sampel warna jika nilainya lebih tinggi dari yang diperlukan. Tepatnya, kami mengurangi kualitas JPEG menjadi 85 dan warna sampel menjadi 4:2:0 — yaitu, satu sampel warna per empat piksel. Mengompresi JPEG ke kualitas yang lebih tinggi dari ini atau dengan sampel warna yang lebih banyak membutuhkan byte yang lebih besar, padahal secara visual sulit untuk dilihat perbedaannya.
Maka data gambar yang diturunkan ini benar-benar mampat. Kami menemukan bahwa optimalisasi ini mengurangi byte sebesar 40%+ dan ini tidak terlihat oleh mata pengguna.
2) Mengonversi gambar ke format WebP
Beberapa format gambar lebih ramah perangkat seluler. Kami mengonversi JPEG ke
WebP
untuk browser yang mendukung. Transformasi ini menyebabkan pengurangan tambahan 25%+ terhadap byte tanpa kehilangan kualitas.
3) Menambahkan srcset
Kami menambahkan "srcset" jika belum disertakan. Ini berlaku untuk tag "amp-img" dengan "src" tapi tanpa atribut "srcset". Operasi ini termasuk meluaskan tag "amp-img" serta mengubah ukuran gambar menjadi multidimensi. Hal ini akan semakin mengurangi jumlah byte pada perangkat yang memiliki layar kecil.
4) Menggunakan gambar berkualitas rendah dalam kondisi tertentu
Kami menurunkan kualitas gambar JPEG bila ada indikasi bahwa ini diinginkan oleh pengguna atau untuk kondisi jaringan yang sangat lambat (sebagai bagian dari AMP Lite yang dibahas di bawah ini). Misalnya kami menurunkan kualitas gambar JPEG menjadi 50 untuk pengguna Chrome yang telah mengaktifkan
Data Saver
. Transformasi ini menghasilkan penurunan lain sebesar 40%+ byte terhadap gambar JPEG.
Contoh berikut menunjukkan gambar
sebelum
(kiri) dan
sesudah
(kanan) optimalisasi. Awalnya gambar berukuran 241.260 byte, dan setelah menerapkan Optimalisasi 1, 2, & 4 menjadi 25.760 byte. Setelah optimalisasi, pada dasarnya gambar terlihat sama, tetapi telah menghemat 89% byte.
AMP Lite untuk Kondisi Jaringan Lambat
Banyak orang di seluruh dunia akses internet dengan kecepatan koneksi yang lambat atau pada perangkat dengan RAM rendah dan kami menemukan bahwa beberapa halaman AMP tidak dioptimalkan untuk para pengguna yang bandwith-nya sangat terbatas ini. Karena alasan ini, Google juga telah meluncurkan AMP Lite untuk menghapus lebih banyak byte dari halaman AMP untuk para pengguna tersebut.
Dengan AMP Lite, kami menerapkan semua optimalisasi di atas terhadap gambar. Secara khusus, kami selalu menggunakan tingkat kualitas yang lebih rendah (lihat Poin 4 di atas).
Selain itu, kami mengoptimalkan font eksternal dengan menggunakan tag
amp-font
, yang mengatur loading time font menjadi 0 detik sehingga halaman bisa ditampilkan segera terlepas dari apakah font eksternal sudah pernah di-cache sebelumnya atau tidak.
AMP Lite diluncurkan untuk pengguna bandwidth terbatas di beberapa negara seperti Vietnam dan Malaysia serta bagi pemegang perangkat dengan ram rendah di seluruh dunia. Perhatikan bahwa optimalisasi ini bisa mengubah detail kecil pada sebagian gambar, tetapi tidak mempengaruhi bagian lain dari halaman termasuk iklan.
* * *
Semua sudah disampaikan,
kami melihat adanya penurunan gabungan sebesar 45% dalam byte
pada semua optimalisasi yang tercantum di atas.
Kami berharap bisa terus menjadikan pemakaian data pengguna lebih efisien guna memberikan pengalaman AMP yang lebih cepat.
1 comment :
Robert Welain
03 May, 2018 21:32
I think you guys should learn
how to write a good thesis statement
because this article is waste...
Reply
Delete
Add comment
Load more...
Subscribe
Labels
actions on google
admob
agency
amp
android
assistant
augmented reality
chrome
dialogflow
documentation
domains
doubleclick
firebase
flutter
gmail
google bisnisku
google cloud
google code-in
google design
google font
google for entrepreneurs
google io
google maps
google partners
google play
google sign-in
gsuite
ios
launchpad
launchpad accelerator
machine learning
material design
pagespeed
progressive web app
python
tensorflow
vr
web
Archive
2018
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2017
Dec
Nov
Oct
Sep
Aug
Jul
Jun
May
Apr
Mar
Feb
Jan
2016
Dec
Nov
Google
on
Follow @googledevsid
I think you guys should learn how to write a good thesis statement because this article is waste...
ReplyDelete