{"id":12873,"date":"2022-12-29T01:53:00","date_gmt":"2022-12-28T18:53:00","guid":{"rendered":"https:\/\/www.jetorbit.com\/blog\/?p=12873"},"modified":"2022-12-28T15:28:18","modified_gmt":"2022-12-28T08:28:18","slug":"pengertian-largest-contentful-paint-dan-cara-optimasi","status":"publish","type":"post","link":"https:\/\/www.jetorbit.com\/blog\/pengertian-largest-contentful-paint-dan-cara-optimasi\/","title":{"rendered":"Pengertian Largest Contentful Paint dan Cara Optimasinya"},"content":{"rendered":"\n<p>Di artikel ini, kami akan menjelaskan tentang Largest Contentful Paint, cara mengoptimasi LCP, serta cara mengetahui skor LCP kalian. Yuk baca sampai selesai <strong>Pengertian Largest Contentful Paint dan Cara Optimasinya<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Pengertian Largest Contentful Paint<\/strong><\/h2>\n\n\n\n<p>Largest Contentful Paint adalah metrik yang menunjukkan waktu loading website, yang menilai seberapa cepat halaman web merender elemen terbesarnya, termasuk blok gambar dan teks. Nilai LCP yang bagus menandakan pengalaman pengguna yang lebih baik dan<em> bounce rate <\/em>yang lebih rendah.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cara Mengetahui Skor Largest Contentful Paint<\/strong><\/h2>\n\n\n\n<p>Menilai metrik Core Web Vitals, mulai dari <em>first input delay<\/em> (FID) hingga <em>largest contentful paint<\/em> (LCP), butuh <em>tool <\/em>dan <em>software <\/em>tertentu. <em>Field data<\/em> (data lapangan) dikumpulkan dari pengguna asli dan pengalamannya, sedangkan lab data (data lab) mengumpulkan informasi dari lingkungan simulasi.<\/p>\n\n\n\n<p>Salah satu <em>tool <\/em>terpopuler untuk menilai skor LCP adalah <a href=\"https:\/\/pagespeed.web.dev\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">PageSpeed \u200b\u200bInsights<\/a> dari Google. <em>Tool <\/em>ini tersedia gratis dan membantu pengguna untuk menganalisis dan mendiagnosis performa website dengan menyajikan audit dan peluang peningkatan yang relevan.<\/p>\n\n\n\n<p>Berikut hal-hal yang perlu dilakukan ya saat menggunakan tool ini:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Ketik atau paste URL website ke kolom pencarian di bagian atas halaman lalu klik tombol <strong>Analyze<\/strong>. Ingat ya, mungkin perlu waktu beberapa menit sampai proses analisis performa selesai.<\/li><li>Setelah analisis selesai, cek bagian <strong>Diagnose performance issues<\/strong> untuk mendapatkan metrik dan rekomendasi yang berguna untuk meningkatkan performa. Nilai menunjukkan hasil secara keseluruhan.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/12\/Pengertian-Largest-Contentful-Paint-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"257\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/12\/Pengertian-Largest-Contentful-Paint-1.png\" alt=\"skor largest contentful paint\" class=\"wp-image-12874\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li>Kalian bisa menemukan lebih banyak metrik, termasuk largest contentful paint, first contentful paint, dan cumulative layout shift. Klik <strong>Expand view<\/strong> untuk membaca penjelasan singkat setiap metrik.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/12\/Pengertian-Largest-Contentful-Paint-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"208\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/12\/Pengertian-Largest-Contentful-Paint-2.png\" alt=\"largest contentful paint\" class=\"wp-image-12875\" \/><\/a><\/figure><\/div>\n\n\n<ul class=\"wp-block-list\"><li>PageSpeed \u200b\u200bInsights juga memberikan sejumlah rekomendasi dan diagnostik untuk meningkatkan performa website. Rekomendasi dan diagnostik ini bisa difilter menurut Core Web Vitals yang relevan.<\/li><\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/12\/Pengertian-Largest-Contentful-Paint-3.png\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"374\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/12\/Pengertian-Largest-Contentful-Paint-3.png\" alt=\"lcp\" class=\"wp-image-12876\" \/><\/a><\/figure><\/div>\n\n\n<p>Tool lain yang bisa dicoba adalah <a href=\"https:\/\/developer.chrome.com\/docs\/lighthouse\/overview\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Lighthouse <\/a>dan <a href=\"https:\/\/search.google.com\/search-console?resource_id=https:\/\/www.jetorbit.com\/blog\/\" target=\"_blank\" rel=\"noreferrer noopener\">SearchConsole<\/a>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Nilai Largest Contentful Paint yang Bagus<\/strong><\/h2>\n\n\n\n<p>Largest Contentful Paint diukur dalam hitungan detik. Artinya, halaman web harus bisa merender elemen terbesarnya dalam waktu kurang dari 2,5 detik.<\/p>\n\n\n\n<p>Halaman web dengan nilai LCP 1,2 detik atau kurang berarti cukup baik dan tak perlu tindakan lebih lanjut. Nilai antara 1,2 dan 2,5 detik masih bisa diterima. Namun, mungkin masih perlu menyesuaikan beberapa elemen untuk meningkatkan nilai LCP.<\/p>\n\n\n\n<p>Nilai LCP yang lebih besar dari 2,5 detik menunjukkan bahwa website kalian punya performa buruk. Hal ini bisa berdampak negatif pada pengalaman pengguna dan pada akhirnya mengganggu perkembangan website.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Elemen Apa yang Diukur oleh Largest Contentful Paint?<\/strong><\/h2>\n\n\n\n<p>Setiap metrik menilai elemen website yang berbeda.<\/p>\n\n\n\n<p>Misalnya, <em>first contentful paint<\/em> (FCP) menilai waktu yang dibutuhkan halaman web untuk menampilkan konten pertama. Konten ini mencakup elemen gambar, diagram, dan teks.<\/p>\n\n\n\n<p>LCP hanya menilai seberapa cepat halaman bisa memuat elemen terbesar di dalam <em>viewport <\/em>(area yang menampilkan konten). Sebab, waktu yang dibutuhkan untuk menampilkan elemen terbesar adalah indikator utama seberapa cepat halaman bisa dimuat.<\/p>\n\n\n\n<p>Elemen yang memicu entri LCP meliputi:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Elemen gambar (termasuk yang ada di dalam elemen SVG)<\/li><li>Elemen video<\/li><li>Elemen dengan gambar latar belakang yang dimuat menggunakan fungsi url()<\/li><li>Node teks dalam elemen level blok<\/li><\/ul>\n\n\n\n<p>Oia, yang disebut \u2018elemen terbesar\u2019 dalam hal ini tergantung jenisnya, ya. Untuk gambar, ukuran yang dilaporkan adalah ukuran yang terlihat atau ukuran intrinsiknya, manapun yang terkecil. Untuk teks, LCP hanya mempertimbangkan ukuran node teksnya.<\/p>\n\n\n\n<p>Selain itu, Largest Contentful Paint tidak akan mempertimbangkan bagian elemen manapun yang memanjang atau terpotong di luar <em>viewport<\/em>. Artinya, penghitungan ukuran tidak menyertakan margin, <em>padding<\/em>, atau batas halaman.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Cara Meningkatkan Largest Contentful Paint<\/strong><\/h2>\n\n\n\n<p>Nilai LCP yang buruk bisa mengakibatkan pengalaman pengguna yang buruk sebab largest contentful paint adalah indikator utama kecepatan loading halaman website.<\/p>\n\n\n\n<p>Ada beberapa hal umum yang menyebabkan performa website buruk, antara lain:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li>Waktu respons server dan waktu loading resource yang lambat<\/li><li>Rendering di sisi klien<\/li><li>Resource yang memblokir render<\/li><\/ul>\n\n\n\n<p>Kalem, karena ada beberapa cara untuk mengatasi masalah ini. Berikut ini 11 cara optimasi largest contentful paint yang efektif:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Gunakan CDN<\/strong><\/h3>\n\n\n\n<p><strong>Tingkat kesulitan: <\/strong>sedang<\/p>\n\n\n\n<p><strong>Dampak:<\/strong> rendah\/sedang\/tinggi<\/p>\n\n\n\n<p><em>Content Delivery Network <\/em>(CDN) adalah <em>tool <\/em>canggih untuk meningkatkan pengelolaan <em>traffic <\/em>website. CDN menggunakan server tambahan yang akan membantu saat origin server perlu menangani <em>traffic <\/em>tinggi. Biasanya, website besar menggunakan teknologi ini untuk menangani banyak pengunjung secara rutin.<\/p>\n\n\n\n<p>CDN bisa membantu meningkatkan LCP dengan menyeimbangkan beban jaringan karena permintaan pengunjung tidak perlu antri di server yang sama. Hal ini bisa menghasilkan nilai LCP yang lebih cepat dan berpotensi meningkatkan pengalaman pengguna.<\/p>\n\n\n\n<p>CDN akan berfungsi lebih baik lagi kalau dipadukan dengan <em>software <\/em>lain, misalnya dengan <em>image <\/em>CDN yang akan mengoptimalkan dan mengubah ukuran gambar secara <em>real-time<\/em>. Langkah ini bisa mempercepat website yang berisi banyak media untuk merender kontennya.<\/p>\n\n\n\n<p>Proses setting CDN berbeda-beda ya, tergantung pada penyedia hosting yang digunakan tapi biasanya relatif mudah.&nbsp;<\/p>\n\n\n\n<p>Salah satu solusi CDN paling populer adalah <a href=\"https:\/\/www.cloudflare.com\/cdn-free\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Cloudflare<\/a>, yang menawarkan lebih dari 120 pusat data di seluruh dunia. Layanan ini menyediakan paket gratis dan memiliki proses konfigurasi yang mudah, terutama jika menggunakan Cloudflare di WordPress.<\/p>\n\n\n\n<p>Selain Cloudflare, bisa juga menggunakan solusi CDN lainnya, seperti <a href=\"https:\/\/www.stackpath.com\/products\/cdn\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">StackPath<\/a>, <a href=\"https:\/\/sucuri.net\/website-performance\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Sucuri<\/a>, dan <a href=\"https:\/\/cloud.google.com\/cdn\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Google Cloud CDN<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Pastikan Ukuran Gambar Tepat<\/strong><\/h3>\n\n\n\n<p><strong>Tingkat kesulitan:<\/strong> mudah<\/p>\n\n\n\n<p><strong>Efisiensi:<\/strong> rendah\/sedang\/tinggi<\/p>\n\n\n\n<p>Beberapa gambar mungkin merupakan elemen largest contentful paint, tergantung pada ukurannya. Oleh karena itu, harus memastikan apakah halaman website kalian sudah memiliki ukuran gambar yang optimal agar nilai LCP tetap bagus.<\/p>\n\n\n\n<p>Kuncinya adalah memahami ukuran gambar yang paling sesuai dengan perangkat pengguna. Untuk memastikan nilai LCP yang baik, halaman web perlu menggunakan gambar responsif.<\/p>\n\n\n\n<p>Misalnya, jika versi desktop website menggunakan gambar berukuran besar, artinya versi selulernya harus menggunakan gambar berukuran sedang.<\/p>\n\n\n\n<p>Penting juga untuk mengetahui ukuran gambar default <em>platform <\/em>website. Misalnya nih, ada 4 jenis ukuran gambar default WordPress, yaitu:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Thumbnail <\/strong>\u2013 tepatnya 150 piksel persegi.<\/li><li><strong>Sedang <\/strong>\u2013 hingga 300 piksel persegi.<\/li><li><strong>Besar <\/strong>\u2013 maksimum 1.024 piksel persegi.<\/li><li><strong>Ukuran penuh<\/strong> \u2013 merupakan ukuran gambar asli.<\/li><\/ul>\n\n\n\n<p>Eitss, ingat ya, gambar melaporkan ukuran elemen terkecilnya. Artinya, gambar yang dikompresi akan melaporkan ukuran yang terlihat sedangkan gambar yang diperbesar akan melaporkan ukuran aslinya.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Optimalkan Gambar<\/strong><\/h3>\n\n\n\n<p><strong>Tingkat kesulitan:<\/strong> mudah<\/p>\n\n\n\n<p><strong>Efisiensi:<\/strong> rendah\/sedang\/tinggi<\/p>\n\n\n\n<p>Ada cara lain untuk mengoptimalkan gambar di website agar waktu loading lebih cepat selain memastikan ukuran yang tepat.&nbsp;<\/p>\n\n\n\n<p>Jika mengoptimalkan gambar di WordPress, caranya relatif mudah. Cukup pilih format file yang tepat atau gunakan plugin.<\/p>\n\n\n\n<p>Beberapa <em>tool <\/em>paling populer untuk mengoptimalkan gambar di website adalah <a href=\"https:\/\/tinypng.com\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">TinyPNG<\/a>, <a href=\"https:\/\/imagify.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Imagify<\/a>, dan <a href=\"https:\/\/kraken.io\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Kraken<\/a>. Plugin seperti <a href=\"https:\/\/wordpress.org\/plugins\/optimole-wp\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Optimole<\/a>, <a href=\"https:\/\/wordpress.org\/plugins\/ewww-image-optimizer\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">EWWW Image Optimizer<\/a>, dan <a href=\"https:\/\/wordpress.org\/plugins\/shortpixel-image-optimiser\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">ShortPixel <\/a>juga merupakan opsi yang bagus untuk pengguna WordPress.<\/p>\n\n\n\n<p>Mengoptimalkan gambar tidak hanya berguna untuk meningkatkan nilai LCP ya tapi juga membantu untuk menghemat ruang penyimpanan dan memaksimalkan <em>Search Engine Optimization<\/em> (SEO) website.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>4. Percepat Waktu Respons Server<\/strong><\/h3>\n\n\n\n<p><strong>Tingkat kesulitan: <\/strong>sedang<\/p>\n\n\n\n<p><strong>Efisiensi:<\/strong> rendah\/sedang\/tinggi<\/p>\n\n\n\n<p>Waktu loading halaman berkaitan erat dengan waktu respons web server. Proses bolak-balik antara permintaan browser pengguna dan permintaan server adalah salah satu faktor utama yang mempengaruhi kecepatan <em>loading<\/em>. Proses ini juga disebut <em>Round Trip Time<\/em> (RTT).<\/p>\n\n\n\n<p>Ada beberapa cara mempercepat waktu respons server, antara lain:<\/p>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Menerapkan caching sisi server<\/strong> \u2013 pemilik web bisa memanfaatkan <em>caching browser <\/em>dan sisi server. Fitur <em>caching <\/em>sisi server biasanya tersedia pada konfigurasi hosting.<\/li><li><strong>Upgrade spesifikasi server<\/strong> \u2013 spesifikasi hardware server mempengaruhi performanya secara signifikan. Oleh karena itu, sebaiknya <em>upgrade <\/em>ke server dengan kemampuan CPU yang lebih baik dan kapasitas penyimpanan yang lebih besar.<\/li><li><strong>Optimalkan kode aplikasi<\/strong> \u2013 menyederhanakan kode yang digunakan sebagai kueri database bisa membantu meningkatkan nilai LCP.&nbsp;<\/li><\/ul>\n\n\n\n<p>Untuk website WordPress, plugin seperti <a href=\"https:\/\/wordpress.org\/plugins\/wp-dbmanager\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">WP-DBManager<\/a> bisa membantu untuk mengoptimalkan database dengan mengurangi <em>bloat <\/em>dan menjadwalkan pembersihan otomatis.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>5. Gunakan Penyedia Web Hosting Tepercaya<\/strong><\/h3>\n\n\n\n<p><strong>Tingkat kesulitan:<\/strong> mudah<\/p>\n\n\n\n<p><strong>Efisiensi:<\/strong> tinggi<\/p>\n\n\n\n<p>Kualitas web hosting menjadi faktor utama yang mempengaruhi performa web secara keseluruhan. Web hosting yang baik biasanya dikonfigurasi untuk meningkatkan pengalaman pengguna dan dilengkapi dengan berbagai fitur untuk memudahkan pengelolaan web.<\/p>\n\n\n\n<p>Oleh karena itu, memilih paket web hosting yang sesuai dengan spesifikasi website bisa turut mempercepat waktu loading, ya. Nah, Jetorbit memiliki berbagai <a href=\"https:\/\/www.jetorbit.com\/web-hosting\/\">pilihan hosting<\/a> yang memenuhi beragam kebutuhan dan preferensi.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>6. Terapkan Caching<\/strong><\/h3>\n\n\n\n<p><strong>Tingkat kesulitan:<\/strong> mudah\/sedang\/sulit<\/p>\n\n\n\n<p><strong>Efisiensi:<\/strong> rendah\/sedang\/tinggi<\/p>\n\n\n\n<p><em>Cache <\/em>adalah ruang penyimpanan sementara, yang artinya <em>caching <\/em>adalah tindakan menyimpan aset statis halaman di <em>cache<\/em>. Proses ini bisa mempercepat waktu <em>loading <\/em>halaman dengan mengurangi jumlah data yang ditransfer selama proses <em>rendering <\/em>awal.<\/p>\n\n\n\n<p>Ada 2 cara <em>caching <\/em>utama, yaitu <em>caching browser <\/em>dan <em>caching <\/em>sisi server (<em>server-side<\/em>).<\/p>\n\n\n\n<p>Dengan mengaktifkan <em>caching <\/em>browser, pengunjung bisa menyimpan <em>file cache<\/em> di penyimpanan lokal browser sehingga tak perlu lagi <em>download <\/em>data yang sama saat berkunjung kembali ke website kalian. <em>Caching browser<\/em> bisa diaktifkan secara manual maupun menggunakan plugin.<\/p>\n\n\n\n<p>Sedangkan caching sisi server adalah cara menyimpan versi halaman web siap pakai di origin server. Dengan metode ini, server tidak perlu merekonstruksi atau memuat konten halaman dari database saat pengguna mengunjungi website kembali.<\/p>\n\n\n\n<p>Salah satu <em>tool <\/em>yang paling populer untuk mengaktifkan caching website adalah LiteSpeed. Tool ini dilengkapi dengan fungsi <em>caching <\/em>tingkat lanjut dan fitur berguna lainnya, seperti pengoptimalan konten dinamis dan HTTP <em>load balancer<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>7. Atasi Masalah Lazy Loading<\/strong><\/h3>\n\n\n\n<p><strong>Tingkat kesulitan: <\/strong>sedang<\/p>\n\n\n\n<p><strong>Efisiensi:<\/strong> rendah\/sedang\/tinggi<\/p>\n\n\n\n<p><em><a href=\"https:\/\/www.jetorbit.com\/blog\/apa-itu-lazy-loading-memahami-lazy-loading-untuk-seo\/\">Lazy loading<\/a><\/em> adalah teknik yang memungkinkan halaman untuk menunda CSS dan <em>resource <\/em>lainnya yang tidak dibutuhkan selama <em>rendering <\/em>awal.<\/p>\n\n\n\n<p>Fokusnya adalah memuat konten <em>above-the-fold<\/em> (bagian halaman yang pertama dilihat tanpa harus <em>scroll <\/em>ke bawah) dan merender <em>resource non-esensial <\/em>hanya saat dibutuhkan agar proses <em>loading <\/em>lebih cepat.<\/p>\n\n\n\n<p>Dengan metode ini, website bisa memuat file secara asinkron tergantung pada jaraknya ke viewport.<\/p>\n\n\n\n<p>Perlu diketahui bahwa<em> lazy loading <\/em>terkadang bisa memperburuk nilai LCP karena beberapa hal. Misalnya, kalau website menerapkan <em>lazy loading native<\/em> dan semua gambarnya diatur untuk mengikuti perilaku<em> lazy loading <\/em>tersebut, nilai LCP yang diperoleh bisa lebih rendah.<\/p>\n\n\n\n<p>Untuk mengatasi masalah ini, cukup beri tag pada hero image atau featured image yang mungkin dipilih sebagai elemen Largest Contentful Paint dengan atribut loading=\u201deager\u201d. Fungsi ini memungkinkan elemen gambar dirender dengan segera, berapa pun jaraknya dari viewport.<\/p>\n\n\n\n<p>Masalah juga bisa terjadi pada metode <em>lazy loading<\/em> yang menggunakan JavaScript. Karena browser perlu menjalankan JavaScript sebelum merender elemen, program kemungkinan akan memperlambat waktu <em>loading<\/em>, yang tentunya akan turut memperburuk nilai LCP.<\/p>\n\n\n\n<p>Solusi paling efektif untuk masalah ini adalah menonaktifkan <em>lazy loading<\/em> pada gambar yang dirender di bagian separuh atas halaman. Dengan begitu, browser akan memuatnya tanpa harus menjalankan JavaScript terlebih dulu.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>8. Minify File JS, CSS, dan HTML<\/strong><\/h3>\n\n\n\n<p><strong>Tingkat kesulitan:<\/strong> mudah<\/p>\n\n\n\n<p><strong>Efisiensi:<\/strong> rendah<\/p>\n\n\n\n<p>Minify adalah cara memperkecil ukuran file, terutama dengan mengurangi baris kode di dalam file. Ini merupakan salah satu metode pengoptimalan file paling umum yang bisa membantu mengoptimasi LCP.<\/p>\n\n\n\n<p>Beberapa file inti seperti <a href=\"https:\/\/www.jetorbit.com\/blog\/perbedaan-inline-css-external-css-dan-internal-css\/\">CSS<\/a>, <a href=\"https:\/\/www.jetorbit.com\/blog\/mengenal-kelebihan-javascript\/\">JavaScript<\/a>, dan HTML dapat berisi banyak <em>white space<\/em> yang tidak dibutuhkan sehingga membuat ukurannya lebih besar. <em>White space<\/em> mungkin tidak begitu berpengaruh kalau hanya sedikit. Namun,&nbsp; kalau banyak, performa website bisa terganggu.<\/p>\n\n\n\n<p>Pemilik web bisa minify file CSS, HTML, dan JavaScript secara manual atau menggunakan plugin WordPress. Beberapa plugin minify yang paling populer di antaranya adalah <a href=\"https:\/\/wordpress.org\/plugins\/fast-velocity-minify\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Fast Velocity Minify<\/a> dan WordPress Super Minify.<\/p>\n\n\n\n<p>Setelah itu, jangan lupa untuk mengecek laporan Core Web Vitals. Tool seperti PageSpeed \u200b\u200bInsights bisa memperlihatkan mana saja yang masih perlu di-minify.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>9. Hilangkan JavaScript dan CSS yang Memblokir Render<\/strong><\/h3>\n\n\n\n<p><strong>Tingkat kesulitan:<\/strong> mudah<\/p>\n\n\n\n<p><strong>Efisiensi: <\/strong>rendah\/sedang\/tinggi<\/p>\n\n\n\n<p><em>Render-blocking resource<\/em> adalah bagian file yang bisa memperlambat <em>loading <\/em>halaman. Biasanya ini ditemukan di file CSS dan JS. Resource ini bisa menyebabkan elemen di halaman dimuat lebih lama pada saat bersamaan sehingga memberikan kesan bahwa performa website buruk.<\/p>\n\n\n\n<p>Oleh karena itu, menghilangkan CSS dan JavaScript yang memblokir render sebaiknya menjadi salah satu prioritas untuk mendapatkan laporan Core Web Vitals yang lebih baik. Hal ini memungkinkan untuk menerapkan <em>progressive loading<\/em> yang bisa membantu mengurangi <em>bounce rate<\/em>.<\/p>\n\n\n\n<p>Beberapa plugin WordPress bisa membantu untuk menghilangkan <em>resource <\/em>yang memblokir render dengan lebih efisien. Contoh plugin ini adalah W3 Total Cache, Autoptimize, dan Speed \u200b\u200bBooster Pack.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><a href=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/12\/Pengertian-Largest-Contentful-Paint-4.png\"><img loading=\"lazy\" decoding=\"async\" width=\"768\" height=\"355\" src=\"https:\/\/www.jetorbit.com\/blog\/wp-content\/uploads\/2022\/12\/Pengertian-Largest-Contentful-Paint-4.png\" alt=\"largest contentful paint\" class=\"wp-image-12877\" \/><\/a><\/figure><\/div>\n\n\n<p>Oia, jangan lupa ya untuk cek juga saran-saran dari tool lab untuk mengetahui file CSS atau JS non-esensial mana yang harus dihilangkan.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>10. Kompresi Resource Teks<\/strong><\/h3>\n\n\n\n<p><strong>Tingkat kesulitan:<\/strong> mudah\/sedang\/sulit<\/p>\n\n\n\n<p><strong>Efisiensi:<\/strong> tinggi<\/p>\n\n\n\n<p>Selain minify, kompresi bisa menjadi cara bagus untuk mengoptimalkan <em>resource <\/em>teks, seperti CSS, HTML, dan JavaScript. Cara ini bisa membuat proses transfer menjadi lebih cepat karena ukuran file yang lebih kecil sehingga menghasilkan nilai LCP yang lebih baik.<\/p>\n\n\n\n<p>Salah satu metode kompresi <em>resource <\/em>teks paling umum adalah GZIP. Metode ini akan mempertahankan semua informasi yang ada di dalam file selama proses kompresi.<\/p>\n\n\n\n<p>Pemilik web bisa mengaktifkan GZIP menggunakan plugin WordPress seperti WP Rocket atau layanan kompresi online gratis seperti <a href=\"https:\/\/gzip.swimburger.net\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">gzip.swimburger.net<\/a>.&nbsp;<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>11. Tunda Parsing JavaScript<\/strong><\/h3>\n\n\n\n<p><strong>Tingkat Kesulitan:<\/strong> mudah\/sedang\/sulit<\/p>\n\n\n\n<p><strong>Efisiensi:<\/strong> tinggi<\/p>\n\n\n\n<p>Web browser biasanya memuat kode dari atas ke bawah tapi akan memprioritaskan JavaScript sebelum melanjutkan proses <em>loading<\/em>. Ini bisa memperlambat pemuatan halaman dan memperburuk pengalaman pengguna, loh.<\/p>\n\n\n\n<p>Dengan menunda <em>parsing <\/em>JavaScript, halaman akan disesuaikan untuk menunda pemrosesan kode JavaScript nonesensial di halaman. Dengan metode ini, browser bisa memprioritaskan <em>loading <\/em>konten halaman sebenarnya agar lebih cepat&nbsp;<\/p>\n\n\n\n<p>Nah, kalian bisa menunda parsing JavaScript di halaman secara manual dengan memodifikasi file <strong>function.php<\/strong> atau menggunakan tool, seperti Speed \u200b\u200bBooster Pack atau WP Rocket.<\/p>\n\n\n\n<p>Okay, jadi bisa disimpulkan bahwa Largest Contentful Paint adalah salah satu metrik Core Web Vitals yang menunjukkan seberapa cepat halaman web bisa memuat konten terbesarnya.<\/p>\n\n\n\n<p>Nah, Largest Contentful Paint (LCP) inilah metrik utama yang berfokus pada <em>user <\/em>dan mempengaruhi kecepatan <em>loading <\/em>serta pengalaman pengguna secara keseluruhan.<\/p>\n\n\n\n<p>Gimana, udah paham, kan?<\/p>\n\n\n\n<p>Semoga bermanfaat dan tunggu info-info menarik lainnya dari kami, ya \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Di artikel ini, kami akan menjelaskan tentang Largest Contentful Paint, cara mengoptimasi LCP, serta cara mengetahui skor LCP kalian. Yuk baca sampai selesai Pengertian Largest Contentful Paint dan Cara Optimasinya Pengertian Largest Contentful Paint Largest Contentful Paint adalah metrik yang menunjukkan waktu loading website, yang menilai seberapa cepat halaman web merender elemen terbesarnya, termasuk blok &#8230; <a title=\"Pengertian Largest Contentful Paint dan Cara Optimasinya\" class=\"read-more\" href=\"https:\/\/www.jetorbit.com\/blog\/pengertian-largest-contentful-paint-dan-cara-optimasi\/\" aria-label=\"Read more about Pengertian Largest Contentful Paint dan Cara Optimasinya\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":12901,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"generate_page_header":"","footnotes":""},"categories":[25],"tags":[283,4179,7,4174,4176,4180,4175,4177],"class_list":["post-12873","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-info","tag-domain-murah","tag-elemen-largest-contentful-paint","tag-hosting-murah","tag-largest-contentful-paint","tag-largest-contentful-paint-adalah","tag-meningkatkan-largest-contentful-paint","tag-pengertian-largest-contentful-paint","tag-skor-largest-contentful-paint","infinite-scroll-item","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-33"],"_links":{"self":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/12873","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/comments?post=12873"}],"version-history":[{"count":2,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/12873\/revisions"}],"predecessor-version":[{"id":12903,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/posts\/12873\/revisions\/12903"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media\/12901"}],"wp:attachment":[{"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/media?parent=12873"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/categories?post=12873"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jetorbit.com\/blog\/wp-json\/wp\/v2\/tags?post=12873"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}