sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: add defer to scripts and lazy loading to images
Some checks failed
CI / ruff (push) Successful in 14s
Details
CI / validate (push) Has been cancelled
Details
CI / dependency-scanning (push) Has been cancelled
Details
CI / docs (push) Has been cancelled
Details
CI / deploy (push) Has been cancelled
Details
CI / pytest (push) Has been cancelled
Details

Browse Source 
Add defer attribute to 145 <script> tags across 103 template files
(PERF-067) and loading="lazy" to 22 <img> tags across 13 template
files (PERF-058). Both improve page load performance.

Validator totals: 0 errors, 2 warnings, 1360 info (down from 1527).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-02-16 20:55:52 +01:00
parent 3a7cf29386
commit 8ee8c398ce
110 changed files with 193 additions and 193 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/templates/shared/macros/charts.html
View File

@@ -5,7 +5,7 @@
Prerequisites:
Add Chart.js CDN to your base template:
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/chart.js@4.4.1/dist/chart.umd.min.js"></script>
Usage:
{% from 'shared/macros/charts.html' import chart_card, line_chart, bar_chart, doughnut_chart %}

2
app/templates/shared/macros/datepicker.html
View File

@@ -7,7 +7,7 @@
Add Flatpickr CDN to your base template:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/flatpickr.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatpickr/dist/themes/dark.css">
<script src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
<script defer src="https://cdn.jsdelivr.net/npm/flatpickr"></script>
Usage:
{% from 'shared/macros/datepicker.html' import datepicker, daterange_picker, datetime_picker %}

6
app/templates/shared/macros/storefront/reviews.html
View File

@@ -58,7 +58,7 @@
{% if show_avatar %}
<div class="w-10 h-10 rounded-full overflow-hidden bg-purple-100 dark:bg-purple-900/30 flex items-center justify-center flex-shrink-0">
<template x-if="{{ review_var }}.author_avatar">
<img :src="{{ review_var }}.author_avatar" :alt="{{ review_var }}.author_name" class="w-full h-full object-cover">
<img loading="lazy" :src="{{ review_var }}.author_avatar" :alt="{{ review_var }}.author_name" class="w-full h-full object-cover">
</template>
<template x-if="!{{ review_var }}.author_avatar">
<span class="text-sm font-medium text-purple-600 dark:text-purple-400" x-text="{{ review_var }}.author_name?.charAt(0)?.toUpperCase()"></span>
@@ -111,7 +111,7 @@
type="button"
class="w-16 h-16 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700 hover:border-purple-500 transition-colors"
>
<img :src="image" alt="Review image" class="w-full h-full object-cover">
<img loading="lazy" :src="image" alt="Review image" class="w-full h-full object-cover">
</button>
</template>
</div>
@@ -353,7 +353,7 @@
<div class="flex flex-wrap gap-2">
<template x-for="(image, index) in {{ images_model }} || []" :key="index">
<div class="relative w-20 h-20 rounded-lg overflow-hidden group">
<img :src="image" alt="Review image" class="w-full h-full object-cover">
<img loading="lazy" :src="image" alt="Review image" class="w-full h-full object-cover">
<button
type="button"
@click="{{ images_model }}.splice(index, 1)"

6
app/templates/shared/macros/storefront/search-bar.html
View File

@@ -247,7 +247,7 @@
</div>
</template>
<template x-if="typeof suggestion === 'object' && suggestion.image">
<img :src="suggestion.image" :alt="suggestion.name" class="w-10 h-10 object-cover rounded">
<img loading="lazy" :src="suggestion.image" :alt="suggestion.name" class="w-10 h-10 object-cover rounded">
</template>
</button>
</li>
@@ -434,7 +434,7 @@
class="w-full flex items-center gap-4 px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-800"
>
<template x-if="typeof suggestion === 'object' && suggestion.image">
<img :src="suggestion.image" :alt="suggestion.name" class="w-12 h-12 object-cover rounded">
<img loading="lazy" :src="suggestion.image" :alt="suggestion.name" class="w-12 h-12 object-cover rounded">
</template>
<template x-if="typeof suggestion === 'string' || !suggestion.image">
<span class="w-12 h-12 flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded">
@@ -574,7 +574,7 @@
:href="product.url"
class="flex items-center gap-3 px-4 py-2 hover:bg-gray-50 dark:hover:bg-gray-700/50"
>
<img :src="product.image" :alt="product.name" class="w-10 h-10 object-cover rounded">
<img loading="lazy" :src="product.image" :alt="product.name" class="w-10 h-10 object-cover rounded">
<div class="flex-1 min-w-0">
<p class="text-sm text-gray-900 dark:text-white truncate" x-text="product.name"></p>
<p class="text-sm text-purple-600 dark:text-purple-400 font-medium" x-text="'$' + product.price"></p>