5+ LCP pada WordPress : Panduan Lanjutan Untuk Meningkatkan Skor LCP Terbaru

LCP (Largest contentful paint) merupakan inti web yang paling banyak membuat masalah orang untuk mempercepat tampilan websitenya.

Google memberikan panduan melalui video Pengoptimalan LCP dan ini bagus yang mana dijelaskan kalau LCP dibagi menjadi 4 bagian yaitu :

1. TTFB
2. Resource load delay
3. Resource load time
4. Element render ddelay

LCP mengukur berapa lama konten terbesar dimuat, ada banyak faktor yang memperngaruhinya. Konten bagian atas adalah tempat yang baik untuk anda memulai memperbaiki LCP

1. Pelajari bagian mana diperbaiki dari LCP

LCP dibagi menjadi 4 bagian seperti gambar dibawah ini

Alat yang bisa dipakai

• KeyCDN Performance Test – mengukur TTFB di 10 lokasi global.
• Waterfall Chart – visualisasi yang bagus menunjukkan file mana yang berkontribusi pada LCP.
• PSI Recommendations – banyak rekomendasi di PageSpeed ​​Insights berkorelasi dengan LCP. Memperbaiki rekomendasi yang ditampilkan dalam laporan peluang/diagnostik dapat membantu.
• Chrome Dev Tools Coverage Report – file CSS/JS yang besar dan tidak dioptimalkan adalah salah satu faktor LCP terbesar. Ini dapat membantu Anda menemukan plugin dan JavaScript pihak ketiga mana yang paling lama dimuat. Nama plugin dan domain pihak ketiga biasanya dicantumkan di URL.

2. Kecualikan gambar atas dari Lazy Load

Gambar bagian atas harus cepat ditampilkan di viewport, namun lazy load menundanya dan menambah bagian issues “resource load delay” yang menganggu LCP website.

Namun untuk tema website dan bagian halaman atau postingan artikel mengecualikan gambar-gambar ini adalah secara manual, sementara logo atau image pada sidebar atas mungkin bisa dilakukan secara umum. Perlu dipastikan untuk mengecualikan lazyload pada image terbesar. Kalau digambar berikut terlihat klo gambar pada konten perlu dikecualikan dari pada pada sidebar ataupun logo.

Ini merupakan bagian element konten terbesar untuk bagian postingan artikel website.

Preloading critical images biasanya merupakan metode terbaik. Tidak hanya melakukan pramuat gambar bagian atas, tetapi juga mengecualikannya dari lazyl load. Ini didukung oleh Perfmatters dan FlyingPress plugin. Cukup atur jumlah gambar yang biasanya ditampilkan di bagian atas dan plugin akan menangani sisanya.

Anda juga dapat mengecualikan gambar utama, tetapi tidak akan dimuat sebelumnya.

Jika plugin cache Anda tidak mendukung salah satu dari ini, Anda harus menelusuri halaman/posting artikel Anda secara manual, menyalin semua URL gambar yang dimuat di bagian atas, lalu mengecualikannya secara manual. Beberapa plugin cache memiliki metode pengecualian yang seharusnya dapat Anda temukan di dokumentasinya.

Gambar Latar Belakang

Gambar latar tidak lazy load karena sering dimuat dari file CSS terpisah. Beberapa plugin cache memiliki kelas helper lazy-bg untuk memuatnya dengan lazy load yang sementara ada pada plugin WP Rocket mengharuskan memindahkannya ke HTML sebaris. Karena gambar tersebut tidak dimuat dengan lambat, biasanya tidak perlu mengecualikan gambar latar bagian atas, tetapi Anda harus memuatnya secara lambat secara manual jika gambar tersebut dimuat di paro bawah.

Widget Gambar Elementor

Widget gambar elemen tidak dikecualikan dari lazy load secara default karena tidak menggunakan tag img. Plugin cache terkadang memiliki kelas pembantu lazy load untuk mengecualikan gambar secara manual.

Mengoptimalkan Gambar bagian Atas Adalah Kuncinya

Sama seperti Anda akan mengoptimalkan gambar apa pun di situs Anda, melakukan ini bahkan lebih penting untuk gambar bagian atas. Compress gamabr tersebut, gunakan dimensi yang benar, format gambar yang lebih cepat (yaitu WebP), dan sajikan ukuran gambar yang lebih kecil ke perangkat seluler melalui CDN atau plugin gambar adaptif.

3. Memprioritaskan Gambar diviewport bagian Atas

Bila Anda melakukan gambar yang di pramuat yang penting ditampilkan di langkah sebelumnya, Anda tidak perlu melakukan apa pun sebab gambar bagian atas telah diprioritaskan dan dikecualikan berasal lazy load.

Namun, pramuat memiliki kelemahan serta Google merekomendasikan buat menggunakannya hanya buat gambar LCP background, kemudian menggunakan prioritas pengambilan terutama untuk gambar LCP Anda yang ditampilkan di Wawasan PageSpeed.

Di sini, kami memberikan prioritas pengambilan tinggi di gambar LCP waktu menggunakan versi WebP yg lebih cepat.

<link fetchpriority="high" rel="preload" href="/LCP-image.webp" as="image">

Saat menulis ini, FlyingPress adalah satu-satunya plugin cache yang saya tahu mendukung pengambilan prioritas yang ditampilkan di log perubahan mereka di versi 3.9.0 .

Tantangan Lain buat Gambar Latar Belakang

Jika gambar LCP Anda artinya gambar latar dan dimuat pada file CSS terpisah mirip yang dilakukan Elementor, gambar LCP Anda tidak akan dimuat sebelumnya. Anda perlu memindahkan gambar latar belakang ke HTML sebaris serta memuatnya terlebih dahulu, atau memuat gambar latar belakang dan arsip CSS tempat gambar berada.

“Buat menghilangkan penundaan pemuatan sumber daya yg tidak perlu, sumber daya LCP Anda wajib selalu dapat ditemukan asal sumber HTML. Bila asal daya hanya direferensikan berasal arsip CSS atau JavaScript eksternal, maka asal daya LCP harus dimuat sebelumnya.”

4. Kurangi Ukuran CSS/JavaScript

Ketika muat sumber daya merupakan 40% berasal LCP dan CSS/JS umumnya adalah arsip terbesar Anda.
Lihat coverage alat Pengembang Chrome Anda dan lihat URL yg biasanya memberi tahu Anda apakah plugin, tema, JavaScript pihak ketiga, atau file lain eksklusif menambahkan byte paling banyak.

Ringkasan untuk memperbaiki ukuran CSS/Javascript.

• Tema – Hal terakhir yang ingin Anda lakukan adalah dengan memulai menggunakan tema/page yg membengkak serta  memasang beberapa plugin pembuat laman yg berat.  Elementor/Divi populer lamban sementara Gutenberg ringan. GeneratePress , Blocksy, Kadence tema gratis yang ringan.
• Plugin – laporan cakupan memberikan plugin mana yg paling berpengaruh menambahkan CSS/JavaScript. Coba pindahkan konten yang bergantung di plugin ke bagian bawah seperti plugin membuatkan sosial dan galeri gambar. Mega menu sangat buruk buat LCP sebab mereka tidak hanya menambahkan CSS/JS, namun menambahkan di bagian atas pada setiap halaman situs web Anda.
• Hapus CSS yg tidak dipergunakan – plugin WP Rocket lebih lambat daripada FlyingPress, Perfmatters, dan LiteSpeed ​​Cache karena memuat CSS inline yg dipergunakan alih-alih file terpisah. File terpisah lebih cepat bagi pengunjung karena arsip dapat pada-cache dan tidak menambah berukuran HTML.
• Minify – menghapus karakter yg tidak perlu asal CSS/JS yg mengurangi ukuran filenya.
• Kode Pihak Ketiga – Gunakan hosting file secara lokal (font, google analytics, menggunakan gambar avatar lokal buat komentar, gambar pratinjau YouTube serta thumbnail, dll). Kode pihak ketiga lainnya umumnya bisa ditunda. Apakah Anda benar-benar membutuhkan Google Analytics, Tag Manager, Heatmaps, Facebook Pixel, New Relic, serta alat pelacak lainnya? Pertimbangkan buat menghapus beberapa di antaranya. Perfmatters melakukan pekerjaan yg sangat baik pada mengurangi ukuran kode pelacakan GA.
• Plugin pembongkaran aset – Perfmatters serta Asset CleanUp merupakan dua plugin 
  populer buat menghapus file CSS/JS individual (atau semua plugin) di konten eksklusif.
• Pengoptimalan builder halaman – Eksperimen Elemen serta pengaturan kinerja bawaan Divi  builder mempunyai beberapa opsi buat mengurangi ukuran CSS, JS, dan font.
• Header kode di CSS – Jangan pakai penghasil page lambat (atau plugin) buat header atau sajian Anda. Kode mereka dalam CSS sebagai gantinya. Ini jauh lebih cepat daripada kode Produsen halaman yg membengkak.
• Hapus file yg tak Anda pakai – Ikon, Gutenberg CSS, jQuery, emoji, elementor-dialog, serta file individual lainnya bisa dihapus saat tak digunakan.

5. Reduce TTFB

Time To First Byte (TTFB) adalah waktu yang diperlukan untuk memuat sebuah halaman web. TTFB merupakan salah satu indikator kualitas dari sebuah website, karena semakin cepat TTFB maka akan semakin baik pula performa website tersebut. Oleh karena itu, banyak orang yang berusaha untuk mengurangi TTFB agar website mereka bisa lebih cepat diakses oleh pengunjung.

Untuk mengurangi TTFB, ada beberapa cara yang bisa dilakukan, di antaranya:

1. Menggunakan Content Delivery Network (CDN) CDN adalah jaringan server yang tersebar di berbagai lokasi di seluruh dunia. Dengan menggunakan CDN, Anda bisa menyimpan salinan website Anda di server-server tersebut, sehingga pengunjung yang mengakses website Anda dari lokasi yang jauh tidak perlu menunggu lama untuk memuat halaman website tersebut.
2. Menggunakan cache Cache adalah tempat penyimpanan sementara untuk file-file yang sering diakses. Dengan menggunakan cache, website Anda akan lebih cepat diakses karena file-file tersebut sudah tersimpan di dalam cache. Anda bisa menggunakan plugin cache seperti W3 Total Cache atau WP Super Cache untuk mengaktifkan fitur cache pada website Anda.
3. Menggunakan teknik optimasi gambar Gambar yang terlalu besar dapat menyebabkan TTFB menjadi lebih lambat. Oleh karena itu, penting untuk memastikan bahwa gambar yang Anda gunakan pada website Anda telah dioptimalkan dengan baik. Anda bisa menggunakan tools seperti TinyPNG atau Compressor.io untuk mengoptimalkan gambar Anda.
4. Mengevaluasi hosting Jika Anda menggunakan hosting yang kurang baik, maka TTFB website Anda akan lebih lambat. Oleh karena itu, penting untuk memastikan bahwa Anda menggunakan hosting yang memiliki performa yang baik.
5. Menghilangkan plugin yang tidak perlu Setiap plugin yang terinstall pada website Anda akan mempengaruhi TTFB. Oleh karena itu, penting untuk memastikan bahwa hanya plugin yang benar-benar diperlukan saja yang terinstall pada website Anda.

Dengan mengikuti beberapa tips di atas, Anda bisa mengurangi TTFB website Anda dan meningkatkan performa website tersebut. Selain itu, Anda juga bisa menggunakan tools seperti Google PageSpeed Insights atau GTmetrix untuk mengevaluasi TTFB website Anda dan memberikan saran tentang cara menguranginya. Dengan demikian, Anda bisa memastikan bahwa website Anda terus berjalan dengan lancar dan memberikan pengalaman yang baik bagi pengunjung.

Cek portfolio website saya di sini.