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>