DEV Community

Discussion on: I rebuilt my portfolio🌻 Now it loads in 1.6s 🎉 Here's how I did

Collapse
 
craigmc08 profile image
Craig McIlwrath

Glad to see other people worrying about performance! My portfolio site gets around 800ms, I'm pretty proud of that.

My one concern about your method is loading mobile css once it's determined it's needed. If you're gonna split the css, I think it makes more sense to just load mobile at first, since a pc is more likely to be able to take the extra processing/network loads.

That's just my opinion on the matter.

Collapse
 
begrafx profile image
BEGRAFX

800ms? Are you willing to share your techniques?

Collapse
 
blindfish3 profile image
Ben Calder

And it's the opinion of most others!

What happens if a potential employer receives your application on their mobile device, opens your site and has a really bad experience?

Collapse
 
saurabhdaware profile image
Saurabh Daware 🌻

I do get the point but I think it depends on one's use-case. In my case my mobile.css is 100 lines long and plus I'm minifying it so the final production size of my mobile.css is 2kb.

Also, I cared about my comfort and I am personally more creative when I think about desktop first and then turning it into mobile view is just a few adjustments (and especially since it is a portfolio I just wanted to be as creative as I can 🦄)

I have made websites where I had to write mobile-first CSS and I totally get the point of having that extra CSS file for PCs rather than mobile but yes the topic is too broad to talk about since other parameters like the size of your files, the eventual aim of the website, Your comfort, your team's comfort matter as well.

Oh, and do let me know if you have different views on this, Thank you🌻

Thread Thread
 
blindfish3 profile image
Ben Calder

That makes sense. I didn't look at the source ;)

Reading the article, the way you emphasised separating mobile.css as a step towards reducing the overall payload gave the impression it was a large file.

Thread Thread
 
saurabhdaware profile image
Saurabh Daware 🌻

oh my bad and yes now I feel like it would've made sense to have it in the same file as well since it is not adding much content to it. Initially I just didn't know how much it will grow so I went with two files.

Collapse
 
cyberhck profile image
Nishchal Gautam

Yes, I do mobile first which loads everywhere, and responsive.css for desktops and tablets

Collapse
 
saurabhdaware profile image
Saurabh Daware 🌻

Hi, yes that's a good point, I think it is totally a right approach when you have a mobile first css. In my case, I wrote it for desktop first since a lot of recruiters and even developers use desktop for surfing but I will totally go for your approach when I make a mobile first site.

Thank you for sharing and reading this article🌻 and loading site in 800ms is so coool you should totally be proud of yourself🦄