10 Cara Mudah Meningkatkan Kecepatan Website di Tahun 2020

Kecepatan halaman dulunya adalah salah satu pilar dasar desain web. Akhir-akhir ini, sayangnya mengambil kursi belakang karena internet bandwidth yang lebih tinggi ("jadi mengapa repot-repot?") Dan penerapan kerangka front-end modern. Namun, kecepatan situs web tetap penting untuk pengalaman pengguna dan monetisasi, dan pengaruhnya terhadap situs Anda mungkin jauh lebih besar daripada yang Anda sadari.

Pengaruh pengoptimalan situs web Anda untuk kecepatan yang berkaitan dengan monetisasi iklan dan pengalaman pengguna tidak dapat dibesar-besarkan. Untuk mengetahui seberapa baik kinerja situs Anda dalam hal kecepatan, Anda dapat menggunakan alat audit Chrome atau menggunakan alat seperti GTmetrix atau alat pengembang Google.

Dalam artikel ini, kami akan membahas sedikit hal teknis, memandu Anda melalui sepuluh tindakan dasar yang akan mempercepat situs web Anda di tahun 2020, menghasilkan UX yang lebih baik, dan monetisasi yang lebih baik.

Jadikan server Anda bekerja untuk Anda

Menyiapkan server Anda dengan benar dapat sangat meningkatkan kinerja kecepatan. Dua penyiapan mudah yang perlu Anda pastikan telah Anda miliki:

1. Kompresi diaktifkan – pastikan Anda mengaktifkan kompresi GZIP untuk semua file teks Anda (HTML, JS, CSS, ETC….).
2. HTTP2 – Jika server Anda dapat mendukung HTTP2, pastikan untuk mengaktifkannya.Ini cara yang bagus untuk meningkatkan kinerja tanpa harus mengubah apa pun di situs.
   Lihat demonstrasi keren HTTP2 oleh Vodien ini.

Gunakan Pemuatan Lambat

Pemuatan malas adalah proses memuat konten hanya ketika akan ditampilkan. Ini akan mengurangi pengunduhan banyak konten tambahan yang mungkin tidak pernah dapat diakses oleh pengguna, dan membebaskan browser untuk meningkatkan kinerja secara drastis. Kabar baiknya adalah ada banyak paket siap pakai yang dapat membantu Anda memuat konten dengan cepat. Lebih baik lagi, dimulai dengan Chrome 76 (Juli 2019), Lazy Loading terintegrasi secara native dengan HTML. Cukup tambahkanloading=”lazy ” ke tag, dan selesai.

Buat file Anda lebih kecil

Memperkecil – Ini adalah proses menghilangkan spasi dan komentar dari kode.Mereka sangat penting untuk membuat kode dapat dibaca oleh manusia, tetapi komputer tidak membutuhkannya. Meminimalkan dapat mengurangi ukuran file lebih dari 70%. Anda harus mengecilkan semua file HTML, CSS, dan JS Anda. Pastikan Anda menyimpan yang asli jika Anda perlu melakukan perubahan. Hari ini setiap IDE utama memiliki plugin yang akan memperkecil file Anda untuk Anda. Jika Anda menggunakan paket seperti React, minifikasi dilengkapi dengan pengocokan pohon bawaan.

Memisahkan file – Pastikan file Anda hanya memiliki apa yang mereka butuhkan.Memisahkan file membantu membuat file lebih kecil dan proyek Anda jauh lebih mudah dikelola.

Optimalkan gambar

Ukuran gambar yang benar – Desain web yang responsif telah menjadi norma yang mengarah ke gambar yang ditampilkan dalam berbagai ukuran tergantung pada layar.Kami dapat menggunakannya untuk keuntungan kami dan menyimpan beberapa ukuran berbeda untuk gambar kami. Tidak perlu mengunduh file besar jika gambar tidak dapat menampilkan semua piksel tersebut. Tag gambar dan atributsrcsetmembuatnya sangat mudah dilakukan.

Panduan ini akan memandu Anda melalui beberapa praktik terbaik dan penerapan mudah untuk mengubah ukuran gambar secara responsif.

Format generasi berikutnya – Format gambar baru yang sekarang didukung di sebagian besar browser dapat mengurangi ukuran file secara drastis (tidak hanya untuk foto).Format WebP terbuka Google, misalnya, dapat mengurangi antara 64% dan 92% ukuran file. Dalam kasus di bawah ini, kami menggunakan file WebP dalam 2 ukuran berbeda dan menambahkan gambar jpg cadangan untuk browser yang tidak mendukung webP.

Image Sprite – Image sprite adalah gambar yang terdiri dari banyak gambar kecil.Menggunakan sprite gambar untuk semua tombol\logo Anda akan mengurangi jumlah panggilan server yang Anda perlukan untuk memuat halaman. Jika Anda menggunakan HTTP/1.1, ini akan meningkatkan waktu pemuatan.

Terapkan kebijakan cache sisi klien

Waktu muat halaman dapat ditingkatkan secara signifikan dengan meminta browser untuk menyimpan file yang telah diunduh. Ini relevan untuk file internal dan eksternal.

File internal – Ini adalah file yang dapat digunakan kembali di situs Anda seperti style sheet dan logo.Biasanya tanggal kedaluwarsa ditetapkan menjadi 1 tahun untuk file yang tidak berubah, seperti logo, CSS umum, dan gambar dengan pengidentifikasi unik. Jika Anda memiliki file yang ingin diubah lebih sering, Anda dapat menetapkan tanggal kedaluwarsa yang sesuai.

Paket eksternal – Misalnya, jika situs Anda menggunakan paket bootstrap, alih-alih mengunduh paket ke situs web Anda, Anda memiliki opsi untuk menggunakan CDN.Jika Anda melakukan ini, bahkan saat pertama kali pengguna mengunjungi situs web Anda, dia mungkin tidak perlu mengunduh paket karena ini adalah paket yang populer dan mungkin sudah diunduh dari situs lain.

Manfaatkan caching sisi server

Idenya sama seperti di caching frontend, menyelamatkan server Anda dari mengerjakan hal-hal yang telah dibuatnya atau yang sering digunakannya. Jika Anda memiliki situs konten, Anda tidak ingin basis data Anda terkena setiap kali pengguna memasuki situs web, karena kinerja yang lambat dan biaya basis data. Karena semua pengguna akan melihat artikel yang sama, Anda dapat meng-cache-nya satu kali dan tetap menayangkan versi yang di-cache hingga ada perubahan.

Banyak paket berbeda yang dapat membantu Anda dalam hal ini, tergantung pada bagaimana server Anda dirancang. Dan, tentu saja, Anda dapat mendesain caching Anda sendiri agar sesuai dengan kebutuhan spesifik Anda.

Gunakan CDN

Jaringan Pengiriman Konten menghubungi server Anda, meng-cache respons, lalu menyajikannya secara lokal ke pengguna Anda. Sekilas, mereka tampak sangat mahal. Namun, menyiapkan CDN Anda dengan benar akan mengurangi biaya penayangan sekaligus meningkatkan kinerja secara signifikan.

Hindari pengalihan

Hindari Pengalihan! Pengalihan adalah cara pasti untuk memperlambat segalanya. Terkadang diperlukan, seperti saat mengarahkan ulang pengguna untuk menggunakan versi aman situs Anda (HTTP VS HTTPS) atau saat Anda memindahkan konten di situs web tetapi ingin tautan SEO lama Anda terus mengarah ke konten.

Jika Anda menemukan diri Anda menggunakan pengalihan, pastikan Anda menghindari pengalihan berantai. Pengalihan berantai adalah pengalihan yang mengarah ke pengalihan lain. Jika Anda harus mengarahkan ulang, pastikan Anda hanya mengarahkan ulang satu kali!

Prioritaskan dan hapus aktivitas pemblokiran render

Rendering mengacu pada pemuatan, dan saat melihat halaman web Anda, prioritas tertinggi untuk pemuatan cepat adalah bagian paro atas. Karena HTML dibaca dari atas ke bawah, penting untuk mendorong hal-hal yang tidak penting untuk tampilan halaman pertama di luar hal-hal yang penting.

Misalnya, jika Anda memiliki tag JS untuk analitik, Anda dapat menempatkannya di footer halaman. Dengan cara ini, Anda memastikan bahwa browser pengguna terlebih dahulu berurusan dengan hal-hal yang dapat dilihat pengguna dan menunda hal-hal lain untuk nanti.

Pilih mitra Anda dengan bijak

Di web, seperti halnya dalam kehidupan, hal terpenting adalah memilih mitra yang tepat. Anda dapat merampingkan situs Anda dan memiliki situs web cantik yang dirancang untuk bekerja dengan cepat. Tetapi dengan mitra iklan yang menyebabkan situs memuat dengan lambat, Anda menciptakan pengalaman pengguna yang mengganggu. Setahun yang lalu, kami mulai bekerja sama dengan penerbit di industri esports, dan kami kesulitan memonetisasi situs tersebut. Setelah memeriksa situs dengan saksama, kami menemukan unit iklan yang sangat lambat sehingga menyebabkan setiap mitra iklan lain di situs tersebut kehabisan waktu. Setelah situs menghapus mitra iklan ini, RPM keseluruhan per halaman situs menjadi empat kali lipat!

Terus belajar

Pada artikel ini, kami hanya membahas beberapa tips cepat. Jadi, pastikan untuk masuk lebih dalam untuk peningkatan kinerja. Selain itu, ekosistem kita terus berkembang. Jika Anda sudah sejauh ini, Anda mungkin tahu selalu ada sesuatu yang baru untuk dipelajari.

Saya sarankan Anda melihat dua tautan di bawah ini. Saya pikir mereka adalah tempat yang bagus untuk memulai.

https://www.udacity.com/course/browser-rendering-optimization–ud860

https://medium.com/swlh/what-the-amp-augmenting-my-own-site-with-accelerated-mobile-pages-amp-52927bab7cb8