Langsung ke konten utama

Cara Optimasi Largest Contentful Paint (LCP)

Sebelumnya, telah kita ketahui apa itu Largest Contentful Paint (LCP) dan faktor apa saja yang mempengaruhinya.

Selanjutnya kita ukur LCP pada website. 

Berikut ini rekomendasi Google untuk mengukur LCP :

Ada beberapa masalah yang timbul ketika melakukan optimasi pada LCP ini, yaitu:
  • Slow server response times
  • Render-blocking JavaScript and CSS
  • Slow resource load times
  • Client-side rendering


Setelah kita tahu beberapa masalah yang sering muncul, sekarang tentu pertanyaannya bagaimana cara mengoptimasinya?

Sebenarnya untuk melakukan optimasi, harus dengan mengevaluasi langsung website yang bermasalah. Karena tiap website memiliki script dan konfigurasi yang berbeda. Tapi secara umum optimasi bisa dilakukan pada image, CSS, JavaScript, dan server. 

Jika anda perhatikan pada bagian “elemen yang dihitung pada LCP” yang dibahas sebelumnya, empat dari 5 faktor tersebut adalah image. Jadi jika kita melakukan optimasi pada image dengan benar, maka 80% dari sumber masalah telah diselesaikan:

1. Meminimalisir ukurannya. Jika hanya diperlukan image dengan lebar 600 pixel, maka anda tidak perlu mengupload image dengan ukuran lebih besar dari ini.

2. Lakukan kompresi. Kurangi besar file image dengan melakukan proses kompresi pada image. Bisa menggunakan optimizilla atau aplikasi kompres gambar yang lainnya baik itu offline atau online. 

Selain optimasi image (gambar), kita juga harus optimasi CSS dan JavaScript yang bisa dilakukan dengan menggunakan kode yang hanya diperlukan dan lakukan minify. Sedangkan untuk server, gunakan server yang bagus. Tapi memang harganya lebih mahal.



Sumber :

https://projasaweb.com/largest-contentful-paint/

Label

Label:

Komentar

Posting Komentar

Postingan populer dari blog ini

Format File yang tepat untuk Cetak

Sebelum ke jenis file, kita harus tahu dulu jenis file grafis yg dihasilkan, apakah berupa ilustrasi atau vektor, foto, teks dan gambar, atau sekedar teks saja, dst. Setelah itu kita juga harus tahu tujuan file dibuat, atau output produksi yang ingin dihasilkan dengan file tersebut, contohnya: untuk dicetak di kertas atau garmen, atau sekedar dijadikan slide show, dst. 1. Vektor, Ilustrasi 2D, Teks: .png (paling tepat) atau .gif (lebih kecil tapi hanya 256 warna)  2. Unggah (Upload) di Web: .jpeg atau .png 3. Siap Cetak (Printing):  ▶️ .pdf (recommended, format warna harus CMYK dan 300 dpi),  ▶️ .tiff (ukuran file besar),  ▶️ .png (tinta RGB),  ▶️ .jpeg (utk cetak biasa, not recommended) Sumber : https://desainerhaus.com/2017/07/10/memilih-dan-menyimpan-dengan-format-file-grafis-yang-tepat/ https://bangunjayaprint.wordpress.com/2019/02/13/tips-menyiapkan-file-cetak-final-artwork-fa/
Posting Komentar
Baca selengkapnya

Bins, Smart Bins dan Power Bins di Davinci Resolve

Untuk mengorganisasi media sumber (source), Davinci Resolve 16 mempunyai 3 jenis yang disebut Bins . Yaitu Bins, Smart Bins dan Power Bins . Ketiganya ada di kolom sebelah kiri bagian bawah. Bins ini akan sangat membantu kita ketika media sumber yang kita gunakan ada banyak.  Yang pertama  Bins,  yaitu tempat untuk mengorganisasi atau mengelompokkan media dalam sebuah project . Dengan Bins kita bisa membuat folder untuk mengelompokkan video berdasarkan apa yang kita inginkan. Gunakan shortcut ctrl+shift+n untuk membuat folder/bins baru.  Selanjutnya Smart Bins , yaitu bins yang bisa mengelompokkan media secara otomatis sesuai dengan yang kita inginkan. Smart Bins terkelompok berdasarkan metadata. Jadi sebelumnya kita perlu mengisi metadata di kolom inspector .  Yang terakhir Power Bins . Yaitu Bins  seperti biasa yang bisa kita pakai di seluruh project Davinci Resolve. Secara default menu ini tidak terlihat. Untuk memunculkan buka menu View dan cari bag...
Posting Komentar
Baca selengkapnya

Prinsip repetisi / pengulangan dalam desain

Prinsip ini menggunakan objek yang sama atau sejenis secara berulang dalam desain. Repetisi menjadikan efek rasa kesatuan dan keberlanjutan dalam desain. Repetisi bisa digunakan untuk membuat ritme, yang bisa membantu mengarahkan user sesuai dengan keinginan kita. Selain menggunakan objek yang sama, repetisi bisa juga menggunakan style atau gaya yang sama untuk beberapa objek dalam desain. Dalam identitas brand, repetisi bisa digunakan untuk membuat karakter brand. Dengan pengulangan gaya yang sama, sebuah brand akan lebih mudah diingat. Dengan demikian repetisi bukan hanya membuat konsumen mengingat, tapi juga membuat mereka nyaman karena familiar dengan repetisi dari brand. Selain pengulangan dalam suatu desain dan beberapa desain dalam brand, kita juga bisa melihat lebih luas lagi tentang repetisi ini dalam tren desain. Tren desain bukan berarti kita mendesain yang sama atau menjadi tidak original. Tapi tren desain tersebut menjadi inspirasi kita untuk berkomunikasi dengan audien be...
Posting Komentar
Baca selengkapnya