Trik Tembus Skor 90+ PageSpeed & Core Web Vitals Website!

Website yang terlihat bagus belum tentu memiliki performa yang baik. Website bisnis bisa saja tampak profesional, tetapi tetap lambat saat dibuka, kurang responsif ketika digunakan, atau mengalami pergeseran layout. Masalah ini biasanya terlihat saat diuji menggunakan PageSpeed Insights melalui metrik seperti Largest Contentful Paint, Interaction to Next Paint, dan Cumulative Layout Shift.

Optimasi kecepatan sebaiknya tidak hanya berfokus pada skor 90 atau 100, tetapi juga pada pengalaman pengguna. Website perlu dibuat cepat dibuka, responsif saat berinteraksi, dan stabil di berbagai perangkat. Lalu, bagaimana cara meningkatkan skor PageSpeed sekaligus memperbaiki Core Web Vitals?

Kenapa Skor PageSpeed Website Sulit Tembus 90+?

Skor PageSpeed sebenarnya merupakan hasil dari banyak komponen yang bekerja secara bersamaan.

Karena itu, mengganti hosting atau mengompresi beberapa gambar belum tentu langsung membuat skor melonjak.

Beberapa masalah yang paling sering menjadi penyebab website lambat antara lain:

• ukuran gambar terlalu besar;
• CSS menghambat proses rendering halaman;
• terlalu banyak JavaScript dijalankan saat halaman pertama kali dibuka;
• server membutuhkan waktu lama untuk merespons request;
• terlalu banyak script pihak ketiga;
• halaman memiliki struktur DOM terlalu kompleks;
• gambar atau iframe tidak memiliki dimensi yang jelas;
• caching server belum dioptimalkan.

Artinya, optimasi PageSpeed membutuhkan pendekatan dari sisi frontend sekaligus server.

Kenali 3 Core Web Vitals yang Perlu Dioptimalkan

Core Web Vitals digunakan untuk menggambarkan pengalaman pengguna ketika mengakses sebuah halaman.

Tiga metrik yang perlu diperhatikan adalah LCP, INP, dan CLS.

LCP: Seberapa Cepat Konten Utama Tampil?

Largest Contentful Paint atau LCP mengukur seberapa cepat elemen konten terbesar pada area layar pengguna selesai dirender.

Elemen tersebut sering berupa:

• hero image;
• banner utama;
• heading besar;
• gambar produk;
• background image berukuran besar.

Pada website company profile, misalnya, elemen LCP sering berada pada bagian hero di halaman homepage.

Jika hero image membutuhkan waktu terlalu lama untuk dimuat, nilai LCP juga akan meningkat.

INP: Seberapa Responsif Website Saat Digunakan?

Interaction to Next Paint atau INP berkaitan dengan respons halaman setelah pengguna melakukan interaksi.

Misalnya ketika pengguna:

• membuka menu;
• menekan tombol WhatsApp;
• memilih kategori produk;
• membuka accordion;
• mengisi filter;
• menambahkan produk ke keranjang.

Jika browser sedang sibuk menjalankan JavaScript, respons terhadap tindakan pengguna dapat tertunda.

Google telah menggunakan INP sebagai salah satu Core Web Vitals menggantikan FID.

CLS: Seberapa Stabil Tampilan Website?

Cumulative Layout Shift atau CLS mengukur perubahan layout yang terjadi tanpa diharapkan pengguna.

Contoh sederhananya adalah ketika Anda hendak menekan tombol, tetapi posisi tombol tiba-tiba turun karena sebuah gambar selesai dimuat.

Masalah seperti ini terlihat sederhana, tetapi cukup mengganggu pengalaman pengguna.

Cara Menekan LCP hingga di Bawah 1,5 Detik

Untuk website yang membutuhkan performa sangat tinggi, LCP dapat ditargetkan lebih agresif, misalnya di bawah 1,5 detik.

Namun mencapainya membutuhkan beberapa optimasi sekaligus.

1. Terapkan Critical CSS

Browser harus membaca CSS sebelum mengetahui bagaimana sebuah halaman akan ditampilkan.

Masalah muncul ketika website memiliki file CSS besar yang berisi ribuan aturan, sementara hanya sebagian kecil yang sebenarnya dibutuhkan untuk menampilkan bagian pertama halaman.

Di sinilah Critical CSS digunakan.

Critical CSS berarti CSS yang diperlukan untuk merender bagian halaman yang pertama kali terlihat oleh pengguna atau area above the fold diprioritaskan terlebih dahulu.

Sementara CSS lainnya dapat dimuat kemudian.

Sebagai gambaran, sebuah landing page mungkin memiliki CSS untuk:

• header;
• hero;
• pricing table;
• testimonial;
• FAQ;
• footer;
• popup.

Padahal ketika pengguna pertama kali membuka website, browser mungkin hanya membutuhkan CSS header dan hero.

Dengan memprioritaskan CSS tersebut, browser dapat menampilkan konten utama lebih cepat.

2. Preload Gambar yang Menjadi Elemen LCP

Hero image sering menjadi salah satu penyebab LCP tinggi.

Browser secara default harus menemukan terlebih dahulu referensi gambar di HTML atau CSS sebelum mulai mengunduh file tersebut.

Pada elemen penting, Anda dapat memberikan sinyal agar browser memuat gambar lebih awal menggunakan teknik preload.

Misalnya:

<link rel=”preload” as=”image” href=”hero.webp”>

Tujuannya adalah memberi tahu browser bahwa gambar tersebut merupakan resource penting.

Tetapi preload tidak boleh diterapkan secara berlebihan.

Jika seluruh gambar diberi preload, setiap resource justru akan berebut bandwidth dan manfaat optimasinya dapat berkurang.

Prioritaskan hanya elemen yang benar-benar berpengaruh terhadap tampilan awal halaman.

3. Gunakan Format Gambar yang Lebih Efisien

Selain urutan loading, ukuran file juga sangat menentukan.

Gambar JPEG atau PNG berukuran beberapa megabyte sebaiknya dihindari untuk hero website.

Gunakan format modern seperti:

• WebP;
• AVIF.

Ukuran gambar juga harus menyesuaikan resolusi tampilannya.

Tidak ada manfaat signifikan menampilkan gambar beresolusi 4.000 piksel apabila area tampilnya hanya sekitar 1.200 piksel.

Pada implementasi yang lebih optimal, gunakan pula responsive image melalui srcset agar browser bisa memilih ukuran gambar sesuai perangkat pengguna.

4. Gunakan Server-Level Caching

Optimasi frontend akan kurang maksimal apabila server tetap membutuhkan waktu lama untuk menghasilkan halaman.

Karena itu, caching pada level server sangat penting.

Untuk server yang menggunakan LiteSpeed atau OpenLiteSpeed, LiteSpeed Cache dapat membantu menyimpan halaman hasil render sehingga server tidak harus terus menjalankan PHP dan query database yang sama.

Alurnya menjadi lebih sederhana.

Tanpa cache:

Request → PHP → Database → Generate HTML → Browser

Dengan full-page cache:

Request → Cache → Browser

Semakin sedikit proses yang harus dilakukan server, semakin cepat halaman bisa dikirimkan kepada pengguna.

5. Manfaatkan Redis untuk Object Cache

Pada website berbasis WordPress, WooCommerce, atau aplikasi yang memiliki banyak query database, Redis dapat digunakan sebagai object cache.

Redis menyimpan hasil query atau object tertentu di memory.

Artinya, aplikasi tidak selalu perlu meminta data yang sama berulang kali ke database.

Penggunaan Redis cukup membantu pada website seperti:

• toko online;
• portal berita;
• membership;
• LMS;
• website dengan banyak user login;
• website dengan query database kompleks.

Redis bukan pengganti full-page cache, tetapi keduanya dapat digunakan bersama untuk mengurangi beban server.

Cara Menurunkan INP dengan Defer Non-Critical JavaScript

Website modern hampir selalu menggunakan JavaScript. Masalahnya, semakin banyak JavaScript yang dijalankan browser, semakin besar pula kemungkinan main thread menjadi sibuk.

Ketika main thread sedang sibuk, browser tidak bisa segera memproses interaksi pengguna.

Akibatnya website terasa tidak responsif.

1. Identifikasi JavaScript yang Tidak Dibutuhkan di Awal

Tidak semua JavaScript perlu berjalan ketika halaman baru dibuka.

Beberapa script biasanya dapat ditunda, seperti:

• popup marketing;
• slider tertentu;
• live chat;
• script analytics tambahan;
• heatmap;
• tracking advertising;
• widget eksternal;
• fitur yang berada jauh di bawah halaman.

Script seperti ini sebaiknya tidak mengganggu rendering konten utama.

2. Terapkan Defer pada JavaScript Non-Kritis

Atribut defer memungkinkan browser mengunduh JavaScript tanpa menghentikan proses parsing HTML.

Contohnya:

<script src=”app.js” defer></script>

Dengan pendekatan ini, browser dapat melanjutkan proses membangun halaman sembari file JavaScript diunduh.

Setelah HTML selesai diproses, script kemudian dijalankan sesuai urutannya.

Teknik ini cukup efektif untuk mengurangi blocking yang disebabkan JavaScript.

3. Evaluasi Script Pihak Ketiga

Website bisnis sering memiliki banyak layanan eksternal secara bersamaan.

Contohnya:

• Google Analytics;
• Google Tag Manager;
• Meta Pixel;
• TikTok Pixel;
• live chat;
• WhatsApp widget;
• heatmap;
• remarketing;
• A/B testing.

Masing-masing script mungkin terlihat ringan ketika digunakan sendiri. Masalah muncul ketika semuanya berjalan bersama ketika halaman pertama kali dibuka. Lakukan audit secara berkala.

Jika sebuah tracking script tidak memberikan data yang benar-benar digunakan, menghapusnya sering kali lebih efektif daripada mencoba mengoptimalkannya.

Cara Menghilangkan CLS atau Layout yang Loncat-Loncat

CLS sering terjadi karena browser belum mengetahui berapa ruang yang harus disediakan untuk suatu elemen.

Ketika elemen tersebut akhirnya muncul, browser harus mengatur ulang layout.

Akibatnya konten lain ikut bergeser.

1. Tetapkan Width dan Height pada Gambar

Salah satu solusi paling sederhana adalah menentukan dimensi gambar secara eksplisit.

Contohnya:

<img src=”produk.webp” width=”800″ height=”600″ alt=”Produk”>

Dengan informasi tersebut, browser sudah mengetahui rasio gambar bahkan sebelum file selesai diunduh.

Browser kemudian bisa menyediakan ruang yang sesuai.

Hasilnya, elemen lain tidak perlu berpindah ketika gambar selesai dimuat.

2. Tentukan Dimensi Video dan Iframe

Prinsip yang sama juga berlaku untuk:

• YouTube embed;
• Google Maps;
• iframe;
• video;
• banner eksternal.

Jika ukuran elemen belum diketahui sejak awal, browser dapat melakukan perubahan layout ketika konten eksternal selesai dimuat.

Untuk desain responsif, Anda juga bisa menggunakan CSS aspect-ratio.

Sebagai contoh:

aspect-ratio: 16 / 9;

Browser akan mempertahankan proporsi elemen sekalipun lebar layar berubah.

3. Sediakan Ruang untuk Konten Dinamis

Konten dinamis juga sering menyebabkan CLS.

Misalnya:

• notification bar;
• banner promosi;
• iklan;
• popup;
• recommendation box;
• widget tertentu.

Jika sebuah banner tiba-tiba muncul di bagian atas halaman setelah dua detik, seluruh konten di bawahnya dapat bergeser.

Solusinya adalah menyediakan ruang terlebih dahulu atau menampilkan elemen dinamis dengan teknik overlay sehingga tidak mengubah layout halaman.

4. Perhatikan Loading Font

Web font juga dapat menyebabkan perubahan layout.

Browser biasanya menampilkan fallback font terlebih dahulu sebelum custom font selesai diunduh.

Jika karakteristik keduanya terlalu berbeda, ukuran teks berubah ketika custom font diterapkan.

Hal ini dapat menyebabkan heading, paragraf, atau tombol bergeser.

Karena itu:

• gunakan jumlah font secukupnya;
• hindari terlalu banyak font weight;
• preload font penting;
• pilih fallback font dengan karakteristik yang mirip;
• gunakan format font modern seperti WOFF2.

Optimasi Server yang Sering Terlewat Padahal Dampaknya Besar

PageSpeed tidak hanya berkaitan dengan tampilan website.

Sebelum browser dapat merender halaman, server harus mengirimkan HTML terlebih dahulu.

Jika server lambat, seluruh proses berikutnya juga ikut terlambat.

1. Kurangi TTFB

Time to First Byte atau TTFB menggambarkan waktu hingga browser menerima byte pertama dari server.

TTFB dapat dipengaruhi oleh banyak faktor, seperti:

• kualitas hosting;
• lokasi data center;
• konfigurasi web server;
• versi PHP;
• query database;
• penggunaan CDN;
• full-page caching;
• object caching;
• beban server.

Website dengan desain ringan tetap dapat terasa lambat apabila server membutuhkan waktu lama untuk memberikan respons pertama.

2. Gunakan Redis untuk Website Dinamis

Website yang menghasilkan halaman secara dinamis sering melakukan banyak query database.

Semakin kompleks websitenya, semakin banyak pula query yang mungkin terjadi setiap kali sebuah halaman dibuka.

Redis dapat mengurangi query berulang dengan menyimpan object tertentu di RAM.

Tetapi penggunaannya juga harus tepat.

Website statis atau landing page sederhana mungkin tidak memperoleh peningkatan sebesar website WooCommerce atau aplikasi dengan data dinamis.

3. Pastikan Hosting Tidak Menjadi Bottleneck

Anda dapat mengoptimalkan CSS sampai sangat kecil, mengubah seluruh gambar ke WebP, dan menunda hampir semua JavaScript.

Namun jika CPU server selalu penuh atau database membutuhkan waktu lama untuk merespons, performa tetap akan terbatas.

Periksa beberapa parameter penting seperti:

• penggunaan CPU;
• penggunaan RAM;
• disk I/O;
• load average;
• database slow query;
• PHP worker;
• network latency.

Untuk website bisnis dengan trafik tinggi, spesifikasi dan konfigurasi server perlu disesuaikan dengan beban aktual website.

Urutan Optimasi agar PageSpeed Lebih Cepat Naik

Optimasi PageSpeed sebaiknya dilakukan secara bertahap agar perubahan performa lebih mudah dievaluasi. Berikut urutan yang bisa diterapkan:

1. Audit Performa Website

Uji halaman utama, landing page, halaman layanan, atau halaman produk menggunakan PageSpeed Insights untuk mengetahui masalah yang paling berpengaruh terhadap performa.

2. Identifikasi dan Optimalkan LCP

Cari elemen yang menjadi Largest Contentful Paint, biasanya hero image atau banner utama. Optimalkan ukuran, format, dan prioritas loading elemen tersebut.

3. Perbaiki Respons Server

Jika TTFB masih tinggi, periksa konfigurasi hosting, database, PHP, CDN, full-page caching, dan Redis agar server lebih cepat mengirimkan halaman.

4. Terapkan Critical CSS

Prioritaskan CSS yang dibutuhkan untuk menampilkan area awal halaman sehingga browser tidak perlu menunggu seluruh stylesheet selesai diproses.

5. Defer JavaScript Non-Kritis

Tunda JavaScript yang tidak diperlukan saat halaman pertama kali dibuka agar main thread lebih ringan dan respons interaksi pengguna lebih cepat.

6. Hilangkan Sumber CLS

Pastikan gambar, video, iframe, banner, dan elemen dinamis memiliki dimensi atau ruang yang jelas agar layout tidak bergeser saat loading.

7. Lakukan Pengujian Ulang

Setelah optimasi selesai, jalankan PageSpeed Insights kembali dan bandingkan LCP, INP, CLS, TTFB, serta Performance Score untuk melihat hasil perbaikannya.

Website Cepat Sebaiknya Dirancang Sejak Awal

Mengoptimalkan website yang sudah memiliki puluhan plugin, script eksternal, page builder berat, dan struktur database kompleks biasanya lebih sulit dibanding membangun fondasi performa dengan benar sejak awal.

Kecepatan website sebaiknya sudah dipertimbangkan ketika menentukan:

• struktur frontend;
• framework atau CMS;
• desain halaman;
• metode pemuatan CSS dan JavaScript;
• sistem caching;
• spesifikasi hosting;
• pengelolaan gambar;
• struktur database;
• integrasi pihak ketiga.

Dengan begitu, optimasi performa tidak perlu dilakukan sebagai perbaikan besar setelah website selesai.

Bagi bisnis yang membutuhkan website profesional sekaligus mempertimbangkan aspek performa sejak tahap pengembangan, Ardata Media menyediakan jasa pembuatan website dengan standar loading cepat yang dapat disesuaikan dengan kebutuhan bisnis, fitur, serta skala penggunaan website.

Pendekatan seperti ini penting terutama untuk website yang digunakan sebagai landing page pemasaran, company profile, portal layanan, maupun platform bisnis yang menerima trafik secara rutin.

Mendapatkan skor PageSpeed 90+ dan Core Web Vitals yang baik bukan hasil dari satu teknik optimasi.

Performa website merupakan gabungan berbagai komponen.

Untuk mempercepat LCP, prioritaskan Critical CSS, optimasi gambar utama, preload resource penting, serta server-level caching.

Untuk memperbaiki INP, kurangi beban main thread dengan menunda JavaScript yang tidak dibutuhkan pada saat halaman pertama kali dirender.

Sementara untuk mengurangi CLS, pastikan gambar, video, iframe, banner, dan elemen media lainnya sudah memiliki dimensi atau ruang yang jelas sejak awal.

Terakhir, jangan melupakan server.

Frontend yang ringan tetap bisa terasa lambat apabila TTFB tinggi, database berat, atau konfigurasi server tidak optimal.

Ketika optimasi frontend, backend, caching, dan server dilakukan secara terukur, target PageSpeed 90+ menjadi jauh lebih realistis sekaligus memberikan pengalaman pengguna yang benar-benar lebih cepat.