Thread by @NlognHQ

Are you a Web Developer?

Here are 50+ resources to help you Improve your Web Performance

🧵A Thread🧵

Table Of Contents:

- HTML
- CSS
- Images
- Fonts
- JavaScript
- Server
- Testing Tools
- Frameworks

#100DaysOfCode

HTML

✨ Minify HTML
☄️ Order your styles & scripts for page speed
⚡️ Eliminate render-blocking resources
🌟 Minimize layout thrashing
🎉 Prioritize resources
✨ Preload critical assets to improve speed
💥 Establish network connections early
⚡️ Prefetch resources

#100DaysOfCode

CSS

⭐️ Minify CSS
✨ Remove unused CSS
💥 Defer non-critical CSS
⚡️ Minimize CSS requests by combining external CSS
🚀 Optimize CSS background images with media queries
⭐️ Avoid CSS inside the body tag
☄️ Inline critical CSS
✨ Avoid expensive styles

#100DaysOfCode

Images

✨ Choose the right image format
💫 Choose the correct level of compression
⭐️ Use Image min to compress images
💥 Defer offscreen images
⚡️ Properly size images
✨ Replace animated gifs with video
🎉 Serve responsive images

#100DaysOfCode

⚡️ Serve images with correct dimensions
🌟 Use WebP images
⚡️ Use AVIF images
🎊 Use image CDNs to optimize images
✨ Use lazy-loading
🚀 Lazy-loading video
⚡️ Use lazysizes to lazy-load images
⭐️ Compress JPEG images
🔥 Optimize PNG images

#100DaysOfCode

Fonts

💫 Avoid invisible text during font loading
💥 Use preconnect to load fonts faster
⚡️ Optimize Webfont loading and rendering
☄️ Reduce Webfont Size
✨ Keep Webfont size under 300kb

#100DaysOfCode

JavaScript

💫 Apply the PRPL pattern
⭐️ Limit the size of NPM dependencies
⚡️ Use code splitting
🌟 Combine external JavaScript
💥 Remove unused code
🎉 Use tree-shaking in Webpack
✨ Minify JavaScript
💫 Serve modern code to modern browsers

#100DaysOfCode

🌟 See how CommonJS makes your bundles larger
⚡️ Defer loading JavaScript
⭐️ Prefer Vanilla JavaScript
💡 Use service workers to cache data
🎊 Use web workers
💥 Write optimized code for V8
🎉 Compile your JavaScript to faster JavaScript with Prepack

#100DaysOfCode

Server
☀️ Use HTTPS
☄️ Keep the size of cookies low as possible
🔥 Avoid bad requests
💫 Set HTTP cache headers
⭐️ Enable gzip and brotli compression
⚡️ Self-host your static asssets
🌟 Enable OCSP stapling
💥 Adopt IPv6

#100DaysOfCode

💡 Serve assets over HTTP/2
🎉 Implement HPACK compression
✨ Set proper security headers

Testing Tools

💫 Measure site speed with Pingdom
🌟 Measure site speed with WebPageTest
🎊 Measure performance with the RAIL model
⚡️ Configure Webpack performance hints
⭐️ Use bundlesize
💥 Measure JavaScript execution time
🎉 Use lighthouse-ci

#100DaysOfCode

☄️ Use Lighthouse Bot to set a performance budget
☀️ Test on remote real devices
🔥 Use Sitespeed
✨ Use Calibre
💫 Use SpeedCurve
🎊 Use k6
⚡️ Use SpeedTracker

#100DaysOfCode

Frameworks

⭐️ Use an ahead of time compiler
💥 Improve Angular performance
☀️ Debug React perfomance
🔥 Eliminate common React issues
✨ Make components connection aware
💫 Implement adaptive serving
🎉 Serve Adaptive Components Using the Network Information API

#100DaysOfCode

Thank you for Reading 💖
---

Please consider supporting my work on Instagram too 👇🏽

instagram.com/dermayank