Cara Mengoptimalkan Kinerja Seluler

Desain terbaik menyeimbangkan estetika dan kinerja dengan bekerja dengan mempertimbangkan seluler sejak awal. Dari menetapkan anggaran kinerja yang ketat hingga menerapkan teknik pengoptimalan sisi klien dan server, saya akan membagikan proses pengoptimalan kinerja seluler saat ini yang kami gunakan di Cyber-Duck .

Menjadi Mobile-Mind

Performa adalah bagian penting dari pengalaman pengguna, sehingga tidak bisa menjadi renungan di akhir proses pengembangan. Lebih baik mengelola proyek melalui struktur yang berorientasi seluler , dengan desainer dan pengembang yang berkolaborasi sejak awal.

Tinjauan Kolaboratif

Untuk setiap proyek, tinjau ruang lingkup desain dan pengembangan dengan tim internal, dan tentukan sasaran indikator kinerja utama (KPI). Ini adalah metrik tonggak yang menunjukkan keberhasilan proyek, berdasarkan tujuan bisnis. Mengingat pentingnya mereka, tujuan terkait kinerja harus muncul di sini.

Jangan menandatangani tonggak penting proyek (seperti arah seni dan gambar rangka) dengan pemangku kepentingan sampai seluruh tim internal meninjau hasilnya. Jika tidak, kami menemukan pengembang dapat meminta penyesuaian desain (untuk mengurangi ukuran halaman) selama implementasi. Dengan desain yang sudah ditandatangani, perubahan pada tahap ini dapat menimbulkan komplikasi, membuka putaran persetujuan klien lebih lanjut. Ketika pengembang terlibat sejak awal, mereka dapat memperkirakan ukuran dan daya pemrograman yang diperlukan untuk antarmuka, dan menghindari hal ini.

Anggaran Kinerja

Cara terbaik untuk masuk ke pola pikir seluler adalah menetapkan dan mematuhi anggaran kinerja yang ketat : menetapkan target untuk kecepatan dan ukuran situs web akhir. Saat tim bekerja menuju sasaran performa tinggi yang jelas, mereka harus memilih apakah akan menerapkan fitur mahal seperti carousel.

Sasaran bisnis dan persyaratan pengguna tertentu menentukan apakah kami menetapkan anggaran kinerja berbasis angka. Misalnya, perombakan situs web kami sendiri bertujuan untuk secara dramatis meningkatkan waktu muat di seluruh perangkat, dan meningkatkan konversi seluler. Kami menetapkan batas ketat tidak lebih dari 40 permintaan HTTP atau 500KB data untuk seluler. Data Google Analytics dapat menginformasikan sasaran mana yang harus dipilih selama perubahan, karena interaksi historis menunjukkan perilaku audiens target Anda.

Umumnya kami menentukan target untuk ukuran halaman, dengan batas 500 KB untuk halaman beranda seluler. Permintaan server lebih sulit diprediksi, jadi kami cenderung tidak menetapkan angka yang tepat. Pedoman kasar ini sesuai dengan kebutuhan kami untuk proyek klien. Tetapi Daniel Mall memiliki panduan praktis yang bagus untuk menambahkan detail ke anggaran: mulai dari mengalokasikan bobot untuk HTML dan CSS, hingga JavaScript, gambar, dan font web.

Teknik Optimasi

Di seluler, kecepatan pemuatan situs web didorong oleh faktor sisi klien dan server. Menggunakan teknik pengoptimalan bertarget yang menangani kedua faktor ini dapat membantu Anda memenuhi anggaran kinerja yang ditetapkan untuk proyek Anda.

Pengoptimalan Sisi Klien

Dengan lanskap seluler yang bervariasi – lebih dari 5.000 perangkat smartphone unik pada tahun 2014 – pengembang memiliki kontrol yang jauh lebih sedikit atas kinerja perangkat individual dibandingkan faktor sisi server. Jadi, pengoptimalan sisi klien sangat penting. Teknik berikut bertujuan untuk mengurangi waktu pemrosesan dan daya yang diperlukan dari perangkat seluler untuk memuat situs web.

Optimalkan Kode

Banyak pengembang jatuh ke dalam perangkap menulis di jQuery untuk memberi daya pada situs web. Tapi tidak ada hal seperti itu. Faktanya, Anda menulis dalam JavaScript, sambil menggunakan pustaka pintasan dan fungsi yang bermanfaat. Meskipun ini mempercepat pengembangan – berguna, ketika Anda perlu membawa produk ke pasar dengan cepat – mungkin ada biaya kinerja. Pustaka jQuery menambah bobot, dan fleksibilitas plugin (dan fungsi) berarti mereka sering kali membengkak.

Berikut ini contohnya, dengan JavaScript dan jQuery digunakan untuk fungsi yang sama. Menulis dalam JavaScript biasa menghindari menarik pustaka eksternal lain ke dalam aplikasi Anda, dan akan menyimpan permintaan HTTP berharga lainnya.

 // jQuery var con = $('#my_container'); con.css('width','75%'); // Plain JavaScript var con = document.getElementById('my_container'); el.style.width = '75%';

Anda dapat mengoptimalkan file CSS dan JS lebih lanjut dengan menggunakan sistem seperti Grunt atau Gulp, atau dengan aplikasi kompiler front-end seperti Prepos, Codekit atau Hammer. Ini mengurangi permintaan HTTP dan ukuran file dengan melakukan berbagai tugas: menggabungkan file, mengkompilasi Sass, Less atau CoffeeScript, Uglify JS (kompresi JavaScript), dan mengecilkan/mengompresi file untuk penggunaan produksi.

Prioritaskan Di Atas Lipatan

Google Pagespeed Insights (dan alat serupa) merekomendasikan untuk memprioritaskan ukuran pemuatan dan kecepatan konten di paro atas. Pisahkan CSS yang digunakan untuk merender bagian halaman yang terlihat (paro atas) terlebih dahulu; tunda sisa gaya untuk dimuat setelah halaman dirender.

Menambahkan CSS teratas langsung ke header halaman dapat melakukan ini. Namun, perlu diingat ini tidak akan di-cache seperti file CSS lainnya, jadi harus dibatasi pada konten utama. Berbagai alat dapat membantu Anda menentukan CSS yang akan dipisahkan, termasuk CSS Kritis Scott Jehl dan alat Bookmarklet Paul Kinlam.

Optimalkan Gambar

Mempertimbangkan preferensi saat ini untuk desain yang kaya, sangat disayangkan bahwa gambar sering kali menjadi penyebab ukuran halaman yang berat. Tetapi desain yang dipimpin gambar masih dimungkinkan jika masing-masing dioptimalkan dan dikompresi sebelum dan sesudah diekspor ke format yang tepat. Selalu pastikan Anda menggunakan jenis gambar yang sesuai. Foto berwarna tebal bekerja lebih baik sebagai file JPEG, sedangkan grafik warna datar harus dalam PNG8. Gradien dan ikon yang lebih kompleks berfungsi paling baik sebagai PNG24/32 dengan transparansi alfa, atau SVG.

Photoshop dan Fireworks dapat membantu Anda menyesuaikan tingkat pengoptimalan di berbagai area gambar. Ini berarti subjek utama dapat tetap berkualitas tinggi, sedangkan sisanya dioptimalkan untuk meningkatkan performa. Alat kompresi gambar lossless seperti ImageOptim dan TinyPNG dapat memaksimalkan ukuran file, tanpa kehilangan kualitas gambar.

Anda juga dapat menggunakan elemen <picture> HTML5 baru dan atribut srcset dan size untuk gambar. Kedua tambahan bahasa ini membantu Anda menentukan gambar responsif secara langsung di HTML, sehingga browser hanya akan mengunduh gambar yang sesuai dengan kondisi yang diberikan.

 <picture> <source media="(min-width: 960px)"> <source media="(min-width: 465px)"> <img src="images/picture.png" alt="Picture alt"> </picture>

Namun, teknik ini harus digunakan dengan hati-hati. Hanya beberapa browser yang mendukungnya: beberapa browser modern (seperti Safari), browser Android, dan IE10/11 (dan yang lebih lama) tidak. Alternatif polyfill dapat membuat metode ini berfungsi di browser lama, tetapi ini adalah pustaka JavaScript eksternal yang harus dimuat secara terpisah, dan mungkin tidak sepadan karena tersedia teknik lain. Sebaiknya pertimbangkan audiens target Anda, dan teknologi apa yang akan mereka gunakan, untuk melihat apakah berat ekstra polyfill diperlukan.

URL data adalah opsi terakhir. Alih-alih menautkan ke file gambar eksternal, data gambar dapat diubah menjadi string yang disandikan base64 (atau ASCII) dan disematkan langsung ke file CSS atau HTML. Alat konversi online sederhana tersedia. URL data sangat membantu, karena menyimpan permintaan HTTP dan dapat mentransfer file kecil dengan lebih cepat. Namun, seperti yang ditunjukkan di bawah ini, ukuran kode yang disematkan lebih besar daripada menautkan ke gambar eksternal. Panjang tambahan dapat membuat dokumen HTML dan CSS lebih sulit dipelihara, dan perubahan gambar harus dikodekan ulang dan disematkan setiap kali.

 <img width="32" height="32" alt="Camera" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAYZJREFUeNrsVsttwzAMtYUAvfrck0fIBukIyQAF5AkaTxB0gowQAR3AWcEbdASfeva1p5YEmIAgZEmWZKeHEhD8k2Ty8fFRZZFg3x/PL3DpYFSOac3T65eZ+qiKNLt4fo52Bker7A7AphoudcBU/PlxCQROM+a+TaGgFo7ei4JaIXonCmqF6J0oqJWiv6MgX5QU1R7LJTKyGBtgtKAP15J+3hWPsYOiyB9lZ7Ui7DarN5aXnzDeGeG2nk1GGKj1Pd3fGL+DoX1SjRz4kXlBcjByuvhhiEzjRMlWlGI9tcEmAT5nl0MjxxpwpKfGFYRASAoMbN7MFLCLDQkbAlsP7BhVKzaXOnKvczYN1+wlJ2KU0PCcM57wasL7jr7xdJgcUtzLWnbVuWdtlAOjYLlLR+qptbmOZMkW40Al8jp4mo51bYoDO/HcOua2nrVRDmh+sqFSO4hoB66ojC9BOhCSAmR3I5y4+jpfrhTcUNAzj3E6VIpniVJqM0p1YJF2/Od14N+BrPYrwAAH54zsDNHtwgAAAABJRU5ErkJggg==" />

Otomatiskan Pengoptimalan Media CMS

Menerapkan teknik pengoptimalan aset dari bagian sebelumnya berarti kita dapat memilih desain klasik berbasis gambar untuk BAM, memungkinkan mereka menampilkan fotografi proyek konstruksi baru.

Tapi kami juga perlu memberi BAM kebebasan untuk memperbarui konten tanpa perlu kami mengoptimalkan setiap gambar. Tentu saja, tidak ada solusi yang seefektif pengoptimalan dengan tangan, tetapi kami berhasil mencapai tingkat pengoptimalan otomatis yang wajar. Kami mengonfigurasi ulang CMS Sitefinity yang ada untuk menciptakan fleksibilitas. Opsi standar digunakan untuk mengubah ukuran (dan mengoptimalkan) gambar secara otomatis, sesuai dengan konteks setiap halaman web:

 <thumbnailResizeSettings compositingQuality="HighQuality" interpolationMode="HighQualityBicubic" smoothingMode="HighQuality"> </thumbnailResizeSettings>

Sitefinity juga dapat mengubah ukuran gambar dari URL dengan menggunakan parameter URL, dan rendering yang lebih cepat dapat dicapai dengan menyimpan gambar yang diubah ukurannya, menggunakan opsi berikut:

 /images/image-opt.jpg?size=480 

Sebagian besar sistem CMS memungkinkan beberapa tingkat pengoptimalan media. Misalnya, Anda dapat menentukan pengaturan media untuk memastikan pengguna masa depan hanya menambahkan gambar yang sesuai dengan template situs web. Berikut adalah contoh cepat dari WordPress.

 // Wordpress example <div class="avatar"> <?php the_thumbnail( 'thumbnail' ); ?> </div>

Merampingkan Font Dan Ikon

Font adalah bagian penting dari pengalaman pengguna dan branding situs web atau aplikasi, tetapi mungkin bukan prioritas pertama bagi pengguna. Untuk alasan ini, font web dapat menjadi faktor lain untuk dioptimalkan.

Dengan menunda pemuatan font, browser akan menampilkan salinan dalam font apa pun yang tersedia untuk memulai. Ini berarti pengguna akan selalu mendapatkan konten terlebih dahulu. Menunda pemuatan font dapat dicapai dengan memisahkan bagian CSS yang tertaut ke file font, dan memuatnya setelah sisa halaman dirender. Namun, perhatikan bahwa teks mungkin berkedip sebentar untuk berubah saat font web dimuat.

Demikian pula, ikon adalah area lain untuk dioptimalkan, karena merupakan file kecil yang perlu sering dimuat. Anda juga dapat mempertimbangkan untuk menggunakan file font untuk ikon. Gunakan layanan seperti Fontello untuk memilih berbagai ikon, dan buat file font terbatas pada pilihan Anda. Teknik ini dapat membuat ikon vektor berkualitas tinggi untuk semua resolusi layar, dengan dampak kinerja yang ringan.

Atau, sprite gambar adalah opsi yang terkenal. Mereka menggabungkan gambar menjadi satu file (yang hanya menggunakan satu permintaan untuk memuat) dan hanya menampilkan bagian yang diperlukan untuk desain dengan menggunakan posisi latar belakang. Paul Stamatiou menjelaskan bagaimana hal ini dilakukan dan menguraikan beberapa batasan.

Memuat Teknologi

Teknik berikut menghindari pengiriman seluruh konten situs web ke browser seluler. Sebagai gantinya, hanya data akurat yang diperlukan yang diunduh , dengan mengoptimalkan setiap titik henti sementara. Kecepatan pemuatan seluler adalah pertimbangan utama untuk situs web Velocity Drive, yang menyediakan teknologi trailer. Pustaka JavaScript harus dimuat di semua titik henti sementara, untuk menguji kemampuan browser dan menghindari gangguan. Namun kami mengoptimalkan aset dengan hati-hati untuk setiap breakpoint: ukuran pemuatan beranda hanya 323KB di seluler, naik menjadi 828KB di desktop besar.

Ambil ini lebih jauh dengan teknik pemuatan malas bersyarat untuk meningkatkan kecepatan halaman yang dirasakan. Mereka memuat bagian yang terlihat secara bertahap, dengan konten utama ditempatkan di paro atas. Item mahal (seperti gambar) yang ditemukan di akhir halaman tidak dimuat, kecuali jika pengguna memilih untuk menggulir konten. Teknik ini adalah kunci untuk bagian 'Wawasan' di situs web Niu Solutions, yang mencakup inovasi TI mereka. Kami menggunakan plugin jQuery kecil bernama jScroll untuk memuat artikel lebih lanjut saat pengguna menggulir ke bawah. Berikut adalah contoh cara kami menyiapkan plugin ini, yang hanya memerlukan tautan ke lebih banyak konten:

 <a href="articles.php" class="more">Load more</a>

 // Insights javascript $('.insights-container).jscroll({ nextSelector: '.more', loadingHtml: '<p>Loading...</p>' });

Teknologi preloading menghadirkan peluang lebih lanjut. Mereka dapat mengantisipasi dan mempersiapkan langkah pengguna selanjutnya dengan memuat halaman yang kemungkinan akan mereka lihat berikutnya sebelum melakukannya, untuk memberikan pengalaman yang lebih cepat. Namun, menemukan struktur lalu lintas biasa lebih mudah saat memperbarui situs web yang ada, karena Anda dapat mempelajari corong aliran perilaku di Google Analytics.

Tingkatkan Dari Pengalaman Inti

Berita Responsif BBC mengacu pada gagasan untuk memberi pengguna pengalaman inti yang mereka minta, kemudian mengevaluasi lingkungan pengguna dan meningkatkan pengalaman yang sesuai . Contoh sederhananya adalah memuat gambar beresolusi rendah pada awalnya, lalu menampilkan resolusi tinggi tergantung pada bandwidth yang dimiliki pengguna.

Ide ini adalah bagian dari peningkatan progresif, di mana teknologi web berlapis untuk memberikan pengalaman terbaik di seluruh lingkungan. Peningkatan progresif dapat didasarkan pada sejumlah faktor yang berbeda. Ini termasuk teknologi yang dapat diakses pengguna, seperti browser, sistem operasi, dan lingkungan mereka (seperti kecepatan internet). Di sini, tentukan serangkaian fitur dasar yang harus berfungsi pada browser yang paling tidak mampu, dan hanya menambah kerumitan lebih lanjut setelah menguji apakah browser dapat menanganinya.

Mendeteksi apakah browser dapat mendukung fitur HTML5 dan CSS membantu kami menulis kode bersyarat untuk mencakup semua kemungkinan: menyempurnakan dan menambahkan fitur saat didukung, sambil tetap aman dan sederhana untuk perangkat dan browser yang tidak mendukung.

Kurangi Pengujian Fitur

Memasukkan library pengujian fitur seperti Modernizr atau has.js adalah praktik umum yang direkomendasikan. Tetapi terlalu banyak pengembang yang mengimplementasikan seluruh perpustakaan; mereka menguji semua kemampuan, meskipun hanya sejumlah kecil hasil yang diperlukan untuk menentukan apakah akan menambahkan fitur.

Tim Kadlec melaporkan waktu penguraian dan eksekusi dari perpustakaan yang sama (diminimalkan jQuery 2.1.1) di berbagai perangkat. Ini menunjukkan bahwa seringkali ada biaya kinerja seluler yang lebih besar (bahkan antara perangkat lama dan baru) untuk mengimplementasikan pustaka ini, dibandingkan dengan desktop. Kami cenderung menyesuaikan perpustakaan, menguji fitur situs web yang relevan saja . Ini akan menghemat waktu dan kekuatan pemrosesan seluler yang berharga.

Optimasi Sisi Server

Waktu respons server adalah faktor kunci dalam kecepatan situs web: banyak yang menargetkan kurang dari 200 md. Tetapi latensi jaringan (penundaan saat data berpindah antara server dan perangkat) adalah hambatan nyata untuk kinerja seluler, membuat pengguna seluler mengalami pengalaman yang lebih lambat.

Hal ini dipengaruhi oleh kecepatan jaringan. Menurut Ofcom, kecepatan unduh rata-rata pada jaringan 3G dan 4G populer adalah 6,1Mbps dan 15,1Mbps di Inggris. Beberapa menafsirkan ini sebagai batas yang jelas pada ukuran situs web maksimum. Tetapi kenyataannya lebih kompleks, karena kecepatannya bervariasi tergantung pada cakupan dan konteks lingkungan. Pengguna sering terhubung ke Edge (E) dan GPRS yang lambat saat berada di luar jangkauan.

Ada berbagai teknik yang tersedia untuk meningkatkan kinerja situs web sisi server.

Caching, Prarendering, dan Konten Statis

Halaman web dinamis memerlukan beberapa kueri basis data, meluangkan waktu yang berharga untuk memproses keluaran dan memformat data, kemudian merender ke HTML yang dapat dibaca browser. Direkomendasikan untuk men-cache konten yang sebelumnya dirender untuk perangkat itu. Untuk pengunjung yang kembali, alih-alih memproses dari awal, itu akan memeriksa cache, dan hanya mengirim pembaruan.

Banyak juga yang memilih pustaka template JavaScript seperti Handlebars dan Moustache untuk menangani konten web. Tetapi mem-parsing dan mengeksekusi JavaScript memakan banyak tenaga dan waktu. Perangkat seluler tidak dapat memproses pustaka template ini secepat komputer desktop, dan menguras sumber daya pemrosesannya. Merender halaman sepenuhnya di server jauh lebih cepat. Twitter memilih pendekatan ini pada awal 2012, dan menjelaskan nilainya di blog mereka.

Baru-baru ini, pengembang front-end senior kami mendorong batas-batas teknik ini untuk portofolio pribadinya. Itu dibangun dengan CMS Statamic berbasis file, yang baru saja menambahkan dukungan html_cache. Saat diterapkan, fitur ini mengurangi waktu muat rata-rata semua halaman dari kira-kira 1,8 detik menjadi 225 milidetik.

Cache Peramban

Pengoptimalan granular dapat merampingkan pemuatan situs web dengan mencegah transfer reguler file yang Anda tahu tidak sering diperbarui. Gunakan penangan server (seperti file .htaccess ) untuk menginstruksikan browser tentang jenis konten yang akan disimpan, dan berapa lama mereka harus menyimpan salinan. Berikut cara mengimplementasikan cache browser di server Apache:

 <IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" # CSS ExpiresByType text/css "access plus 1 year" # Data interchange ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/ld+json "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" # Favicon and cursor images ExpiresByType image/x-icon "access plus 1 week" # HTML components (HTCs) ExpiresByType text/x-component "access plus 1 month" # HTML ExpiresByType text/html "access plus 0 seconds" # JavaScript ExpiresByType application/javascript "access plus 1 year" # Manifest files ExpiresByType application/x-web-app-manifest+json "access plus 0 seconds" ExpiresByType text/cache-manifest "access plus 0 seconds" # Media ExpiresByType audio/ogg "access plus 1 month" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType video/webm "access plus 1 month" # Web feeds ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType application/rss+xml "access plus 1 hour" # Web fonts ExpiresByType application/font-woff "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" </IfModule>

Jaringan Pengiriman Konten (CDN)

Anda dapat meningkatkan pemuatan aset dengan menggunakan CDN seperti CloudFlare di samping layanan hosting biasa Anda. Di sini, konten statis (seperti gambar, font, dan CSS) disimpan di jaringan server global. Setiap kali pengguna meminta konten ini, CDN mendeteksi lokasi mereka dan mengirimkan aset dari server terdekat, yang mengurangi latensi. Ini meningkatkan kecepatan dengan memungkinkan server utama untuk fokus pada pengiriman aplikasi daripada melayani file statis.

Meskipun menambah biaya, gunakan CDN khusus untuk meningkatkan kecepatan pemuatan situs web yang memiliki banyak aset . Selain pengaturan awal, CloudFlare tidak memerlukan konfigurasi manual; cache dibuat dan diperbarui untuk Anda, berdasarkan lalu lintas historis dan aset mana yang terbaik untuk dilayani. Namun terapkan ini dengan mempertimbangkan manajemen konten independen di masa mendatang: pastikan semua aset yang diunggah dari CMS juga disajikan secara transparan melalui CDN.

CDN adalah pilihan terbaik untuk situs web Eurofighter Typhoon kami, karena fotografi pesawat pertahanan beresolusi tinggi yang mencolok adalah fitur penting untuk menunjukkan kemampuan mereka. Dalam 30 hari terakhir, laporan menunjukkan CloudFlare menghemat 76% permintaan dan 48% bandwidth, meningkatkan kecepatan situs web yang sarat gambar.

Pengujian

Tidak ada pengganti untuk pengujian selama produksi. Bertujuan untuk menggunakan berbagai alat untuk menguji pekerjaan yang sedang berlangsung dengan mensimulasikan pengalaman seluler dan mendiagnosis potensi masalah kinerja.

Saat produksi berlangsung, selalu perhatikan angkanya: mulai dari memastikan aset desain dibuat dan diekspor dengan benar, hingga memeriksa ukuran file halaman dan jumlah permintaan HTTP melalui alat pengembang di browser Anda. Di sini, tab Jaringan memberi Anda gambaran lengkap tentang sumber daya yang dimuat, ukuran file total, dan waktu rendering:

Perhatikan garis vertikal biru dan merah di sebelah kanan timeline di Chrome Inspector di atas. Ini mewakili acara DOM Ready dan Page Load masing-masing. Di bagian bawah jendela, ini menampilkan jumlah permintaan HTTP dan total ukuran file yang dimuat pada breakpoint saat ini.

Alat lainnya termasuk:

• WebPagetest menawarkan berbagai pilihan untuk menguji URL langsung: mulai dari memilih lokasi mana pun di seluruh dunia, hingga membentuk kecepatan dan latensi koneksi 3G dan 4G tertentu. Anda bahkan dapat merasakan bagaimana situs web dimuat untuk pengguna ini, melalui tampilan strip film dan video.
• Pagespeed Insights Google adalah alat pengantar yang lebih visual untuk menganalisis kecepatan halaman. Ini membagi hasil menjadi desktop atau seluler, dan menyarankan teknik untuk meningkatkan area yang ditargetkan di situs Anda: menunjukkan sumber daya ke cache atau gambar untuk dioptimalkan.

Uji Pada Perangkat Nyata

Tapi jangan mengandalkan simulator saja. Kami juga menguji proyek di seluruh produksi di berbagai perangkat seluler nyata.

Buat lab perangkat Anda sendiri atau gunakan OpenDeviceLabs. Idealnya, rasakan pengalaman pengguna yang sebenarnya dengan menghindari Wi-Fi kantor yang kuat. Buat situs uji di server web (idealnya sama dengan server langsung) yang dapat Anda akses dari luar jaringan kantor. Kemudian, uji saat bepergian di lingkungan biasa seperti kedai kopi atau hotel yang ramai, pada koneksi jaringan.

Ringkasan Kinerja Seluler

Di atas segalanya, bertujuan untuk membuat situs web yang dapat menyeimbangkan estetika dan kinerja di seluler, dan mencapai metrik konversi yang nyata. Proses pengoptimalan kinerja yang kolaboratif dan berulang akan membantu Anda mencapainya.

Sejak awal proyek, dorong tim internal untuk bekerja sama di bawah pola pikir yang mobile dengan menetapkan anggaran kinerja yang ketat . Bangun pemahaman tentang faktor sisi klien dan server yang menentukan kinerja situs web di seluler. Kemudian Anda dapat memenuhi tujuan yang ditetapkan dengan menerapkan campuran teknik pengoptimalan bertarget yang telah saya jelaskan. Tentu saja, masih ada trade-off antara memiliki desain yang mencolok, kinerja tinggi dan keamanan dalam beberapa kasus; tim desain dan pengembangan kolaboratif dapat memutuskan apa yang terbaik untuk bisnis, memeriksa dengan manajer proyek dan pemangku kepentingan yang relevan.

Proyek pengoptimalan kami untuk konsultan teknologi global menunjukkan bagaimana teknik ini dapat digabungkan untuk meningkatkan kecepatan dan ukuran pemuatan secara signifikan. Proyek ini melibatkan caching template dan halaman, mengoptimalkan aset dan font, dan mengurangi pengujian fitur, di antara teknik lainnya. Sejauh ini, pengujian menunjukkan rendering dan total waktu muat telah dipotong menjadi kurang dari 1,4 detik, dari hampir 4 detik sebelum kami mulai bekerja; demikian pula, ukuran file telah dikurangi menjadi 1MB dari lebih dari 3MB.

Bacaan Lebih Lanjut tentang SmashingMag:

• Daftar Periksa Kinerja Front-End 2017
• Bersiap Untuk HTTP/2
• Semua yang Perlu Anda Ketahui Tentang AMP
• Kekuatan Rahasia (Tidak Begitu) Dari Peramban Seluler