DEV Community

Cover image for Was working on personal Portfolio website!
Craftingbugs
Craftingbugs

Posted on

Was working on personal Portfolio website!

Hey Everybody!

I'm currently working on redesigning my portfolio website and incorporating animations to achieve a look similar to those featured on Awwwards.com. I'll share the final result once it's completed.

As for the current performance of my website, I believe it's quite satisfactory. Here are a few key considerations to achieve optimal performance:

  1. Lazy Loading: Ensure that images are loaded lazily to improve the initial rendering speed of the website. This means images will only load when they come into the viewport.
<img src="image.jpg" alt="..." loading="lazy" />
Enter fullscreen mode Exit fullscreen mode
  1. WEBP Format: Opt for the .webp format for images, as it is widely supported by web browsers.
    Tool that could help

  2. TinyPng: Use tools like TinyPng to further reduce image sizes, aiming for a range of around 50-80 KB.
    Tool that could help

  3. Alt Tags and Meta Tags: Always include descriptive alt tags for images and enhance meta tags for better SEO. Additionally, explore HTML5 semantic elements such as section, article, and picture tags instead of overusing div tags.

If alt text describes an image, meta description describes a webpage

  1. CSS Minification: Minify CSS files to reduce code size, ultimately improving rendering speed.
    Tool That could help

  2. Dependency Management: Only include necessary dependencies and remove any unnecessary elements to streamline the website.

These optimizations, combined with a focus on grammatically correct content, will contribute to an enhanced user experience. Keep up the great work!

Sincerely,
Abhishek 😉

Top comments (3)

Collapse
 
anitaolsen profile image
Anita Olsen*°•.¸☆

Awesome, I am looking forward to see it when you are done!

Collapse
 
craftingbugs profile image
Craftingbugs

Yeah sure. 😌

Collapse
 
bijutoha profile image
Bijutoha

Hi there, I really enjoyed reading your article on website optimization. Your insights on lazy loading and CSS minification were particularly helpful. I’ve been working on a similar project and found these techniques to be effective as well.

I thought it was interesting that you brought out the significance of visual aspects in site design. I thought you would find this resource helpful: pathedits.com/blogs/tips/100-place.... I hope you find it beneficial. It is an excellent collection of stock photography websites that can be used to locate high-quality photographs that have the potential to improve the aesthetic appeal of a website.

Your experiences are quite interesting to hear about, and I am looking forward to reading your next piece.