Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Nicholas Nelson
Nicholas Nelson
24,526 Points
Posted by Nicholas Nelson
Nicholas Nelson
24,526 Points

Mobile-first CSS measured improvement?

I'm curious if any fine folk out there have measured load times of their mobile-first vs desk-top-first (of the same project) site(s). Specifically mobile load times.

I understand the theoretical gains of this technique, but I'm curious about the real-world application. It can be difficult to persuade clients to invest the extra cost of more Dev work, or to reassure them that their site is plenty speedy. Particularly when you lack the data.

One could safely assume that a larger, more complex style sheet will see greater mobile improvement from the mobile-first technique. What about a small, simple site? What is the real-world gain?

Many thanks for any insight!

2 Answers

Roman Serebryakov
Roman Serebryakov
1,832 Points
Roman Serebryakov
Roman Serebryakov
1,832 Points

The mobile first stylesheet loads a lot faster than desktop version. I have made the experiments for couple of clients and the overall decrease of the sources is almost 50%. But at the same time I try to minify all my JS and my css. In my approach, I am using SASS with media-queries to check what screen size is loaded, starting with the smallest, and then more styles are added as needed. This way on mobile, you have a lot less css than full version.

Minify. Simplify your images and use GZip on the server side - will make your website load a lot faster.

Nicholas Nelson
Nicholas Nelson
24,526 Points
Nicholas Nelson
Nicholas Nelson
24,526 Points

Thanks for the input, Roman! I'm curious, what do you mean by "simplify your images"? Something more than the standard "save for web" compression?

Roman Serebryakov
Roman Serebryakov
1,832 Points
Roman Serebryakov
Roman Serebryakov
1,832 Points

Yes, you can optimize other graphics/images, like PNGs or use icon fonts in cases where applicable. I like using this site for optimizing all my transparent PNGs, it can help your site performance even more :)

https://tinypng.com/