Lessons while building a static website

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

Blog