docs: add overview page for performance section (angular#56828)

PR Close angular#56828

Author: bencodezen

adev/src/app/sub-navigation-data.ts

@@ -478,6 +478,11 @@ const DOCS_SUB_NAVIGATION_DATA: NavigationItem[] = [
  {
  label: 'Performance',
  children: [
+ {
+ label: 'Overview',
+ path: 'guide/performance',
+ contentPath: 'guide/performance/overview',
+ },
  {
  label: 'Deferrable views',
  path: 'guide/defer',

adev/src/assets/BUILD.bazel

@@ -20,6 +20,7 @@ copy_to_directory(
  "//adev/src/content/guide/http",
  "//adev/src/content/guide/i18n",
  "//adev/src/content/guide/ngmodules",
+ "//adev/src/content/guide/performance",
  "//adev/src/content/guide/pipes",
  "//adev/src/content/guide/routing",
  "//adev/src/content/guide/signals",

adev/src/content/guide/performance/BUILD.bazel

@@ -0,0 +1,12 @@
+load("@npm//@angular/docs:index.bzl", "generate_guides")
+
+generate_guides(
+ name = "performance",
+ srcs = glob([
+ "*.md",
+ ]),
+ data = [
+ "//adev/src/assets/images:overview.svg",
+ ],
+ visibility = ["//adev:__subpackages__"],
+)

adev/src/content/guide/performance/overview.md

@@ -0,0 +1,15 @@
+<docs-decorative-header title="Performance" imgSrc="adev/src/assets/images/overview.svg"> <!-- markdownlint-disable-line -->
+Learn about different ways you can optimize the performance of your application.
+</docs-decorative-header>
+
+One of the top priorities of any developer is ensuring that their application is as performant as possible. These guides are here to help you follow best practices for building performant applications.
+
+That said, please note that these best practices will only take the performance of your application so far. At the end of the day, we encourage you to measure performance in order to best understand what custom optimizations are best for your application.
+
+| Guides Types | Description |
+| :---------------------------------------- | :--------------------------------------------------------------------------------------------------------- |
+| [Deferrable views](/defer) | Defer loading of select dependencies within a template by wrapping corresponding parts in a `@defer` block. |
+| [Image optimization](/image-optimization) | Use the `NgOptimizedImage` directive to adopt best practices for loading images. |
+| [Server-side rendering](/ssr) | Learn how to leverage rendering pages on the server to improve load times. |
+| [Build-time prerendering](/prerendering) | Also known as static-side generation (SSG), is an alternate rendering method to improve load times. |
+| [Hydration](/hydration) | A process to improve application performance by restoring its state after server-side rendering and reusing existing DOM structure as much as possible. |