Pedoman Umum Meningkatkan Kecepatan Situs Web

Terakhir diperbarui pada April 25, 2023

Saat ini, hampir semua pengguna internet tidak sabar menunggu pemuatan halaman web manapun. Mereka inginnya instan, yang biasanya tidak lebih dari 2-5 detik. Kalau tidak, mereka akan mencari situs lain dengan konten sejenis. Jadi, kecepatan loading atau pemuatan halaman web merupakan kesan pertama bagi pengunjung situs.

Dominasi ponsel pintar

Mayoritas orang memakai ponsel untuk mengakses internet, seperti pada Gambar 1. Statistik blog saya juga menunjukkan fakta ini, yang memunculkan masalah lain. Secara umum, rata-rata performa ponsel berada jauh di bawah performa desktop. Akibatnya, pemuatan halaman web di ponsel akan lebih lambat daripada di desktop.

Kemungkinan besar sama dengan situs web lain. Pastinya, kita akan terus berusaha untuk membangun konten serta fungsionalitas situs web kita. Hal ini akan membantu pengunjung merasa nyaman, dan meningkatkan jumlah pengunjung. Namun, jika pemuatan halaman situs web kita mulai lambat, lalu lintas akan mulai menurun, dan para pengunjung mungkin tidak akan kembali lagi.

Jadi, jika itu menjadi salah satu masalahmu, saya akan memberikan beberapa rekomendasi untuk mempercepat pemuatan situs web kamu. Mungkin beberapa bagian memerlukan pengetahuan teknis. Tetapi saya akan mencoba menulisnya sesederhana mungkin.

Memeriksa performa situs web

Sebelum kamu mulai memperbaiki situs web, pertama-tama, kamu perlu tahu bagaimana performa situs web kamu saat ini. kamu bisa menggunakan beberapa situs layanan analisis daring (online) seperti PageSpeed Insights, GTMetrix, Pingdom, atau semacamnya. Untuk yang luring (offline), kamu dapat menggunakan fitur Audit di menu developer tools pada peramban (browser) Chrome.

Pada PageSpeed Insights atau Audit Chrome, cukup perhatikan pada bagian performa mobile atau ponsel. Karena, akan memberikan diagnosis yang lebih baik. Kadang-kadang, saya mendapatkan skor 99–100 pada performa desktop, tapi hanya mendapatkan skor 50–70 di performa mobile atau ponsel.

Gambar 2 di atas menunjukkan contoh hasil analisis performa suatu halaman web. Gulir (scroll) ke bagian detail diagnostik, seperti Gambar 3, untuk melihat sebab-sebab performa pemuatan atau loading halaman situs menjadi lambat. Bahkan pada situs web yang sama, terkadang beberapa halaman yang berbeda bisa menghasilkan diagnostik yang berbeda pula.

Untuk versi yang lebih terperinci, kamu dapat membuka detail setiap performa. Jadi, kamu bisa fokus memperbaiki setiap detail performa tersebut.

Lakukan backup terlebih dahulu!

Sebelum kamu mencoba meningkatkan kecepatan situs web, kamu harus membuat backup atau cadangan situs web kamu. Ini wajib!

Semua konten, kustomisasi, atau modifikasi di situs web kamu dapat hilang dalam hitungan detik. Jadi, kalau itu terjadi (semoga saja tidak!), kamu cukup mengembalikannya seperti semula dari backup atau cadangan terbaru.

1. Optimalkan penggunaan templat, widget, dan plugin

Jika kamu menggunakan CMS (misal WordPress, Joomla, atau bahkan Blogger), maka bisa jadi templat, widget, dan plugin yang kamu pakai merupakan penyebab lambatnya pemuatan halaman web kamu. Cobalah buka beberapa halaman web kamu, periksa apakah situs web kamu menampilkan banyak objek dan widget. Objek-objek itu termasuk apa pun yang dapat kamu lihat dengan jelas, seperti bagian-bagian layout, gambar, bentuk-bentuk, ataupun animasi.

Performa pemuatan halaman web akan semakin lambat seiring banyaknya jumlah objek. Jika templat kamu menggunakan terlalu banyak objek, widget, dan animasi, maka mungkin kamu perlu mengganti templat kamu. Mungkin saja dengan sedikit usaha, sudah meningkatkan performa secara drastis.

Pilih templat yang minimalis, ringan, atau versi AMP

Kalau kamu memakai Blogger/Blogspot, pertimbangkan untuk memakai templat bawaan (default) dari blogger. Templat ini umumnya ringan dan responsif. Di sisi lain, templat “Accelerated Mobile Pages” (AMP) memiliki performa yang jauh lebih baik pada ponsel daripada templat non-AMP. Namun hingga saat ini blogger belum menyediakan templat default versi AMP. Jika kamu ingin templat AMP, kamu bisa membuat, mencari, atau membelinya dari pengembang pihak ketiga. Selanjutnya, Untuk memeriksa apakah templat yang sedang kamu gunakan sudah memenuhi kriteria AMP, kamu dapat mengunjungi situs AMP Project.

Jika kamu memakai WordPress, Joomla, atau CMS lainnya, maka pastikan kamu mencari templat yang minimalis dan ringan. Pilih templat yang menampilkan objek sesedikit mungkin. Kurangi penggunaan ikon sosial share, slider, widget, animasi, atau elemen menarik lainnya. Mungkin kamu juga perlu mempertimbangkan apakah perlu menggunakan animasi atau tidak, kecuali situs web kamu menjual gambar atau animasi. Selain itu, pengembang AMP juga menawarkan plugin resmi AMP untuk WordPress. Bahkan, saat ini sudah banyak templat WordPress dari pihak ketiga yang mendukung AMP.

Kurangi jumlah penggunaan widget

Selain templat, terlalu banyak widget juga memperlambat proses pemuatan halaman web. Karenanya, kurangi penggunaan widget sebisa mungkin. Setiap widget yang akan dipasang, pertimbangkan dahulu apakah widget tersebut hanya terlihat bagus atau memang wajib ada. Apapun yang hanya terlihat bagus tapi tidak wajib, tidak boleh digunakan.

Pertimbangkan untuk menggunakan widget yang paling penting saja, seperti bilah pencarian, kategori, dan posting terbaru. Artinya, pertimbangkan untuk menghapus widget yang hanya “menarik”, kecuali para pengunjung sangat bergantung pada fungsionalitasnya. Sadari bahwa, pengunjung membuka situs webmu untuk mencari konten, bukan widget.

Kurangi jumlah plugin yang terpasang

Ketika bekerja dengan CMS, plugin pasti sangat penting. Banyak plugin, termasuk plugin SEO, cache, optimasi gambar, dan minifikasi, yang mungkin perlu untuk kita pasang di situs web. Berbagai fitur dan fungsi tambahan ini sangat banyak membantu pemilik situs dalam mengembangkan situs webnya. Tapi, hal itu sangat berpengaruh kepada performa kecepatan website. Semakin banyak plugin terpasang, pasti semakin lambat pemuatan halaman webnya. Jadi, pilihlah plugin yang paling penting saja untuk menjaga performa situs web tetap optimal. Utamakan kualitas dan performa terlebih dahulu daripada lainnya.

2. Gunakan server web LiteSpeed

Beberapa sumber membuktikan bahwa, server web Litespeed memiliki performa lebih tinggi daripada server web lain seperti Apache atau Nginx. Bagi pengguna WordPress dengan server web LiteSpeed, gunakan plugin LiteSpeed Cache for WordPress (LSCWP), untuk meningkatkan kinerja kecepatan situs web kamu. Plugin ini menangani banyak optimasi, seperti caching, minifying, optimasi gambar, dan banyak lagi, semuanya gratis.

Dalam pengalaman saya menggunakan plugin cache di WordPress, plugin LiteSpeed Cache jauh melebihi plugin serupa lainnya, bahkan dengan plugin lain yang versi berbayar. Terlebih lagi, plugin ini memberi kamu fitur tambahan seperti Pengoptimalan Gambar.

Fitur optimasi gambar akan memproses gambar kamu di server LiteSpeed, kemudian mengirimnya kembali ke server kamu untuk penyimpanan. Karenanya kamu tidak perlu membayar server lain untuk penyimpanan gambar. Tapi kelemahannya, servermu akan lebih cepat penuh kalau terlalu banyak mengunggah gambar ke WordPress. Karena itu, mungkin kamu perlu menyesuaikan anggaran hosting web sesuai dengan kebutuhan.

3. Nyalakan fitur cache

Peramban (browser) meminta halaman web dari server. Kemudian, server melakukan beberapa perhitungan yang rumit, termasuk membuat header, konten, sidebar, dan footer. Terakhir, server mengirimkan hasilnya ke peramban. Inilah adalah interaksi normal antara peramban dan server.

Pengunjung situs atau peramban lain juga mungkin meminta halaman yang sama. Pastinya, isi halamannya akan tetap sama. Oleh karena itu, dengan mengaktifkan web caching, server tidak perlu mengulangi semua perhitungan yang kompleks itu. Tetapi cukup mengirimkan halaman web dari hasil perhitungan terakhir. Itulah sebabnya, web caching adalah salah satu fitur penting yang perlu kamu gunakan.

Saat ini teknologi web caching semakin pintar. Ketika administrator mengubah sesuatu di sebuah halaman web, web caching akan menghapus cache terakhir, dan kemudian secara otomatis menghitung ulang halaman dan menyimpan hasil terbarunya.

Web caching mungkin tidak terlalu meningkatkan skor PageSpeed ​​Insights, GTMetrix, atau Pingdom. Tapi ini tetap merupakan sebuah optimasi terhadap situs web kamu. Yang pasti, hal ini akan sangat mengurangi beban server dan meningkatkan skor SEO.

Saat ini, sudah ada banyak plugin web caching bagi para pengguna CMS. Jadi, cukup pasang dan aktifkan saja salah satunya. Untuk pengguna blogger, memang tidak ada plugin web caching. Tapi, kemungkinan besar Google sudah mengaktifkan web caching di server mereka.

4. Gunakan CDN

Secara umum, jarak dari server menuju lokasi pengunjung merupakan salah satu faktor penentu kecepatan transfer. Dalam hal ini, content delivery network (CDN) sangat membantu dalam meningkatkan kecepatan transfer tersebut. Ini karena CDN menggunakan server di berbagai negara untuk mendistribusikan konten. Alhasil, pengunjung akan mendapatkan konten yang sama dari server CDN terdekat.

Di sisi lain, kamu mungkin hanya menargetkan area atau negara lokal. Misalkan, servermu ada di Jakarta (Indonesia) dan target pasarmu juga ada di Indonesia. Maka, CDN mungkin tidak menunjukkan dampak apapun pada kecepatan pemuatan web. Dalam kasus ini, CDN hanya akan membantu mengurangi beban di servermu.

CDN gratis

Saat ini, sudah banyak layanan CDN gratis, seperti Cloudflare, Quic.cloud, dan Jetpack’s site accelerator (Jetpack CDN), yang menawarkan fitur-fitur yang mengagumkan.

Cloudflare merupakan CDN paling populer. Tidak heran, banyak admin situs yang memilih menggunakan Cloudflare. Di sisi lain, Quic.cloud dan Jetpack’s site accelerator (Jetpack CDN) memerlukan situs WordPress dan plugin khusus.

Kode library dari CDN

Selain caching, beberapa CDN, seperti Cdnjs milik Cloudflare and Google Hosted Libraries, juga menyediakan berkas kode library umum. Mereka memberikan akses publik ke berkas kode library umum, seperti JQuery, Web Font Loader, D3.js, dan berkas kode library lainnya. Jadi, kecuali kamu memiliki server yang besar dan kuat, kami sarankan untuk memanggil berkas umum tersebut dari CDN apabila situsmu membutuhkannya.

Semisal halaman situs kamu membutuhkan berkas JQuery, maka kamu cukup mencantumkan salah satu kode berikut pada HTML kamu:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

5. Optimasi gambar

Mayoritas pengunjung yang membaca artikel, blog, atau konten apapun, cenderung lebih paham dengan adanya gambar. Karena itu, kamu mungkin memiliki banyak gambar dalam sebuah halaman. Namun, karena setiap gambar akan mempengaruhi kecepatan situs web, jadi, gunakan gambar sesedikit mungkin dan seefektif mungkin.

Memperkecil ukuran berkas gambar

Selain itu, setiap gambar yang digunakan dalam situs web perlu dioptimalkan. Optimalkan ukuran berkas (file) gambar sekecil mungkin, tanpa banyak mempengaruhi kualitasnya. Ada beberapa cara yang dapat kamu pilih:

• menggunakan perangkat lunak luring (offline), seperti Caesium, ImageOptim, atau perangkat lunak sejenis lainnya,
• menggunakan situs layanan daring (online), TinyPNG, Compressor.io, atau situs web serupa lainnya, atau
• pertimbangkan untuk menggunakan plugin LSCWP, jika kamu menggunakan WordPress dengan server web LiteSpeed.

Gunakan ekstensi WebP

Ukuran rata-rata berkas gambar WebP jauh lebih kecil daripada JPEG atau PNG yang sudah dioptimasi. Kamu bisa saja menggunakan situs layanan daring, seperti online-convert.com untuk mengkonversi gambar secara manual.

Namun, sejumlah kecil pengunjung mungkin masih terus menggunakan peramban lama yang tidak mendukung WebP. Jika kamu masih mempertimbangkan mereka, bisa saja dengan menyajikan berkas versi jpg atau png. Dalam kasus ini, beberapa pustaka, seperti Modernizr, WebPJS, atau Picturefill, dapat membantumu mendeteksi jenis peramban dan menyajikan gambar WebP atau non-WebP secara otomatis. Di sisi lain, plugin LSCWP juga memiliki fitur ini, tetapi hanya jika kamu menggunakan WordPress. Kamu cukup mengaktifkan fitur “Request WebP versions” di pengaturannya.

6. Tunda pemuatan gambar offscreen

Umumnya, peramban (browser) tidak bisa menampilkan keseluruhan halaman artikel yang panjang. Apalagi pada ponsel, lebih sedikit lagi bagian artikel yang dapat ditampilkan. Oleh karena itu, saat memuat halaman artikel, pengunjung mungkin hanya dapat melihat satu atau dua gambar secara bersamaan. Gambar-gambar yang ada di bawah layar disebut gambar-gambar offscreen, seperti pada gambar 4 (poin 3 dan 4).

Katakanlah kamu memiliki sebuah halaman yang memiliki 4 gambar dan masing-masing gambar sekitar 500 KB. Kemudian, saat menggunakan ponsel, pengunjung hanya bisa melihat 2 gambar sekaligus. Dalam pemuatan normal atau tanpa optimasi, semua gambar dimuat secara bersamaan. Jadi, pemuatan atau loading awal halaman membutuhkan 2 MB.

Di sisi lain, kita dapat mengoptimasinya dengan menunda pemuatan gambar di luar layar tersebut. Artinya, peramban akan memuat gambar hanya saat pengunjung mulai menggulir ke bawah untuk melihatnya. Hal ini kita kenal sebagai Lazy Loading. Oleh karena itu, jika peramban hanya dapat menampilkan dua gambar secara bersamaan, gambar 1 dan 2 akan termuat terlebih dahulu. Jika pengguna menggulir ke bawah untuk melihat gambar 3, peramban akan mulai memuatnya. Alhasil, beban pemuatan awal halaman hanya membutuhkan 1 MB.

Menggunakan javascript lazysizes

Sayangnya, beberapa situs web, seperti Blogger, tidak memiliki fitur Lazy Loading bawaan. Dalam hal ini, kamu dapat menambahkan fitur ini secara manual, ke dalam kode HTML. Salin kode javascript berikut, yang memanfaatkan kode library Lazysizes, dan tempelkan di HTML situs webmu sebelum tag </body>.

<!-- Tunda loading gambar dan video offscreen -->
<script async='async' src='https://cdn.rawgit.com/aFarkas/lazysizes/gh-pages/lazysizes.min.js' type='text/javascript'></script>

<!-- menambahkan attribute class="lazyload", src, and data-src -->
<script>
//<![CDATA[
for(var imgEl=document.getElementsByTagName("img"),i=0;i<imgEl.length;i++)imgEl[i].getAttribute("src")&&(imgEl[i].setAttribute("data-src",imgEl[i].getAttribute("src")),imgEl[i].className+=" lazyload",imgEl[i].setAttribute("src","data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs="));

function wrap(top, selector, bottom) {
var videos = document.querySelectorAll(selector);
    for (var i = 0; i < videos.length; i++) {
        if (videos[i].getAttribute('src')) {
            videos[i].setAttribute('data-src', videos[i].getAttribute('src'));
            videos[i].removeAttribute('src');
        }
        videos[i].setAttribute("class","lazyload");
        videos[i].setAttribute("style", "position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;");
        var modified = top + videos[i].outerHTML + bottom;
        videos[i].outerHTML = modified;
    }
}
wrap("<div style='position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%'>", "iframe[src*='youtube.com']", "</div>");
//]]>
</script>

Kode ini murni javascript, tanpa perlu library jQuery. Selain itu, kode di atas akan secara otomatis mencari dan memodifikasi semua tag gambar dan iframe, sehingga lazysizes dapat bekerja. Modifikasi ini menambahkan beberapa atribut seperti class="lazyload", src, dan data-src. Jadi, kamu hanya perlu menyalin dan menempelkannya ke HTML halaman web kamu.

7. Kurangi penggunaan Javascript and CSS

Seperti yang sudah ditulis sebelumnya, kamu perlu meminimalisir penggunaan objek di halaman depan situs. Terkadang objek dinamis membutuhkan terlalu banyak Javascript atau CSS agar berfungsi. Memang, hal itu membuat situs web menjadi lebih indah, tapi proses pemuatan juga sangat lambat.

Selain itu, kamu dapat melakukan minifikasi atau bahkan menghapus javascript dan CSS yang tidak kamu perlukan. Pengguna WordPress dapat menggunakan plugin LSCWP atau plugin sejenis lainnya untuk memperkecil ukuran berkas JS dan CSS secara otomatis. Di sisi lain, jika kamu memerlukan metode manual, gunakan minifier.org. Selain itu, kamu juga dapat memperkecil berkas HTML secara menyeluruh untuk mempercepat pemuatan halaman.

Tetapi saya ingatkan sekali lagi, periksa kembali situs web kamu setiap kali kamu melakukan modifikasi. Ini termasuk minifikasi ataupun menghapus JS atau CSS.

8. Menunda pemuatan render-blocking CSS dan JS

Untuk menjalankan konten dinamis, sebagian besar halaman web memerlukan berkas JavaScript (bersama dengan berkas CSS tambahan). Biasanya, peramban harus mengunduh berkas JS dan CSS itu terlebih dahulu dan berpotensi mengganggu proses rendering elemen lainnya. Hal ini biasa disebut berkas “render-blocking“. Proses pemuatan halaman akan tertunda jika terlalu banyak berkas render-blocking ini. Ada beberapa solusi untuk masalah ini. Tetapi sebelum Anda melakukan apa pun, harap buat backup atau cadangan situs web kamu!

Biasanya, pemanggilan berkas CSS atau JS yang menjadi render-blocking terletak di dalam tag <head> </head>. Sebagai contoh:

<head>
    ...
    <script type="text/javascript" src="js/mycode.js"></script>
    <link href='css/bootstrap.min.css' rel='stylesheet'/>
    <link href='css/font-awesome.min.css' rel='stylesheet'/>
    ...
</head>

Ada beberapa solusi untuk mengatasi masalah ini. Pertama, kamu dapat memindahkannya ke bagian bawah HTML kamu, tepat sebelum tag </body>. Apalagi jika kamu menggunakan Font Awesome atau sejenisnya. Kedua, kamu dapat mengoptimasi tag <script>, dengan menambahkan atribut defer atau async, hanya jika ada atribut src dalam tag tersebut. Sebagai contoh, codenya menjadi:

<script defer="defer" async="async" type="text/javascript" src="js/mycode.js"></script>

Tetapi dalam pengalaman saya, solusi ini terkadang dapat merusak desain dan fitur dalam situs web. Terutama, saat memodifikasi <script> atau <link> berkas jQuery dan Bootstrap. Jadi, periksa kembali apakah semua fitur di situs web kamu masih berfungsi. Jika ada yang salah di situs web kamu, hapus atribut defer dan async dalam beberapa tag yang baru saja kamu modifikasi.

Selain itu, kamu juga dapat menambahkan atribut rel="preload" di dalam tag <link>, tanpa perlu memindahkannya ke bagian bawah HTML, seperti ini:

<link rel="preload" id="stylesheet" href="css/bootstrap.min.css" as="style" onload="this.onload=null; this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="css/bootstrap.min.css"></noscript>

Tetapi ada kelemahan pada metode ini. Yaitu hanya peramban-peramban versi terbaru yang dapat menjalankan atribut ini. Bahkan sebagian peramban menonaktifkannya secara default. Karena itu, kamu perlu menambahkan kode polyfill ini di bagian bawah HTML, tepat sebelum tag </body>:

<script>
/*! loadCSS. [c]2017 Filament Group, Inc. MIT License */
!function(a){"use strict";var b=function(b,c,d){function e(a){return h.body?a():void setTimeout(function(){e(a)})}function f(){i.addEventListener&&i.removeEventListener("load",f),i.media=d||"all"}var g,h=a.document,i=h.createElement("link");if(c)g=c;else{var j=(h.body||h.getElementsByTagName("head")[0]).childNodes;g=j[j.length-1]}var k=h.styleSheets;i.rel="stylesheet",i.href=b,i.media="only x",e(function(){g.parentNode.insertBefore(i,c?g:g.nextSibling)});var l=function(a){for(var b=i.href,c=k.length;c--;)if(k[c].href===b)return a();setTimeout(function(){l(a)})};return i.addEventListener&&i.addEventListener("load",f),i.onloadcssdefined=l,l(f),i};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this);

/*! loadCSS rel=preload polyfill. [c]2017 Filament Group, Inc. MIT License */
!function(a){if(a.loadCSS){var b=loadCSS.relpreload={};if(b.support=function(){try{return a.document.createElement("link").relList.supports("preload")}catch(b){return!1}},b.poly=function(){for(var b=a.document.getElementsByTagName("link"),c=0;c<b.length;c++){var d=b[c];"preload"===d.rel&&"style"===d.getAttribute("as")&&(a.loadCSS(d.href,d,d.getAttribute("media")),d.rel=null)}},!b.support()){b.poly();var c=a.setInterval(b.poly,300);a.addEventListener&&a.addEventListener("load",function(){b.poly(),a.clearInterval(c)}),a.attachEvent&&a.attachEvent("onload",function(){a.clearInterval(c)})}}}(this);
</script>

9. Menggunakan preconnect atau dns-prefetch

Saat merender halaman, situs web kamu mungkin memerlukan beberapa berkas dari domain eksternal. Pada saat itu, peramban perlu “terhubung” ke server eksternal sebelum dapat menerima respons. Koneksi ini terdiri dari DNS lookup, TCP three-way handshake, TLS handshake, dan HTTP Request. Semakin banyak berkas dari domain eksternal yang kamu butuhkan, semakin banyak juga kebutuhan akan rangkaian koneksi tersebut. Alhasil, hal tersebut akan menambah waktu pemuatan halaman web.

Mengizinkan peramban untuk terhubung ke domain eksternal lebih awal, dapat membantu mempercepat pemuatan halaman. Umumnya, kamu dapat menggunakan dns-prefetch atau preconnect, seperti contoh berikut:

<link rel="dns-prefetch" href="//external-domain-1.com">
<link rel="preconnect" href="//external-domain-2.com">

Seperti yang terlihat bahwa kamu tidak perlu menulis URL absolut, tetapi dapat menggunakan protokol URL relatif.

Menentukan daftar URL eksternal

Sebelum dapat menggunakan dns-prefetch atau preconnect, kamu harus mencatat semua domain eksternal yang kamu butuhkan. Kamu dapat menggunakan fitur “inspect” di peramban untuk menemukan daftar domain eksternal pada sebuah halaman web, seperti yang terlihat pada Gambar 5.

Buat daftar semua domain eksternal yang diperlukan. Kemudian gunakan dns-prefetch atau preconnect dengan domain eksternal di awal elemen <head>, seperti berikut:

<head>
    <link rel="preconnect" href="//domain-yang-paling-penting.com">
    <link rel="dns-prefetch" href="//domain-yang-paling-penting.com">

    <link rel="preconnect" href="//domain-lumayan-penting.com">
    <link rel="dns-prefetch" href="//domain-lumayan-penting.com">

    <link rel="dns-prefetch" href="//ajax.googleapis.com">
    <link rel="dns-prefetch" href="//google-analytics.com">
    <link rel="dns-prefetch" href="//domainkeduaku.com">
    <link rel="dns-prefetch" href="//domainlainnya.com">
    ...
    ...
</head>

10. Menunda pemuatan AdSense

Sebagian dari kalian mungkin sudah memasang Google AdSense di situs web kalian. Namun, terlepas dari seberapa cepat website kamu awalnya, menambahkan Google AdSense akan mengurangi kecepatan pemuatan halaman situsmu. Bahkan, bisa dua sampai lima kali lebih lambat daripada tanpa AdSense.

Jika kamu menggunakan CMS seperti WordPress, kamu bisa menggunakan plugin. Yang paling mudah yaitu dengan menggunakan plugin Ad Inserter Pro atau Advanced Ads Pro (versi berbayar). Bisa juga dengan plugin Ad Inserter atau Advanced Ads versi gratis yang dikombinasikan dengan plugin Flying Scripts.

Di sisi lain, jika kamu menggunakan blogger, kamu juga bisa menggunakan cara manual. Baca lebih lanjut artikel kami terkait langkah pemasangan lazy load dengan cara manual.

11. Kurangi jumlah elemen DOM

Document Object Model (DOM) adalah elemen yang membentuk struktur dokumen HTML atau XML. Jika kamu tahu elemen HTML, seperti HEAD, BODY, DIV, itulah elemen DOM.

Ketika saya menulis <div> konten </div>, itu dianggap 1 DOM. Jadi, sebagai contoh, kode di bawah ini memiliki 6 DOM.

<!DOCTYPE html>
<html>
    <head>
        <title>judul halaman</title>
    </head>
    <body>
        <h1>Judul Bacaan</h1>
        <p>disini letak konten bacaan panjang...</p>
    </body>
</html> 

Untuk membuat kamu lebih mengerti tentang kode di atas, HTML adalah tingkat kedalaman pertama, HEAD adalah tingkat kedalaman kedua, dan TITLE tingkat kedalaman yang ketiga. Kemudian misalnya BODY, ia memiliki 2 anak, yaitu H1 dan P.

Gunakan DOM sesedikit mungkin untuk mempercepat halaman web. PageSpeed Insights menyarankan jumlah total DOM maksimal 1500 DOM. Kemudian, dengan kedalaman maksimum 32, dan satu DOM memiliki anak kurang dari 60.

12. Lazy load untuk komentar

Interaksi dalam situs web dapat kita tingkatkan dengan adanya bagian komentar pada setiap halaman web. Hal itu juga terkadang membuat pengunjung kembali lagi ke halaman tersebut.

Ketika halaman kamu memiliki banyak pengunjung harian, kemungkinan besar akan ada banyak komentar. Misalnya di sebuah halaman e-komersial. Tapi, terlalu banyak komentar juga akan mengurangi kecepatan pemuatan situs web. Karena halaman tersebut akan melakukan banyak HTTP request.

Jadi, untuk mempercepat pemuatan atau loading halaman situs, kamu juga bisa menunda pemuatan komentar. Idenya adalah, peramban baru memuat komentar saat pengunjung mengklik bagian komentar. Jika menggunakan WordPress, kamu dapat menggunakan beberapa plugin seperti Lazy load for comment atau plugin serupa.

Jika menggunakan Blogger, kamu dapat mengubah pengaturannya. Buka Setelan (setting) > Pos, komentar dan berbagi (Post, comment and sharing) > Komentar (comment). kemudian ubah Lokasi Komentar menjadi Halaman penuh (Full page) atau Jendela munculan (Popup window). Lihat Gambar 6 di bawah untuk lebih detailnya.

Akhir Kata

Saya senang jika kamu bisa membaca sampai baris ini. Semoga pedoman ini dapat membantu meningkatkan kecepatan situs web kamu.

Gambar sampul diambil dari pxhere, diunggah oleh Mohamed Hassan