Peningkatan Prestasi untuk Aplikasi Web

王林
Lepaskan: 2024-08-25 06:32:42
asal
467 orang telah melayarinya

Performance Improvement for Web Applications

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"><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"
/>
Salin selepas log masuk

3. kurangkan permintaan Overhed

pramuat dan prasambung

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

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!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan