Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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

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

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