gentelella

<!DOCTYPE html> <html lang="en-US"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-default.css"> <link rel="stylesheet" href="/gentelella/assets/css/just-the-docs-head-nav.css" id="jtd-head-nav-stylesheet"> <style id="jtd-nav-activation"> .site-nav > ul.nav-list:first-child > li:not(:nth-child(5)) > a, .site-nav > ul.nav-list:first-child > li > ul > li a { background-image: none; } .site-nav > ul.nav-list:not(:first-child) a, .site-nav li.external a { background-image: none; } .site-nav > ul.nav-list:first-child > li:nth-child(5) > a { font-weight: 600; text-decoration: none; }.site-nav > ul.nav-list:first-child > li:nth-child(5) > button svg { transform: rotate(-90deg); }.site-nav > ul.nav-list:first-child > li.nav-list-item:nth-child(5) > ul.nav-list { display: block; } </style> <script src="/gentelella/assets/js/vendor/lunr.min.js"></script> <script src="/gentelella/assets/js/just-the-docs.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" href="/gentelella/favicon.ico" type="image/x-icon">  <title>Performance Guide | Gentelella Admin Template</title> <meta name="generator" content="Jekyll v3.9.5" /> <meta property="og:title" content="Performance Guide" /> <meta property="og:locale" content="en_US" /> <meta name="description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" /> <meta property="og:description" content="Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations" /> <link rel="canonical" href="http://localhost:4000/gentelella/performance/" /> <meta property="og:url" content="http://localhost:4000/gentelella/performance/" /> <meta property="og:site_name" content="Gentelella Admin Template" /> <meta property="og:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" /> <meta property="og:type" content="website" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="twitter:image" content="http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg" /> <meta property="twitter:title" content="Performance Guide" /> <script type="application/ld+json"> {"@context":"https://schema.org","@type":"WebPage","description":"Modern Bootstrap 5 Admin Dashboard Template with Performance Optimizations","headline":"Performance Guide","image":"http://localhost:4000/gentelella/assets/images/gentelella-preview.jpg","url":"http://localhost:4000/gentelella/performance/"}</script>  </head> <body> <a class="skip-to-main" href="#main-content">Skip to main content</a> <svg xmlns="http://www.w3.org/2000/svg" class="d-none"> <symbol id="svg-link" viewBox="0 0 24 24"> <title>Link</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-link"> <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path> </svg> </symbol> <symbol id="svg-menu" viewBox="0 0 24 24"> <title>Menu</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-menu"> <line x1="3" y1="12" x2="21" y2="12"></line><line x1="3" y1="6" x2="21" y2="6"></line><line x1="3" y1="18" x2="21" y2="18"></line> </svg> </symbol> <symbol id="svg-arrow-right" viewBox="0 0 24 24"> <title>Expand</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-chevron-right"> <polyline points="9 18 15 12 9 6"></polyline> </svg> </symbol>  <symbol id="svg-external-link" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-external-link"> <title id="svg-external-link-title">(external link)</title> <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path><polyline points="15 3 21 3 21 9"></polyline><line x1="10" y1="14" x2="21" y2="3"></line> </symbol> <symbol id="svg-doc" viewBox="0 0 24 24"> <title>Document</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-file"> <path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline> </svg> </symbol> <symbol id="svg-search" viewBox="0 0 24 24"> <title>Search</title> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-search"> <circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line> </svg> </symbol>  <symbol id="svg-copy" viewBox="0 0 16 16"> <title>Copy</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard" viewBox="0 0 16 16"> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1h1a1 1 0 0 1 1 1V14a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V3.5a1 1 0 0 1 1-1h1v-1z"/> <path d="M9.5 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3zm-3-1A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3z"/> </svg> </symbol> <symbol id="svg-copied" viewBox="0 0 16 16"> <title>Copied</title> <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-clipboard-check-fill" viewBox="0 0 16 16"> <path d="M6.5 0A1.5 1.5 0 0 0 5 1.5v1A1.5 1.5 0 0 0 6.5 4h3A1.5 1.5 0 0 0 11 2.5v-1A1.5 1.5 0 0 0 9.5 0h-3Zm3 1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-3a.5.5 0 0 1-.5-.5v-1a.5.5 0 0 1 .5-.5h3Z"/> <path d="M4 1.5H3a2 2 0 0 0-2 2V14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V3.5a2 2 0 0 0-2-2h-1v1A2.5 2.5 0 0 1 9.5 5h-3A2.5 2.5 0 0 1 4 2.5v-1Zm6.854 7.354-3 3a.5.5 0 0 1-.708 0l-1.5-1.5a.5.5 0 0 1 .708-.708L7.5 10.793l2.646-2.647a.5.5 0 0 1 .708.708Z"/> </svg> </symbol> </svg> <div class="side-bar"> <div class="site-header" role="banner"> <a href="/gentelella/" class="site-title lh-tight"> Gentelella Admin Template </a> <button id="menu-button" class="site-button btn-reset" aria-label="Toggle menu" aria-pressed="false"> <svg viewBox="0 0 24 24" class="icon" aria-hidden="true"><use xlink:href="#svg-menu"></use></svg> </button> </div> <nav aria-label="Main" id="site-nav" class="site-nav"> <ul class="nav-list"><li class="nav-list-item"><a href="/gentelella/" class="nav-list-link">Gentelella Admin Template Documentation</a></li><li class="nav-list-item"><a href="/gentelella/installation/" class="nav-list-link">Installation Guide</a></li><li class="nav-list-item"><a href="/gentelella/configuration/" class="nav-list-link">Configuration</a></li><li class="nav-list-item"><a href="/gentelella/components/" class="nav-list-link">Components Guide</a></li><li class="nav-list-item"><a href="/gentelella/performance/" class="nav-list-link">Performance Guide</a></li><li class="nav-list-item"><a href="/gentelella/deployment/" class="nav-list-link">Deployment Guide</a></li><li class="nav-list-item"><a href="/gentelella/customization/" class="nav-list-link">Customization Guide</a></li><li class="nav-list-item"><a href="/gentelella/api-integration/" class="nav-list-link">API Integration</a></li></ul> </nav> <footer class="site-footer"> This site uses <a href="https://github.com/just-the-docs/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll. </footer> </div> <div class="main" id="top"> <div id="main-header" class="main-header"> <div class="search" role="search"> <div class="search-input-wrap"> <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search Gentelella Admin Template" aria-label="Search Gentelella Admin Template" autocomplete="off"> <label for="search-input" class="search-label"><svg viewBox="0 0 24 24" class="search-icon"><use xlink:href="#svg-search"></use></svg></label> </div> <div id="search-results" class="search-results"></div> </div> <nav aria-label="Auxiliary" class="aux-nav"> <ul class="aux-nav-list"> <li class="aux-nav-list-item"> <a href="//github.com/puikinsh/gentelella" class="site-button" > Gentelella on GitHub </a> </li> <li class="aux-nav-list-item"> <a href="//colorlib.com" class="site-button" > Colorlib </a> </li> </ul> </nav> </div> <div class="main-content-wrap"> <div id="main-content" class="main-content"> <main> <h1 class="no_toc" id="performance-optimization"> <a href="#performance-optimization" class="anchor-heading" aria-labelledby="performance-optimization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Performance Optimization </h1> Complete guide to optimizing Gentelella Admin Template for maximum performance <h2 class="no_toc text-delta" id="table-of-contents"> <a href="#table-of-contents" class="anchor-heading" aria-labelledby="table-of-contents"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Table of contents </h2> <ol id="markdown-toc"> <li><a href="#performance-overview" id="markdown-toc-performance-overview">Performance Overview</a> <ol> <li><a href="#performance-metrics" id="markdown-toc-performance-metrics">Performance Metrics</a></li> </ol> </li> <li><a href="#smart-loading-system" id="markdown-toc-smart-loading-system">Smart Loading System</a> <ol> <li><a href="#core-vs-module-architecture" id="markdown-toc-core-vs-module-architecture">Core vs. Module Architecture</a> <ol> <li><a href="#core-bundle-79kb---always-loaded" id="markdown-toc-core-bundle-79kb---always-loaded">Core Bundle (79KB) - Always Loaded</a></li> <li><a href="#conditional-modules---loaded-on-demand" id="markdown-toc-conditional-modules---loaded-on-demand">Conditional Modules - Loaded on Demand</a></li> </ol> </li> <li><a href="#module-loading-strategy" id="markdown-toc-module-loading-strategy">Module Loading Strategy</a></li> </ol> </li> <li><a href="#bundle-optimization" id="markdown-toc-bundle-optimization">Bundle Optimization</a> <ol> <li><a href="#manual-chunk-splitting" id="markdown-toc-manual-chunk-splitting">Manual Chunk Splitting</a></li> <li><a href="#tree-shaking" id="markdown-toc-tree-shaking">Tree Shaking</a></li> </ol> </li> <li><a href="#asset-optimization" id="markdown-toc-asset-optimization">Asset Optimization</a> <ol> <li><a href="#image-optimization" id="markdown-toc-image-optimization">Image Optimization</a> <ol> <li><a href="#responsive-images" id="markdown-toc-responsive-images">Responsive Images</a></li> <li><a href="#webp-format-with-fallback" id="markdown-toc-webp-format-with-fallback">WebP Format with Fallback</a></li> <li><a href="#lazy-loading" id="markdown-toc-lazy-loading">Lazy Loading</a></li> </ol> </li> <li><a href="#font-optimization" id="markdown-toc-font-optimization">Font Optimization</a> <ol> <li><a href="#font-loading-strategy" id="markdown-toc-font-loading-strategy">Font Loading Strategy</a></li> <li><a href="#subset-fonts" id="markdown-toc-subset-fonts">Subset Fonts</a></li> </ol> </li> </ol> </li> <li><a href="#caching-strategies" id="markdown-toc-caching-strategies">Caching Strategies</a> <ol> <li><a href="#browser-caching" id="markdown-toc-browser-caching">Browser Caching</a> <ol> <li><a href="#vite-asset-hashing" id="markdown-toc-vite-asset-hashing">Vite Asset Hashing</a></li> <li><a href="#service-worker-implementation" id="markdown-toc-service-worker-implementation">Service Worker Implementation</a></li> </ol> </li> <li><a href="#cdn-integration" id="markdown-toc-cdn-integration">CDN Integration</a></li> </ol> </li> <li><a href="#runtime-performance" id="markdown-toc-runtime-performance">Runtime Performance</a> <ol> <li><a href="#efficient-dom-manipulation" id="markdown-toc-efficient-dom-manipulation">Efficient DOM Manipulation</a> <ol> <li><a href="#batch-dom-updates" id="markdown-toc-batch-dom-updates">Batch DOM Updates</a></li> <li><a href="#event-delegation" id="markdown-toc-event-delegation">Event Delegation</a></li> </ol> </li> <li><a href="#memory-management" id="markdown-toc-memory-management">Memory Management</a> <ol> <li><a href="#cleanup-event-listeners" id="markdown-toc-cleanup-event-listeners">Cleanup Event Listeners</a></li> <li><a href="#debounce-expensive-operations" id="markdown-toc-debounce-expensive-operations">Debounce Expensive Operations</a></li> </ol> </li> </ol> </li> <li><a href="#monitoring-and-analysis" id="markdown-toc-monitoring-and-analysis">Monitoring and Analysis</a> <ol> <li><a href="#performance-monitoring" id="markdown-toc-performance-monitoring">Performance Monitoring</a> <ol> <li><a href="#core-web-vitals" id="markdown-toc-core-web-vitals">Core Web Vitals</a></li> <li><a href="#performance-observer" id="markdown-toc-performance-observer">Performance Observer</a></li> </ol> </li> <li><a href="#bundle-analysis" id="markdown-toc-bundle-analysis">Bundle Analysis</a> <ol> <li><a href="#webpack-bundle-analyzer" id="markdown-toc-webpack-bundle-analyzer">Webpack Bundle Analyzer</a></li> <li><a href="#lighthouse-ci" id="markdown-toc-lighthouse-ci">Lighthouse CI</a></li> </ol> </li> </ol> </li> <li><a href="#performance-checklist" id="markdown-toc-performance-checklist">Performance Checklist</a> <ol> <li><a href="#development-phase" id="markdown-toc-development-phase">Development Phase</a></li> <li><a href="#asset-optimization-1" id="markdown-toc-asset-optimization-1">Asset Optimization</a></li> <li><a href="#caching-strategy" id="markdown-toc-caching-strategy">Caching Strategy</a></li> <li><a href="#runtime-performance-1" id="markdown-toc-runtime-performance-1">Runtime Performance</a></li> <li><a href="#monitoring" id="markdown-toc-monitoring">Monitoring</a></li> </ol> </li> <li><a href="#advanced-optimization-techniques" id="markdown-toc-advanced-optimization-techniques">Advanced Optimization Techniques</a> <ol> <li><a href="#preloading-strategies" id="markdown-toc-preloading-strategies">Preloading Strategies</a> <ol> <li><a href="#module-preloading" id="markdown-toc-module-preloading">Module Preloading</a></li> <li><a href="#predictive-loading" id="markdown-toc-predictive-loading">Predictive Loading</a></li> </ol> </li> <li><a href="#critical-path-optimization" id="markdown-toc-critical-path-optimization">Critical Path Optimization</a> <ol> <li><a href="#critical-css-inlining" id="markdown-toc-critical-css-inlining">Critical CSS Inlining</a></li> <li><a href="#resource-hints" id="markdown-toc-resource-hints">Resource Hints</a></li> </ol> </li> </ol> </li> <li><a href="#next-steps" id="markdown-toc-next-steps">Next Steps</a></li> </ol><hr /> <h2 id="performance-overview"> <a href="#performance-overview" class="anchor-heading" aria-labelledby="performance-overview"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Performance Overview </h2> Gentelella v2.0 includes significant performance improvements over the original version: <h3 id="performance-metrics"> <a href="#performance-metrics" class="anchor-heading" aria-labelledby="performance-metrics"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Performance Metrics </h3> <div class="table-wrapper"><table> <thead> <tr> <th>Metric</th> <th>v1.0</th> <th>v2.0</th> <th>Improvement</th> </tr> </thead> <tbody> <tr> <td>Initial Bundle Size</td> <td>779 KB</td> <td>79 KB</td> <td>90% smaller</td> </tr> <tr> <td>Total Page Load</td> <td>1.3 MB</td> <td>770 KB</td> <td>40% reduction</td> </tr> <tr> <td>First Contentful Paint</td> <td>2.1s</td> <td>0.8s</td> <td>62% faster</td> </tr> <tr> <td>Time to Interactive</td> <td>3.5s</td> <td>1.2s</td> <td>66% faster</td> </tr> <tr> <td>Largest Contentful Paint</td> <td>2.8s</td> <td>1.1s</td> <td>61% faster</td> </tr> <tr> <td>Cumulative Layout Shift</td> <td>0.15</td> <td>0.03</td> <td>80% improvement</td> </tr> </tbody> </table></div><hr /> <h2 id="smart-loading-system"> <a href="#smart-loading-system" class="anchor-heading" aria-labelledby="smart-loading-system"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Smart Loading System </h2> <h3 id="core-vs-module-architecture"> <a href="#core-vs-module-architecture" class="anchor-heading" aria-labelledby="core-vs-module-architecture"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Core vs. Module Architecture </h3> The template uses a two-tier loading system: <h4 id="core-bundle-79kb---always-loaded"> <a href="#core-bundle-79kb---always-loaded" class="anchor-heading" aria-labelledby="core-bundle-79kb---always-loaded"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Core Bundle (79KB) - Always Loaded </h4> Essential functionality that every page needs: <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// src/main-core.js import 'bootstrap/dist/js/bootstrap.bundle.min.js'; import './js/custom.min.js'; // Initialize tooltips and popovers document.addEventListener('DOMContentLoaded', function() { // Bootstrap components initialization const tooltips = document.querySelectorAll('[data-bs-toggle="tooltip"]'); tooltips.forEach(tooltip => new bootstrap.Tooltip(tooltip)); const popovers = document.querySelectorAll('[data-bs-toggle="popover"]'); popovers.forEach(popover => new bootstrap.Popover(popover)); }); </code></pre></div></div> <h4 id="conditional-modules---loaded-on-demand"> <a href="#conditional-modules---loaded-on-demand" class="anchor-heading" aria-labelledby="conditional-modules---loaded-on-demand"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Conditional Modules - Loaded on Demand </h4> Charts Module (219KB) <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Only loads when chart elements are detected if (document.querySelector('.chart-container')) { const charts = await import('./modules/charts.js'); charts.initializeCharts(); } </code></pre></div></div> Forms Module (200KB) <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Only loads on pages with enhanced forms if (document.querySelector('.select2, .datepicker, .form-wizard')) { const forms = await import('./modules/forms.js'); forms.initializeForms(); } </code></pre></div></div> Tables Module <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Only loads when DataTables are needed if (document.querySelector('.datatable')) { const tables = await import('./modules/tables.js'); tables.initializeTables(); } </code></pre></div></div> <h3 id="module-loading-strategy"> <a href="#module-loading-strategy" class="anchor-heading" aria-labelledby="module-loading-strategy"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Module Loading Strategy </h3> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Smart module detection and loading export async function loadRequiredModules() { const modules = []; // Check for chart requirements if (document.querySelector('canvas, .morris-chart, .sparkline')) { modules.push(import('./modules/charts.js')); } // Check for form enhancements if (document.querySelector('.select2, .datepicker, .ion-range-slider')) { modules.push(import('./modules/forms.js')); } // Check for table features if (document.querySelector('.datatable, table[data-table]')) { modules.push(import('./modules/tables.js')); } // Check for dashboard widgets if (document.querySelector('.dashboard-widget, .tile_count')) { modules.push(import('./modules/dashboard.js')); } // Load all required modules in parallel const loadedModules = await Promise.all(modules); // Initialize each module loadedModules.forEach(module => { if (module.initialize) { module.initialize(); } }); } </code></pre></div></div><hr /> <h2 id="bundle-optimization"> <a href="#bundle-optimization" class="anchor-heading" aria-labelledby="bundle-optimization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Bundle Optimization </h2> <h3 id="manual-chunk-splitting"> <a href="#manual-chunk-splitting" class="anchor-heading" aria-labelledby="manual-chunk-splitting"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Manual Chunk Splitting </h3> The Vite configuration includes optimized chunk splitting: <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// vite.config.js export default defineConfig({ build: { rollupOptions: { output: { manualChunks: { // Core vendor libraries (loaded on every page) 'vendor-core': [ 'bootstrap', '@popperjs/core' ], // Chart libraries (loaded only when needed) 'vendor-charts': [ 'chart.js', 'morris.js', 'gauge.js', 'jquery-sparkline' ], // Form enhancement libraries 'vendor-forms': [ 'select2', 'tempus-dominus', 'ion-rangeslider', 'switchery' ], // Table functionality 'vendor-tables': [ 'datatables.net', 'datatables.net-bs5', 'datatables.net-responsive', 'datatables.net-buttons' ], // Utility libraries 'vendor-utils': [ 'dayjs', 'nprogress', 'autosize' ] } } } } }); </code></pre></div></div> <h3 id="tree-shaking"> <a href="#tree-shaking" class="anchor-heading" aria-labelledby="tree-shaking"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Tree Shaking </h3> Import only what you need: <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// ❌ Bad - imports entire library import * as dayjs from 'dayjs'; // ✅ Good - imports only specific functions import dayjs from 'dayjs'; import customParseFormat from 'dayjs/plugin/customParseFormat'; // ❌ Bad - imports entire Chart.js import Chart from 'chart.js'; // ✅ Good - imports only needed components import { Chart, CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, } from 'chart.js'; Chart.register( CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend ); </code></pre></div></div><hr /> <h2 id="asset-optimization"> <a href="#asset-optimization" class="anchor-heading" aria-labelledby="asset-optimization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Asset Optimization </h2> <h3 id="image-optimization"> <a href="#image-optimization" class="anchor-heading" aria-labelledby="image-optimization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Image Optimization </h3> <h4 id="responsive-images"> <a href="#responsive-images" class="anchor-heading" aria-labelledby="responsive-images"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Responsive Images </h4> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <img src="images/thumb-400.jpg" srcset="images/thumb-400.jpg 400w, images/thumb-800.jpg 800w, images/thumb-1200.jpg 1200w" sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw" alt="Dashboard preview" loading="lazy"> </code></pre></div></div> <h4 id="webp-format-with-fallback"> <a href="#webp-format-with-fallback" class="anchor-heading" aria-labelledby="webp-format-with-fallback"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> WebP Format with Fallback </h4> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code><picture> <source srcset="images/dashboard.webp" type="image/webp"> <source srcset="images/dashboard.jpg" type="image/jpeg"> <img src="images/dashboard.jpg" alt="Dashboard" loading="lazy"> </picture> </code></pre></div></div> <h4 id="lazy-loading"> <a href="#lazy-loading" class="anchor-heading" aria-labelledby="lazy-loading"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Lazy Loading </h4> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <img src="images/placeholder.jpg" data-src="images/actual-image.jpg" loading="lazy" alt="Description">  <img class="lazy" src="images/placeholder.jpg" data-src="images/actual-image.jpg" alt="Description"> </code></pre></div></div> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// Lazy loading implementation const imageObserver = new IntersectionObserver((entries, observer) => { entries.forEach(entry => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src; img.classList.remove('lazy'); observer.unobserve(img); } }); }); document.querySelectorAll('img[data-src]').forEach(img => { imageObserver.observe(img); }); </code></pre></div></div> <h3 id="font-optimization"> <a href="#font-optimization" class="anchor-heading" aria-labelledby="font-optimization"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Font Optimization </h3> <h4 id="font-loading-strategy"> <a href="#font-loading-strategy" class="anchor-heading" aria-labelledby="font-loading-strategy"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Font Loading Strategy </h4> <div class="language-html highlighter-rouge"><div class="highlight"><pre class="highlight"><code> <link rel="preload" href="/fonts/roboto-regular.woff2" as="font" type="font/woff2" crossorigin> <link rel="preload" href="/fonts/roboto-bold.woff2" as="font" type="font/woff2" crossorigin>  <style> @font-face { font-family: 'Roboto'; src: url('/fonts/roboto-regular.woff2') format('woff2'); font-display: swap; font-weight: 400; } </style> </code></pre></div></div> <h4 id="subset-fonts"> <a href="#subset-fonts" class="anchor-heading" aria-labelledby="subset-fonts"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Subset Fonts </h4> <div class="language-css highlighter-rouge"><div class="highlight"><pre class="highlight"><code>/* Load only the characters you need */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&text=ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'); </code></pre></div></div><hr /> <h2 id="caching-strategies"> <a href="#caching-strategies" class="anchor-heading" aria-labelledby="caching-strategies"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Caching Strategies </h2> <h3 id="browser-caching"> <a href="#browser-caching" class="anchor-heading" aria-labelledby="browser-caching"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Browser Caching </h3> <h4 id="vite-asset-hashing"> <a href="#vite-asset-hashing" class="anchor-heading" aria-labelledby="vite-asset-hashing"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Vite Asset Hashing </h4> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// vite.config.js export default defineConfig({ build: { rollupOptions: { output: { // Add hash to filenames for cache busting entryFileNames: `assets/[name].[hash].js`, chunkFileNames: `assets/[name].[hash].js`, assetFileNames: `assets/[name].[hash].[ext]` } } } }); </code></pre></div></div> <h4 id="service-worker-implementation"> <a href="#service-worker-implementation" class="anchor-heading" aria-labelledby="service-worker-implementation"><svg viewBox="0 0 16 16" aria-hidden="true"><use xlink:href="#svg-link"></use></svg></a> Service Worker Implementation </h4> <div class="language-javascript highlighter-rouge"><div class="highlight"><pre class="highlight"><code>// sw.js - Service Worker for caching const CACHE_NAME = 'gentelella-v2.0.0'; const urlsToCache = [ '/', '/assets/vendor-core.js', '/assets/main-core.js', '/assets/main.css', '/images/favicon.ico' ]; self.addEventListener('install', event => { event.waitUntil( caches