20 September 2013
Desain web responsif banyak digunakan pada desain website Surabaya dan sangat ideal untuk multi-screen, namun, kinerja dari web dengan desain yang responsif bisa saja menjadi lambat karena ukuran file yang besar. Masalah ini dapat diatasi dengan beberapa penyesuaian kecil, kompresi dan mengubah ukuran gambar.
Mengapa kinerja desain responsif bisa lambat
Desain responsif memuat semua elemen HTML yang sama untuk setiap perangkat, termasuk yang ditujukan untuk tablet dan desktop. Ini berarti bahwa semua konten sering dikirimkan, termasuk gambar dan script, tidak peduli pada perangkat apa website sedang dilihat. Sebuah studi yang dilakukan tahun lalu menunjukkan bahwa 86% dari situs responsif saat online memberikan halaman full desktop ke perangkat mobile. Ini jelas kecenderungan untuk teknik desain yang perlu disikapi, jika kita ingin menghentikan perkembangan halaman web membengkak di jalurnya. Pada saat ini desain responsif mendorong ukuran halaman dan ini adalah tren yang perlu ditangani, terutama jika Anda mempertimbangkan bahwa 57% dari pengguna ponsel akan meninggalkan situs jika situs tersebut tidak memuat dalam waktu 3 detik.
Bagaimana kinerja ditingkatkan?
Dalam tujuan meningkatkan kinerja desain website di surabaya , ukuran halaman dan sumber daya yang dimuat perlu dikurangi. Hal ini dapat dilakukan dengan menggunakan berbagai teknik, tanpa terlalu mengubah tampilan dan nuansa situs. Hal pertama yang harus dipertimbangkan dalam membuat desain website di surabaya adalah bagaimana memastikan bahwa hanya sumber daya yang dibutuhkan akan dikirim ke target perangkat yang tepat. Hal ini dapat dilakukan dengan meminimalkan jumlah permintaan HTTP, sehingga pengguna menghabiskan lebih sedikit waktu menunggu DOM untuk memuat. Hal ini dapat dilakukan dengan mengompresi sumber daya CSS dan Javascript. Hal ini memungkinkan pengembang untuk membuat markup yang bersih dan menciptakan sprite dan ekstensi yang praktis.
Conditional Loading
Hal ini dapat dianggap sebagai teknik penting dalam desain responsif, karena dapat digunakan untuk memastikan bahwa pengguna ponsel dan smartphone tidak men-download aspek dari situs yang memperlambat waktu memuat, atau aspek yang tidak mereka gunakan. Conditional loading juga dapat digunakan untuk menghentikan semua jenis konten dari proses pemuatan, termasuk sosial widgets, gambar, peta dan banyak lagi. Sangat penting untuk dicatat pada titik ini bahwa situs harus diuji secara menyeluruh di setiap tahap optimasi sehingga mudah untuk melihat apa yang telah membuat perbedaan.
Gambar
Kita semua tahu bahwa gambar biasanya mengambil jumlah terbesar kilobyte dalam suatu halaman web. Bisa diatakan juga bahwa gambar yang dirancang untuk desktop browser akan underperform saat dikirim ke perangkat mobile. Jika sebuah situs juga memiliki banyak konten, maka ini akan mempengaruhi kinerja website dan terdapat beberapa cara untuk mencegah konten ini dari yang lama. Meskipun hal ini bisa dilakukan dengan mengubah markup dengan mengubah src atau elemen img, PHP solusi Adaptive Images mungkin lebih mudah. Perangkat lunak ini mendeteksi ukuran layar dan secara otomatis membuat, cache dan memberikan gambar yang sesuai skala bawah embedded HTML, tanpa perlu mengubah markup. Untuk digunakan dalam hubungannya dengan teknikGambar Fluid, itu adalah solusi berguna dan salah satu yang akan menghemat banyak waktu. Gambar adaptif menggunakan satu file htaccess, satu file php dan satu baris Javascript untuk menentukan ukuran layar pengunjung ke situs.
Teks
Teks juga perlu dipikirkan, karena teks juga akan berubah bila perangkat menyempit dan bisa menyebabkan masalah tampilan. FitText adalah alat yang dapat membantu mengatasi masalah ini, sebuah plugin jQuery dengan ukuran font yang auto-update, dengan pilihan untuk ukuran minimum dan maksimum font yang diizinkan. Ini sangat ideal untuk judul yang mungkin ditampilkan buruk pada perangkat mobile dan memungkinkan ukuran font yang ditentukan CSS3 untuk diabaikan. Namun, FitText hanya ditujukan untuk judul dan tidak boleh digunakan dalam teks paragraf.
