Skip to content

Commit bf3a34d

Browse files
cotes2020cotes2020
authored
perf(core): replace lazysizes with browser-level lazy loading (#1267)
1 parent 5015fde commit bf3a34d

File tree

19 files changed

+169
-224
lines changed

19 files changed

+169
-224
lines changed

‎_data/origin/basic.yml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,9 @@ magnific-popup:
3535
css: /assets/lib/magnific-popup/magnific-popup.css
3636
js: /assets/lib/magnific-popup/jquery.magnific-popup.min.js
3737

38-
lazysizes:
39-
js: /assets/lib/lazysizes/lazysizes.min.js
38+
lazy-polyfill:
39+
css: /assets/lib/loading-attribute-polyfill/loading-attribute-polyfill.min.css
40+
js: /assets/lib/loading-attribute-polyfill/loading-attribute-polyfill.umd.min.js
4041

4142
clipboard:
4243
js: /assets/lib/clipboard/clipboard.min.js

‎_data/origin/cors.yml‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,9 @@ magnific-popup:
4646
css: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/magnific-popup.min.css
4747
js: https://cdn.jsdelivr.net/npm/magnific-popup@1.1.0/dist/jquery.magnific-popup.min.js
4848

49-
lazysizes:
50-
js: https://cdn.jsdelivr.net/npm/lazysizes@5.3.2/lazysizes.min.js
49+
lazy-polyfill:
50+
css: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.min.css
51+
js: https://cdn.jsdelivr.net/npm/loading-attribute-polyfill@2.1.1/dist/loading-attribute-polyfill.umd.min.js
5152

5253
clipboard:
5354
js: https://cdn.jsdelivr.net/npm/clipboard@2.0.11/dist/clipboard.min.js

‎_includes/embed/twitch.html‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
<iframe class="embed-video twitch lazyload"
1+
<iframe
2+
class="embed-video twitch"
23
src="https://player.twitch.tv/?video={{ include.id }}&parent={{ site.url | split: '://' | last | remove: '/' }}"
3-
frameborder="0" allowfullscreen="true"
4-
scrolling="no"></iframe>
4+
frameborder="0"
5+
allowfullscreen="true"
6+
scrolling="no"
7+
></iframe>

‎_includes/embed/youtube.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
1-
<iframe class="embed-video youtube lazyload"
1+
<iframe
2+
class="embed-video youtube"
3+
loading="lazy"
24
src="https://www.youtube.com/embed/{{ include.id }}"
35
title="YouTube video player"
46
frameborder="0"
57
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
6-
allowfullscreen></iframe>
8+
allowfullscreen
9+
></iframe>

‎_includes/head.html‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,10 @@
8080
<link rel="stylesheet" href="{{ site.data.origin[type].toc.css | relative_url }}">
8181
{% endif %}
8282

83+
{% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
84+
<link rel="stylesheet" href="{{ site.data.origin[type]['lazy-polyfill'].css | relative_url }}">
85+
{% endif %}
86+
8387
{% if page.layout == 'page' or page.layout == 'post' %}
8488
<!-- Manific Popup -->
8589
<link rel="stylesheet" href="{{ site.data.origin[type].magnific-popup.css | relative_url }}">

‎_includes/js-selector.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212
<!-- layout specified -->
1313

1414
{% if page.layout == 'post' or page.layout == 'page' or page.layout == 'home' %}
15-
{% assign urls = urls | append: ',' | append: site.data.origin[type].lazysizes.js %}
15+
{% assign urls = urls | append: ',' | append: site.data.origin[type]['lazy-polyfill'].js %}
1616

1717
{% unless page.layout == 'home' %}
1818
<!-- image lazy-loading & popup & clipboard -->

‎_includes/refactor-content.html‎

Lines changed: 22 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@
3030
{% endif %}
3131

3232
<!-- Change the icon of checkbox -->
33+
3334
{% if _content contains '<input type="checkbox"' %}
3435
{% assign _content = _content
3536
| replace: '<input type="checkbox" class="task-list-item-checkbox" disabled="disabled" checked="checked" />',
@@ -39,7 +40,8 @@
3940
%}
4041
{% endif %}
4142

42-
<!-- images -->
43+
<!-- Handle images -->
44+
4345
{% assign IMG_TAG = '<img ' %}
4446

4547
{% if _content contains IMG_TAG %}
@@ -79,8 +81,6 @@
7981
{% assign _left = _left | remove: ' /' | replace: ' w=', ' width=' | replace: ' h=', ' height=' %}
8082
{% assign _attrs = _left | split: '" ' %}
8183

82-
{% assign _width = null %}
83-
{% assign _height = null %}
8484
{% assign _lqip = null %}
8585
{% assign _class = null %}
8686

@@ -94,10 +94,6 @@
9494
{% capture _value %}{{ _pair | last | remove: '"' }}{% endcapture %}
9595

9696
{% case _key %}
97-
{% when 'width' %}
98-
{% assign _width = _value %}
99-
{% when 'height' %}
100-
{% assign _height = _value %}
10197
{% when 'src' %}
10298
{% assign _src = _value %}
10399
{% when 'lqip' %}
@@ -114,47 +110,33 @@
114110
{% endif %}
115111

116112
{% assign _final_src = null %}
113+
{% assign _lazyload = true %}
117114

118115
{% unless _src contains '//' %}
119116
{% assign _final_src = _path_prefix | append: _src %}
120-
{% capture _src_from %}"{{ _src }}"{% endcapture %}
121-
{% capture _src_to %}"{{ _final_src }}"{% endcapture %}
122-
{% assign _left = _left | replace: _src_from, _src_to %}
117+
{% assign _src_alt = 'src="' | append: _path_prefix %}
118+
{% assign _left = _left | replace: 'src="', _src_alt %}
123119
{% endunless %}
124120

125121
{% if _lqip %}
126-
{% unless _lqip contains ':' %}
127-
{% assign _final_lqip = _path_prefix | append: _lqip %}
128-
{% capture _lqip_from %}"{{ _lqip }}"{% endcapture %}
129-
{% capture _lqip_to %}"{{ _final_lqip }}"{% endcapture %}
130-
{% assign _left = _left | replace: _lqip_from, _lqip_to %}
131-
{% endunless %}
132-
{% endif %}
122+
{% if _lqip contains ':' %}
123+
{% assign _lazyload = false %}
124+
{% else %}
125+
{% assign _lqip_alt = 'lqip="' | append: _path_prefix %}
126+
{% assign _left = _left | replace: 'lqip="', _lqip_alt %}
127+
{% endif %}
133128

134-
<!-- lazy-load images <https://github.com/aFarkas/lazysizes#readme> -->
135-
{% assign _left = _left | replace: 'src=', 'data-src=' %}
136-
{% if _left contains 'class=' %}
137-
{% assign _left = _left | replace: 'class="', 'class="lazyload ' %}
138-
{% else %}
139-
{% assign _left = _left | append: ' class="lazyload"' %}
140-
{% endif %}
129+
<!-- add image placeholder -->
130+
{% assign _left = _left | replace: 'src=', 'data-src=' | replace: ' lqip=', ' data-lqip="true" src=' %}
141131

142-
<!-- add image placeholder -->
143-
{% if _lqip %}
144-
{% assign _left = _left | replace: ' lqip=', ' data-lqip="true" src=' %}
145132
{% else %}
146-
{% if _width and _height %}
147-
<!-- add SVG placehoder -->
148-
{%- capture _svg -%}
149-
src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 {{ _width }} {{ _height }}'%3E%3C/svg%3E"
150-
{%- endcapture -%}
151-
{% assign _left = _svg | append: ' ' | append: _left %}
152-
{% assign _class = _class | append: ' shimmer' %}
153-
{% endif %}
133+
{% assign _class = _class | append: ' shimmer' %}
154134
{% endif %}
155135

156-
<!-- Bypass the HTML-proofer test -->
157-
{% assign _left = _left | append: ' data-proofer-ignore' %}
136+
<!-- lazy-load images -->
137+
{% if _lazyload %}
138+
{% assign _left = _left | append: ' loading="lazy"' %}
139+
{% endif %}
158140

159141
{% if page.layout == 'home' %}
160142
<!-- create the image wrapper -->
@@ -174,6 +156,7 @@
174156
class="img-link{% unless _lqip %} shimmer{% endunless %}"
175157
{% endcapture %}
176158
{% assign _img_content = _img_content | slice: 0, _size | append: _class | append: '>' %}
159+
177160
{% else %}
178161
<!-- create the image wrapper -->
179162
{% assign _wrapper_start = _final_src
@@ -185,12 +168,12 @@
185168
%}
186169

187170
{% assign _img_content = _img_content | append: _wrapper_start %}
188-
{% assign _right = _right | prepend: '></a' %}
171+
{% assign _right = '></a' | append: _right %}
189172
{% endif %}
190173
{% endif %}
191174

192175
<!-- combine -->
193-
{% assign _img_content = _img_content | append: debug | append: IMG_TAG | append: _left | append: _right %}
176+
{% assign _img_content = _img_content | append: IMG_TAG | append: _left | append: _right %}
194177
{% endfor %}
195178

196179
{% if _img_content %}

‎_javascript/home.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import { basic, initSidebar, initTopbar } from './modules/layouts';
2-
import { initLocaleDatetime, imgLazy } from './modules/plugins';
2+
import { initLocaleDatetime, loadImg } from './modules/plugins';
33

44
basic();
55
initSidebar();
66
initTopbar();
77
initLocaleDatetime();
8-
imgLazy();
8+
loadImg();

‎_javascript/modules/components/img-lazyload.js‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎_javascript/modules/components/img-loading.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
/**
2+
* Setting up image lazy loading and LQIP switching
3+
*/
4+
5+
export function loadImg() {
6+
const $images = $('main img[loading="lazy"]');
7+
const $lqip = $('main img[data-lqip="true"]');
8+
9+
if ($images.length > 0) {
10+
$images.on('load', function () {
11+
/* Stop shimmer when image loaded */
12+
$(this).parent().removeClass('shimmer');
13+
});
14+
15+
$images.each(function () {
16+
/* Images loaded from the browser cache do not trigger the 'load' event */
17+
if ($(this).prop('complete')) {
18+
$(this).parent().removeClass('shimmer');
19+
}
20+
});
21+
}
22+
23+
if ($lqip.length > 0) {
24+
$lqip.each(function () {
25+
/* Switch LQIP with real image url */
26+
const dataSrc = $(this).attr('data-src');
27+
$(this).attr('src', encodeURI(dataSrc));
28+
$(this).removeAttr('data-src data-lqip');
29+
});
30+
}
31+
}

0 commit comments

Comments
 (0)