Skip to content

Commit

Permalink
Lighthouse fixes (alshedivat#2199)
Browse files Browse the repository at this point in the history 
Our score went down a little bit after the last few changes. Avoiding
lazy loading some images (as introduced in alshedivat#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]>
  • Loading branch information
@george-gca
george-gca authored Feb 14, 2024
1 parent b316653 commit 6e215a1
Show file tree
Hide file tree
Showing 13 changed files with 48 additions and 39 deletions.
1 change: 1 addition & 0 deletions _includes/projects.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
{% if project.img %}
{%
include figure.liquid
loading="eager"
path=project.img
sizes = "250px"
alt="project thumbnail"
Expand Down
2 changes: 1 addition & 1 deletion _includes/projects_horizontal.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
<div class="row g-0">
{% if project.img %}
<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>
{% endif %}
<div class="{% if project.img %}col-md-6{% else %}col-md-12{% endif %}">
Expand Down
4 changes: 2 additions & 2 deletions _layouts/about.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ layout: default
{% 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 = page.profile.image
cache_bust = true
include figure.liquid loading="eager" path=profile_image_path class=profile_image_class sizes=sizes alt=page.profile.image
cache_bust=true
%}
{% endif %}
{% if page.profile.more_info %}
Expand Down
12 changes: 10 additions & 2 deletions _layouts/bib.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
{% assign entry_path = entry.preview | prepend: '/assets/img/publication_preview/' %}
{%
include figure.liquid
loading="eager"
path=entry_path
sizes = "200px"
class="preview z-depth-1 rounded"
Expand Down Expand Up @@ -251,8 +252,15 @@
></span>
{% endif %}
{% 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 }}">
<img src="https://img.shields.io/badge/scholar-{% google_scholar_citations site.scholar_userid entry.google_scholar_id %}-4285F4?logo=googlescholar&labelColor=beige">
<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 }}"
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>
{% endif %}
</div>
Expand Down
2 changes: 1 addition & 1 deletion _layouts/profiles.liquid
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ layout: page
{% assign profile_image_class = 'img-fluid z-depth-1 rounded' %}
{% endif %}
{% 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 %}
{% if profile.more_info %}
<div class="more-info">{{ profile.more_info }}</div>
Expand Down
8 changes: 4 additions & 4 deletions _posts/2015-05-15-images.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,10 @@ This is an example post with image galleries.

<div class="row mt-3">
<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 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 class="caption">
Expand All @@ -27,10 +27,10 @@ Simply add `data-zoomable` to `<img>` tags that you want to make zoomable.

<div class="row mt-3">
<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 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>

Expand Down
10 changes: 5 additions & 5 deletions _posts/2024-01-27-advanced-images.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<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 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 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/9.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 loading="eager" path="assets/img/8.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 loading="eager" path="assets/img/12.jpg" class="img-fluid rounded z-depth-1" %}</swiper-slide>
</swiper-container>

## Image Comparison Slider
Expand Down
8 changes: 4 additions & 4 deletions _projects/1_project.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,21 @@ To give your project a background in the portfolio page, just add the img tag to

<div class="row">
<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 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 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 class="caption">
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.
</div>
<div class="row">
<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 class="caption">
Expand Down
8 changes: 4 additions & 4 deletions _projects/2_project.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,21 @@ To give your project a background in the portfolio page, just add the img tag to

<div class="row">
<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 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 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 class="caption">
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.
</div>
<div class="row">
<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 class="caption">
Expand Down
8 changes: 4 additions & 4 deletions _projects/3_project.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,21 @@ To give your project a background in the portfolio page, just add the img tag to

<div class="row">
<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 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 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 class="caption">
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.
</div>
<div class="row">
<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 class="caption">
Expand Down
8 changes: 4 additions & 4 deletions _projects/4_project.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,21 @@ To give your project a background in the portfolio page, just add the img tag to

<div class="row">
<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 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 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 class="caption">
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.
</div>
<div class="row">
<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 class="caption">
Expand Down
8 changes: 4 additions & 4 deletions _projects/5_project.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,21 @@ To give your project a background in the portfolio page, just add the img tag to

<div class="row">
<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 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 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 class="caption">
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.
</div>
<div class="row">
<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 class="caption">
Expand Down
8 changes: 4 additions & 4 deletions _projects/6_project.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,21 @@ To give your project a background in the portfolio page, just add the img tag to

<div class="row">
<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 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 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 class="caption">
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.
</div>
<div class="row">
<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 class="caption">
Expand Down

0 comments on commit 6e215a1

Please sign in to comment.