DEV Community

Cover image for I've rebuilt my portfolio. Now it loads in less than 1 sec! Here's how I did it! ⚡

I've rebuilt my portfolio. Now it loads in less than 1 sec! Here's how I did it! ⚡

Jakub Skoneczny on January 11, 2021

Some time ago, during my early PHP years, I had created a website for myself, which combined my resume and some space for sharing my thoughts with ...
Collapse
 
richtone profile image
Richard Turza • Edited

Two non-technical things if you would like.
1) Don't use star rating, or any other kind of rating for your knowledge and expertise. It's just not telling anything meaningful.
2) If you are using a photo, use one where it's possible to recognize your face.

Collapse
 
skona27 profile image
Jakub Skoneczny

Thanks for that advice! I will plan to get rid of those star ratings and put my example projects instead :)

Collapse
 
matjones profile image
Mat Jones

Man, Next.js is freaking amazing.

Collapse
 
marceliwac profile image
Marceli-Wac

Great stuff Jakub! Don't forget to add a favicon for that cherry-on-top feeling to your website. Your blog looks great1

Collapse
 
skona27 profile image
Jakub Skoneczny

Thanks! I've just added a favicon :)

Collapse
 
laviku profile image
Lavinia

That is great, congratulations on that. I like that you said that every website is different hence needs different optimization steps.

Collapse
 
zarszz profile image
Ganjar Gingin Tahyudin

can you give information where i can running test like that ??

Collapse
 
skona27 profile image
Jakub Skoneczny

Of course! The auditing tool is called Lighthouse, and it is available for you in the tab inside the Chrome DevTools. You can read more information about it on its official website:
developers.google.com/web/tools/li...

Collapse
 
codecustard profile image
Emmanuel Barroga

Awesome article! What are your thoughts on using webp file format?

Collapse
 
skona27 profile image
Jakub Skoneczny

WEBP format allows to significantly reduce the size of images when comparing with, e.g. JPEG format. But of course, it is not supported by old browsers like IE11. So if you have to maintain old browser support, then don't use web 😀 In any other way, go with it!

Collapse
 
ezio1404 profile image
EJ Anton Sabal Potot

Base on what I read you can use picture html tag for creating fallbacks for older browsers

Collapse
 
cdthomp1 profile image
Cameron Thompson

This looks great! I would check your speeds with the network settings in the developer options in chrome. I had a slower network and it loaded a little slow. Overall, great work!

Collapse
 
skona27 profile image
Jakub Skoneczny

Yes, it may vary depending on the internet connection. While doing those audits, I didn't throttle my internet speed :)

Collapse
 
shadowtime2000 profile image
shadowtime2000

If you use NextJS you can do a React -> Preact aliasing on the client bundle so it cuts down on size by a lot

Collapse
 
tochi06814091 profile image
Tochi

Your portfolio website does not have media files( images, videos ). If it does, those metrics won't look pretty.

Collapse
 
skona27 profile image
Jakub Skoneczny

Yes, that is true that I don't have much media on my website. But if I had, it doesn't necessary mean that performance would go down. Images and videos can be lazy-loaded once they go near the viewport so that they wouldn't affect the time for the first load.