Jadikan Jamstack perlahan? Cabaran diterima.

"Jamstack adalah Slowwwww." Anda jarang mendengarnya, terutamanya yang diberikan reputasi Jamstack untuk kelajuan. Walau bagaimanapun, walaupun tapak jamStack boleh mengalami masalah prestasi. Jangan menganggap Jamstack secara automatik sama dengan prestasi yang pantas; Pilihan pintar adalah penting. Mari kita meneroka bagaimana keputusan yang buruk dapat melumpuhkan kelajuan tapak jamStack.

Kami dengan sengaja akan membina tapak Gatsby yang perlahan untuk memahami kesesakan prestasi. Menggunakan ujian prestasi yang berterusan dan Google Lighthouse, kami akan menjejaki setiap perubahan, bermula dengan skor rumah api yang sempurna sebanyak 100 dan sengaja merendahkannya kepada 17 yang menyedihkan.

Membina Laman Jamstack Perlahan Kami

Kami akan menggunakan Gatsby. Pertama, pasang Gatsby CLI:

 NPM Install -g Gatsby -cli

Buat laman web Gatsby baru:

 Gatsby New Slow-Jamstack

Navigasi ke direktori projek dan mulakan pelayan pembangunan:

 CD Slow-Jamstack
Gatsby berkembang

Untuk ujian rumah api, kami memerlukan pembentukan pengeluaran. Vercel menyediakan penyelesaian hosting yang mudah. Pasang dan log masuk ke Vercel CLI:

 NPM Pasang -G Vercel -CLI
vercel

Ini menyebarkan laman web ini kepada Vercel. Tapak Gatsby lalai biasanya cepat, menjaringkan 100 di rumah api. Mari lihat bagaimana kita boleh mensabotajnya.

Melambatkan dengan CSS

Rangka kerja CSS berkuasa, tetapi memilih yang salah atau menggunakannya dengan tidak cekap boleh menyakiti prestasi. Memilih kerangka modular atau CSS-in-JS untuk memuatkan hanya gaya yang diperlukan.

Kami akan membuat pilihan yang buruk: Memuatkan keseluruhan kerangka semantikui, termasuk jQuery (pergantungan), terus ke daripada HTML kami. Ini memerlukan menyalin fail <code>html.js lalai:

 cp .cache/lalai-html.js src/html.js

Kemudian, tambahkan lembaran gaya semantik dan jQuery ke src/html.js :

<link href="https://cdn.jsdelivr.net/npm/%5Bemail%C2%A0protected%5D/dist/semantic.css" rel="stylesheet">

Menggunakan perubahan:

 Vercel --Prod

Skor mercusuar jatuh ke 66, penurunan yang ketara hanya dari memuatkan CSS yang tidak perlu. Masa untuk interaktif (TTI) meningkat secara dramatik.

Melambatkan dengan kebergantungan pemasaran

Mari Tambahkan Skrip Penjejakan Google dan Facebook ke src/html.js dalam :

 

<img  src="/static/imghwm/default1.png" data-src="https://img.php.cn/?x-oss-process=image/resize,p_40" class="lazy"    style="max-width:90%"  style="max-width:90%" alt="Jadikan Jamstack perlahan? Cabaran diterima." >

Digunakan lagi:

 Vercel --Prod

Skor menjatuhkan kepada 51. Skrip yang kelihatan kecil ini mempunyai kesan prestasi yang besar.

Melambatkan dengan gambar

Kami akan menambah 100 imej dari https://placeimg.com ke index.js , memuatkannya secara langsung tanpa pengoptimuman:

 const indexPage = () => {
  const item = array.from ({panjang: 100}, (_, i) => (
    <img key="{i}" src="%7B%60https://placeimg.com/200/200/%24%7Bi%7D%60%7D" alt="Jadikan Jamstack perlahan? Cabaran diterima.">
  ));

  kembali (
    <layout>
      {item}
    </layout>
  );
};

Menggunakan lagi menghasilkan tapak yang perlahan secara drastik, dengan skor rumah api 17 dan TTI sebanyak 16.5 saat.

Titik? Setiap keputusan mempengaruhi prestasi. Malah di Jamstack, prestasi tidak percuma.

Memulihkan kelajuan

Kelebihan prestasi utama Jamstack adalah caching kelebihan fail statik, mengurangkan masa ke byte pertama (TTFB). Ini lebih cepat daripada rendering sisi pelayan. Walau bagaimanapun, pengoptimuman pelanggan tetap penting. Walaupun skor rumah api yang tinggi adalah wajar, ingatlah bahawa mereka tidak selalu mencerminkan pengalaman pengguna dengan sempurna. Latihan ini menunjukkan bahawa walaupun dengan jamStack, perhatian rajin terhadap prestasi diperlukan.

Atas ialah kandungan terperinci Jadikan Jamstack perlahan? Cabaran diterima.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!