10 Tips untuk Meningkatkan Kecepatan Website

Improve your Speed

Kecepatan dan kinerja halaman web sangat penting bagi pengalaman pengguna.

Jika situs Anda terlalu lambat, Anda tidak hanya akan kehilangan pengunjung, tetapi juga pelanggan potensial. Mesin pencari seperti Google memperhitungkan kecepatan situs web ke dalam peringkat di peringkat pencarian, jadi ketika mengoptimalkan kecepatan situs Anda, Anda harus mempertimbangkan semuanya. Setiap milidetik berarti.

Berikut adalah beberapa saran dasar dan umum untuk meningkatkan kinerja situs.

Tunda Pemuatan Konten Bila Mungkin

Ajax memungkinkan kami membuat halaman web yang dapat diperbarui secara asinkron kapan saja. Ini berarti bahwa alih-alih memuat kembali seluruh halaman saat pengguna melakukan suatu tindakan, kami dapat memperbarui bagian halaman itu.

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

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

Gunakan File JS dan CSS Eksternal

Ketika pengguna pertama kali memuat halaman web Anda, browser akan men-cache sumber daya eksternal seperti file CSS dan JavaScript. Jadi, alih-alih file JavaScript dan CSS sebaris, lebih baik menempatkannya di file eksternal.

Menggunakan CSS sebaris juga meningkatkan waktu rendering suatu halaman web; memiliki semua yang didefinisikan dalam file CSS utama Anda memungkinkan browser bekerja lebih sedikit saat merender halaman, karena sudah tahu semua aturan gaya yang perlu diterapkan.

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

Gunakan Sistem Caching

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

Sistem manajemen konten populer seperti WordPress dan Drupal akan memiliki fitur caching statis yang mengubah halaman yang dihasilkan 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 kritis yang diinstal Six Revisi). Drupal memiliki fitur caching halaman pada intinya.

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

Hindari Mengubah Ukuran Gambar dalam HTML

Jika suatu gambar awalnya berdimensi 1280x900px, tetapi Anda harus memiliki ukuran 400x280px, Anda harus mengubah ukuran dan menyimpan kembali gambar menggunakan editor gambar seperti Photoshop alih-alih menggunakan atribut lebar dan tinggi HTML (yaitu <img width = “400” height = “280” src = “myimage.jpg” />). Ini karena, tentu saja, gambar yang besar akan selalu lebih besar dalam ukuran file daripada gambar yang lebih kecil.

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

Improving Speed

Berhenti Menggunakan Gambar untuk Menampilkan Teks

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

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

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 menampilkan gambar foto dengan ukuran file yang lebih kecil.

Optimalkan Cara Anda Menulis Kode

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

Muat JavaScript di Akhir Dokumen Anda

Lebih baik jika skrip Anda dimuat di akhir halaman daripada di awal. Peramban memungkinkan untuk merender semuanya sebelum memulai JavaScript. Ini membuat halaman web Anda terasa lebih responsif karena cara kerja JavaScript adalah ia memblokir apa pun di bawahnya dari rendering hingga selesai diunduh. Jika memungkinkan, rujuk JavaScript tepat sebelum tag <body> penutup dokumen HTML Anda.

Gunakan Jaringan Pengiriman Konten (CDN)

Kecepatan situs Anda sangat dipengaruhi oleh di mana lokasi pengguna berada, relatif terhadap server web Anda. Semakin jauh jaraknya, semakin jauh jarak data yang ditransmisikan harus melakukan perjalanan. Setelah konten Anda di-cache di beberapa lokasi geografis yang ditempatkan secara strategis membantu mengatasi masalah ini. CDN akan sering membuat biaya operasi Anda sedikit lebih tinggi, tetapi Anda pasti mendapatkan bonus kecepatan.

Website Jet Speed

Optimalkan Caching Web

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

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

Misalnya, Anda dapat mengatur tajuk respons HTTP seperti Kedaluwarsa dan Terakhir Dimodifikasi untuk mengurangi kebutuhan mengunduh ulang file tertentu ketika pengguna kembali ke situs Anda. Untuk mempelajari lebih lanjut, baca tentang caching di HTTP dan tingkatkan caching browser.

Author: Eli Carter