# Website Performance Optimize

Detection Method
---
- [Page Speed](https://developers.google.com/speed/pagespeed/insights/)
- Google Browser LightHouse

Background
---
- [browser's algorithms](https://web.dev/non-composited-animations/?utm_source=lighthouse&utm_medium=unknown)

Categroy
---
- **Performance**
- Accessibility
- Best Practices
- SEO

Performance - Metrics
---
1. [FCP(First Content Paint)](https://web.dev/first-contentful-paint/?utm_source=lighthouse&utm_medium=devtools)
> `FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. Images, non-white <canvas> elements, and SVGs on your page are considered DOM content; anything inside an iframe isn't included.`

2. [Speed Index](https://web.dev/speed-index/?utm_source=lighthouse&utm_medium=devtools)
> `Speed Index measures how quickly content is visually displayed during page load.`

3. [LCP(Largest Contentful Paint)](https://web.dev/lighthouse-largest-contentful-paint/?utm_source=lighthouse&utm_medium=devtools)
> `LCP measures when the largest content element in the viewport is rendered to the screen. This approximates when the main content of the page is visible to users. See Largest Contentful Paint defined for more details on how LCP is determined.`
4. [Time to Interactive](https://web.dev/interactive/?utm_source=lighthouse&utm_medium=devtools)
> TTI measures how long it takes a page to become fully interactive. A page is considered fully interactive when:
> - The page displays useful content, which is measured by the First Contentful Paint,
> - Event handlers are registered for most visible page elements, and
> - The page responds to user interactions within 50 milliseconds.
5. [TBT(Total Blocking Time)](https://web.dev/lighthouse-total-blocking-time/?utm_source=lighthouse&utm_medium=devtools)
> TBT measures the total amount of time that a page is blocked from responding to user input, such as mouse clicks, screen taps, or keyboard presses. The sum is calculated by adding the blocking portion of all long tasks between First Contentful Paint and Time to Interactive. Any task that executes for more than 50 ms is a long task. The amount of time after 50 ms is the blocking portion. For example, if Lighthouse detects a 70 ms long task, the blocking portion would be 20 ms.
>
6. [CLS(Cumulative Layout Shift)](https://web.dev/cls/?utm_source=lighthouse&utm_medium=devtools)
> CLS is a measure of the largest burst of layout shift scores for every unexpected layout shift that occurs during the entire lifespan of a page.

Image Optimization
---
1. Serve images in modern formats
- [WebP](https://developers.google.com/speed/webp)
`WebP is a modern image format that provides superior lossless and lossy compression for images on the web. Using WebP, webmasters and web developers can create smaller, richer images that make the web faster.`
- [AVIF](https://www.finally.agency/blog/what-is-avif-image-format)
`The AV1 image format (AVIF) is an exciting new open-sourced and royalty free optimised image format which supports any image codec. An AVIF image offers significant file size reduction compared with JPEG, PNG and WebP and is currently supported on Google Chrome, Firefox and Android. `

1. Efficiently encode images
- [Using image CDNs to optimize images](https://web.dev/image-cdns/)
1. Lazy Loading
- [Use lazysizes to lazy-load images](https://web.dev/use-lazysizes-to-lazyload-images/)

1. Image elements do not have explicit width and height
- [Setting Height And Width On Images Is Important Again](https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/)

CSS、HTML Optimization
---
- Ugly and Minify file
- [Minimize main thread work](https://web.dev/mainthread-work-breakdown/?utm_source=lighthouse&utm_medium=unknown)
- [Check browser version to use Babel](https://philipwalton.com/articles/deploying-es2015-code-in-production-today/)
- [Why Moving Elements With Translate() Is Better Than Pos:abs Top/left](https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)
- [<link>: The External Resource Link element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link)

Split JS
---
- [Webpack Bundle Analyzer](https://www.npmjs.com/package/webpack-bundle-analyzer)
- [vue-cli-plugin-split-vendors](https://www.npmjs.com/package/vue-cli-plugin-split-vendors)
- [代碼拆分](https://www.ucamc.com/articles/357-webpack%E5%A6%82%E4%BD%95code-splitting%E6%8B%86%E5%88%86%E4%BB%A3%E7%A2%BCsplitchunks)

Reference
---
- [portal1](https://medium.com/starbugs/%E4%BB%8A%E6%99%9A-%E6%88%91%E6%83%B3%E4%BE%86%E9%BB%9E-web-%E5%89%8D%E7%AB%AF%E6%95%88%E8%83%BD%E5%84%AA%E5%8C%96%E5%A4%A7%E8%A3%9C%E5%B8%96-e1a5805c1ca2#:~:text=%E6%8F%90%E5%88%B0%E7%B6%B2%E9%A0%81%E5%89%8D%E7%AB%AF%E7%9A%84,%E6%B8%B2%E6%9F%93%E8%B7%AF%E5%BE%91Critical%20Render%20Path%20%E3%80%82)
- [portal2](https://tcssh611503.medium.com/%E7%B6%B2%E7%AB%99%E5%89%8D%E7%AB%AF%E6%95%88%E8%83%BD%E5%84%AA%E5%8C%96-performance-optimize-%E7%9A%84%E6%96%B9%E6%B3%95-ec9b05804547)

###### tags: `Performance` `Website`