Peningkatan Prestasi untuk Aplikasi Web

Web Vitals

1. FCP (First Contentful Paint) (Respons Pantas)
2. LCP (Cat Berisi Terbesar) (terus ke intinya) Imej/artikel Besar
3. CLS (Anjakan reka letak kumulatif) (Jangan alihkan Elemen)
4. Kelewatan input pertama (Jangan muatkan Terlalu Banyak Data) Pelayar di latar belakang mengendalikan kerja-kerja Asyc dan kerana itu ia meletakkan kelewatan

NOTA:-

Anjakan reka letak terkumpul

1. Pergerakan yang memberi kesan kepada elemen halaman, sepanjang hayat dokumen yang dilihat pengguna.
2. juga, ini mahal kerana reka letak akan berubah, dan kemudian reka letak, cat dan komposit semula. Juga siarkan bahawa jika terdapat sebarang piksel yang rosak ia akan dipaparkan semula sekali lagi

Tanda Aras

LCP:

baik < 2.5 saat < Perlu Penambahbaikan < 4.0 saat < Kasihan

FID:

baik < 100 M.sec < Perlu Penambahbaikan < 300 M.sec < Kasihan

CLS:-

baik < 0.1 saat < Perlu Penambahbaikan < 0.25 saat < Kasihan

*alat:- *

data medan (data pengguna sebenar) untuk pemantauan prestasi Aplikasi

1. Light House (Pemantauan Prestasi Tempatan adalah khusus bergantung pada pilihan sistem anda)
2. https://developer.chrome.com/docs/crux/dashboard/
3. https://www.lightest.app/ (Bandingkan dengan aplikasi serupa)
4. https://www.performancebudget.io/

Memperbaiki FCP:

1. Jika pengguna anda berada jauh dari pelayan lebih baik menggunakan CDNS.
2. Impaknya besar (Boleh mempertimbangkan gzip juga)

Memperbaiki LCP

1. Tunda sumber sehingga kemudian (tunda/async dalam skrip)

<script src="/assets/js/abc.js" defer></script>
// For Other image tags / video links from I frame we can use intersection Observer to handle when the view port intersect with the element.





</p>
<p><strong>2. Optimumkan imej (Sangat Penting)</strong><br>
  Seperti yang saya nyatakan di atas bersama-sama dengan ini walaupun kami memuatkan sedikit kemudian tetapi beberapa imej bersaiz 2Mb dan yang tidak diperlukan </p>

<p>terdapat 2 pendekatan </p>

<p>a. gunakan pemampat imej (tinyPng) (pakej npm imagemin)<br>
b. gunakan jenis srcset untuk pelbagai reka bentuk responsif, seperti yang dinyatakan di bawah<br>
</p>

<pre class="brush:php;toolbar:false">&lt;img
data-src="pic-1200.min.png"
src="" 
data-srcset=""
data-srcset="pic-600.png 600w, pic-900.png 900w, pic-1200.png 1200w"
sizes="(max-width: 600px) 600px, (max-width: 900px) 900px, 1200px"
/&gt;

3. kurangkan permintaan Overhed

pramuat dan prasambung

<link rel="preconnect" href="https://fonts.gstatic.com" />
    <link rel="preload" href="/assets/css/index.css" />

Memperbaiki CLS

1. Tolong jangan alihkan Elemen , iaitu peraturan ibu jari
2. untuk Pengiklanan kita perlu menyebut ini ialah ketinggian maksimum dengan div yang diperuntukkan
3. Katakan sepanduk kuki yang boleh kita betulkan di bahagian bawah. Kemudian akan ada rangsangan besar berbanding dengan kami menunjukkannya di atas dan apabila pengguna mengklik terima dan hilang, struktur susun atur kami tidak akan terjejas
4. Kami boleh menyasarkan untuk 0.01 (0.059) (CLS)(LightBox)
5. untuk teg imej kita boleh menentukan atribut lebar dan ketinggian

Meningkatkan FID

a. Jangan tangguhkan segala-galanya sehingga akhir, kerana katakan LCP anda selesai dan pengguna cuba berinteraksi dengan UI tetapi kerana kami melakukan segala-galanya menunda Penyemak Imbas sehingga memuatkannya di latar belakang jadi bukan Idea yang baik untuk semua untuk menangguhkan.

Hanya tidak diperlukan segera fail js yang boleh kami tangguhkan.

Rujukan:-
https://frontendmasters.com/courses/web-perf

Atas ialah kandungan terperinci Peningkatan Prestasi untuk Aplikasi Web. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!