Bagaimana Saya Mengoptimumkan Laman Web Portfolio Saya
Portfolio anda adalah tanggapan pertama anda. Jika ia dimuatkan dengan perlahan atau gagal muncul di Google, anda akan kehilangan peluang. Saya telah mengoptimumkan laman saya untuk kelajuan, SEO, dan penyelenggaraan.
Berikut adalah pendekatan saya.
Kelajuan dan Prestasi
Pilih stack yang ringan. Gunakan penjana tapak statik (static site generators) seperti Astro atau Next.js. Ia menghantar kurang JavaScript berbanding rangka kerja (framework) yang berat.
Elakkan perpustakaan UI yang berat. Bina komponen ringkas sendiri untuk menjimatkan kilobait.
Hoskan fon anda sendiri. Elakkan CDN pihak ketiga untuk mengurangkan pencarian DNS. Gunakan font-display: swap untuk mengelakkan anjakan susun atur (layout shifts).
Optimumkan setiap imej.
- Tukar imej kepada WebP atau AVIF.
- Ubah saiz imej sebelum anda memuat naiknya.
- Gunakan
loading="lazy"untuk imej di bahagian bawah skrin (below the fold). - Tambah atribut lebar (width) dan tinggi (height) untuk mengelakkan anjakan susun atur.
Uruskan JavaScript anda.
- Lakukan pembahagian kod (code-split) pada laluan (routes) anda.
- Tangguhkan skrip bukan kritikal seperti analitik.
- Audit saiz bundle anda secara berkala.
SEO dan Struktur
Gunakan tajuk dan meta deskripsi yang unik untuk setiap halaman.
Gunakan HTML semantik. Gunakan satu H1 bagi setiap halaman dan tag yang betul seperti nav, main, dan footer.
Tambah tag Open Graph dan Twitter Card. Ini menjadikan pautan anda kelihatan menarik apabila dikongsi.
Sertakan sitemap.xml dan robots.txt. Ini membantu enjin carian mencari anda.
Gunakan data berstruktur JSON-LD. Ini memberitahu enjin carian dengan tepat siapa anda.
Sentiasa tambah teks alt pada imej untuk kebolehcapaian (accessibility) dan SEO.
Penyelenggaraan dan Aliran Kerja
Tulis kandungan dalam Markdown atau fail JSON yang ringkas. Ini membolehkan anda menambah projek tanpa perlu menyentuh kod.
Sediakan deployment satu arahan. Gunakan Vercel atau Netlify supaya git push akan mengemas kini laman anda dengan serta-merta.
Pastikan kebergantungan (dependencies) adalah rendah. Ini mengelakkan masalah pemasangan pada masa hadapan.
Uji laman anda. Gunakan Google PageSpeed Insights atau Lighthouse untuk mencari dan membaiki masalah.
Saya membina laman saya dengan Next.js dan Vercel. Ia menggunakan imej WebP, metadata unik, dan deployment automatik. Kini, hanya mengambil masa tiga puluh saat untuk menambah projek baharu.
Fokus pada asas. Pastikan stack, imej, dan markup anda betul dari awal. Laman anda akan kekal pantas dan mudah diurus.
Apakah perkara yang memberikan perbezaan terbesar dalam pengoptimuman portfolio anda? Beritahu saya di ruangan komen.