silva
/
new_site
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Lighthouse fixes (#2199) 

Our score went down a little bit after the last few changes. Avoiding
lazy loading some images (as introduced in #2183), since [it is strongly
recommended to omit hero images and other images or iframes that are
likely to appear above the fold from being
lazy-loaded](https://web.dev/articles/browser-level-lazy-loading-for-cmss#avoid_lazy_loading_above-the-fold_elements).
Also added missing `alt` to google scholar field.

---------

Signed-off-by: George Araujo <george.gcac@gmail.com>
This commit is contained in:
George 2024-02-14 14:37:32 -03:00 committed by GitHub
parent b316653f3b
commit 6e215a1cdc
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 48 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_includes/projects.liquid
View File

@ -5,6 +5,7 @@
{% if project.img %} {% if project.img %}
{% {%
include figure.liquid include figure.liquid
loading="eager"
path=project.img path=project.img
sizes = "250px" sizes = "250px"
alt="project thumbnail" alt="project thumbnail"

2
_includes/projects_horizontal.liquid
View File

@ -4,7 +4,7 @@
<div class="row g-0"> <div class="row g-0">
{% if project.img %} {% if project.img %}
<div class="card-img col-md-6"> <div class="card-img col-md-6">
{% include figure.liquid path=project.img sizes="(min-width: 768px) 156px, 50vw" alt="project thumbnail" %} {% include figure.liquid loading="eager" path=project.img sizes="(min-width: 768px) 156px, 50vw" alt="project thumbnail" %}
</div> </div>
{% endif %} {% endif %}
<div class="{% if project.img %}col-md-6{% else %}col-md-12{% endif %}"> <div class="{% if project.img %}col-md-6{% else %}col-md-12{% endif %}">

2
_layouts/about.liquid
View File

@ -28,7 +28,7 @@ layout: default
{% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px) {% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px)
30vw, 95vw"{% endcapture %} 30vw, 95vw"{% endcapture %}
{% {%
include figure.liquid path = profile_image_path class = profile_image_class sizes = sizes alt = page.profile.image include figure.liquid loading="eager" path=profile_image_path class=profile_image_class sizes=sizes alt=page.profile.image
cache_bust=true cache_bust=true
%} %}
{% endif %} {% endif %}

12
_layouts/bib.liquid
View File

@ -10,6 +10,7 @@
{% assign entry_path = entry.preview | prepend: '/assets/img/publication_preview/' %} {% assign entry_path = entry.preview | prepend: '/assets/img/publication_preview/' %}
{% {%
include figure.liquid include figure.liquid
loading="eager"
path=entry_path path=entry_path
sizes = "200px" sizes = "200px"
class="preview z-depth-1 rounded" class="preview z-depth-1 rounded"
@ -251,8 +252,15 @@
></span> ></span>
{% endif %} {% endif %}
{% if site.enable_publication_badges.google_scholar and entry_has_google_scholar_badge %} {% if site.enable_publication_badges.google_scholar and entry_has_google_scholar_badge %}
<a href="https://scholar.google.com/citations?view_op=view_citation&hl=en&user={{ site.scholar_userid }}&citation_for_view={{ site.scholar_userid }}:{{ entry.google_scholar_id }}"> <a
<img src="https://img.shields.io/badge/scholar-{% google_scholar_citations site.scholar_userid entry.google_scholar_id %}-4285F4?logo=googlescholar&labelColor=beige"> href="https://scholar.google.com/citations?view_op=view_citation&hl=en&user={{ site.scholar_userid }}&citation_for_view={{ site.scholar_userid }}:{{ entry.google_scholar_id }}"
aria-label="Google Scholar link"
role="button"
>
<img
src="https://img.shields.io/badge/scholar-{% google_scholar_citations site.scholar_userid entry.google_scholar_id %}-4285F4?logo=googlescholar&labelColor=beige"
alt="{% google_scholar_citations site.scholar_userid entry.google_scholar_id %} Google Scholar citations"
>
</a> </a>
{% endif %} {% endif %}
</div> </div>

2
_layouts/profiles.liquid
View File

@ -15,7 +15,7 @@ layout: page
{% assign profile_image_class = 'img-fluid z-depth-1 rounded' %} {% assign profile_image_class = 'img-fluid z-depth-1 rounded' %}
{% endif %} {% endif %}
{% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px) 30vw, 95vw"{% endcapture %} {% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px) 30vw, 95vw"{% endcapture %}
{% include figure.liquid path = profile_image_path class = profile_image_class sizes = sizes alt = profile.image %} {% include figure.liquid loading="eager" path=profile_image_path class=profile_image_class sizes=sizes alt=profile.image %}
{% endif %} {% endif %}
{% if profile.more_info %} {% if profile.more_info %}
<div class="more-info">{{ profile.more_info }}</div> <div class="more-info">{{ profile.more_info }}</div>

8
_posts/2015-05-15-images.md
View File

@ -12,10 +12,10 @@ This is an example post with image galleries.
<div class="row mt-3"> <div class="row mt-3">
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}
</div> </div>
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}
</div> </div>
</div> </div>
<div class="caption"> <div class="caption">
@ -27,10 +27,10 @@ Simply add `data-zoomable` to `<img>` tags that you want to make zoomable.
<div class="row mt-3"> <div class="row mt-3">
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/8.jpg" class="img-fluid rounded z-depth-1" zoomable=true %} {% include figure.liquid loading="eager" path="assets/img/8.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
</div> </div>
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/10.jpg" class="img-fluid rounded z-depth-1" zoomable=true %} {% include figure.liquid loading="eager" path="assets/img/10.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
</div> </div>
</div> </div>

10
_posts/2024-01-27-advanced-images.md
View File

@ -18,11 +18,11 @@ This is an example post with advanced image components.
This is a simple image slider. It uses the [Swiper](https://swiperjs.com/) library. Check the [examples page](https://swiperjs.com/demos) for more information of what you can achieve with it. This is a simple image slider. It uses the [Swiper](https://swiperjs.com/) library. Check the [examples page](https://swiperjs.com/demos) for more information of what you can achieve with it.
<swiper-container keyboard="true" navigation="true" pagination="true" pagination-clickable="true" pagination-dynamic-bullets="true" rewind="true"> <swiper-container keyboard="true" navigation="true" pagination="true" pagination-clickable="true" pagination-dynamic-bullets="true" rewind="true">
<swiper-slide>{% include figure.liquid path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide> <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
<swiper-slide>{% include figure.liquid path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide> <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
<swiper-slide>{% include figure.liquid path="assets/img/8.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide> <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/8.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
<swiper-slide>{% include figure.liquid path="assets/img/10.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide> <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/10.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
<swiper-slide>{% include figure.liquid path="assets/img/12.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide> <swiper-slide>{% include figure.liquid loading="eager" path="assets/img/12.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
</swiper-container> </swiper-container>
## Image Comparison Slider ## Image Comparison Slider

8
_projects/1_project.md
View File

@ -23,13 +23,13 @@ To give your project a background in the portfolio page, just add the img tag to
<div class="row"> <div class="row">
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
</div> </div>
<div class="caption"> <div class="caption">
@ -37,7 +37,7 @@ To give your project a background in the portfolio page, just add the img tag to
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
</div> </div>
<div class="caption"> <div class="caption">

8
_projects/2_project.md
View File

@ -23,13 +23,13 @@ To give your project a background in the portfolio page, just add the img tag to
<div class="row"> <div class="row">
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
</div> </div>
<div class="caption"> <div class="caption">
@ -37,7 +37,7 @@ To give your project a background in the portfolio page, just add the img tag to
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
</div> </div>
<div class="caption"> <div class="caption">

8
_projects/3_project.md
View File

@ -23,13 +23,13 @@ To give your project a background in the portfolio page, just add the img tag to
<div class="row"> <div class="row">
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
</div> </div>
<div class="caption"> <div class="caption">
@ -37,7 +37,7 @@ To give your project a background in the portfolio page, just add the img tag to
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
</div> </div>
<div class="caption"> <div class="caption">

8
_projects/4_project.md
View File

@ -22,13 +22,13 @@ To give your project a background in the portfolio page, just add the img tag to
<div class="row"> <div class="row">
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
</div> </div>
<div class="caption"> <div class="caption">
@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
</div> </div>
<div class="caption"> <div class="caption">

8
_projects/5_project.md
View File

@ -22,13 +22,13 @@ To give your project a background in the portfolio page, just add the img tag to
<div class="row"> <div class="row">
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
</div> </div>
<div class="caption"> <div class="caption">
@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
</div> </div>
<div class="caption"> <div class="caption">

8
_projects/6_project.md
View File

@ -22,13 +22,13 @@ To give your project a background in the portfolio page, just add the img tag to
<div class="row"> <div class="row">
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
</div> </div>
<div class="caption"> <div class="caption">
@ -36,7 +36,7 @@ To give your project a background in the portfolio page, just add the img tag to
</div> </div>
<div class="row"> <div class="row">
<div class="col-sm mt-3 mt-md-0"> <div class="col-sm mt-3 mt-md-0">
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %} {% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
</div> </div>
</div> </div>
<div class="caption"> <div class="caption">