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?

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

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.

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:

Tombol detail

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

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.

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.

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.

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.

Hal ini mudah dilakukan dengan properti CSS.

Selain itu, tidak perlu memuat file berbeda untuk logo dengan warna berbeda. Cukup gunakan satu dan setel properti di 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.