Pengoptimuman Prestasi Web & Lighthouse · Pelajaran

Mengutamakan Kandungan demi Kepantasan

Laksanakan teknik seperti `async`, `defer` dan petunjuk sumber untuk mengutamakan kandungan kritikal serta meningkatkan prestasi yang dirasai.

Pelajaran 3 daripada 411 langkah

Mengutamakan Kandungan demi Kepantasan ialah pelajaran Pengoptimuman Prestasi Web & Lighthouse percuma di CoddyKit. Ini ialah pelajaran 3 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Pengoptimuman Prestasi Web & Lighthouse, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Pengoptimuman Prestasi Web & Lighthouse merangkumi sejumlah 4 pelajaran.

Mengapa Kandungan Perlu Diutamakan?

Apabila pelayar memuatkan halaman web, ia mengikut urutan langkah untuk memaparkan kandungan. Proses ini sering dipanggil Laluan Pemaparan Kritikal (CRP).

Mengoptimumkan CRP bermakna menyampaikan kandungan yang paling penting kepada pengguna secepat mungkin. Ini meningkatkan prestasi yang dirasai – iaitu seberapa pantas pengguna *merasakan* halaman sedang dimuatkan.

Skrip yang Menyekat Melambatkan

Secara lalai, apabila pelayar menemui tag <script>, ia menghentikan sementara penghuraian HTML, mendapatkan skrip, melaksanakannya dan kemudian menyambung semula penghuraian. Ini dipanggil skrip yang menghalang pemaparan.

Hal ini boleh melambatkan dengan ketara masa yang diperlukan sebelum pengguna melihat kandungan, terutamanya jika skrip itu besar atau rangkaian perlahan.

<html>
<head>
  <title>Blocking Script</title>
  <script>
    // This script blocks HTML parsing
    console.log("Blocking script started.");
    // Simulate a long task
    let start = performance.now();
    while (performance.now() - start < 700) { /* busy wait */ }
    console.log("Blocking script finished.");
  </script>
</head>
<body>
  <h1>Page Content</h1>
  <p>This content appears <b>after</b> the script finishes.</p>
</body>
</html>

Memperkenalkan `defer`

Atribut defer memberitahu pelayar supaya memuat turun skrip di latar belakang tanpa menghalang penghuraian HTML. Setelah HTML dihuraikan sepenuhnya, skrip tertunda dilaksanakan mengikut susunan kemunculannya dalam dokumen.

Tidak menyekat: Penghuraian HTML diteruskan.
Susunan dikekalkan: Skrip dilaksanakan mengikut susunan dalam sumber.
Masa pelaksanaan: Selepas penghuraian HTML, sebelum DOMContentLoaded.

`defer` dalam Tindakan

Menggunakan defer sesuai untuk skrip yang bergantung pada DOM tersedia sepenuhnya, seperti analitis atau logik pemulaan UI.

Lihat bagaimana 'Kandungan Halaman' muncul sebelum skrip tertunda dilaksanakan dalam konsol.

<html>
<head>
  <title>Deferred Script Example</title>
  <script defer>
    console.log("Deferred script 1 started.");
  </script>
  <script defer>
    // This script will run after script 1
    console.log("Deferred script 2 started.");
  </script>
</head>
<body>
  <h1>Page Content</h1>
  <p>This content appears immediately while scripts are downloading.</p>
  <script>
    console.log("HTML parsing complete.");
  </script>
</body>
</html>

Memperkenalkan `async`

Atribut async juga memberitahu pelayar supaya memuat turun skrip di latar belakang. Walau bagaimanapun, skrip async dilaksanakan sebaik sahaja selesai dimuat turun, mungkin sebelum penghuraian HTML selesai.

Tidak menyekat: Penghuraian HTML diteruskan.
Susunan TIDAK dikekalkan: Skrip dilaksanakan sebaik sahaja bersedia.
Masa pelaksanaan: Secara tak segerak, secepat mungkin.

`async` berbanding `defer`

Pilihan antara async dan defer bergantung pada keperluan skrip anda:

Gunakan async untuk skrip yang berdikari (contohnya, iklan pihak ketiga dan penjejakan) apabila susunan pelaksanaan tidak penting.
Gunakan defer untuk skrip yang memerlukan DOM atau bergantung pada skrip tertunda lain, bagi memastikan susunan dikekalkan.

<html>
<head>
  <title>Async vs Defer</title>
  <script async>
    console.log("Async script executed!");
  </script>
  <script defer>
    console.log("Defer script executed!");
  </script>
  <script>
    console.log("HTML parsing continues, then inline script runs.");
  </script>
</head>
<body>
  <h1>Async & Defer Demo</h1>
  <p>Check the console to see the execution order.</p>
</body>
</html>

Petunjuk Sumber: `preconnect`

Petunjuk sumber memberikan petunjuk kepada pelayar tentang sumber yang akan diperlukannya tidak lama lagi, lalu membolehkannya mula mendapatkannya lebih awal.

<link rel="preconnect"> memberitahu pelayar supaya mewujudkan sambungan ke domain lain lebih awal. Ini termasuk carian DNS, jabat tangan TCP dan rundingan TLS, sekali gus menjimatkan milisaat berharga untuk sumber pihak ketiga yang kritikal.

Petunjuk Sumber: `preload`

<link rel="preload"> memberitahu pelayar supaya mendapatkan sumber yang sangat penting untuk navigasi semasa secepat mungkin. Ini berguna untuk sumber seperti fon, CSS kritikal atau imej yang ditemui lewat oleh penghurai.

<html>
<head>
  <title>Preload Example</title>
  <link rel="preload" href="data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6IGxpZ2h0Ymx1ZTsgfQ==" as="style">
  <style>
    /* This is a simple inline style */
    body { margin: 20px; }
  </style>
  <style>
    /* The preloaded style will apply */
    @import url("data:text/css;base64,Ym9keSB7IGJhY2tncm91bmQtY29sb3I6IGxpZ2h0Ymx1ZTsgfQ==");
  </style>
</head>
<body>
  <h1>Preloaded Style</h1>
  <p>The CSS for the light blue background is preloaded, ensuring it's available early.</p>
</body>
</html>

Petunjuk Sumber: `prefetch`

<link rel="prefetch"> memberitahu pelayar supaya mendapatkan sumber yang mungkin diperlukan untuk navigasi akan datang. Petunjuk ini mempunyai keutamaan lebih rendah berbanding preload dan sangat berguna untuk mempercepatkan pemuatan halaman berikutnya.

Contohnya, jika anda tahu pengguna berkemungkinan mengklik pautan tertentu, anda boleh mendapatkan sumber untuk halaman tersebut terlebih dahulu.

Kuiz Keutamaan

Antara pernyataan berikut tentang pemuatan skrip dan petunjuk sumber, yang manakah TRUE?

Jawab dalam pelajaran interaktif

Imbas Kembali: Pemuatan Halaman Lebih Pantas

Kita telah mempelajari teknik berkesan untuk mengutamakan kandungan dan mempercepatkan halaman web anda:

`defer` untuk pemuatan skrip yang tidak menyekat sambil mengekalkan susunan pelaksanaan.
`async` untuk pelaksanaan skrip yang tidak menyekat dan berdikari.
`preconnect` untuk menyediakan sambungan ke domain lain.
`preload` untuk mendapatkan sumber kritikal lebih awal bagi halaman semasa.
`prefetch` untuk mendapatkan sumber bagi navigasi akan datang.

Dengan menggunakannya secara strategik, anda boleh meningkatkan prestasi yang dirasai dan pengalaman pengguna laman web anda dengan ketara!

Percuma untuk bermula

Pelajari Pengoptimuman Prestasi Web & Lighthouse dengan tutor kecerdasan buatan — percuma

Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.

Kursus: 12
Pelajaran: 48

Mula belajar secara percuma Lihat kursus penuh

Soalan Lazim

Adakah pelajaran “Mengutamakan Kandungan demi Kepantasan” percuma?

Ya — teks penuh “Mengutamakan Kandungan demi Kepantasan” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus Pengoptimuman Prestasi Web & Lighthouse, tingkat taraf kepada CoddyKit PRO. Kursus Pengoptimuman Prestasi Web & Lighthouse merangkumi sejumlah 4 pelajaran.

Apakah yang akan saya pelajari dalam “Mengutamakan Kandungan demi Kepantasan”?

Laksanakan teknik seperti `async`, `defer` dan petunjuk sumber untuk mengutamakan kandungan kritikal serta meningkatkan prestasi yang dirasai. Anda berlatih Pengoptimuman Prestasi Web & Lighthouse menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.

Adakah saya memerlukan pengalaman untuk memulakan Pengoptimuman Prestasi Web & Lighthouse?

Tiada pengalaman terdahulu diperlukan. Pembelajaran Pengoptimuman Prestasi Web & Lighthouse di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 3 daripada 4.

Berapa lamakah pelajaran “Mengutamakan Kandungan demi Kepantasan” diambil?

Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.

Bolehkah saya menulis dan menjalankan kod dalam pelajaran Pengoptimuman Prestasi Web & Lighthouse ini?

Ya. Setiap pelajaran Pengoptimuman Prestasi Web & Lighthouse menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.

Semua pelajaran dalam kursus ini

← Kembali ke Pengoptimuman Prestasi Web & Lighthouse