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

Joseph Zimmerman
Joseph Zimmerman
6,402 Points
Posted by Joseph Zimmerman
Joseph Zimmerman
6,402 Points

What can I do to improve this site for mobile viewing and load time?

I just launched a basic portfolio for my friend.

chrispernula.com

Code can be viewed using the console.

2 issues...

1.) load time is extremely slow. How can I compress the images without changing px size to improve load time and not have to change my CSS?

2.) Why am I struggling to get the layout to work in mobile browsers? Can't seem to get the header/footer right while allowing acceptable area in the viewport for the gallery and home images.

Please help! Thanks!

2 Answers

Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points
Markus Ylisiurunen
Markus Ylisiurunen
15,034 Points

Hi Joseph!

So I did some basic analysis of the resources you're loading for your site. I compared your gallery.html to YouTube front page and this is what I found.

  • Your site:
  • Requests: 37
  • Download size: 83.1MB
  • Finish time: 30.30s

And here's what I found doing the same thing for YouTube front page.

  • Youtube:
  • Requests: 83
  • Download size: 673KB
  • Finish time: 3.85s

So as you can see there are a lot more to load in your site. You can use the Chrome DevTools' Network tab to review these statistics yourself. I'd suggest compressing and maybe downscaling your images as you already mentioned. You can do this with Photoshop (paid) or Gimp (free).

You should be good to go after compressing the images.

Joseph Zimmerman
Joseph Zimmerman
6,402 Points
Joseph Zimmerman
Joseph Zimmerman
6,402 Points

Thanks Markus,

I'll work on the image compression.

Any thoughts on some CSS improvements for mobile devices? I need to find a way to expand the space between my header and footer somehow without reducing their size anymore.

Thanks, Joe