10 Tips Mengoptimalkan Kecepatan Situs Web Anda

10 Tips Mengoptimalkan Kecepatan Situs Web Anda

10 Tips Mengoptimalkan Kecepatan Situs Web Anda

ellaaudreyrae.com – Kecepatan dan kinerja halaman web sangat penting untuk pengalaman pengguna. Jika situs Anda terlalu lambat, Anda tidak hanya akan kehilangan pengunjung, tetapi juga calon pelanggan. Mesin pencari seperti Google memperhitungkan kecepatan situs web dalam peringkat pencarian, jadi ketika mengoptimalkan kecepatan situs Anda, Anda harus mempertimbangkan semuanya. Setiap milidetik berarti.

 

  1. Tunda Memuat Konten Jika Memungkinkan

Ajax memungkinkan kita membuat halaman web yang dapat diperbarui secara asinkron kapan saja. Ini berarti bahwa alih-alih memuat ulang seluruh halaman saat pengguna melakukan tindakan, kita cukup mengupdate bagian halaman itu.

 

Kita bisa menggunakan galeri gambar sebagai contoh. File gambar besar dan berat; mereka dapat memperlambat kecepatan pemuatan halaman halaman web. Alih-alih memuat semua gambar ketika pengguna pertama kali mengunjungi halaman web, kami hanya dapat menampilkan thumbnail gambar dan kemudian ketika pengguna mengkliknya, kami dapat meminta gambar ukuran penuh secara asinkron dari server dan memperbarui halaman. Dengan cara ini, jika pengguna hanya ingin melihat beberapa gambar, mereka tidak perlu bersusah payah menunggu semua gambar diunduh. Pola pengembangan ini disebut lazy loading .

 

Pustaka pengembangan Ajax / web seperti jQuery, Prototype, dan MooTools dapat membuat pemuatan konten yang ditangguhkan lebih mudah diterapkan.

 

  1. Gunakan File JS dan CSS Eksternal

Saat pengguna pertama kali memuat halaman web Anda, browser akan menyimpan sumber daya eksternal seperti file CSS dan JavaScript. Jadi, alih-alih file JavaScript dan CSS sebaris, yang terbaik adalah menempatkannya di file eksternal.

 

Menggunakan inline CSS juga meningkatkan waktu rendering halaman web; memiliki semua yang ditentukan dalam file CSS utama Anda memungkinkan browser melakukan lebih sedikit pekerjaan saat merender halaman, karena browser sudah mengetahui semua aturan gaya yang perlu diterapkan. Oleh karena itu sangat di sarankan jika anda gunakan template website responsive untuk pemula.

 

Sebagai bonus, menggunakan file JavaScript dan CSS eksternal membuat pemeliharaan situs lebih mudah karena Anda hanya perlu memelihara file global, bukan kode yang tersebar di beberapa halaman web.

 

  1. Gunakan Sistem Caching

Jika Anda menemukan bahwa situs Anda terhubung ke database Anda untuk membuat konten yang sama, inilah saatnya untuk mulai menggunakan sistem cache. Dengan memiliki sistem caching, situs Anda hanya perlu membuat konten sekali alih-alih membuat konten setiap kali halaman dikunjungi oleh pengguna Anda. Jangan khawatir, sistem cache menyegarkan cache mereka secara berkala tergantung bagaimana Anda mengaturnya – sehingga halaman web yang terus berubah (seperti posting blog dengan komentar) dapat di-cache.

 

Sistem manajemen konten populer seperti WordPress dan Drupal akan memiliki fitur cache statis yang mengubah halaman yang dibuat secara dinamis menjadi file HTML statis untuk mengurangi pemrosesan server yang tidak perlu. Untuk WordPress, lihat WP Super Cache (salah satu dari enam plugin WordPress penting yang telah diinstal oleh Six Revisi). Drupal memiliki fitur caching halaman di intinya.

 

Ada juga sistem cache database dan skrip sisi server yang dapat Anda instal di server web Anda (jika Anda memiliki kemampuan untuk melakukannya). Misalnya, PHP memiliki ekstensi yang disebut akselerator PHP yang mengoptimalkan kinerja melalui caching dan berbagai metode lainnya; salah satu contoh akselerator PHP adalah APC . Caching database meningkatkan kinerja dan skalabilitas aplikasi web Anda dengan mengurangi pekerjaan yang terkait dengan proses baca / tulis / akses database; memcache , misalnya, menyimpan cache kueri database yang sering digunakan.

 

  1. Hindari Mengubah Ukuran Gambar dalam HTML

Jika gambar aslinya berukuran 1280x900px, tetapi Anda harus memiliki ukuran 400x280px, Anda harus mengubah ukuran dan menyimpan ulang gambar tersebut menggunakan editor gambar seperti Photoshop daripada menggunakan HTML widthdan heightatributnya (yaitu <img width=”400″ height=”280″ src=”myimage.jpg” />). Ini karena, secara alami, gambar yang besar akan selalu lebih besar dalam ukuran file daripada gambar yang lebih kecil.

 

Alih-alih mengubah ukuran gambar menggunakan HTML, ubah ukurannya menggunakan editor gambar seperti Photoshop, lalu simpan sebagai file baru.

 

  1. Berhenti Menggunakan Gambar untuk Menampilkan Teks

Teks dalam gambar tidak hanya menjadi tidak dapat diakses oleh pembaca layar dan sama sekali tidak berguna untuk SEO , tetapi menggunakan gambar untuk menampilkan teks juga meningkatkan waktu muat halaman web Anda karena lebih banyak gambar berarti halaman web yang lebih berat.

 

Jika Anda perlu menggunakan banyak font khusus di situs web Anda, pelajari tentang CSS @ font-face untuk menampilkan teks dengan font khusus secara lebih efisien. Tidak perlu dikatakan bahwa Anda harus menentukan apakah menyajikan file font akan lebih optimal daripada menyajikan gambar.

 

  1. Optimalkan Ukuran Gambar dengan Menggunakan Format File yang Benar

Dengan memilih format gambar yang tepat, Anda dapat mengoptimalkan ukuran file tanpa kehilangan kualitas gambar. Misalnya, kecuali Anda memerlukan transparansi gambar (lapisan alfa) yang ditawarkan format PNG, format JPG sering kali menampilkan gambar foto dalam ukuran file yang lebih kecil.

 

  1. Optimalkan Cara Anda Menulis Kode

Perhatikan kode sumber Anda. Apakah Anda benar-benar membutuhkan semua tag yang Anda gunakan atau dapatkah Anda menggunakan CSS untuk membantu tampilan? Misalnya, daripada menggunakan <h1><em>Your heading</em></h1>, Anda dapat dengan mudah menggunakan CSS untuk membuat tajuk Anda miring menggunakan font-styleproperti. Menulis kode secara efisien tidak hanya mengurangi ukuran file dokumen HTML dan CSS Anda, tetapi juga membuatnya lebih mudah untuk dipelihara.

 

  1. Muat JavaScript di Akhir Dokumen Anda

Paling baik jika Anda memuat skrip di akhir halaman daripada di awal. Ini memungkinkan browser untuk merender semuanya sebelum memulai dengan JavaScript. Ini membuat laman web Anda terasa lebih responsif karena cara kerja JavaScript adalah memblokir apa pun di bawahnya agar tidak dirender hingga selesai diunduh. Jika memungkinkan, rujuk JavaScript tepat sebelum <body>tag penutup dokumen HTML Anda. Untuk mempelajari lebih lanjut, baca tentang menunda pemuatan JavaScript .

 

  1. Gunakan Jaringan Pengiriman Konten (CDN)

Kecepatan situs Anda sangat dipengaruhi oleh lokasi pengguna, relatif terhadap server web Anda. Semakin jauh mereka, semakin jauh jarak yang harus ditempuh data yang dikirim. Memiliki konten Anda dalam cache di beberapa lokasi geografis yang ditempatkan secara strategis membantu mengatasi masalah ini. Sebuah CDN akan sering membuat biaya operasi Anda sedikit lebih tinggi, tetapi Anda pasti mendapatkan kecepatan bonus. Lihat MaxCDN atau Amazon Simple Storage Service (Amazon S3).

 

  1. Mengoptimalkan Caching Web

Seiring dengan penggunaan sistem cache, Anda harus membuat situs web yang memanfaatkan cache web sebanyak mungkin. Cache web adalah saat file di-cache oleh browser web untuk digunakan nanti. Hal-hal yang dapat disimpan dalam cache oleh browser termasuk file CSS, file JavaScript, dan gambar.

 

Selain dari dasar, seperti meletakkan kode CSS dan JavaScript yang digunakan di banyak halaman dalam file eksternal, ada banyak cara untuk memastikan bahwa Anda menyimpan file Anda dengan cara yang seefisien mungkin.