Masuk akal untuk mempercepat kecepatan loading situs web Anda.
Pertimbangkan harapan pengguna ini:
- 40% meninggalkan situs web yang membutuhkan waktu lebih dari 3 detik untuk memuat
- 47% mengharapkan halaman web dimuat dalam 2 detik atau kurang (sumber: kissmetrics.com)
Sekarang mari kita bandingkan harapan ini dengan realitas waktu buka halaman standar industri 2016:
Jika pengguna mengharapkan halaman Anda dimuat dalam 2 detik atau kurang, itu adalah 78% pengunjung situs yang mungkin memiliki pengalaman pengguna yang buruk.
Jika kecepatan loading halaman sangat penting untuk garis bawah Anda, mungkin sudah waktunya untuk meninjau kembali kecepatan situs web Anda secara keseluruhan, dan bagaimana tampilannya bagi pengguna Anda. Mungkin dengan menggunakan alat Pemantauan Pengguna Nyata.
Hari ini, kita akan melihat 10 dasar-dasar desain yang dapat Anda terapkan untuk membantu mempercepat situs web Anda hingga awal. Mengapa kecepatan loading halaman web penting
Pengguna mengharapkan situs web yang cepat; Tapi mengapa
Itu bermuara pada konsep dasar dalam UX; menguasai.
Sebagai manusia, kita tidak suka kehilangan kendali atas lingkungan kita. Kita menjadi rentan terhadap frustrasi dan gangguan dengan mudah.
Kecepatan loading halaman yang lebih cepat memberi pengguna perspektif memiliki kontrol lebih besar atas situs web; Mereka mengendalikannya daripada mengendalikan mereka.
Jadi pada gilirannya, kecepatan beban yang lebih cepat berarti pengguna yang lebih bahagia dan kurang frustrasi.
(Plus menjaga peringkat pencarian organik Anda sehat; Google telah mengutip kecepatan loading halaman sebagai sinyal utama dalam algoritma peringkat mereka sejak 2010.)
Sebagai desainer, kita kadang-kadang cenderung memilih jalur estetika desain yang indah daripada loading halaman yang cepat.
Tetapi ketika 80% dari waktu halaman web dihabiskan untuk mengunduh aset seperti gambar, stylesheet, dan skrip (yang semuanya membentuk sabuk alat untuk desain kami), tanggung jawab untuk meningkatkan waktu buka halaman dan pengalaman pengguna jatuh kepada kami, bukan?
Sekarang, desainer cenderung mengambil pendekatan yang lebih holistik.
Bukan hanya aset yang harus kita fokuskan untuk meningkatkan kecepatan situs web secara keseluruhan, itu adalah seluruh proses desain. Berikut adalah tips saya tentang cara mempercepat situs web Anda dengan mudah: 1: Mulailah dengan mempertimbangkan tujuan halaman web
Apa tujuan dari halaman Anda?
Apakah Anda ingin pengunjung situs Anda untuk mengambil uji coba gratis atau mengirimkan alamat email?
Dengan memulai dengan hasil yang ingin Anda capai di halaman itu, Anda akan berada di tempat terbaik untuk membuat perubahan padanya.
Bahkan sebelum Anda mulai mengejek visual, mengompresi gambar, memotong HTML atau menulis skrip, penting untuk menginvestasikan waktu berkualitas di muka memahami tujuan para pemangku kepentingan dan pengguna akhir:
Luangkan waktu untuk merencanakan sebelum Anda melakukan penyesuaian untuk memastikan hasil akhir yang lebih baik.
Pikirkan tentang pertanyaan-pertanyaan seperti:
Saya juga merekomendasikan menghabiskan waktu menyelidiki halaman serupa di situs pesaing Anda. Secara khusus, perhatikan kecepatan loading mereka menggunakan alat kecepatan favorit Anda. Perhatikan elemen mana yang mereka gunakan untuk membuat pengunjung mengambil tindakan. Bagaimana mereka membuat halaman mereka menarik bagi pengguna yang kembali, namun segar dan jelas untuk yang baru?
Kemungkinan mereka mengenal audiens mereka dengan baik, jadi jangan takut untuk membuat beberapa catatan.
Merancang setiap halaman dengan tujuan akhir dalam pikiran akan memastikan setiap elemen pada setiap halaman situs Anda melayani tujuan dan fungsi.
Elemen yang berlebihan akan memperlambat situs Anda, jadi potong sekam apa pun dengan memberi audiens Anda apa yang mereka butuhkan untuk menyelesaikan pekerjaan. Konten adalah kuncinya; Tetapi pertimbangkan strukturnya juga!
Arsitektur informasi (IA) berfokus pada pengorganisasian, penataan, dan pelabelan konten dengan cara yang efektif dan berkelanjutan.
Gambar dan media lain bisa memakan waktu lebih lama untuk memuat daripada teks. Terkadang, meningkatkan kecepatan loading halaman web Anda dapat diselesaikan dengan benar-benar mengurangi media di halaman Web Anda.
Pertimbangkan dulu, apakah saya membutuhkan gambar ini di tempat teks? Nilai apa yang disediakan media?
Ada pro dan kontra untuk menghapus atau menyimpan media di halaman Web Anda yang tidak akan saya masuki.
Namun, pertimbangkan, 'Apa tujuan halaman' dan pastikan bahwa pilihan media Anda mempertimbangkan hal ini.
IA yang baik menginformasikan strategi konten, desain antarmuka pengguna, desain interaksi dan pengembangan front-end.
Menghabiskan waktu pada arsitektur informasi Anda pada akhirnya akan berarti konten, desain, dan kode yang terstruktur lebih baik membantu mempercepat situs web Anda dengan cepat dan efektif.
Ini bahkan akan berkontribusi pada upaya SEO Anda; Google akan melihat IA besar Anda sebagai memegang ton nilai dan memberi Anda manfaat dari peringkat yang lebih tinggi di SERPs.3. Menggunakan CSS ketimbang gambar
CSS (Cascading Style Sheets) adalah kemampuan untuk memisahkan cara hal-hal terlihat dari apa yang mereka maksud.
Berita bagus untuk ketika gambar besar dan berkualitas tinggi datang dengan mengorbankan kecepatan loading halaman. Situs eCommerce dan fotografi adalah dua contoh utama. Klien sering menginginkan gambar besar dan indah dan situs yang cepat dan responsif.
(Fotografi dan situs e-commerce pada khususnya)
Jika Anda memiliki klien di ruang ini, ada baiknya menjelajahi CSS sehingga visual berkualitas tinggi dapat dibuat tanpa perlu gambar.
Halaman Anda akan memuat lebih cepat dan berkinerja lebih baik!
Catatan: Penting untuk menjaga ukuran style sheet Anda seminimal mungkin; Akan ada lebih sedikit untuk memuat.
Namun, jika Anda menggunakan gambar, pastikan untuk memilih format yang tepat untuk pekerjaan: 4. Mengoptimalkan gambar untuk meningkatkan kecepatan loading halaman
Ada beberapa hal yang perlu dipertimbangkan ketika mengoptimalkan gambar:
Tergantung pada sifat gambar dan bagaimana itu akan digunakan akan menentukan format gambar mana yang lebih tepat. Untuk mempercepat situs web Anda, pilih yang terbaik untuk tugas dari daftar di bawah ini:
GIF memaksa semua warna gambar menjadi palet 256 warna untuk mengurangi ukuran gambar. Ini bagus untuk gambar yang tidak terlalu kompleks dan memiliki rentang warna yang terbatas dan disederhanakan. Gif juga mendukung transparansi tetapi biasanya dapat mengambil beberapa upaya untuk terlihat halus di sekitar tepi.
JPEG menerapkan kompresi lossy untuk gambar, yang dapat mengakibatkan pengurangan yang signifikan dari ukuran file, namun, ini mungkin datang dengan biaya untuk kualitas visual. Format JPEG adalah pilihan umum untuk kompresi foto.
Format PNG adalah format yang fleksibel dan mendukung kompresi data lossless. Menyimpan sebagai format PNG-8 akan memungkinkan Anda untuk menyimpan gambar berkualitas pada ukuran file kecil. PNG-24 dan PNG-32 mendukung transparansi dengan mengaburkan tepi dan membuatnya tampak lebih tajam pada latar belakang transparan. Namun, ini biasanya akan menghasilkan ukuran file yang lebih besar.
SVG adalah format gambar vektor berbasis XML. Seorang desainer biasanya akan merancang grafik vektor seperti ikon atau ilustrasi dan menyimpannya sebagai SVG, mempertahankan semua informasi vektornya. Ukuran gambar biasanya kecil, skala gambar tanpa kehilangan kejelasan dan mendukung interaktivitas dan animasi.
Bereksperimen dengan memilih pengaturan terbaik untuk setiap format: kualitas, ukuran palet, dll dan Anda akan menemukan format gambar terbaik untuk mendapatkan kecepatan loading halaman itu seminimal mungkin, dan akhirnya percepat situs web Anda.5: Optimalkan desain Anda untuk pengguna seluler
Pengguna ponsel memiliki tujuan yang berbeda dari pengguna desktop dan biasanya menginginkan informasi dalam gigitan yang cepat dan mudah dicerna. Dengan begitu banyak pengguna ponsel mengalami masalah saat mereka memuat situs web mereka, ini adalah cara yang relatif mudah untuk mendapatkan keunggulan kompetitif.
Berikut adalah daftar cepat perbaikan cepat untuk membuat situs seluler Anda lebih mudah digunakan.
Jika Anda tahu perbaikan yang lebih cepat untuk pengoptimalan seluler, beri tahu kami di komentar!
Sampai saat itu, membuat Anda kecepatan loading halaman lebih cepat dengan melihat kode Anda dengan cepat. Buat kode Anda bersandar dengan minify-ing CSS, HTML, dan Javascript Anda untuk mempercepat situs web Anda
Untuk mengoptimalkan waktu loading situs web Anda, penting bagi Anda untuk menghilangkan ruang tambahan, jeda baris, dan lekukan dalam kode Anda sehingga halaman Anda ramping mungkin.
Hal ini dapat dicapai dengan mengompresi file Anda menggunakan alat minify seperti YUI Compressor, Google Closure Compiler dan cssminifier.
(Tapi selalu pastikan bahwa Anda menyimpan yang asli untuk pengeditan di masa mendatang.) 7. Pergi mudah pada Jquery plug-in jack! Pertimbangkan CSS sebagai gantinya...
Pernahkah Anda bekerja di situs web dengan begitu banyak plugin sehingga Anda tidak tahu mana yang melakukan apa?
Fungsionalitas tambahan yang diberikan plugin sangat bagus, tetapi terlalu banyak yang bisa menjadi akar penyebab situs yang lambat.
