DEV Community

loading...

Redesign my portfolio! It loads very fast ⚡

pushpak1300 profile image Pushpak Chhajed Updated on ・2 min read

Hi, everyone!

This is my second attempt for writing a blog.

Alt text of imag

So I learned web development around 2 years ago. I decided to build my portfolio using Bootstrap4. my old portfolio used to load in 3.5 seconds and had a performance score of 69. most of the content on the previous portfolio was static means I have to change HTML to change my project listing. so I decided to rebuild (and redesign) my portfolio site using AlpineJs and Bootstrap4

Alt Text

After 5 days of working non-stop, I've finally migrated my site over to AlpineJs! You may notice the site is a little faster:

Alt Text

Why AlpineJS ?

You are right: why would you bother learning, AGAIN, a new tool while there are so many others, with such huge communities around them?
Well here are a few pros:

  • you get to follow the evolution of a library from the beginning, and, why not, contribute,
  • while React, Vue is acclaimed by a lot of developers, AlpineJS presents a much lighter way of doing front-end Web, much closer to the basics than today's framework.
  • I have a data source as a JSON file so loading data from JSON and parsing in HTML is easy in Alpine. (NO MORE STATIC CONTENT 🎉)

How I optimize speed

<link rel="stylesheet" href="build/all.css" media='all' />

<script src="build/app.js" defer></script>
Enter fullscreen mode Exit fullscreen mode
  • Used Purge to remove unused css.

  • Using CDN to serve static content with good cache policy
    I used netifly CDN to serve static content.

  • Used webp images for better compression ratio

  • Used module bundler(Webpack) to minify and bundle files

Here is the link to my portfolio.

Here is the link to Source Code github.

I'm also planning to add dark mode on site.🌙

would love to receive some feedback on my portfolio site🍍

Did I miss anything? Let me know in the comments :)

Thank You!

Discussion (12)

Collapse
hxii profile image
Paul (hxii) Glushak

Great job on the improvement! Always glad when people make the effort to better their craft.

That being said, while this may be an unpopular opinion and I hope you'll take criticism, but.. why?

  • Why load 1.1Mb of resources for one page? Your content (well, HTML, rather) is 0.8% of the total request. Render blocking and heavy resources aside, imagine not everyone has fast internet but is interested in your work. It takes your page about 15 seconds to load on slow 3G.
  • Why keep animations playing after the initial load? If you scroll back and forth it's very annoying.
  • You should check out prefers-reduced-motion and prefers-color-scheme.
Collapse
pushpak1300 profile image
Pushpak Chhajed Author • Edited

I'm still working on improving it .
Thank you so much for sharing really helpful tips I will check them out :D

Collapse
marissab profile image
Marissa B

It always feels good to see scores like that go up! What do you feel was the hardest part of the process?

Collapse
pushpak1300 profile image
Pushpak Chhajed Author • Edited

Yes ! The hardest part was to configure webpack and purge for remove the unused bootstrap css

Collapse
waylonwalker profile image
Waylon Walker

I love the animations that you have!

Collapse
pushpak1300 profile image
Collapse
rico042002 profile image
Rico Miller

Great job, looks incredible.

Collapse
pushpak1300 profile image
Collapse
kherin profile image
Kherin Bundhoo

Hello great to see the performance boost 👍
Just wanted to know if you noticed a SEO impact when using those tools

Collapse
pushpak1300 profile image
Pushpak Chhajed Author

I've not seen any negative impact on SEO.
SEO score has increase after using these tools.

For SEO optimization you can follow this article.

Some comments have been hidden by the post's author - find out more

Forem Open with the Forem app