Web Vitals
NOTA:-
Anjakan reka letak terkumpul
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
Memperbaiki FCP:
Memperbaiki LCP
<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"><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" />
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
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!