Gunakan image/next untuk optimasi image secara otomatis
¶ Leverage SSG and SSR
Menggunakan SSG dan SSR dapat meningkatkan performance page. Berikut penjelasannya :
- Faster Time to First Byte ( TTFB ): Karena HTML sudah di build sepenuhnya di server, browser menerima HTML secara instant yang mengarah pada TTFB yang lebih cepat.
- Improved First Contentful Paint (FCP) and Largest Contentful Paint (LCP): Karena HTML sudah di build sepenuhnya di server, browser dapat merender page secara langsung tanpa menunggu Javascript di load dan di execute.Hal ini dapat meningkatkan score FCP dan LCP.
- Better SEO: Search engine dapat dengan mudah melakukan crawling pada page karna full HTML sudah tersedia pada saat crawling terjadi. Hal ini krusial untuk content-heavy pages dimana SEO dianggap penting.
- Instant Load Times: Karena page pre-rendered dan di sajikan sebagai static files, maka tidak diperlukan server-side processing pada setiap request.
- Minimal Server Resources: Dengan SSG, server tidak perlu melakukan komputasi HTML pada setiap request, yang mana mengurangi load server dan memungkinan handling request yang lebih banyak dengan lebih sedikit resources.
- Excellent SEO and Performance: Sama seperti SSR, SSG menyediakan fully rendered HTML yang mana bagus untuk SEO karena Search Engine dapat dengan mudah melakukan crawling dan indexing. Tambahan, karena SSG tidak membutuhkan server-side processing, maka performance meningkat karena hal itu.
- Improved Time to Interactive (TTI): Karena browser dapat menampilkan page secara singkat, memungkinkan untuk TTI yang lebih rendah. User dapat berinteraksi dengan page lebih cepat.
Pakai dynamic import untuk komponen-komponen yang tidak langsung ditampilkan ketika initial load page. Berikut jenis component yang bisa kita import secara dynamic :
Modal dan Popup tidak akan muncul sampai ada trigger yang dilakukan.
Components yang me-render chart (e.g., memakai libraries seperti Chart.js, D3.js, or Recharts) bisa di import dynamically karena component-component tersebut melibatkan heavy computations dan tidak selalu dibutuhkan di initial load page.
- Tabs and Accordion
- Heavy or Rarely Used Components
Berikut contoh implementasi Dynamic Import :
import dynamic from 'next/dynamic';
const DynamicComponent = dynamic(() => import('../components/HeavyComponent'));
function MyPage() {
return (
<div>
<h1>My Page</h1>
<DynamicComponent />
</div>
);
}
export default MyPage;
Next.js secara otomatis splits Javascript code menjadi chunk yang lebih kecil berdasarkan page-page di aplikasi. Setiap page di compile kedalam masing-masing Javascript bundle, yang berarti ketika user navigate ke suatu page, hanya Javascript yang dibutuhkan saja yang di load, bukan keseluruhan Javascript dari aplikasi.
¶ Optimize Javascript and CSS file