changeset 54f337808f3f in www.tryton.org:default
details: https://hg.tryton.org/www.tryton.org?cmd=changeset&node=54f337808f3f
description:
Do not lazy load images above the fold
see https://web.dev/lcp-lazy-loading/
diffstat:
templates/index.html | 2 +-
templates/service_providers.html | 2 ++
templates/service_providers/layout.html | 2 +-
templates/success_stories.html | 2 +-
templates/supporters.html | 2 +-
templates/utils.html | 4 ++--
6 files changed, 8 insertions(+), 6 deletions(-)
diffs (77 lines):
diff -r 683d26db027a -r 54f337808f3f templates/index.html
--- a/templates/index.html Mon Oct 31 19:51:44 2022 +0100
+++ b/templates/index.html Mon Nov 07 14:49:07 2022 +0100
@@ -2,7 +2,7 @@
{% set description = "TRYTON is business software, ideal for companies of any
size, easy to use, complete and 100% Open Source." %}
{% extends "layout.html" %}
{% macro slide_img(i) %}
-<img class="d-block w-100 img-fluid" src="{{ url_for('static',
filename='images/slide%i.jpg' % i) }}" sizes="100vw" srcset="{{
url_for('static', filename='images/slide%i.jpg' % i) }} 1920w, {{
url_for('static', filename='images/slide%i-800px.jpg' % i) }} 800w, {{
url_for('static', filename='images/slide%i-400px.jpg' % i) }} 400w" alt=""
loading="lazy" style="background-color: {{ dominant_color('images/slide%i.jpg'
% i) }};" width="1920" height="500">
+<img class="d-block w-100 img-fluid" src="{{ url_for('static',
filename='images/slide%i.jpg' % i) }}" sizes="100vw" srcset="{{
url_for('static', filename='images/slide%i.jpg' % i) }} 1920w, {{
url_for('static', filename='images/slide%i-800px.jpg' % i) }} 800w, {{
url_for('static', filename='images/slide%i-400px.jpg' % i) }} 400w" alt=""
loading="{{ 'lazy' if i > 1 else 'eager' }}" style="background-color: {{
dominant_color('images/slide%i.jpg' % i) }};" width="1920" height="500">
{% endmacro %}
{% block head %}
{{ super() }}
diff -r 683d26db027a -r 54f337808f3f templates/service_providers.html
--- a/templates/service_providers.html Mon Oct 31 19:51:44 2022 +0100
+++ b/templates/service_providers.html Mon Nov 07 14:49:07 2022 +0100
@@ -49,7 +49,9 @@
</div>
<div class="row row-cols-1 row-cols-md-2 row-cols-xl-4">
{% for provider in providers %}
+ {% with loading = 'lazy' if loop.index > 1 else 'eager' %}
{% include "service_providers/%s.html" %
provider.name|lower|slugify %}
+ {% endwith %}
{% endfor %}
</div>
</div>
diff -r 683d26db027a -r 54f337808f3f templates/service_providers/layout.html
--- a/templates/service_providers/layout.html Mon Oct 31 19:51:44 2022 +0100
+++ b/templates/service_providers/layout.html Mon Nov 07 14:49:07 2022 +0100
@@ -2,7 +2,7 @@
<div class="card mx-auto shadow d-flex flex-colum" style="max-width:
24rem; height: 100%">
<a href="{{ website }}" style="height: 240px">
{% if img %}
- <img class="card-img-top text-center d-block" src="{{ img }}"
alt="{{ provider.name }}" loading="lazy" width="382" height="240"/>
+ <img class="card-img-top text-center d-block" src="{{ img }}"
alt="{{ provider.name }}" loading="{{ loading or 'lazy' }}" width="382"
height="240"/>
{% endif %}
</a>
<div class="card-body">
diff -r 683d26db027a -r 54f337808f3f templates/success_stories.html
--- a/templates/success_stories.html Mon Oct 31 19:51:44 2022 +0100
+++ b/templates/success_stories.html Mon Nov 07 14:49:07 2022 +0100
@@ -20,7 +20,7 @@
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4">
{% for case in cases %}
<div class="col mb-gutter">
- {{ case_card(case) }}
+ {{ case_card(case, loading='lazy' if loop.index > 2 else 'eager')
}}
</div>
{% endfor %}
</div>
diff -r 683d26db027a -r 54f337808f3f templates/supporters.html
--- a/templates/supporters.html Mon Oct 31 19:51:44 2022 +0100
+++ b/templates/supporters.html Mon Nov 07 14:49:07 2022 +0100
@@ -23,7 +23,7 @@
{% set roundup = roundup_url(supporter) %}
<div class="col mb-gutter">
<div class="card mx-auto shadow" style="max-width: 200px">
- <img class="card-img-top" src="{{ supporter['email'] |
gravatar(198) }}" width="198" height="198" alt="" loading="lazy"/>
+ <img class="card-img-top" src="{{ supporter['email'] |
gravatar(198) }}" width="198" height="198" alt="" loading="{{ 'lazy' if
loop.index > 2 else 'eager' }}"/>
<div class="card-body">
<h2 class="h6 card-title">{{ supporter['name'] }}</h2>
{% if discuss %}
diff -r 683d26db027a -r 54f337808f3f templates/utils.html
--- a/templates/utils.html Mon Oct 31 19:51:44 2022 +0100
+++ b/templates/utils.html Mon Nov 07 14:49:07 2022 +0100
@@ -16,10 +16,10 @@
</style>
{% endmacro %}
-{% macro case_card(case, classes='') %}
+{% macro case_card(case, classes='', loading='lazy') %}
<div class="card mx-auto shadow d-flex flex-column {{ classes }}"
style="max-width: 18rem; height: 100%">
{% if case.logo %}
- <img class="card-img-top" src="{{ url_for('static', filename=case.logo)
}}" alt="" loading="lazy" width="286" height="180"/>
+ <img class="card-img-top" src="{{ url_for('static', filename=case.logo)
}}" alt="" loading="{{ loading }}" width="286" height="180"/>
{% endif %}
<div class="card-body">
<h2 class="h5 card-title">{{ case.title }}</h2>
