❣️ 🏵️ 👨🏿 Pemuatan halaman cepat pada ponsel murah yang paling sederhana 🏂🏾 🥠 🚵🏾

Telepon-telepon yang disebut dalam judul, dalam bahasa Inggris disebut "telepon fitur". Mereka berbeda dalam kemampuan yang sangat sederhana. Selain itu, mereka sangat terjangkau, karena biayanya sekitar $ 20-25. Mereka dapat dibandingkan dengan versi lite dari smartphone modern. Ponsel ini memungkinkan ratusan juta orang dari negara berkembang untuk menggunakan sumber daya web.

Jio Phone

Jika situs ini didasarkan pada teknologi yang bertujuan untuk memastikan kecepatan tinggi kerjanya, maka semua orang akan mendapat manfaat darinya - baik pemilik ponsel murah dan mereka yang menonton halaman web dari smartphone yang kuat dan baru.

Tinjauan situasi

Perangkat yang kita bicarakan, ponsel fitur, tidak mahal. Oleh karena itu, mereka memiliki kemampuan perangkat keras yang agak lemah. Jadi, mereka menggunakan CPU lambat (misalnya, prosesor ponsel murah bisa 6 kali lebih lambat dari prosesor smartphone teratas). Mereka memasang sangat sedikit RAM (mungkin ada sesuatu di wilayah 256-512 MB, biasanya kurang dari 4 GB). Hal yang sama berlaku untuk jumlah memori internal untuk menyimpan data, yang biasanya tidak melebihi 4 GB. Ponsel seperti itu seringkali tidak memiliki layar sentuh. Sebagai gantinya, mereka memiliki keyboard dan joystick sederhana yang digunakan untuk keperluan navigasi. CDpv menunjukkan bagaimana tampilan ponsel yang mirip.

Ponsel-ponsel ini tidak dapat mengeksekusi kode JavaScript secepat smartphone canggih. Sulit bagi mereka untuk menampilkan situs yang berisi banyak data media. Oleh karena itu, mempersiapkan halaman yang akan berfungsi dengan baik pada ponsel tersebut, Anda harus secara bertanggung jawab mendekati masalah mengisi halaman-halaman ini.

10 smartphone modern teratas: kinerja prosesor (paruh pertama tahun 2019)

Di atas adalah hasil studi kinerja 10 smartphone terlaris pada tahun 2019. Studi ini dilakukan dengan menggunakan patokan Geekbench 4. Di sini, di bagian atas, Anda dapat melihat hasil tes dari telepon murah yang populer - Nokia 3110.

Konten JavaScript halaman dieksekusi terutama dalam mode single-core (di sini perlu diingat bahwa kode JS, pada dasarnya, jauh lebih "single-threaded" dari sisa konten web), oleh karena itu kinerja JavaScript terkait dengan kemampuan prosesor. Ini menunjukkan bahwa ketika memikirkan proyek web untuk negara berkembang, Anda perlu mengingat karakteristik perangkat yang digunakan di sana.

Materi ini bertujuan untuk memecahkan masalah pengembangan situs untuk perangkat yang lambat. Penerapan teknik yang dijelaskan di dalamnya memungkinkan Anda membuat situs yang nyaman untuk digunakan semua orang - tidak peduli seberapa tinggi kinerja ponsel mereka.

Informasi umum

Mungkin Anda ingat ini, mungkin tidak, tetapi telepon yang kita sebut telepon fitur itu populer hingga pertengahan 2000-an, sebelum munculnya dan meluasnya penggunaan smartphone. Ini adalah perangkat kompak dengan keyboard, bukan layar sentuh. Mereka hanya memiliki fungsionalitas dasar: melakukan panggilan, mengirim SMS, menjelajahi situs web, fokus pada konten teks halaman. Sejak munculnya smartphone, jumlah ponsel sederhana di negara maju telah menurun.

Di negara berkembang, tidak semua orang mampu membeli smartphone dan tarif 4G tanpa batas. Pasar ini telah diambil alih oleh perangkat yang disebut ponsel fitur cerdas. Mereka menggabungkan perangkat keras dan harga ponsel sederhana dengan beberapa fitur khusus untuk smartphone.

Ponsel murah

Pasar ponsel murah dengan kemampuan smartphone telah tumbuh secara signifikan sejak 2017. Diharapkan pada 2019 sekitar 400 juta perangkat seperti itu akan dijual di seluruh dunia.

Pertumbuhan pasar ponsel murah difasilitasi oleh fakta bahwa Nokia menghidupkan kembali model lama yang populer, seperti Nokia 3110 dan 8110 ( inilah panduan untuk debugging halaman web pada Nokia 8110 dengan KaiOS). Di India, ponsel Reliance Jio memberi penggunanya akses seluler murah, namun modern ke sumber daya web. Jio telah berkontribusi pada pengembangan KaiOS , sistem operasi berbasis Linux yang dirancang untuk ponsel terjangkau sederhana.

Pasar yang berkembang untuk ponsel sederhana telah menciptakan kebutuhan akan situs yang dapat bekerja secara efektif pada perangkat tersebut. Untuk mengembangkan situs semacam itu, Anda perlu mempertimbangkan beberapa batasan.

Berbagai proyek dirancang untuk ponsel murah

Gambar sebelumnya menunjukkan layar proyek Google Images Lite dan Facebook mBasic. Proyek-proyek ini dimuat dengan cepat pada ponsel sederhana, mereka mengandalkan kemampuan skrip klien seminimal mungkin. Tangkapan layar lain adalah gim Proxx , yang, meskipun sangat bergantung pada skrip, menggunakan pemisahan kode yang agresif untuk mempercepat pemuatan.

Keterbatasan Ponsel Murah

Pengguna telepon kelas bawah di negara berkembang dibatasi oleh tiga faktor:

Sejumlah kecil perangkat berkualitas tinggi yang murah.
Tidak dapat diaksesnya jaringan komunikasi berkecepatan tinggi.
Biaya transfer data tinggi.

Batasan ini harus diingat bagi mereka yang ingin mendengarkan persepsi pengembangan web melalui "prisma fitur telepon". Jika kita berbicara lebih terinci tentang batasan ponsel dan lingkungan tempat mereka digunakan, kita mendapatkan yang berikut:

Perangkat keras Ponsel sederhana biasanya memiliki prosesor single-core atau dual-core lebih lambat (sekitar 1,1 GHz) dan RAM kurang dari 512 MB. Untuk memahami bagaimana ini membatasi kemampuan perangkat, bandingkan ini dengan prosesor multi-core dan 4 GB RAM iPhone XS.
Transfer data. Paket seluler semakin murah, tetapi di wilayah di mana telepon murah dapat didistribusikan, paket itu masih sangat terbatas. Ini berarti bahwa ketika mengembangkan halaman yang dirancang untuk ponsel berfitur, Anda harus berusaha untuk mengurangi sebanyak mungkin jumlah data yang terdiri dari halaman-halaman ini. Ini akan memungkinkan situs, pertama, memuat lebih cepat, dan kedua, mengurangi biaya mengunjungi situs tersebut untuk pengguna.
Ukuran layar terbatas. Ukuran layar ponsel murah biasanya jauh lebih kecil dari ukuran layar smartphone. Kita berbicara tentang layar dengan diagonal sekitar 2,4 inci. Layar semacam itu memungkinkan Anda untuk menampilkan hanya sejumlah elemen yang sangat terbatas. Ini berarti bahwa pengembang situs harus berusaha mengunduh apa yang akan ditampilkan di layar sesegera mungkin.
Kurangnya layar sentuh. Jika perangkat tidak dilengkapi dengan layar sentuh, ini berarti segala sesuatu yang dapat berinteraksi dengan pengguna harus mudah diakses saat bekerja dengan halaman menggunakan keyboard. Anda seharusnya tidak menampilkan terlalu banyak elemen pada halaman yang dapat Anda gunakan.
Keyboard Pada ponsel murah, keyboard perangkat keras digunakan, yang sama sekali berbeda dari keyboard QWERTY di layar yang biasa bagi pemilik ponsel cerdas. Keyboard perangkat keras memiliki sekitar 15 tombol, dengan beberapa kali penekanan tombol digunakan untuk memasukkan beberapa karakter. Akibatnya, ternyata dalam hal UX perlu berusaha untuk meminimalkan kebutuhan input teks.

Perlu dicatat bahwa bahkan di Jepang, rencana tarif terbatas memengaruhi kegunaan pengguna dengan sumber daya web.

Waktu pemuatan halaman untuk perangkat 4G di Jepang

Di atas adalah gambar dari tweet ini , yang mengatakan bahwa di Jepang pada akhir bulan, halaman memuat lebih lambat karena pembatasan rencana tarif.

Pedoman Desain Situs Web

Pedoman berikut dapat membantu Anda mendesain situs yang akan bekerja dengan cepat pada ponsel sederhana dan murah. Secara umum, dapat dicatat bahwa tidak disarankan agar pengguna menunggu unduhan sesuatu yang tidak dia minta secara eksplisit. Sedapat mungkin, Anda harus berusaha untuk mengurangi waktu yang diperlukan untuk memuat dan menjalankan kode JavaScript.

▍ Tetapkan batas jumlah data yang ditransfer saat Anda pertama kali memuat situs

Dalam perjalanan dari server ke klien, setiap byte halaman Anda melewati banyak kemacetan. Ini adalah jaringan yang lambat dan tidak dapat diandalkan, ini adalah prosesor yang lambat. Satu-satunya cara dijamin untuk meningkatkan kinerja halaman adalah dengan ketat merencanakan volume mereka dan untuk memenuhi (dan bahkan memenuhi) rencana.

Sasaran kinerja halaman ditetapkan oleh kendala yang berusaha dikembangkan tim pengembangan untuk memberikan kinerja yang layak untuk proyeknya. Ini adalah batasan metrik yang diputuskan untuk tidak dilampaui. Menetapkan batasan pada indikator yang dapat diukur, dan mengatur batasan yang dibuat sebelum dimulainya pekerjaan membantu tim untuk memastikan bahwa kinerja proyek berada dalam kerangka yang diberikan ketika fitur baru ditambahkan ke dalamnya.

Contoh metrik sumber daya yang dapat dibatasi meliputi ukuran bundel JavaScript, ukuran gambar dalam byte, dan jumlah permintaan HTTP. Keterbatasan pada metrik yang memengaruhi cara pengguna melihat halaman dapat diatur untuk metrik seperti cat konten pertama , cat konten terbesar, atau penundaan input pertama . Mereka memungkinkan Anda untuk mengevaluasi seberapa cepat pengguna melihat halaman, dan seberapa cepat dia dapat berinteraksi dengannya. Anda dapat menetapkan nilai ambang untuk indikator tersebut, berdasarkan karakteristik audiens target situs.

Anda dapat mengembangkan sistem pembatasan terkait kode aplikasi Anda sendiri, serta mengenai skrip pihak ketiga dan hal-hal lain seperti itu. Kendala dapat diperiksa selama pembangunan proyek , menggunakan Mercusuar (LightWallet), dalam sistem integrasi berkelanjutan .

▍ Gunakan pola PRPL

PRPL adalah pola yang direkomendasikan oleh tim pengembangan Chrome untuk pentahapan unduhan kode. Ini dirancang untuk memastikan bahwa aplikasi yang menggunakannya menjadi interaktif secepat mungkin pada perangkat berbiaya rendah dan jaringan yang lambat. Pola PRPL mendorong preloading jumlah minimum kode JS yang diperlukan untuk membuat halaman berfungsi. Sumber daya kemudian dimuat menggunakan teknik lazy loading. Jika perlu, Anda dapat menggunakan pekerja layanan untuk melakukan pra-cache sumber JavaScript yang diperlukan untuk interaksi di masa mendatang dengan situs.

Pola PRPL-50 menetapkan batas jumlah sumber daya yang dimuat awalnya sama dengan 50 Kb. Karena ponsel murah memiliki sumber daya perangkat keras yang sangat sederhana, Anda perlu menetapkan batasan yang lebih ketat. Di sini saya akan menyarankan Anda untuk mempertimbangkan pola PRPL-30. 30 adalah 30 Kb sumber daya sumber, ini adalah ukuran bundel terkompresi dan diperkecil yang dimuat pada halaman pertama.

Contoh alokasi ruang dalam bundel JS 30 Kb. Ini termasuk logika aplikasi, kode kerangka kerja, utilitas pembantu, dan dependensi pihak ketiga

Dengan pendekatan ini, byte pertama materi situs dari server caching perbatasan yang baik, setelah prosedur koneksi SSL selesai, akan tiba pada perangkat dalam waktu sekitar 2 detik. Ini memberi kita 3 detik untuk mengunduh materi dari rute asli, menampilkannya, dan menyiapkan halaman untuk interaksi pengguna. Untuk proyek berdasarkan JavaScript, ini berarti bahwa ukuran total bundel yang diperkecil dan dikompresi yang dimuat pada output halaman pertama tidak boleh melebihi 30 Kb.

Menggunakan pola PRPL-30 memungkinkan pengembang untuk membawa halaman ke mode interaktif pada ponsel murah dalam waktu sekitar 5 detik

Mungkin ini akan mengejutkan seseorang: “Apa yang kita bicarakan? Ukuran bundel asli 30 Kb? Ini aneh. Bagaimanapun, saya bahkan tidak akan cocok Bereaksi dan kode aplikasi ke dalam volume ini! ”Perlu dicatat bahwa ketika mengembangkan situs yang dirancang untuk perangkat yang benar-benar lemah, pencipta proyek, demi kenyamanan pengguna, harus membuat kompromi yang sulit. Misalnya, Bereaksi dapat digunakan untuk situs telepon fitur baik jika penggunaan Bereaksi terbatas pada server rendering (1), yang terdengar cukup masuk akal, atau jika (2) fragmen kode yang berisi logika aplikasi sangat, sangat kecil dan ini jika dalam persiapan mereka akan menerapkan aturan pemuatan malas yang paling parah. Ada opsi ketiga - pilih analog Bereaksi ringan seperti Preact (3). Kami akan berbicara lebih banyak tentang kompromi di bawah ini.

Contoh aplikasi yang dibuat menggunakan batas 30 Kb adalah Proxx . Kumpulan data proyek awal memiliki ukuran 25 Kb, berbeda dengan indikator TTI (Time To Interactive), yaitu kurang dari 5 detik. Berikut ini adalah kalkulator yang dapat Anda gunakan untuk menemukan target untuk proyek web dan untuk memilih batasan Anda sendiri.

Ukuran yang disarankan untuk rute yang dimuat dalam mode malas tidak melebihi 35 Kb. Tapi "fragmen", yang ukurannya berada di kisaran 30-35 Kb, juga cukup besar untuk berbicara tentang pemrosesan paralel mereka menggunakan kemampuan V8 untuk streaming bekerja dengan skrip.

▍ Simpan sumber daya JavaScript

Jika kita berbicara tentang menghemat sumber daya JavaScript secara singkat, ternyata Anda dapat menggunakan rendering statis atau rendering server dengan keterlibatan minimal skrip klien. Jika benar-benar mustahil dilakukan tanpa rendering klien atau hibrid, maka hanya skrip yang diperlukan untuk rute tertentu yang harus dikirim ke klien, dan lebih baik melakukannya untuk sesedikit mungkin sesi transfer data. Di sini Anda dapat mempertimbangkan teknik-teknik seperti persiapan progresif halaman untuk bekerja di browser .

Render statis

JavaScript adalah hambatan utama dari ponsel sederhana

Saat mengembangkan proyek interaktif untuk ponsel murah, perlu diketahui bahwa JavaScript biasanya merupakan batu sandungan utama untuk kinerja halaman yang tinggi. Ini penting, karena seberapa cepat pengguna dapat menggunakannya tergantung pada bagaimana diputuskan untuk membuat halaman . Bahkan jika dia bekerja dengan mereka menggunakan joystick ponsel. Jika Anda memutuskan untuk menggunakan rendering sisi-server atau statis, coba agar jumlah kode JS yang diperlukan untuk mengatur pekerjaan interaktif halaman sekecil mungkin.

Entri URL; memuat hasil rendering server; memuat kode JavaScript yang diperlukan untuk membawa halaman ke mode interaktif; halaman siap untuk interaksi pengguna

Harga JavaScript terdiri dari dua indikator: waktu buka dan waktu eksekusi kode. Jaringan yang lambat (misalnya, koneksi 3G yang stabil) dapat meningkatkan waktu boot JS. Prosesor yang lambat akan meningkatkan waktu yang diperlukan untuk menjalankan skrip. Gambar berikut menunjukkan waktu yang diperlukan untuk berbagai perangkat untuk memproses kode JavaScript sumber daya reddit.com yang populer. Sangat mudah untuk melihat bahwa perangkat yang lambat (Alcatel 1X 5059D) membutuhkan waktu 6 kali lebih banyak daripada yang cepat (Pixel 3).

Waktu yang diperlukan untuk berbagai perangkat untuk memproses kode JS situs populer

Jika rendering halaman atau proses membawanya ke mode interaktif sangat tergantung pada JavaScript, ini dapat mengarah pada fakta bahwa pengguna ponsel yang murah harus menunggu 30-60 detik hanya untuk mendapatkan kesempatan untuk bekerja dengan antarmuka pengguna. Akibatnya, untuk meminimalkan waktu yang diperlukan untuk memuat dan memproses JavaScript, pengembang harus menggunakan skrip dengan hemat dan mengunduh kode hanya untuk rute dan komponen yang mungkin diperlukan pengguna. Anda perlu melakukan ini ketika ada kebutuhan untuk kode yang sesuai.

Berusaha untuk meminimalkan jumlah kode yang diperlukan untuk membawa halaman secara interaktif

Berikut adalah beberapa tips untuk membantu meminimalkan jumlah kode yang Anda butuhkan untuk menyediakan fitur interaktif halaman Anda:

Gunakan mekanisme lazy loading seluas mungkin. Kita berbicara tentang rute, komponen, tentang sumber daya yang berada di luar area layar yang terlihat, tentang apa yang tidak bisa disebut sangat penting untuk memastikan kesehatan halaman.
Gunakan mekanisme pemisahan kode untuk memecah kode JavaScript menjadi beberapa bagian dan untuk mengunduh hanya apa yang dibutuhkan pengguna saat bekerja dengan rute awal. Ini akan menyebabkan pemuatan halaman yang lebih cepat dengan mengurangi jumlah skrip yang dimuat dan diproses.
Hapus kode yang tidak digunakan dari bundel JavaScript untuk mengurangi ukurannya sebanyak mungkin. Untuk melakukan ini, Anda perlu menganalisis bundel dan mengidentifikasi perpustakaan yang tidak digunakan sama sekali, dan yang dapat diganti dengan sesuatu yang lebih kompak, disesuaikan dengan kebutuhan proyek Anda. Perpustakaan yang tidak digunakan saat halaman pertama kali dimuat dapat dimuat dalam mode malas.
Pertimbangkan untuk menggunakan mekanisme pemuatan kode diferensial . Ini akan memungkinkan Anda untuk memberikan kode JavaScript modern ke peramban modern, menyingkirkan penggunaan berlebihan kode transkrip dan menghindari polyfill. Mengurangi kode untuk browser lama dapat meningkatkan kinerja kode di browser modern.
Jika kode JS benar-benar diperlukan untuk merender halaman dan untuk menampilkan antarmuka dalam mode interaktif, atur pemuatan awal dari skrip yang diperlukan. Atribut yang sesuai, seperti yang ditunjukkan di bawah ini, memberi tahu browser bahwa skrip itu penting dan perlu diunduh secepat mungkin.

<link rel="preload" as="script" href="critical.js">

▍ Dengan bijaksana pilih tumpukan teknologi yang digunakan

Kerangka dan Utilitas

Sementara penggunaan perpustakaan pihak ketiga dapat mempercepat pengembangan dan menyederhanakan solusi masalah yang kompleks, perpustakaan dapat memiliki ukuran yang cukup besar. Mereka harus digunakan dengan hati-hati ketika mengembangkan proyek yang dirancang untuk perangkat yang lemah. Berikut adalah beberapa panduan untuk menggunakan dependensi eksternal:

Ponsel murah sangat terbatas sumber dayanya. Karena itu, jika memungkinkan, hindari menggunakan kerangka kerja JS atau batasi penggunaannya. Tujuan dari tip ini adalah untuk meninggalkan ruang sebanyak mungkin untuk logika aplikasi. Dalam situasi di mana pengembang berupaya membatasi penggunaan JavaScript untuk mengurangi ukuran halaman dan meningkatkan kinerjanya, kerangka kerja JS dapat membebani halaman secara berlebihan. Jika proyek didasarkan pada Bereaksi, pertimbangkan membatasi penggunaan perpustakaan ini untuk rendering server, atau pertimbangkan beralih ke Preact dan menggunakan preact-compat saat membangun untuk mengurangi ukuran bundel sekitar 30 Kb. Demi membuat bungkusan ringan, masuk akal untuk melihat teknologi seperti Svelte , lit-html, dan JavaScript biasa.
Cobalah untuk memastikan bahwa dependensi pihak ketiga mengambil ruang sesedikit mungkin. Ini akan memastikan bahwa ukuran bundel yang digunakan selama pemuatan awal halaman sesuai dengan batas yang ditentukan. Untuk menganalisis kontribusi terhadap ukuran bundel yang dibuat oleh perpustakaan pihak ketiga, Anda dapat menggunakan bundlephobia.com . Analisis secara kritis komposisi bundel Anda untuk menentukan apakah ruang mereka digunakan secara efisien. Sebagai contoh, alih-alih perpustakaan Moment.js, yang berisi, dalam bentuk standar, sejumlah besar data yang terkait dengan standar nasional, Anda dapat menggunakan date-fns atau luxon .
Berhati-hatilah saat menggunakan Redux dan repositori bawaan Redux yang digunakan untuk mengelola kesehatan aplikasi. Data repositori redux sering tertanam dalam HTML sehingga dapat digunakan untuk membuat halaman operasional. Ini dengan mudah dapat menyebabkan peningkatan berlebihan dalam ukuran data yang dikirim oleh server sebagai tanggapan terhadap permintaan klien.

▍Mengadaptasi bahan situs agar tidak memuat sumber daya yang besar pada koneksi yang lambat

Segera saya ingin menyarankan Anda untuk melihat materi ini pada adaptasi sumber daya berdasarkan perangkat yang lemah.

Pemuatan sumber daya adaptif tergantung pada kecepatan koneksi jaringan

Pemuatan sumber daya adaptif adalah teknik "mengadaptasi" bahan yang dikirim kepada pengguna berdasarkan informasi tentang jenis koneksi efektif (ECT) yang tersedia untuk browser melalui API Informasi Jaringan . Begini tampilannya bekerja dengan API ini:

 console.log(navigator.connection.effectiveType); // 3G

Pemuatan adaptif memungkinkan situs untuk memastikan bahwa pengguna yang bekerja pada koneksi lambat bisa mendapatkan pengalaman hampir sama berinteraksi dengan sumber daya seperti pengguna yang memiliki akses ke jaringan yang lebih cepat. Mungkin pada versi "lambat" dari situs semuanya tidak akan seindah pada yang "cepat", tetapi ini adalah pembayaran yang dapat diterima untuk kinerja yang baik.

Harap dicatat bahwa bahkan pada koneksi 4G "cepat", pengguna dapat menemukan kecepatan transfer data yang rendah. Mungkin Anda pernah bertemu dengan hal seperti ini, menggunakan Internet WiFi di restoran atau di beberapa konferensi.

Pertimbangkan contoh spesifik menggunakan pemuatan material adaptif. Ini akan mengenai komponen yang mewakili produk tertentu di situs. Seorang pengguna yang bekerja pada koneksi yang lambat akan melihat versi terkompresi dari gambar produk. Dan siapa pun yang pergi ke Internet dengan kecepatan tinggi akan melihat gambar berkualitas tinggi, dan, di samping itu, akan dapat menggunakan fitur tambahan yang membutuhkan banyak kode JavaScript untuk diimplementasikan. Misalnya - ini adalah kemampuan untuk meningkatkan citra produk, atau melihat, dalam "korsel", berbagai foto produk.

Dalam kasus telepon murah, jaringan yang lambat belum tentu menjadi hambatan utama untuk mengirim sumber daya massal kepada mereka. Tayangan pengguna untuk bekerja dengan situs ini kemungkinan besar akan dipengaruhi oleh prosesor yang lambat dan kapasitas memori yang rendah - bahkan jika perangkat terhubung ke jaringan 4G yang cukup cepat. Meskipun pengembang web belum memiliki akses ke informasi terperinci tentang prosesor, kiat klien memberikan perkiraan informasi tentang memori perangkat, tentang lebar dan kerapatan piksel layar, tentang jaringan, dan tentang beberapa hal lainnya. Informasi ini dapat digunakan untuk mengembangkan strategi yang lebih akurat untuk mengirimkan data yang dioptimalkan kepada klien.

▍ Hormati paket tarif pengguna, dengan mempertimbangkan konten tajuk Simpan-Data

Browser Chrome untuk Android memiliki opsi khusus yang mencakup menyimpan data. Ini memungkinkan pengguna yang tertarik untuk menghemat lalu lintas bekerja dalam mode di mana browser secara otomatis mengoptimalkan sumber daya, mencoba mempercepat pemuatan halaman. Optimasi mencakup lebih dari kompresi gambar biasa, menunda pemuatan sumber daya yang tidak kritis, menghasilkan gambar server untuk mempratinjau halaman. Berikut adalah bahan di mana Anda dapat menemukan detail tentang ini.

Ketika pengguna mengaktifkan mode hemat data di browser yang mendukung mode ini, browser melampirkan header Simpan-Data ke permintaan HTTP dan HTTPS. Pengembang proyek web dapat, menggunakan JavaScript, memeriksa apakah permintaan memiliki judul seperti itu dan, jika demikian, dapat memberikan pengguna versi yang dioptimalkan dari materi situs. Akibatnya, ternyata pengguna sengaja meninggalkan peluang "keras", dan pengembang hanya memenuhi keinginannya. Untuk memeriksa tajuk Simpan-Data dalam permintaan, Anda dapat menggunakan sesuatu seperti kode ini:

 if ("connection" in navigator) {  if (navigator.connection.saveData === true) {    //  ,    .  } }

Inilah yang berfungsi dengan versi halaman lite.

Versi ringan dari halaman yang disiapkan oleh Google

Harap perhatikan bahwa meskipun ponsel murah dan sederhana dapat mendukung Chrome, ini tidak menjamin ketersediaan mode hemat data di browser. Yang terbaik adalah mempertimbangkan fitur ini sebagai sesuatu seperti fungsionalitas opsional opsional dari beberapa browser.

▍ Tarik logika sumber daya intensif dan mekanisme manajemen status aplikasi ke dalam pekerja web

Berikut adalah beberapa bahan yang bagus untuk menemukan tips mempercepat pemuatan aplikasi web pada ponsel yang lemah.

Utas peramban utama, selain mengeksekusi JavaScript, sibuk dengan hal-hal penting lainnya. Ini adalah pembentukan tata letak halaman, tampilan piksel pada layar, memastikan interaksi pengguna dengan halaman. Operasi JavaScript yang panjang dan kompleks dapat memblokir utas utama, yang berarti mengganggu laman.

Pekerja web memungkinkan Anda untuk menjalankan kode JavaScript di latar belakang dan tidak memblokir utas. Mereka harus digunakan untuk menghapus beban yang dibuat oleh operasi JavaScript "berat" dari utas utama. Diantaranya adalah logika kompleks aplikasi web dan manajemen negara mereka. Utas utama dan informasi pertukaran utas pekerja menggunakan fungsi postMessage () dan pengendali event onmessage . Fungsi postMessage() memungkinkan pengirim untuk mengirim nilai ke penerima, yang bisa, misalnya, objek JavaScript. Ada perpustakaan seperti Comlink yang membuatnya lebih mudah untuk menggunakan pekerja web.

Berikut adalah materi di mana pekerjaan proyek Proxx dipelajari dengan menggunakan aliran pekerja dan tanpa mereka. Selama penelitian, ditemukan bahwa tanpa menggunakan pekerja, aplikasi yang melakukan operasi tertentu "membeku" pada ponsel Nokia 2 (memori 1 GB, prosesor quad-core dengan frekuensi 1,3 GHz) selama 6,6 detik. Di bawah kondisi yang sama, tetapi dengan penggunaan pekerja, waktu reaksi sistem hanya 48 ms. Akibatnya, jika Anda memiliki kode yang memerlukan sumber daya prosesor serius, Anda harus mempertimbangkan apakah porting ke pekerja web akan memperbaiki situasi.

▍ Optimalkan gambar

Gambar sering kali memiliki jumlah data yang sangat besar terkait dengan halaman web. Namun, gambar tidak hanya perlu diunggah. Mereka masih perlu diterjemahkan, disiapkan untuk output, dan ini dapat memuat perangkat berdaya rendah. Akibatnya, untuk pengembangan situs yang dirancang untuk telepon yang lemah, penting untuk berusaha memastikan bahwa gambar yang digunakan di situs ini memiliki ukuran yang sesuai dan dikompresi dengan tepat. Berikut ini beberapa saran untuk pengoptimalan gambar:

Kompres gambar menggunakan alat seperti Imagemin. Mereka memungkinkan Anda mencapai pengurangan ukuran gambar tanpa penurunan nyata dalam kualitasnya.
Ganti GIF animasi dengan file video yang memuat lebih cepat. Tapi, ketika datang ke video, ada baiknya mempertimbangkan apakah media berat diperlukan di situs yang dirancang untuk ponsel murah sederhana.
Gunakan kapan pun dimungkinkan mekanisme pemuatan gambar yang malas. Karena mekanisme tersebut didasarkan pada JavaScript, cobalah untuk memastikan bahwa implementasi perangkat lunak mereka tidak terlalu "berat". Di sini Anda dapat menemukan atribut pemuatan standar baru yang bermanfaat.
Kirim gambar responsif dengan ukuran yang tepat kepada pelanggan. Ini dapat dilakukan dengan membuat banyak versi gambar dan memberikan klien yang paling cocok untuk layarnya.
Gunakan gambar yang sesuai dengan layar. Output dari gambar kecil yang cukup dikompresi ke pengguna yang bekerja pada ponsel yang lemah akan mengarah pada fakta bahwa gambar tersebut akan lebih cepat untuk diterjemahkan.

▍ Berikan sumber daya klien yang cocok dengan ukuran layar perangkat

Banyak perangkat modern yang dapat diklasifikasikan sebagai "telepon fitur pintar" memiliki layar QVGA dengan resolusi 320x240 piksel, masing-masing, secara horizontal dan vertikal. Jika Anda perlu mengetahui ukuran layar perangkat saat memuat halaman (misalnya, untuk menggunakan optimasi tertentu), Anda dapat menggunakan sesuatu seperti fragmen kode ini:

 const isFeaturePhone = Math.min(screen.width, screen.height) <= 240;

Pendekatan serupa digunakan dalam proyek Proxx.

▍ Situs uji pada perangkat nyata atau di emulator

Jika Anda mengembangkan situs yang dirancang untuk ponsel murah sederhana, disarankan untuk mengujinya di ponsel tersebut. Mereka tidak mahal. Misalnya, tweet yang mengatakan bahwa pengembang yang tinggal di AS dan ingin menguji situs mereka pada perangkat KaiOS disarankan untuk mengunjungi BestBuy dan mendapatkan ponsel seharga $ 15.

Ponsel murah untuk menguji situs di KaiOS

Jika Anda ingin meniru telepon yang serupa (misalnya, sesuatu seperti telepon Jio yang berjalan di KaiOS), Anda dapat menggunakan alat pengembang Chrome untuk ini:

Buka Alat Pengembang Chrome.
Buka bilah alat Device .
Di bilah alat Device , buka menu perangkat dan pilih Edit . Di jendela yang muncul, klik tombol Add custom device .
Beri nama perangkat KaiOS baru (atau apa pun yang Anda inginkan).
Atur ukuran layar ke 240x320 .
Di bidang User agent string , masukkan yang berikut ini: Mozilla/5.0 (Mobile; LYF/F90M/LYF-F90M-000-02-23-181217; Android; rv:48.0) Gecko/48.0 Firefox/48.0 KAIOS/2.5 YouTube/1.66.51.J .
Simpan perangkat dengan mengklik tombol Add .
Jika perlu, aktifkan perlambatan prosesor, tetapi perlu diingat bahwa dengan bantuan emulator Anda tidak akan dapat memeriksa situs serta dapat dilakukan dengan menggunakan perangkat nyata.

Siapkan perangkat baru di Alat Pengembang Chrome

Ringkasan

Anda dapat membuat situs yang nyaman bagi semua pengguna seluler untuk bekerja, terlepas dari di mana mereka tinggal. Tetapi untuk ini, pengembang perlu melakukan beberapa upaya, karena perangkat seluler dengan kategori harga yang berbeda sangat berbeda satu sama lain.

Semakin terjangkau ponsel, semakin tinggi kemungkinan dapat menggunakan prosesor yang lambat. Kinerja situs JavaScript tergantung pada kecepatan memuat kode dan kecepatan pelaksanaannya. Ini harus dipertimbangkan bagi mereka yang ingin membuat situs yang berfungsi baik di perangkat apa pun dan di jaringan apa pun.

Segala sesuatu yang kita bicarakan di atas penting untuk smartphone, tetapi bahkan lebih penting untuk ponsel sederhana yang murah, untuk perangkat kelas "telepon fitur", yang sangat populer di negara-negara berkembang.

Pembaca yang budiman! Apakah Anda mengoptimalkan proyek web Anda untuk perangkat seluler yang lemah?

Pemuatan halaman cepat pada ponsel murah yang paling sederhana