# Web fundamentals for performant web apps - Dhrubajit Chowdhury

{%hackmd @JSDC2024/INuUpOqWS42gD1_pz5S4Bg %}

Slido：https://app.sli.do/event/xvVZvXjWEa753zmah5mSxQ

> 開始做筆記

## About Me
- Ascenda

[McMasted-Carr](https://www.mcmaster.com/)
- Old but fastest XD

## Why Performance Matters?

### Need to Educate
- UX + Retension
- 

### Conversion Rate
- 

### SEO rankings
- 

### Greater Reach
- 

### Critical Rendering Path

At a high level, your browser's rendering engine performs the following step:

- Fetch HTML, CSS, JS (resource fetching)
- Create Render tree (DOM + CSSOM)
- Generate layout
- Paint the content to the browser

## what is considered good performance?
- 
- [Core Web Vitals](https://web.dev/articles/vitals?hl=zh-tw)
- Largest Contentful Paint (LCP)
- Interaction to Next Paint (INP)
- Cumulative Layout Shift (CLS)
- Accumulative layout shift
- Summary
- 

## What is our goal today?
- Reduce Network Payload
- Higher Level
- 

## Resource Fetching
- 
- prefetch

- defer
- async
- 

- preload: Preloads critical resources needed for the page to render, improving performance by fetching them early.
- prefetch: Downloads resources that are likely to be needed soon, typically for subsequent navigation or user actions. Has low priority.

- preload（預加載）
這是一個高優先級的資源加載策略，主要用於載入當前頁面渲染時必需的關鍵資源。比如說：
- 頁面的主要 CSS 文件
- 關鍵的字體文件
- 頁面頂部的大圖

- prefetch（預獲取）
這是一個低優先級的資源加載策略，瀏覽器會在空閒時間才去下載這些資源。適用於：
- 下一頁可能會用到的資源
- 用戶很可能點擊的頁面
- 其他非關鍵資源

### 主要區別：

- 優先級：preload 是高優先級，prefetch 是低優先級
- 時機：preload 會立即下載，prefetch 會在瀏覽器空閒時才下載
- 用途：preload 用於當前頁面必需資源，prefetch 用於預測性的加載可能需要的資源

### 效能影響：

- 正確使用 preload 可以大幅提升當前頁面的加載速度
- 合理使用 prefetch 可以提升後續頁面的訪問體驗
- 但過度使用都會造成不必要的網路頻寬消耗，需要謹慎評估

## preventing layout shift
Loading Skeleton + placeholders


<Suspence fallback={<Skeleton>}>
    <Content />
</Suspence>

- Ant Design

## Reduce payload

## Lazying load images
- LQIP

native browser support

<img loading="lazy" >
<img src="a.jpg" data-src="b.jpg" >

### Native browser support lazy loading

<img alt="A typing cat" src="cat.jpg" loading="lazy" width="400" height="400">

## optimizing images

### Use CDN image optimisation example

...cat.jpg?q=50&h=500

1. **CDN 圖片參數說明**
- `q=50`：設定圖片品質為 50%
- `h=500`：設定圖片高度為 500px，寬度會自動等比例調整
2. **CDN 圖片優化的好處**
- 自動壓縮和優化圖片
- 依據裝置提供最適合的圖片大小
- 支援現代圖片格式（如 WebP、AVIF）
- 全球分散式快取，加快載入速度
- 節省原始伺服器頻寬

Popular image CDNs:
Akamai | cloudinary | cloudflare images | imgix

## Key Takeaways

## 總結：
1. **數據驅動的決策**
- 以實際數據支持優化策略的重要性
2. **資源預載入優化**

    <link rel="preload" as="font" />

- 優化關鍵渲染路徑
- 提前載入重要資源
3. **元件lazy loading**

    lazy(() => import('./LargeComponent'))

- 非即時需要的元件延遲載入
4. **資源lazy loading**

    <img alt="A typing cat" src="cat.jpg" loading="lazy" width="400" height="400" />

- 圖片和其他資源延遲載入
- 避免不必要的資源載入
5. **CDN 圖片優化**
- 使用 CDN 服務優化圖片
- 自動調整圖片大小和品質
- 全球分散式快取
6. **Skeleton優化**
- 使用Skeleton載入器
- 減少版面位移（Layout Shift）
- 提升使用者體驗

## Q & A
1. Would you typically take performance optimization into account during the development phase, or do you prefer only after noticeable issues arise post-launch?
>

2. What observation tools you usually used for performance?
> I usually use chrome DevTools (Performance Tab for profiling, Network Tab for load times) and React devtools since I am primarily working with react.

3. How would you optimize images in the context of responsive web design (RWD)?
> You can use the <picture> element or use the srcset attr to serve different images to different screen sizes.

<img
src="default-image.jpg"
srcset="image-480w.jpg 480w, image-800w.jpg 800w"
sizes="(max-width: 768px) 100vw, 800px"
alt="Responsive Image"
/>

>Or

<picture>
<source srcset="image-large.webp" media="(min-width: 1024px)">
<source srcset="image-medium.webp" media="(min-width: 768px)">
<img src="image-small.webp" alt="Responsive Image">
</picture>

> This blog post goes in depth to explain this technique
https://web.dev/learn/design/responsive-images#srcset

4. Great presentation! any suggestions for Image optimization except CDN?
> Make sure you are compressing your images using gZip/Brotli and use modern web image formats like .webp

5. Do you have experience with API response cache in Frontend side?
>

6. Do you have any tips to reduce the size and loading time of your GeoJSON data for web map?
> Unfortunately, I do not have much experience on working with geojson data, but you can try using various tools to simplify the polygons and lines on the data. Perhaps something like turf.js. Make sure to use compression techniques on the server before network transmissions.

7. Do you actually get the growth in conversion rate after deploying these performance optimisation? I find it hard to convince the boss about the performance?
> Yes you definitely do. You can start by tracking user analytics and their behavior across your app. Make minor optimizations. See the change. With this data you can then ask your stakeholder to invest more on performance.

8. CLS is not easy to fix because our images are all user-generated. We don't know the height of the image so we also need backend resource to parse the image?
> This is indeed challenging. In such situations, easy approach is to add a default aspect-ratio which the majority of the images might have. Having loading skeletons with a rough estimation of the image dimension is also good.

> For a more involved approach, when user generated images are stored on the database, u can also store meta information of the image in the table (such as width, height). During rendering on the client side, u can use these dimensions to set up placeholder.

9. What is differences between frontend cache and backend cache?
> Frontend cache usually refers to the cache on the client side (the browser). This means the data is stored on the user's device (desktop, tablet, mobile, etc). Caching using local storage, cookies, session storage, caching on a service worker. This article goes in depth to how you can use a frontend cache effectively, https://web.dev/learn/pwa/caching.

> A backend cache refers to the storage on your server. Depending on the context, this may be a CDN, an in-memory storage like mamcache or redis, static files on the server.

## 聊天區
>