Skip to content

Commit 6e215a1

Browse files
george-gcageorge-gca
authored
Lighthouse fixes (cotes2020#2199)
Our score went down a little bit after the last few changes. Avoiding lazy loading some images (as introduced in cotes2020#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 <[email protected]>
1 parent b316653 commit 6e215a1

File tree

13 files changed

+48
-39
lines changed

13 files changed

+48
-39
lines changed

‎_includes/projects.liquid‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
{% if project.img %}
66
{%
77
include figure.liquid
8+
loading="eager"
89
path=project.img
910
sizes = "250px"
1011
alt="project thumbnail"

‎_includes/projects_horizontal.liquid‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="row g-0">
55
{% if project.img %}
66
<div class="card-img col-md-6">
7-
{% include figure.liquid path=project.img sizes="(min-width: 768px) 156px, 50vw" alt="project thumbnail" %}
7+
{% include figure.liquid loading="eager" path=project.img sizes="(min-width: 768px) 156px, 50vw" alt="project thumbnail" %}
88
</div>
99
{% endif %}
1010
<div class="{% if project.img %}col-md-6{% else %}col-md-12{% endif %}">

‎_layouts/about.liquid‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ layout: default
2828
{% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px)
2929
30vw, 95vw"{% endcapture %}
3030
{%
31-
include figure.liquid path = profile_image_path class = profile_image_class sizes = sizes alt = page.profile.image
32-
cache_bust = true
31+
include figure.liquid loading="eager" path=profile_image_path class=profile_image_class sizes=sizes alt=page.profile.image
32+
cache_bust=true
3333
%}
3434
{% endif %}
3535
{% if page.profile.more_info %}

‎_layouts/bib.liquid‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
{% assign entry_path = entry.preview | prepend: '/assets/img/publication_preview/' %}
1111
{%
1212
include figure.liquid
13+
loading="eager"
1314
path=entry_path
1415
sizes = "200px"
1516
class="preview z-depth-1 rounded"
@@ -251,8 +252,15 @@
251252
></span>
252253
{% endif %}
253254
{% if site.enable_publication_badges.google_scholar and entry_has_google_scholar_badge %}
254-
<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 }}">
255-
<img src="https://img.shields.io/badge/scholar-{% google_scholar_citations site.scholar_userid entry.google_scholar_id %}-4285F4?logo=googlescholar&labelColor=beige">
255+
<a
256+
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 }}"
257+
aria-label="Google Scholar link"
258+
role="button"
259+
>
260+
<img
261+
src="https://img.shields.io/badge/scholar-{% google_scholar_citations site.scholar_userid entry.google_scholar_id %}-4285F4?logo=googlescholar&labelColor=beige"
262+
alt="{% google_scholar_citations site.scholar_userid entry.google_scholar_id %} Google Scholar citations"
263+
>
256264
</a>
257265
{% endif %}
258266
</div>

‎_layouts/profiles.liquid‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ layout: page
1515
{% assign profile_image_class = 'img-fluid z-depth-1 rounded' %}
1616
{% endif %}
1717
{% capture sizes %}(min-width: {{site.max_width}}) {{ site.max_width | minus: 30 | times: 0.3}}px, (min-width: 576px) 30vw, 95vw"{% endcapture %}
18-
{% include figure.liquid path = profile_image_path class = profile_image_class sizes = sizes alt = profile.image %}
18+
{% include figure.liquid loading="eager" path=profile_image_path class=profile_image_class sizes=sizes alt=profile.image %}
1919
{% endif %}
2020
{% if profile.more_info %}
2121
<div class="more-info">{{ profile.more_info }}</div>

‎_posts/2015-05-15-images.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@ This is an example post with image galleries.
1212

1313
<div class="row mt-3">
1414
<div class="col-sm mt-3 mt-md-0">
15-
{% include figure.liquid path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}
15+
{% include figure.liquid loading="eager" path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}
1616
</div>
1717
<div class="col-sm mt-3 mt-md-0">
18-
{% include figure.liquid path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}
18+
{% include figure.liquid loading="eager" path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}
1919
</div>
2020
</div>
2121
<div class="caption">
@@ -27,10 +27,10 @@ Simply add `data-zoomable` to `<img>` tags that you want to make zoomable.
2727

2828
<div class="row mt-3">
2929
<div class="col-sm mt-3 mt-md-0">
30-
{% include figure.liquid path="assets/img/8.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
30+
{% include figure.liquid loading="eager" path="assets/img/8.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
3131
</div>
3232
<div class="col-sm mt-3 mt-md-0">
33-
{% include figure.liquid path="assets/img/10.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
33+
{% include figure.liquid loading="eager" path="assets/img/10.jpg" class="img-fluid rounded z-depth-1" zoomable=true %}
3434
</div>
3535
</div>
3636

‎_posts/2024-01-27-advanced-images.md‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -18,11 +18,11 @@ This is an example post with advanced image components.
1818
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.
1919

2020
<swiper-container keyboard="true" navigation="true" pagination="true" pagination-clickable="true" pagination-dynamic-bullets="true" rewind="true">
21-
<swiper-slide>{% include figure.liquid path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
22-
<swiper-slide>{% include figure.liquid path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
23-
<swiper-slide>{% include figure.liquid path="assets/img/8.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
24-
<swiper-slide>{% include figure.liquid path="assets/img/10.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
25-
<swiper-slide>{% include figure.liquid path="assets/img/12.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
21+
<swiper-slide>{% include figure.liquid loading="eager" path="assets/img/9.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
22+
<swiper-slide>{% include figure.liquid loading="eager" path="assets/img/7.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
23+
<swiper-slide>{% include figure.liquid loading="eager" path="assets/img/8.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
24+
<swiper-slide>{% include figure.liquid loading="eager" path="assets/img/10.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
25+
<swiper-slide>{% include figure.liquid loading="eager" path="assets/img/12.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
2626
</swiper-container>
2727

2828
## Image Comparison Slider

‎_projects/1_project.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,21 @@ To give your project a background in the portfolio page, just add the img tag to
2323

2424
<div class="row">
2525
<div class="col-sm mt-3 mt-md-0">
26-
{% include figure.liquid path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
26+
{% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
2727
</div>
2828
<div class="col-sm mt-3 mt-md-0">
29-
{% include figure.liquid path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
29+
{% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
3030
</div>
3131
<div class="col-sm mt-3 mt-md-0">
32-
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
32+
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
3333
</div>
3434
</div>
3535
<div class="caption">
3636
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
3737
</div>
3838
<div class="row">
3939
<div class="col-sm mt-3 mt-md-0">
40-
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
40+
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
4141
</div>
4242
</div>
4343
<div class="caption">

‎_projects/2_project.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,21 @@ To give your project a background in the portfolio page, just add the img tag to
2323

2424
<div class="row">
2525
<div class="col-sm mt-3 mt-md-0">
26-
{% include figure.liquid path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
26+
{% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
2727
</div>
2828
<div class="col-sm mt-3 mt-md-0">
29-
{% include figure.liquid path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
29+
{% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
3030
</div>
3131
<div class="col-sm mt-3 mt-md-0">
32-
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
32+
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
3333
</div>
3434
</div>
3535
<div class="caption">
3636
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
3737
</div>
3838
<div class="row">
3939
<div class="col-sm mt-3 mt-md-0">
40-
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
40+
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
4141
</div>
4242
</div>
4343
<div class="caption">

‎_projects/3_project.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,21 @@ To give your project a background in the portfolio page, just add the img tag to
2323

2424
<div class="row">
2525
<div class="col-sm mt-3 mt-md-0">
26-
{% include figure.liquid path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
26+
{% include figure.liquid loading="eager" path="assets/img/1.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
2727
</div>
2828
<div class="col-sm mt-3 mt-md-0">
29-
{% include figure.liquid path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
29+
{% include figure.liquid loading="eager" path="assets/img/3.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
3030
</div>
3131
<div class="col-sm mt-3 mt-md-0">
32-
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
32+
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
3333
</div>
3434
</div>
3535
<div class="caption">
3636
Caption photos easily. On the left, a road goes through a tunnel. Middle, leaves artistically fall in a hipster photoshoot. Right, in another hipster photoshoot, a lumberjack grasps a handful of pine needles.
3737
</div>
3838
<div class="row">
3939
<div class="col-sm mt-3 mt-md-0">
40-
{% include figure.liquid path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
40+
{% include figure.liquid loading="eager" path="assets/img/5.jpg" title="example image" class="img-fluid rounded z-depth-1" %}
4141
</div>
4242
</div>
4343
<div class="caption">

0 commit comments

Comments
 (0)