I loved designing & developing websites in my free time. One place, I always experiment with new web tools is on my profile. Recently, I started designing and coding another personal website for an event and here are some important take ways from the effort
Tools
Whenever you are designing or developing a website, lighthouse is your performance buddy. The tool gives you invaluable metrics and best practices.
Minification
CDN is a good to have but if you are building a static website, I would recommend minifying the CSS, Javascript, and compress the images.
Webp
.webp is an image format that gives you looseless compression for your images. My websites loading time increased by 40% after moving from jpeg,png —> webp
Resource hints
Try using resource hints - preload, prefetch, preconnect to improve your website’s performance. Check this awesome article on Nitropack to understand when to use preload vs prefetch vs preconnect.
Lazy load
Lazy load your images, fonts, iframes (embed), Javascript, CSS if and only when needed. Check MDN documentation
Embedded Tweet:
I have been designing and coding a personal website and here are some important take ways #thread #CSS #performance
— Vidyasagar Machupalli (@vidyasagarmsc) May 14, 2023
Short posts
Check my other short posts and shower your love - #shortposts
Top comments (0)