Empat Cara Unik Untuk Mempercepat Pemuatan Halaman Situs

Ada beberapa cara tidak biasa yang dapat digunakan untuk mempercepat proses pemuatan konten pada website.

Parameter yang akan kami tampilkan tergolong jarang dipakai, tetapi dapat memengaruhi kecepatan situs secara signifikan. Hal ini penting untuk faktor pemeringkatan situs dalam mesin pencari.

Gunakan inline image dan SVG, bukan PNG

Cobalah gunakan SVG untuk ikon dan piktogram. Gambar vektor dapat menghemat ukuran file hingga 60%. Apa pentingnya memakai ikon kecil seperti ini?

Salah satu cara mempercepat loading halaman webiste adalah dengan menggunakan gambaer berformat SVG yang memiliki ukuran file kecil
Gunakan ikon atau gambar dengan format SVG untuk mempercepat loading website

Sekarang kita mengaplikasikan SVG di sebuah situs tiket. Saat mensimulasikan koneksi 3G dan memeriksa kecepatan memuat halaman, kamu akan melihat hal berikut ini:

Gambar dengan file berukuran kecil lebih cepat dimuat dalam sebuah situs web bahkan dalam koneksi lambat sekalipun
Gambar dengan file berukuran kecil akan lebih cepat mucul bahkan di koneksi lambat sekalipun

Situs ini tidak menggunakan HTTP / 2, jadi mengunduh gambar seukuran 1,2 kb saja akan memakan waktu hampir 600 ms dan permintaan lain akan terblokir. Caching partly dapat menyelesaikan masalah, tetapi kita berjuang untuk meraih traffic. Kecepatan menjadi elemen penting bagi pengunjung situs. Jadi, mari perhatikan inline image.

Inline-SVG

Secara umum, setidaknya ada empat cara untuk menempatkan gambar vektor:

  1. Melalui tag <img>.
  2. Sebagai gambar latar belakang di CSS.
  3. Melalui tag <object>.
  4. Penyematan langsung (Inline) menggunakan tag <svg>.

Dari sudut pandang kecepatan, ini adalah opsi terakhir yang paling efisien dan tidak memerlukan permintaan jaringan untuk setiap gambar.

Artinya, gambar vektor ditempatkan langsung di kode HTML halaman. Hal ini mungkin dilakukan karena file SVG tidak menyimpan gambar itu sendiri, tetapi dapat diedit dalam bentuk teks.

Ada beberapa konverter yang tersedia di internet, pilihlah salah satu.

Selain JavaScript, gunakan juga HTML

Penggunaan Javascript (JS) tentu saja nyaman. Namun, saat kita berbicara tentang kecepatan, jika semakin sedikit skrip maka semakin baik pula kinerja situs. Selain itu, HTML5 mampu menangani banyak tugas yang biasanya dilakukan dengan JavaScript.

Daftar drop-down dengan pencarian

Elemen umum di interface.

Gunakan daftar drop-down untuk mempercepat loading halaman website
Daftar drop-down dengan pencarian

Salah satu libraries terpopuler yang memungkinkan Anda mengimplementasikan blok seperti itu adalah Select2. Hal ini didapatkan dengan penggunaan JQuery dan CSS. Untuk elemen sederhana di interface, Anda perlu memuat:

– JQuery – 101 Kb.

– Select2 JavaScript – 24 KB.

– Select2 CSS – 3 KB.

Namun, fungsi ini tersedia dalam HTML di luar kotak dan berfungsi untuk daftar kecil. Saat ditambahkan dengan tag <datalist>:, hasilnya akan terlihat seperti:

Tampilan daftar drop-down menggunakan tag
Tampilan daftar drop-down menggunakan tag “datalist”

Tombol detail

Contoh umum penerapan JS adalah tombol “Read more” yang menyembunyikan sebagian teks:

Tombol detail seperti "read more" dapat mempercepat loading halaman situs web
Contoh tombol detail dengan teks “read more”

Jika ingin menggali lebih dalam dan mengurangi jumlah kode JS di situs Anda, berikut ini sumber daya lengkap dengan alternatif dalam HTML dan CSS murni (sliders, modals, forms, dll.): http://youmightnotneedjs.com/ .

Masalah penggunaan JS yang berlebihan tidak hanya berdampak pada ukuran file, tetapi juga pada jumlah permintaan jaringan dan kecepatan rendering situs Anda oleh mesin pencari. Pada akhirnya, hal ini dapat memperlambat pengindeksan.

Pengaturan jaringan

Di bawah ini adalah beberapa fitur teknis yang dapat mengurangi jumlah permintaan jaringan antara browser pengguna dan server.

TLS 1.3

TLS (dan pendahulunya SSL) adalah protokol yang bertanggung jawab atas transmisi data yang aman menggunakan enkripsi.

Secara historis, pertukaran data antara browser dan server terjadi dalam beberapa kali lintasan. Secara kasar, jika pengguna berada pada “jarak” 50ms dari server, maka koneksi membutuhkan waktu 200ms. Ingatlah bahwa Google merekomendasikan 200ms sebagai waktu koneksi optimal.

TLS 1.3 adalah versi terbaru yang mampu mempercepat proses satu setengah hingga dua kali lipat dan jauh lebih efisien dari versi sebelumnya.

Penggunaan protokol TLS mampu meningkatkan kecepatan loading website hingga 2 kali lipat lebih cepat
Penggunaan protokol TLS mampu meningkatkan kecepatan loading website hingga 2 kali lipat lebih cepat

Ada beberapa alat di internet untuk memeriksa versi protokol yang digunakan pada domain. Silakan Google dengan kata kunci [TLS Checker].

QUIC / HTTP 3

Selama 2-3 tahun terakhir, sebagian besar situs telah mengalami transisi dari HTTP / 1.1 ke HTTP / 2. Pembaruan ini memengaruhi kecepatan pemuatan situs secara signifikan karena beberapa alasan:

– Beberapa permintaan dikirim melalui satu koneksi TCP.

– Ukuran header HTTP dapat dikompresi.

– Prioritas aliran yang memungkinkan pengembang menyesuaikan pentingnya beberapa aliran relatif terhadap aliran lainnya dan menyusun urutan penerimaan data.

– Server Push adalah teknologi yang dapat mengirim data ke klien sebelum mereka memintanya.

Cara kerja HTTP 1.1 dan HTTP/2 dan pengaruhnya terhadap kecepatan loading website
Cara kerja HTTP 1.1 dan HTTP/2 dan pengaruhnya terhadap kecepatan loading website

Namun, hal ini masih bisa berkembang. Untuk mengurangi jumlah siklus atau permintaan multiplexing, mereka mulai menerapkan HTTP / 3 yang bekerja melalui protokol QUIC. Teknologi ini dikembangkan oleh Google pada tahun 2012 untuk menggantikan TCP yang lama.

QUIC baru saja mendapatkan momentum, tetapi pada beberapa server (CloudFlare, Verizon Digital Media Services) protokolnya sudah didukung. Keuntungan utama menggunakan protokol ini adalah koneksi cepat dan latensi minimal antara permintaan dan respons.

Kecepatan koneksi menggunakan HTTP/3 / QUIC
Kecepatan koneksi menggunakan HTTP/3 / QUIC

Membuat CSS bekerja lebih keras

Berikut ini beberapa tips untuk menggunakan CSS secara ekonomis dalam hal mengurangi permintaan jaringan.

Gunakan gambar yang sama berkali-kali

Ada banyak elemen berulang di sebuah halaman web, misalnya logo dengan tempat atau warna yang berbeda, tombol navigasi, ikon, dan gambar lain yang diunduh secara terpisah.

Tetapi kebanyakan dari mereka dapat digunakan berkali-kali, meskipun skala, arah, warnanya berbeda. Misalnya, panah yang sama digunakan di sini, meskipun arahnya berbeda.

Menggunakan gambar yang sama dapat mempercepat loading situs website
Menggunakan gambar yang sama dapat mempercepat loading situs website

Hal ini mudah dilakukan dengan properti CSS.

Contoh properti CSS untuk penggunaan gambar yang sama dengan tujuan mempercepat loading situs website
Contoh properti CSS untuk penggunaan gambar yang sama dengan tujuan mempercepat loading situs website

Selain itu, tidak perlu memuat file berbeda untuk logo dengan warna berbeda. Cukup gunakan satu dan setel properti di CSS:

Contoh penggunaan gambar yang sama tapi warna berbeda dengan menggunakan CSS
Contoh penggunaan gambar yang sama tapi warna berbeda dengan menggunakan CSS

Elemen interaksi dan animasi

Sebagian besar implementasi elemen interaktif atau dinamis memakai JavaScript, tetapi jenis animasi ini dapat dilakukan menggunakan CSS.

Beberapa hal lain yang bisa CSS lakukan tanpa melibatkan JS:

Progress bars.

– Menu tarik-turun.

Modal windows.

– Mengedit teks di halaman, dan banyak lagi.

Ada banyak contoh dan template siap pakai di internet. Cobalah gunakan jumlah minimum JS libraries yang diperlukan, lalu kurangi jumlah elemen yang dimuat dari server dengan memasang gambar dan ikon yang dapat digunakan kembali.

Cara apa lagi yang bisa berguna?

– Periksa waktu respons server, ukuran halaman, dan kecepatan pemuatan kode untuk daftar URL. Usahakan untuk meraih indikator kurang dari 900 ms.

– Analisis pesaing sesuai permintaan dengan kemampuan untuk memeriksa kecepatan unduh konten. Cobalah untuk jadi lebih cepat dari pesaing Anda.