Anda tidak perlu PWA atau AMP untuk memuat situs web Anda dengan cepat @ tonsky.me

Telah ada tren teknik "revolusioner" baru di Web yang pada dasarnya memungkinkan Anda untuk melakukan hal-hal yang mungkin beberapa dekade yang lalu.

Pertama, AMP (Accelerated Mobile Pages). Pikirkan tentang itu: web, secara umum, tidak cepat, jadi Google menciptakan web paralel di mana mereka tidak mengizinkan Anda untuk menggunakan JavaScript. Oh, dan mereka memungkinkan Anda menggunakan beberapa komponen AMP JS yang disetujui oleh Google. Tapi tunggu, bisakah web normal berjalan tanpa JavaScript? Tentu saja Anda dapat dapat situs web biasa termasuk komponen JS kustom? Anda bertaruh Bisakah cepat? Netflix baru-baru ini menemukan bahwa jika mereka menghapus 500 Kb JavaScript dari halaman web statis (!!!), itu akan memuat lebih cepat dan pengguna umumnya akan lebih bahagia. Siapa sangka, kan?

Jadi, mengapa AMP dibutuhkan? Pada dasarnya, Google perlu memblokir penyedia konten untuk dilayani melalui Google Search. Tapi mereka membutuhkan cerita sampul yang bagus untuk itu. Dan mereka memilih untuk mempromosikannya sebagai solusi kinerja.

Masalahnya adalah pengembang web tidak percaya pada kinerja. Mereka katakan Mereka melakukannya, tetapi dalam kenyataannya, mereka tidak melakukannya. Apa yang mereka yakini terlalu dibesar-besarkan. Jadi, jika Anda mempromosikan trik lama dengan nama baru, maka pengembang dapat mengatakan: "Sekarang, akhirnya, saya bisa mulai menulis aplikasi cepat, terima kasih Google!". Seolah-olah Google pernah mencegah Anda melakukannya terlebih dahulu.

"Tapi AMP itu baru! Itu jauh lebih dari ! "

Itu bisa, tetapi apa yang menghentikan Google, jika itu benar-benar berniat membantu, untuk meluncurkannya sebagai perpustakaan reguler JS?

Jadi, pembesar-besaran bekerja, banyak pengembang membeli cerita sampul dan mereka bergegas membuat versi paralel dari setiap laman web yang mereka layani dengan peningkatan kinerja "AMP-enabled".

Sebelum:

"Hai bos, mari kita tulis ulang situs web kami agar cepat dimuat!"
"Persetan denganmu!"
"Tapi penelitian menunjukkan bahwa setiap detik waktu loading …"
"Aku bilang, pergi saja sendiri!"

Sekarang

"Hai Boss, kami menulis ulang situs web kami dengan AMP, ini adalah teknologi baru dari Google …"
"Tinggalkan semuanya! Di sini, ambil $$$"
"Bisa juga meningkatkan …"
"Aku tidak peduli, dapatkan ini SEKARANG!

Saya tidak mengatakan bahwa praktik yang dipromosikan oleh AMP itu buruk atau tidak berguna. Mereka adalah praktik yang baik. Tetapi tidak ada yang menghalangi Anda untuk mengikuti mereka di situs web biasa. Tidak ada yang menghalangi Anda menulis halaman kinerja, dari awal mula web. Google baru saja menemukan CDN dan memuat skrip asynchronous. Tetapi tidak ada yang peduli karena teknologi lama dan praktik yang baik tidak pernah semanis sesuatu yang memenuhi syarat sebagai "baru".

Masukkan PWA. Aplikasi web progresif. Atau Aplikasi. Aplikasi web progresif. Terserah.

Jadi idenya adalah untuk menciptakan pengalaman yang mirip dengan yang asli tetapi dengan web stack. Apa yang hilang dari web? Memasang aplikasi Mode offline Notifikasi (Ew). Bekerja di latar belakang. Ya, itu pada dasarnya. Itu dia

Sekali lagi, saya tidak akan mengatakan bahwa hal-hal ini salah. Mereka tidak. Jika Anda ingin membuat aplikasi yang mirip dengan yang asli menggunakan teknologi web, Anda harus menggunakan sesuatu seperti itu. Dan apakah masuk akal untuk aplikasi seperti daftar belanja atau, saya tidak tahu, jam alarm?

Masalah dengan PWA adalah, yah, ada dua masalah.

Pertama, sebagian besar aplikasi akan lebih baik sebagai situs web daripada sebagai aplikasi. Situs web memuat setiap sumber daya secara bertahap, sesuai kebutuhan, tidak seperti aplikasi yang harus memulihkan semuanya di instalasi (itulah mengapa ukuran paket aplikasi biasanya jauh lebih besar daripada situs web). Situs-situs tersebut lebih efisien, tetapi Anda tidak dapat menggunakannya tanpa koneksi.

Tetapi sebagian besar "aplikasi" saat ini hanya online! Anda tidak dapat memanggil Uber saat offline, mengapa Anda membuka aplikasi Uber dengan cara lain? Tinder tidak berguna secara offline. Anda tidak dapat tanggal layar obrolan kosong. Anda tidak dapat bergabung dengan Meetup.com Meetup tanpa koneksi jaringan. Anda tidak dapat memilih atau memesan hotel, Anda tidak dapat mentransfer uang atau memeriksa saldo akun Anda secara offline. Dan tidak ada yang ingin membaca ulang tweet cache Twitter lama atau foto Instagram kemarin. Itu tidak masuk akal.

Jadi ya, saya lebih suka "aplikasi" itu menjadi situs web saja. Percaya atau tidak, ada manfaatnya. Saya menikmati ukuran unduhan yang lebih kecil, terutama jika saya mengunjungi situs sesekali hanya untuk melihat sekilas. Saya suka bahwa situs web tidak mengkonsumsi sumber daya saya di latar belakang. Ketika saya menutupnya, ia mengunduh dan tidak secara konstan mengunduh versi baru dari pustakanya sendiri, yang perlu sering digunakan pengembang. Saya lebih dari siap mengorbankan mode offline untuk itu.

Masalah kedua dengan PWA, dan lebih relevan dengan topik kami, adalah bahwa hal itu entah bagaimana terkait dengan kinerja.

Masalahnya adalah tidak ada hubungannya dengan kinerja. Saya tidak berarti apa-apa baru. Dia selalu dapat menyimpan sumber daya untuk membuat navigasi di antara halaman dengan cepat, dan browser sangat bagus dalam melakukannya. Dengan HTTP / 2 Anda dapat secara efisien memperoleh sumber daya dalam jumlah besar dan bahkan mentransfer sumber daya server untuk pengalaman "lebih instan".

Oleh karena itu, mengelola cache sumber daya, di ServiceWorker, tampaknya lebih menjadi beban daripada berkah. Caching HTTP juga deklaratif, terbukti dengan baik dan dipahami dengan baik pada titik ini, dengan kata lain, sulit untuk merusak. Apa yang tidak bisa Anda katakan tentang ServiceWorker Anda. Caching adalah salah satu dari dua hal yang paling sulit dalam Komputasi. Saya pribadi memiliki pengalaman buruk dengan Meetup.com PWA ketika kesalahan dalam kode cache membuat seluruh situs tidak dapat digunakan ke titik di mana tidak akan membuka halaman pertemuan. Dan tidak seperti HTTP, tidak semudah itu diatur ulang. Tidak, pembaruan tidak membantu.

Tapi itu akan baik-baik saja jika ServiceWorker adalah kompensasi: Anda membayar biaya kompleksitas tetapi mendapatkan kemampuan baru yang menarik. Kecuali kamu tidak. Tidak ada yang berguna yang dapat Anda lakukan dengan ServiceWorker yang tidak dapat Anda lakukan dengan cache HTTP / AJAX / REST / Penyimpanan Lokal. Ini hanyalah sebuah lubang kerumitan di mana Anda akan menghabiskan banyak jam kerja.

PWA, serta AMP, bahkan tidak menjamin bahwa situs web Anda dekat dengan "cepat" atau "instan". Agak lucu bagaimana kasus studi Tinder menunjukkan bahwa layar masuk (entri teks, tombol, logo SVG dan gradien latar belakang) membutuhkan waktu 5 detik untuk dimuat ke koneksi 4G! Maksud saya, mereka harus menambahkan pengisi daya selama 2 hingga 5 detik agar pengguna tidak langsung menutup omong kosong ini. Dan mereka menyebutnya dengan cepat.

Ini cepat:

Bagaimana mereka melakukannya? Untuk bercinta khawatir tentang kinerja. Sesederhana itu.

Ah, miliaran paket JavaScript tidak ditawarkan dan tidak diproses dalam klien dengan React yang disajikan melalui GraphQL melalui fungsi polyfill. Itu mungkin membantu juga.

ServiceWorker atau AMP, jika halaman landing Anda memiliki lebih dari 170 permintaan 3,1 Mb untuk gambar dan empat kolom formulir, itu tidak dapat dimuat dengan cepat, terlepas dari berapa banyak bingkai baru yang Anda luncurkan.

Jadi, apa putusannya? Untuk menulis situs web cepat dengan AMP dan PWA, Anda masih harus sepenuhnya memahami optimalisasi kinerja. Tanpa itu, satu-satunya pilihan yang Anda miliki adalah pergi dengan berlebihan.

Tetapi ingat bahwa baik AMP maupun PWA akan secara ajaib membuat situs web Anda lebih cepat daripada penulisan ulang yang sederhana.

Halaman indeks Airbnb 800Kb yang terkenal. Saya mengharapkan lebih banyak perhatian dari lebih dari 900 pengembang dengan gaji rata-rata $ 290.000 / tahun. Bahkan SublimeText berhenti menyorot omong kosong ini di beberapa titik.

Namun, setelah Anda memahami kinerjanya, Anda akan melihat bahwa Anda tidak memerlukan AMP atau PWA. Berhenti melakukan omong kosong dan web tiba-tiba mulai bekerja secara instan. AMP tidak menemukan CDN dan

"Tapi para pengguna! Mereka menginginkan interaktivitas fantasi kita. PERMINTAAN PERMINTAAN!

Aku akan memberitahumu satu hal Tidak ada yang suka menonton layar pemuatan selama 5 detik. Pengisi daya yang sedang animasi tidak ada bedanya. Jika Anda tidak dapat melihat kinerja, setidaknya jangan berpura-pura itu adalah fitur.

Hai!

Saya Nikita. Di sini saya menulis tentang pemrograman dan desain antarmuka pengguna. Berlangganan

Saya juga membuat hal-hal open source: Fira Code, AnyBar, DataScript dan Rum. Jika Anda menyukai apa yang saya lakukan dan ingin mendapatkan akses ke artikel saya lebih awal (bersama dengan manfaat lain), Anda harus mendukung saya di Patreon.

Be the first to comment

Leave a Reply

Your email address will not be published.


*