Slide 41
Slide 41 text
Tell the browser
what’s important
1:
2: ...
3:
4: ...
5: 
6: ...
6: ...
Slide 42
Slide 42 text
Tell the browser
what’s important
1:
2: ...
3:
4: ...
5:
6: ...
7:
8:
9:
6: ...
7:
8:
9:
Slide 47
Slide 47 text
CSS Modules
• Delete unused CSS
• Note: Not css-in-js
• Remember to chunk your CSS
/* header.css */
.logo { display: block; }
// header.js
import styles from './header.css'
function Logo() {
return ![]()
;
}
Slide 52
Slide 52 text
Images
• Images are the single largest contributor to weight (~55%)
• Serve the right image size for the right device. Use imgix,
ImageKit, thumbor, CF Polish, etc….
• And use the right format too! web-p!
• Use img srcset to serve the multiple devices with a single
HTML tag
Slide 54
Slide 54 text
Lazy Load Images
1: 
3:
3:
Slide 55
Slide 55 text
Lazy Load Images
1:
3:
4:
5: const observer = new IntersectionObserver(showImage, {
6: margin: '20px 0 100px',
7: });
3:
4:
5: const observer = new IntersectionObserver(showImage, {
6: margin: '20px 0 100px',
7: });
Slide 56
Slide 56 text
Lazy Load Images
1:
3:
4:
5: const observer = new IntersectionObserver(showImage, {
6: margin: '20px 0 100px',
7: });
8:
9: document.querySelectorAll("img[data-src]")
10: .forEach(x => observer.observe(x))
11:
3:
4:
5: const observer = new IntersectionObserver(showImage, {
6: margin: '20px 0 100px',
7: });
8:
9: document.querySelectorAll("img[data-src]")
10: .forEach(x => observer.observe(x))
11:
Slide 57
Slide 57 text
Lazy Load Images
1:
3:
4:
5: const observer = new IntersectionObserver(showImage, {
6: margin: '20px 0 100px',
7: });
8:
9: document.querySelectorAll("img[data-src]")
10: .forEach(x => observer.observe(x))
11:
12: function showImage(entries, observer) {
13: entries.forEach(entry => {
14: if(entry.isIntersecting)
15: entry.target.src = entry.target.getAttribute("data-src")
16: })
17: }
18:
3:
4:
5: const observer = new IntersectionObserver(showImage, {
6: margin: '20px 0 100px',
7: });
8:
9: document.querySelectorAll("img[data-src]")
10: .forEach(x => observer.observe(x))
11:
12: function showImage(entries, observer) {
13: entries.forEach(entry => {
14: if(entry.isIntersecting)
15: entry.target.src = entry.target.getAttribute("data-src")
16: })
17: }
18: