Search code examples
javascripthtmljavascript-frameworkportfolioweb-performance

Which Javascript framework is best for my fast loading image rich portfolio website


I want to rewrite my portfolio. I want my website to load faster than the current version. Also my portfolio will contain lots of images and I have used CDN for it. For my current version I used EmberJS which is pretty good. Still I have a doubt whether I should use vanilla JS to make it lighter and faster. Any suggestion would be appreciated.


Solution

  • Depends on the size of the image, if the image is bigger (in memory) the website will load slowly. First, try the lighthouse tool from the devTools to see in how many seconds your website will be fully loaded, with that tool you will found more important features to make your website better.

    If you know react you can use react lazy, react-lazy will load only the images, components that are visible by the user, in normal when a user visits your website, the whole website is rendered and this will take a while if you have a lot of pages with different images(react website with react router). With react-lazy when a user visits your website it will load only the page that is visited and you can use suspense to show something, like a loading bar, when the user is navigating on the website (if you don't want to use react because is a library and is bigger than vanilla JS, you can use the light version of react, PReact JS)

    Try to make your images smaller in memory using different websites specialized in this.