Peningkatan Prestasi untuk Aplikasi Web

Web Vitals

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

NOTA:-

Anjakan susun atur 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 ia melakukan Reka Letak, cat dan komposit semula. Juga siarkan bahawa jika terdapat mana-mana piksel yang rosak ia akan dipaparkan semula semula

Tanda Aras

LCP:

baik < 2.5 saat < Perlu Penambahbaikan < 4.0 saat < Kesian

FID:

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

CLS:-

baik < 0.1 saat < Perlu Penambahbaikan < 0.25 saat < Kesian

*alatan:- *

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/

Meningkatkan FCP:

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

Memperbaiki LCP

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

 // For Other image tags / video links from I frame we can use intersection Observer to handle when the view port intersect with the element. 
 
2. Optimumkan imej (Sangat Penting)
 Seperti yang saya nyatakan di atas bersama-sama dengan ini walaupun kami memuatkan sedikit kemudian tetapi beberapa imej bersaiz 2Mb dan yang tidak diperlukan 
 
ada 2 pendekatan 
 
a. gunakan pemampat imej (tinyPng) (pakej npm imagemin)
 b. gunakan jenis srcset untuk pelbagai reka bentuk responsif, seperti yang dinyatakan di bawah
 
 

        

         Salin selepas log masuk
        
       

3. kurangkan permintaan Overhed

pramuat dan prasambung

Meningkatkan CLS

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

Memperbaiki FID

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

Hanya tidak diperlukan segera fail js yang boleh kita 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!