Performance page

_includes/header-navigation.html

@@ -16,9 +16,11 @@
           <li><a href="{{site.baseurl}}/about" class="{% if page.url contains '/about/' %}active{% endif %}">WHAT IS QUARKUS?</a></li>
           <li><a href="{{site.baseurl}}/container-first" class="{% if page.url contains '/container-first/' %}active{% endif %}">CONTAINER FIRST</a></li>
           <li><a href="{{site.baseurl}}/continuum" class="{% if page.url contains '/continuum/' %}active{% endif %}">VERSATILITY</a></li>
-          <li><a href="{{site.baseurl}}/developer-joy" class="{% if page.url contains '/developer-joy/' %}active{% endif %}">DEVELOPER JOY</a></li>
-          <li><a href="{{site.baseurl}}/kubernetes-native" class="{% if page.url contains '/kubernetes-native/' %}active{% endif %}">KUBERNETES NATIVE</a></li>
           <li><a href="{{site.baseurl}}/standards" class="{% if page.url contains '/standards/' %}active{% endif %}">STANDARDS</a></li>
+          <li><a href="{{site.baseurl}}/kubernetes-native" class="{% if page.url contains '/kubernetes-native/' %}active{% endif %}">KUBERNETES NATIVE</a></li>
+          <li><a href="{{site.baseurl}}/performance" class="{% if page.url contains '/performance/' %}active{% endif %}">PERFORMANCE</a></li>
+          <li><a href="{{site.baseurl}}/developer-joy" class="{% if page.url contains '/developer-joy/' %}active{% endif %}">DEVELOPER JOY</a></li>
+
         </ul>
       </li>
       <li class="dropdown">

_includes/homepage-features-icon-band.html

@@ -1,7 +1,7 @@
 <div class="component homepage-features-band full-width-bg text-centered">
   <div class="grid-wrapper">
     <div class="width-12-12">
-      <h2>Quarkus Features</h2>
+      <h2>Quarkus Benefits</h2>
     </div>
   </div>
   <div class="grid-container">
@@ -29,6 +29,12 @@ <h3><a href="/standards">Community and Standards</a></h3>
       <h3><a href="/kubernetes-native">Kube-Native</a></h3>
       <p>The combination of Quarkus and Kubernetes provides an ideal environment for creating scalable, fast, and lightweight applications. Quarkus significantly increases developer productivity with tooling, pre-built integrations, application services, and more.</p>
     </div>
+    <div class="width-4-12 width-12-12-m contrib-block">
+      <img class="light-only" src="{{site.baseurl}}/assets/images/performance/icon-performance.svg">
+      <img class="dark-only" src="{{site.baseurl}}/assets/images/performance/icon-performance-dark.svg">
+      <h3><a href="/performance">Performance</a></h3>
+      <p>Quarkus streamlines framework optimizations in the build phase to reduce runtime dependencies and improve efficiency. By precomputing metadata and optimizing class loading, it ensures fast startup times for JVM and native binary deployments, cutting down on memory usage.</p>
+    </div>
     <div class="width-4-12 width-12-12-m contrib-block">
       <img class="light-only" src="{{site.baseurl}}/assets/images/about/icon-developerjoy.svg">
       <img class="dark-only" src="{{site.baseurl}}/assets/images/about/icon-developerjoy-dark.svg">

_includes/performance.html

@@ -0,0 +1,91 @@
+<div class="full-width-bg component">
+  <div class="grid-wrapper">
+      <div class="width-3-12 width-12-12-m">
+        <img class="light-only" src="{{site.baseurl}}/assets/images/performance/icon-performance.svg" alt="Container image">
+        <img class="dark-only" src="{{site.baseurl}}/assets/images/performance/icon-performance-dark.svg" alt="Container image">
+      </div>
+      <div class="width-9-12 width-12-12-m">
+        <p class="intropara">Quarkus is engineered to be efficient by using build-time optimizations and a reactive core to achieve fast startup times, high throughput, low response latency, reduced memory footprint, and minimal resource consumption. As a result, Quarkus is fast... real fast.</p>
+      </div>
+      <div class="width-12-12 width-12-12-m">
+        <h2>Starting fast by doing less: the build-time principle</h2>
+      </div>
+      <div class="width-6-12 width-12-12-m">
+       <p>Quarkus redefines how Java applications are built and executed by shifting much of the work to the build phase ensuring that the costly work happens only once — during the build process — not at every startup. It results in faster, smaller, and more resource-efficient Java applications on both GraalVM native images and traditional JVM deployments.</p>
+       <p>For example, at build time, Quarkus reads part of the application configuration, scans the classpath for annotated classes, and constructs a model of the application. By doing this early, Quarkus has enough information to eliminate unnecessary components and compute the exact startup instructions required.</p>
+     </div>
+     <div class="width-6-12 width-12-12-m img-vert-center">
+       <img class="light-only" src="{{site.baseurl}}/assets/images/container/build-time-principle-light.png" alt="Quarkus Build Time Principle" width="90%">
+       <img class="dark-only" src="../guides/images/build-time-principle.png" alt="Quarkus Build Time Principle" width="90%">
+     </div>
+     <div class="width-12-12 width-12-12-m">
+       <p>This build-time optimization offers several key benefits:</p>
+       <ol>
+         <li><strong>Reduced startup time:</strong> Quarkus performs most of the heavy work at runtime, significantly cutting startup time and allowing the app to reach peak performance faster.</li>
+         <li><strong>Lower memory consumption:</strong> By minimizing allocations and class loading, Quarkus reduces memory usage. Replacing reflection with build-time bytecode generation further lowers the JVM's runtime workload.</li>
+         <li><strong>Better latency and improved throughput:</strong> Quarkus generates highly optimized code at build time and prunes unnecessary classes and methods. For instance, it weaves layers of indirection together, enabling better JIT optimizations. These improvements result in faster code and better latency. </li>
+       </ol>
+     </div>
+ </div>
+</div>
+
+   <div class="component-wrapper-slim">
+     <div class="width-12-12">
+      <h2>High concurrency without the headaches: the reactive core</h2>
+      <p>Quarkus is built on reactive principles, using an efficient asynchronous, non-blocking engine based on Netty and Eclipse Vert.x. It employs a few event loops instead of a large thread pool, reducing resource usage and improving response times by optimizing for hardware behavior.</p>
+      <p>Reactive underneath does not mean you must write reactive code. Quarkus offers three development models:</p>
+      <ol>
+        <li><strong>Imperative model:</strong> A traditional synchronous approach with faster execution due to an optimized I/O layer, ideal for lower concurrency. High concurrency increases memory use.</li>
+        <li><strong>Reactive model:</strong> Enables high concurrency with minimal resources using asynchronous, non-blocking code, but is more complex to implement and debug.</li>
+        <li><strong>Virtual threads (JDK 21+):</strong> Combines the benefits of imperative and reactive models, allowing imperative code to run on lightweight virtual threads for high concurrency with low memory overhead, though some limitations remain.</li>
+      </ol>
+      </div>  
+    </div>
+
+    <div class="component-wrapper options-band">
+     <div class="width-12-12">
+      <h2>What happens when the build time principle and the reactive core are combined?</h2>
+      <p>The combination of the build time optimization and reactive core makes Quarkus a highly  efficient framework, excelling in several key areas:</p>
+      </div>
+      <div class="width-3-12 width-12-12-m img-vert-center">
+        <img class="light-only" src="{{site.baseurl}}/assets/images/performance/icon-memory.svg" alt="Memory icon">
+        <img class="dark-only" src="{{site.baseurl}}/assets/images/performance/icon-memory-dark.svg" alt="Memory icon">
+      </div>
+      <div class="width-9-12 width-12-12-m">
+        <h3>Reduced Memory</h3>
+        <p>The build-time principle minimizes runtime memory use by eliminating unnecessary components and precomputing at build time, reducing class loading and memory allocations. The reactive core further cuts memory usage by using a few event loops instead of a large thread pool, allowing the application to handle higher loads with a smaller memory footprint and enabling high deployment density.</p>
+      </div>
+      <div class="width-3-12 width-12-12-m img-vert-center">
+        <img class="light-only" src="{{site.baseurl}}/assets/images/performance/icon-startup.svg" alt="Startup icon">
+        <img class="dark-only" src="{{site.baseurl}}/assets/images/performance/icon-startup-dark.svg" alt="Startup icon">
+      </div>
+      <div class="width-9-12 width-12-12-m">
+        <h3>Fast Startup Time</h3>
+        <p>Thanks to the build-time optimizations, most of the application’s heavy lifting, such as classpath scanning, configuration loading, and dependency injection setup, happens before the application even starts. This significantly reduces the time it takes to get the application up and ready to serve. The reactive core contributes to this by ensuring that I/O operations are handled with minimal blocking, further reducing the startup latency.  The efficient startup process means the application can respond to new load conditions more quickly. This combination supports implementing  LightSwitchOps patterns,  enabling elasticity while controlling costs.</p>
+      </div>
+      <div class="width-3-12 width-12-12-m img-vert-center">
+        <img class="light-only" src="{{site.baseurl}}/assets/images/performance/icon-throughput.svg" alt="Throughput icon">
+        <img class="dark-only" src="{{site.baseurl}}/assets/images/performance/icon-throughput-dark.svg" alt="Throughput icon">
+      </div>
+      <div class="width-9-12 width-12-12-m">
+        <h3>High Throughput</h3>
+        <p>Build-time optimizations ensure tasks like classpath scanning, configuration loading, and dependency injection are completed before startup, greatly reducing startup time. This efficient startup enables quicker responses to load changes and supports LightSwitchOps patterns for cost-effective elasticity. The reactive core minimizes blocking in I/O operations, further lowering latency and allowing handling a large number of concurrent tasks. </p>
+      </div>
+      <div class="width-3-12 width-12-12-m img-vert-center">
+        <img class="light-only" src="{{site.baseurl}}/assets/images/performance/icon-diskspace.svg" alt="Disk footprint icon">
+        <img class="dark-only" src="{{site.baseurl}}/assets/images/performance/icon-diskspace-dark.svg" alt="Disk footprint icon">
+      </div>
+      <div class="width-9-12 width-12-12-m">
+        <h3>Optimized Resource Consumption</h3>
+        <p>The build-time principle and reactive core optimize CPU, memory, and system resource use, enabling high performance with fewer resources. This lowers operational costs in cloud environments and offers sustainability benefits through reduced resource consumption.</p>
+      </div>
+    </div>
+    <div class="component-wrapper">
+      <div class="width-12-12">
+        <h2>Continuously Measuring, Continuously Improving </h2>
+        <p>Quarkus is dedicated to continuously improving performance, especially for code running on the critical execution (hot) path. Through ongoing optimizations, Quarkus ensures that every instruction and allocated byte matters, making it one of the most efficient frameworks available for developing <a href="https://www.techempower.com/benchmarks/#hw=ph&test=fortune&section=data-r22&c=e&f=0-0-0-0-0-0-0-0-0-2-4zsow-0-0-0-0&l=5181v-6bl">high-performance, cloud-ready applications.</a></p>
+        <h2>Related Links</h2>
+        <p><a href="https://quarkus.io/blog/reactive-crud-performance-case-study/">"Reactive CRUD Performance: A Case Study" Blog Post</a><br>
+          <a href="https://quarkus.io/guides/performance-measure">"Measuring Performance" guide</a></p>
+        </div>
+      </div>

_layouts/performance.html

@@ -0,0 +1,7 @@
+---
+layout: base
+---
+
+{% include title-band.html %}
+
+{% include performance.html %}

_sass/quarkus.scss

@@ -962,3 +962,11 @@ li {
 .bkg-grey {
   background-color: $grey-1;
 }
+
+
+/// image center
+
+.img-vert-center {
+  display: flex;
+  justify-content: center;
+}