7 Tips untuk Mempercepat Webiste

7 Tips untuk Mempercepat Webiste

7 Tips untuk Mempercepat Webiste – Semua orang senang dengan menambahkan sedikit animasi keren bukan? Tetapi jika loading yang berlangsung lebih dari satu atau dua detik, itu hanya membawa perhatian pada fakta bahwa website ini memiliki loading yang lamban dan itu merupakan hala yang membuat situs anda tersingkirkan. Semoga artikel tentang “7 Tips untuk Mempercepat Webiste” dapat membantu dalam mengoptimalkan loading situs Anda.

Pengguna berharap sebuah website dapat loading dengan cepat dan efisien. Itu tugas Anda untuk memastikan bahwa desain tidak hanya merupakan tampilan yang menyenangkan tetapi juga 100% berfungsi dengan baik. Jika situs Anda memiliki loading yang lama, Anda dapat tidak perlu khawatir, karena sekarang kami memiliki 7 tips untuk membantu mempercepat website Anda dengan sedikit sentuhan pada desain. (Pastikan untuk mengunjungi setiap situs yang menonjolakn sebuah artikel, sehingga artikel tersebut tampak hebat dan memiliki loading secepat kilat.)

1. Berhati-hati dengan Animasi

Animasi dalam desain website adalah salah satu “animasi” yang menjadi tren 2015. Jangan sampai tertinggal dengan menciptakan file besar yang tidak akan memuat. Mulailah dengan sentuhan animasi yang lebih kecil seperti yang Anda mulai dengan jenis efek dan beralih ke animasi yang lebih besar setelah Anda memiliki perasaan yang baik untuk bagaimana mereka bekerja dan bekerja dengan kerangka situs Anda secara keseluruhan.

Kunci untuk animasi adalah tidak memuat sekelompok file video ke situs web Anda. Semakin kecil animasi, semakin mudah untuk menciptakan sesuatu dengan tapak kecil. Jadi dari mana Anda akan memulai?

Melakukan sesuatu yang sederhana dan menyenangkan seperti membuat animasi melayang-layang. Memiliki tombol yang dapat berubah warna atau tombol dapat menjadi lebar adalah efek bagus yang akan membantu Anda menguasai CSS dan mendapatkan perasaan yang baik untuk animasi dasar sebelum pindah ke elemen yang lebih utama. Anda mungkin juga mempertimbangkan untuk memakai AJAX atau sebuah animasi paralaks. Apa yang baik tentang salah satu dari pilihan ini adalah bahwa yang memberikan Anda waktu untuk memuat elemen tanpa pengguna sadari. Karena elemen yang dimuat ketika user malakukan scolling, Anda mendapatkan beberapa detik yang berharga untuk mendapatkan segalanya.

Tutorial lainya   Membuat Gradient Background dengan gradStop.js

2. Optimalkan Gambar

Dengan kualitas HD dan retina display yang disediakan untuk para pengguna, Anda mungkin tergoda untuk memuat semua gambar Anda dengan ukuran besar pada resolusi tinggi ketika Anda sedang membangun website Anda. Jangan jatuh ke dalam perangkap ini. Sebagian besar gambar-gambar ini adalah cara yang mungkin terlalu besar untuk situs Anda dan membuat anda harus menanganinnya secara efisien.

Ketahui jenis file Anda. Format file yang paling umum untuk gambar pada web adalah JPG, PNG, GIF dan SVG.

  • JPG: Terbaik untuk foto, file JPG dapat berbagai ukuran dari kecil ke besar. Ketika menyimpan file JPG untuk penggunaan website, pastikan untuk menyimpan file yang sudah dioptimalkan. (Dalam Adobe Photoshop, Anda dapat mengoptimalkan gambar untuk web menggunakan pengaturan ekspor di bawah File> Export> Export As.)
  • PNG: Gunakan format file ini untuk gambar yang meliputi teks, sehingga huruf yang yang dibuat akan bagus. File ini memiliki ukuran agak kecil.
  • GIF: Format file yang lebih disukai untuk elemen animasi yang lebih kecil, seperti animasi gambar dengan meme yang sedang populer. Namun berhati-hatilah, format file ini bisa menjadi berat jika Anda tidak berhati-hati.
  • SVG: Jika Anda membutuhkan gambar vektor untuk web, ini adalah pilihan terbaik. Hal ini dapat digunakan untuk apa pun dari ikon yang akan dijadikan logo.

3. Peletakan Kode yang Tepat

Anda mungkin tergoda untuk membuat sekelompok ikon bagus dan gambar untuk website Anda dan memuat setiap sebagai unsur individu. Hal ini dapat menyebabkan beberapa masalah. Sebaliknya, gunakan kode untuk memanggil elemen ini bila memungkinkan.

Gunakan CSS untuk memuat gambar latar belakang. Ini akan “memaksa” situs Anda untuk memuat segala sesuatu yang lain di depan yang di proses sebagai background, sehingga pengguna dapat mulai melihat unsur-unsur dan teks lainnya pada situs Anda. W3Schools memiliki tutorial yang besar dan sederhana untuk bagaimana melakukan ini.

Tutorial lainya   Menampilkan Related Posts di WordPress

Ada banyak alat tersebut yang dapat ditemukan dari Font Awesome Icons dan banyak CSS dan JavaScript library lainnya yang dapat Anda gunakan untuk membuat elemen besar dengan efek menyenangkan yang ringan. (CSS Design Awards memiliki koleksi sangat baik dari 30 tombol dan elemen form jika anda ingin mencoba.)

4. Penggunaan Video Pendek

Unsur lain yang menjadi Trend pada desain web adalah penggunaan video layar penuh di situs Anda. Ini bisa menjadi sebuah perangkap lain ketika dimuat dalam sebuah situs. Anda akan menemukan diri Anda terjebak antara kualitas video, konten video dan kecepatan yang harus memakan banyak tempat.

Video terbaik adalah video yang sangat pendek, hanya beberapa detik dan berulang-ulang sehingga video tidak berhenti. Anda lebih baik tidak perlu menyertakan suara atau efek lain.

Anda dapat mencoba beberapa trik lain untuk mendapatkan ukuran file Anda lebih kecil sebanyak mungkin jika memungkinkan.

  • Pikirkan tentang overlay warna atau resolusi video blur yang lebih rendah. Masih dapat terlihat rapi, tapi tidak akan membutuhkan banyak bandwidth.
  • Pertimbangkan video yang kurang dari layar penuh dalam ukuran.
  • Buang autoplay, merupakan sebuah “trik” bagi pengguna ke dalam pemikiran situs Anda bagaimana situs anda dapat memuat lebih cepat dari itu.
  • Jangan terjebak dengan video panjang. Jika Anda ingin menampilkan beberapa video klip, pertimbangkan unsur video “slider” atau manual untuk mengganti video pada waktu tertentu sehingga pengguna melihat sesuatu yang baru setiap kali mereka mengunjungi situs. (Tidak peduli seberapa baik klip Anda, beberapa pengguna akan menonton lebih dari beberapa detik, sehingga tidak mengorbankan waktu beban untuk klip lagi.)

5. Penggunaan Template

Jika Anda menggunakan WordPress atau sistem manajemen konten(CMS) lain dengan menggunakan tema, perku diingat bahwa tidak semua tema yang dibangun adalah sama. Meskipun Anda mungkin akan memiliki lebih beruntung dengan pilihan premium – beberapa yang memungkinkan Anda untuk “mematikan” beberapa elemen yang tidak terpakai – mengambil dan melihat dari dekat kode dan membangun untuk memastikan hal itu bukanmerupakan bogging situs Anda turun.

Tutorial lainya   Live CSS Editor Tools- Manipulasi CSS pada Browser

6. Penggunaan Plugin

Apakah Anda memiliki banyak plugin atau aplikasi pihak ketiga yang terkait dengan situs Anda? Apakah Anda aktif menggunakan mereka semua? Pastikan untuk mematikan plugin yang tidak digunakan untuk mengoptimalkan efisiensi.

Pengguna WordPress dapat mengambil keuntungan dari Plugin Performance Profiler untuk melihat plugin apa yang sedang aktif dan bagaimana mereka bekerja. Hal ini dapat membantu Anda memecahkan masalah dan mengidentifikasi masalah dan menghapus atau mengkonfigurasi ulang plugin. (Permasalahan umumnya adalah plugin penggunaan plugin sosial sharing.)

7. Kompresi

Tidak senua komponen website Anda harus dikompres tetapi Anda juga dapat membendung situs secara keseluruhan untuk membantu tetap dibangun dan berjalan secara cepat. Di antara unsur-unsur yang dapat dikompresi adalah CSS, file JavaScript, gambar, video (dengan mengubah ukuran) dan situs yang menggunakan memanfaatkan alat seperti GZIP.

Sebuah file yang diminified merupakan jalan terbaik ketika mereka menggunakan plugin dan membuat file yang lebih kecil. Anda juga ingin memeriksa bagaimana kode dirancang dalam situs. Untuk kecepatan maksimum, semua JavaScript harus dimasukkan dalam satu file dan semua CSS harus dimasukkan dalam satu file lainnya. (Satu catatan lain: Di mana Anda menempatkan kode link CSS di atas halaman dan meletakkan JavaScript di bawah untuk meningkatkan kecepatan situs Anda.)

Kesimpulan

Apakah situs Anda memuat cukup cepat? Jika tidak, saatnya untuk memberi sedikit sentuhan untuk membuat situs anda dapat bekerja secara optimal. (Jika Anda harus berpikir tentang pertanyaan ini, maka situs Anda mungkin tidak cukup cepat.)

Website harus cepat sehingga pengguna dapat berinteraksi langsung dan merasa senang dengan website yang cepat dalam memuat. Lama waktu yang dibutuhkan untuk memuat halaman, tanpa memperhatikan perangkat yang digunakan, semakin besar kemungkinan adalah pengguna akan meninggalkan situs itu sama sekali.

Penulis Tutorial

Penulis Tutorial

Kata terindah

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *