เพิ่ม Speed ให้กับ Website

เว็บไซต์เช็คความเร็ว สามารถเช็คได้ที่ Gtmetrix,Google Page Speed,WebPageTest

เช็ค Global Latency https://latency.apex.sh/

Speed Compare https://pagespeed.compare/

https://www.performancebudget.io/

HTML

Javascript

Minify

Inline critical JS

Combine JS

JS async & defer

CSS

Inline critical CSS

Minify

Combine CSS

Remove Unused CSS

https://purgecss.com/

https://purifycss.online/
https://www.babelcoder.com/blog/posts/purify-css

Image

Inline critical images

Images load asynchronously

Image sprites CSS

รวมภาพให้ใช้งานในการโหลดครั้งเดียว

https://css.spritegen.com/

Responsify WP

Responsive Images in Practice

https://www.keycdn.com/blog/responsive-images

https://varvy.com/pagespeed/defer-images.html

Webp

ใช้ predictive coding เข้ารหัสภาพ ใช้หลักการเดียวกับ VP8 video

<picture>
  <source srcset="img/profile.webp" type="image/webp">
  <source srcset="img/profile.jpg" type="image/jpeg"> 
  <img src="img/profile.jpg" alt="text">
</picture>

https://caniuse.com/webp

https://developers.google.com/speed/webp

Fonts

https://googlefonts.3perf.com/